From aea2561effce56feadacd59f76e515715c32d1e0 Mon Sep 17 00:00:00 2001
From: RivaIvanova <ivanova.riva@gmail.com>
Date: Thu, 18 Apr 2024 17:35:04 +0300
Subject: [PATCH 01/12] feat(tree-grid): add custom toolbar samples

---
 .../data-exporting-indicator/.eslintrc.js     |  76 +++++
 .../data-exporting-indicator/package.json     |  49 +++
 .../public/index.html                         |  11 +
 .../sandbox.config.json                       |   5 +
 .../src/OrdersData.ts                         | 291 ++++++++++++++++++
 .../data-exporting-indicator/src/index.css    |   2 +
 .../data-exporting-indicator/src/index.tsx    |  82 +++++
 .../src/react-app-env.d.ts                    |   1 +
 .../data-exporting-indicator/tsconfig.json    |  45 +++
 .../tree-grid/toolbar-sample-4/.eslintrc.js   |  76 +++++
 .../tree-grid/toolbar-sample-4/package.json   |  49 +++
 .../toolbar-sample-4/public/index.html        |  11 +
 .../toolbar-sample-4/sandbox.config.json      |   5 +
 .../src/EmployeesFlatAvatars.ts               | 205 ++++++++++++
 .../tree-grid/toolbar-sample-4/src/index.css  |  11 +
 .../tree-grid/toolbar-sample-4/src/index.tsx  | 103 +++++++
 .../toolbar-sample-4/src/react-app-env.d.ts   |   1 +
 .../tree-grid/toolbar-sample-4/tsconfig.json  |  45 +++
 18 files changed, 1068 insertions(+)
 create mode 100644 samples/grids/tree-grid/data-exporting-indicator/.eslintrc.js
 create mode 100644 samples/grids/tree-grid/data-exporting-indicator/package.json
 create mode 100644 samples/grids/tree-grid/data-exporting-indicator/public/index.html
 create mode 100644 samples/grids/tree-grid/data-exporting-indicator/sandbox.config.json
 create mode 100644 samples/grids/tree-grid/data-exporting-indicator/src/OrdersData.ts
 create mode 100644 samples/grids/tree-grid/data-exporting-indicator/src/index.css
 create mode 100644 samples/grids/tree-grid/data-exporting-indicator/src/index.tsx
 create mode 100644 samples/grids/tree-grid/data-exporting-indicator/src/react-app-env.d.ts
 create mode 100644 samples/grids/tree-grid/data-exporting-indicator/tsconfig.json
 create mode 100644 samples/grids/tree-grid/toolbar-sample-4/.eslintrc.js
 create mode 100644 samples/grids/tree-grid/toolbar-sample-4/package.json
 create mode 100644 samples/grids/tree-grid/toolbar-sample-4/public/index.html
 create mode 100644 samples/grids/tree-grid/toolbar-sample-4/sandbox.config.json
 create mode 100644 samples/grids/tree-grid/toolbar-sample-4/src/EmployeesFlatAvatars.ts
 create mode 100644 samples/grids/tree-grid/toolbar-sample-4/src/index.css
 create mode 100644 samples/grids/tree-grid/toolbar-sample-4/src/index.tsx
 create mode 100644 samples/grids/tree-grid/toolbar-sample-4/src/react-app-env.d.ts
 create mode 100644 samples/grids/tree-grid/toolbar-sample-4/tsconfig.json

diff --git a/samples/grids/tree-grid/data-exporting-indicator/.eslintrc.js b/samples/grids/tree-grid/data-exporting-indicator/.eslintrc.js
new file mode 100644
index 0000000000..9d283f6407
--- /dev/null
+++ b/samples/grids/tree-grid/data-exporting-indicator/.eslintrc.js
@@ -0,0 +1,76 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-exporting-indicator/package.json b/samples/grids/tree-grid/data-exporting-indicator/package.json
new file mode 100644
index 0000000000..64bed6f1bd
--- /dev/null
+++ b/samples/grids/tree-grid/data-exporting-indicator/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.14.3",
+    "igniteui-react": "18.6.0",
+    "igniteui-react-core": "18.6.0",
+    "igniteui-react-datasources": "18.6.0",
+    "igniteui-react-grids": "18.6.0",
+    "igniteui-react-inputs": "18.6.0",
+    "igniteui-react-layouts": "18.6.0",
+    "igniteui-webcomponents": "4.7.0",
+    "lit-html": "^2.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/grids/tree-grid/data-exporting-indicator/public/index.html b/samples/grids/tree-grid/data-exporting-indicator/public/index.html
new file mode 100644
index 0000000000..e2d3265576
--- /dev/null
+++ b/samples/grids/tree-grid/data-exporting-indicator/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/react.png" >
+    <link rel="stylesheet"    href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-exporting-indicator/sandbox.config.json b/samples/grids/tree-grid/data-exporting-indicator/sandbox.config.json
new file mode 100644
index 0000000000..07f53508eb
--- /dev/null
+++ b/samples/grids/tree-grid/data-exporting-indicator/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-exporting-indicator/src/OrdersData.ts b/samples/grids/tree-grid/data-exporting-indicator/src/OrdersData.ts
new file mode 100644
index 0000000000..2a44f669c6
--- /dev/null
+++ b/samples/grids/tree-grid/data-exporting-indicator/src/OrdersData.ts
@@ -0,0 +1,291 @@
+export class OrdersTreeDataItem {
+    public constructor(init: Partial<OrdersTreeDataItem>) {
+        Object.assign(this, init);
+    }
+
+    public ID: number;
+    public ParentID: number;
+    public Name: string;
+    public Category: string;
+    public OrderDate: string;
+    public Units: number;
+    public UnitPrice: number;
+    public Price: number;
+    public Delivered: boolean;
+
+}
+export class OrdersTreeData extends Array<OrdersTreeDataItem> {
+    public constructor(items: Array<OrdersTreeDataItem> | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new OrdersTreeDataItem(
+                {
+                    ID: 1,
+                    ParentID: -1,
+                    Name: `Order 1`,
+                    Category: ``,
+                    OrderDate: `2010-02-17`,
+                    Units: 1844,
+                    UnitPrice: 3.73,
+                    Price: 6884.38,
+                    Delivered: true
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 101,
+                    ParentID: 1,
+                    Name: `Chocolate Chip Cookies`,
+                    Category: `Cookies`,
+                    OrderDate: `2010-02-17`,
+                    Units: 834,
+                    UnitPrice: 3.59,
+                    Price: 2994.06,
+                    Delivered: true
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 102,
+                    ParentID: 1,
+                    Name: `Red Apples`,
+                    Category: `Fruit`,
+                    OrderDate: `2010-02-17`,
+                    Units: 371,
+                    UnitPrice: 3.66,
+                    Price: 1357.86,
+                    Delivered: true
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 103,
+                    ParentID: 1,
+                    Name: `Butter`,
+                    Category: `Diary`,
+                    OrderDate: `2010-02-17`,
+                    Units: 260,
+                    UnitPrice: 3.45,
+                    Price: 897,
+                    Delivered: true
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 104,
+                    ParentID: 1,
+                    Name: `Potato Chips`,
+                    Category: `Snack`,
+                    OrderDate: `2010-02-17`,
+                    Units: 118,
+                    UnitPrice: 1.96,
+                    Price: 231.28,
+                    Delivered: true
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 105,
+                    ParentID: 1,
+                    Name: `Orange Juice`,
+                    Category: `Beverages`,
+                    OrderDate: `2010-02-17`,
+                    Units: 261,
+                    UnitPrice: 5.38,
+                    Price: 1404.18,
+                    Delivered: true
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 2,
+                    ParentID: -1,
+                    Name: `Order 2`,
+                    Category: ``,
+                    OrderDate: `2022-05-27`,
+                    Units: 1831,
+                    UnitPrice: 8.23,
+                    Price: 15062.77,
+                    Delivered: false
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 201,
+                    ParentID: 2,
+                    Name: `Frozen Shrimps`,
+                    Category: `Seafood`,
+                    OrderDate: `2022-05-27`,
+                    Units: 120,
+                    UnitPrice: 20.45,
+                    Price: 2454,
+                    Delivered: false
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 202,
+                    ParentID: 2,
+                    Name: `Ice Tea`,
+                    Category: `Beverages`,
+                    OrderDate: `2022-05-27`,
+                    Units: 840,
+                    UnitPrice: 7,
+                    Price: 5880,
+                    Delivered: false
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 203,
+                    ParentID: 2,
+                    Name: `Fresh Cheese`,
+                    Category: `Diary`,
+                    OrderDate: `2022-05-27`,
+                    Units: 267,
+                    UnitPrice: 16.55,
+                    Price: 4418.85,
+                    Delivered: false
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 204,
+                    ParentID: 2,
+                    Name: `Carrots`,
+                    Category: `Vegetables`,
+                    OrderDate: `2022-05-27`,
+                    Units: 360,
+                    UnitPrice: 2.77,
+                    Price: 997.2,
+                    Delivered: false
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 205,
+                    ParentID: 2,
+                    Name: `Apple Juice`,
+                    Category: `Beverages`,
+                    OrderDate: `2022-05-27`,
+                    Units: 244,
+                    UnitPrice: 5.38,
+                    Price: 1312.72,
+                    Delivered: false
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 3,
+                    ParentID: -1,
+                    Name: `Order 3`,
+                    Category: ``,
+                    OrderDate: `2022-08-04`,
+                    Units: 1972,
+                    UnitPrice: 3.47,
+                    Price: 6849.18,
+                    Delivered: true
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 301,
+                    ParentID: 3,
+                    Name: `Skimmed Milk 1L`,
+                    Category: `Diary`,
+                    OrderDate: `2022-08-04`,
+                    Units: 1028,
+                    UnitPrice: 3.56,
+                    Price: 3659.68,
+                    Delivered: true
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 302,
+                    ParentID: 3,
+                    Name: `Bananas 5 Pack`,
+                    Category: `Fruit`,
+                    OrderDate: `2022-08-04`,
+                    Units: 370,
+                    UnitPrice: 6.36,
+                    Price: 2353.2,
+                    Delivered: true
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 303,
+                    ParentID: 3,
+                    Name: `Cauliflower`,
+                    Category: `Vegetables`,
+                    OrderDate: `2022-08-04`,
+                    Units: 283,
+                    UnitPrice: 0.95,
+                    Price: 268.85,
+                    Delivered: true
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 304,
+                    ParentID: 3,
+                    Name: `White Chocolate Cookies`,
+                    Category: `Cookies`,
+                    OrderDate: `2022-08-04`,
+                    Units: 291,
+                    UnitPrice: 1.95,
+                    Price: 567.45,
+                    Delivered: true
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 4,
+                    ParentID: -1,
+                    Name: `Order 4`,
+                    Category: ``,
+                    OrderDate: `2023-01-04`,
+                    Units: 1065,
+                    UnitPrice: 5.56,
+                    Price: 5923.5,
+                    Delivered: true
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 401,
+                    ParentID: 4,
+                    Name: `Mini Milk Chocolate Cookie Bites`,
+                    Category: `Cookies`,
+                    OrderDate: `2023-01-04`,
+                    Units: 68,
+                    UnitPrice: 2.25,
+                    Price: 153,
+                    Delivered: true
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 402,
+                    ParentID: 4,
+                    Name: `Wild Salmon Fillets`,
+                    Category: `Seafood`,
+                    OrderDate: `2023-01-04`,
+                    Units: 320,
+                    UnitPrice: 16.15,
+                    Price: 5168,
+                    Delivered: true
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 403,
+                    ParentID: 4,
+                    Name: `Diet Lemonade`,
+                    Category: `Beverages`,
+                    OrderDate: `2023-01-04`,
+                    Units: 437,
+                    UnitPrice: 0.5,
+                    Price: 218.5,
+                    Delivered: true
+                }),
+                new OrdersTreeDataItem(
+                {
+                    ID: 404,
+                    ParentID: 4,
+                    Name: `Potatos`,
+                    Category: `Vegetables`,
+                    OrderDate: `2023-01-04`,
+                    Units: 240,
+                    UnitPrice: 1.6,
+                    Price: 384,
+                    Delivered: true
+                }),
+            ];
+            super(...(newItems.slice(0, items)));
+        }
+    }
+}
diff --git a/samples/grids/tree-grid/data-exporting-indicator/src/index.css b/samples/grids/tree-grid/data-exporting-indicator/src/index.css
new file mode 100644
index 0000000000..98682b8543
--- /dev/null
+++ b/samples/grids/tree-grid/data-exporting-indicator/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
diff --git a/samples/grids/tree-grid/data-exporting-indicator/src/index.tsx b/samples/grids/tree-grid/data-exporting-indicator/src/index.tsx
new file mode 100644
index 0000000000..f8fa32274d
--- /dev/null
+++ b/samples/grids/tree-grid/data-exporting-indicator/src/index.tsx
@@ -0,0 +1,82 @@
+import React, { useRef } from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+
+import {
+  IgrGridToolbar,
+  IgrGridToolbarActions,
+  IgrGridToolbarExporter,
+  IgrGridToolbarTitle,
+  IgrHierarchicalGridModule,
+} from "igniteui-react-grids";
+import {
+  IgrTreeGrid,
+  IgrColumn,
+} from "igniteui-react-grids";
+import { IgrButton } from "igniteui-react";
+
+import "igniteui-react-grids/grids/combined";
+import "igniteui-react-grids/grids/themes/light/bootstrap.css";
+import { OrdersTreeData } from "./OrdersData";
+
+IgrHierarchicalGridModule.register();
+
+export default function App() {
+  const ordersData = new OrdersTreeData();
+  const treeGridRef = useRef<IgrTreeGrid>(null);
+  const toolbarRef = useRef<IgrGridToolbar>(null);
+
+  const localData: any[] = [];
+  for (let i = 0; i < 10000; i += 3) {
+    for (let c = 0; c < ordersData.length; c++) {
+      localData.push(ordersData[c]);
+    }
+  }
+
+  function showProgress() {
+    toolbarRef.current.showProgress = true;
+
+    setTimeout(() => {
+      toolbarRef.current.showProgress = false;
+    }, 5000);
+  }
+
+  return (
+    <div className="container sample ig-typography">
+      <div className="container fill">
+        <IgrTreeGrid
+          ref={treeGridRef}
+          data={localData}
+          autoGenerate="false"
+          primaryKey="ID"
+          foreignKey="ParentID"
+          height="350px"
+        >
+          <IgrGridToolbar ref={toolbarRef}  key="toolbar">
+            <IgrGridToolbarTitle key="toolbarTitle">
+              <span key="toolbarTitleText">Tree Grid Toolbar</span>
+            </IgrGridToolbarTitle>
+            <IgrButton key="btn" clicked={showProgress}>
+              <span key="simulate">Simulate long running operation</span>
+            </IgrButton>
+            <IgrGridToolbarActions key="toolbarActions">
+              <IgrGridToolbarExporter key="toolbarExporter"></IgrGridToolbarExporter>
+            </IgrGridToolbarActions>
+          </IgrGridToolbar>
+
+          <IgrColumn field="ID" header="Order ID"></IgrColumn>
+          <IgrColumn field="Name" header="Order Product"></IgrColumn>
+          <IgrColumn field="Category" header="Category"></IgrColumn>
+          <IgrColumn field="Units" header="Units" dataType="number"></IgrColumn>
+          <IgrColumn field="UnitPrice" header="Unit Price" dataType="currency"></IgrColumn>
+          <IgrColumn field="Price" header="Price" dataType="currency"></IgrColumn>
+          <IgrColumn field="OrderDate" header="Order Date" dataType="date"></IgrColumn>
+        </IgrTreeGrid>
+      </div>
+    </div>
+  );
+}
+
+// rendering above component in the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<App />);
diff --git a/samples/grids/tree-grid/data-exporting-indicator/src/react-app-env.d.ts b/samples/grids/tree-grid/data-exporting-indicator/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/grids/tree-grid/data-exporting-indicator/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/grids/tree-grid/data-exporting-indicator/tsconfig.json b/samples/grids/tree-grid/data-exporting-indicator/tsconfig.json
new file mode 100644
index 0000000000..42c6ace1da
--- /dev/null
+++ b/samples/grids/tree-grid/data-exporting-indicator/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/grids/tree-grid/toolbar-sample-4/.eslintrc.js b/samples/grids/tree-grid/toolbar-sample-4/.eslintrc.js
new file mode 100644
index 0000000000..9d283f6407
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-4/.eslintrc.js
@@ -0,0 +1,76 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-sample-4/package.json b/samples/grids/tree-grid/toolbar-sample-4/package.json
new file mode 100644
index 0000000000..64bed6f1bd
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-4/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.14.3",
+    "igniteui-react": "18.6.0",
+    "igniteui-react-core": "18.6.0",
+    "igniteui-react-datasources": "18.6.0",
+    "igniteui-react-grids": "18.6.0",
+    "igniteui-react-inputs": "18.6.0",
+    "igniteui-react-layouts": "18.6.0",
+    "igniteui-webcomponents": "4.7.0",
+    "lit-html": "^2.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/grids/tree-grid/toolbar-sample-4/public/index.html b/samples/grids/tree-grid/toolbar-sample-4/public/index.html
new file mode 100644
index 0000000000..e2d3265576
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-4/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/react.png" >
+    <link rel="stylesheet"    href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-sample-4/sandbox.config.json b/samples/grids/tree-grid/toolbar-sample-4/sandbox.config.json
new file mode 100644
index 0000000000..07f53508eb
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-4/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-sample-4/src/EmployeesFlatAvatars.ts b/samples/grids/tree-grid/toolbar-sample-4/src/EmployeesFlatAvatars.ts
new file mode 100644
index 0000000000..8579dedcc8
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-4/src/EmployeesFlatAvatars.ts
@@ -0,0 +1,205 @@
+export class EmployeesFlatAvatarsItem {
+    public constructor(init: Partial<EmployeesFlatAvatarsItem>) {
+        Object.assign(this, init);
+    }
+    
+    public Age: number;
+    public Avatar: string;
+    public HireDate: string;
+    public ID: number;
+    public Name: string;
+    public ParentID: number;
+    public Title: string;
+
+}
+export class EmployeesFlatAvatars extends Array<EmployeesFlatAvatarsItem> {
+    public constructor(items: Array<EmployeesFlatAvatarsItem> | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 55,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`,
+                    HireDate: `2008-03-20`,
+                    ID: 1,
+                    Name: `Johnathan Winchester`,
+                    ParentID: -1,
+                    Title: `Development Manager`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 42,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`,
+                    HireDate: `2014-01-22`,
+                    ID: 4,
+                    Name: `Ana Sanders`,
+                    ParentID: -1,
+                    Title: `CEO`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 49,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`,
+                    HireDate: `2014-01-22`,
+                    ID: 18,
+                    Name: `Victoria Lincoln`,
+                    ParentID: -1,
+                    Title: `Accounting Manager`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 61,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/4.jpg`,
+                    HireDate: `2010-01-01`,
+                    ID: 10,
+                    Name: `Yang Wang`,
+                    ParentID: -1,
+                    Title: `Localization Manager`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 43,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/1.jpg`,
+                    HireDate: `2011-06-03`,
+                    ID: 3,
+                    Name: `Michael Burke`,
+                    ParentID: 1,
+                    Title: `Senior Software Developer`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 29,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`,
+                    HireDate: `2009-06-19`,
+                    ID: 2,
+                    Name: `Thomas Anderson`,
+                    ParentID: 1,
+                    Title: `Senior Software Developer`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 31,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/women/3.jpg`,
+                    HireDate: `2014-08-18`,
+                    ID: 11,
+                    Name: `Monica Reyes`,
+                    ParentID: 1,
+                    Title: `Software Development Team Lead`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 35,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`,
+                    HireDate: `2015-09-17`,
+                    ID: 6,
+                    Name: `Roland Mendel`,
+                    ParentID: 11,
+                    Title: `Senior Software Developer`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 44,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/6.jpg`,
+                    HireDate: `2009-10-11`,
+                    ID: 12,
+                    Name: `Sven Cooper`,
+                    ParentID: 11,
+                    Title: `Senior Software Developer`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 44,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/7.jpg`,
+                    HireDate: `2014-04-04`,
+                    ID: 14,
+                    Name: `Laurence Johnson`,
+                    ParentID: 4,
+                    Title: `Director`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 25,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`,
+                    HireDate: `2017-11-09`,
+                    ID: 5,
+                    Name: `Elizabeth Richards`,
+                    ParentID: 4,
+                    Title: `Vice President`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 39,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`,
+                    HireDate: `2010-03-22`,
+                    ID: 13,
+                    Name: `Trevor Ashworth`,
+                    ParentID: 5,
+                    Title: `Director`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 44,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`,
+                    HireDate: `2014-04-04`,
+                    ID: 17,
+                    Name: `Antonio Moreno`,
+                    ParentID: 18,
+                    Title: `Senior Accountant`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 50,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`,
+                    HireDate: `2007-11-18`,
+                    ID: 7,
+                    Name: `Pedro Rodriguez`,
+                    ParentID: 10,
+                    Title: `Senior Localization Developer`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 27,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/women/5.jpg`,
+                    HireDate: `2016-02-19`,
+                    ID: 8,
+                    Name: `Casey Harper`,
+                    ParentID: 10,
+                    Title: `Senior Localization Developer`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 25,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`,
+                    HireDate: `2017-11-09`,
+                    ID: 15,
+                    Name: `Patricia Simpson`,
+                    ParentID: 7,
+                    Title: `Localization Intern`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 39,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`,
+                    HireDate: `2010-03-22`,
+                    ID: 9,
+                    Name: `Francisco Chang`,
+                    ParentID: 7,
+                    Title: `Localization Intern`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 25,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/27.jpg`,
+                    HireDate: `2018-03-18`,
+                    ID: 16,
+                    Name: `Peter Lewis`,
+                    ParentID: 7,
+                    Title: `Localization Intern`
+                }),
+            ];
+            super(...(newItems.slice(0, items)));
+        }
+    }
+}
diff --git a/samples/grids/tree-grid/toolbar-sample-4/src/index.css b/samples/grids/tree-grid/toolbar-sample-4/src/index.css
new file mode 100644
index 0000000000..bc0d64e5ae
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-4/src/index.css
@@ -0,0 +1,11 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
+.cell__inner {
+    display: flex;
+    align-items: center;
+}
+
+.name {
+    margin-left: 30px;
+}
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-sample-4/src/index.tsx b/samples/grids/tree-grid/toolbar-sample-4/src/index.tsx
new file mode 100644
index 0000000000..4861eb7fce
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-4/src/index.tsx
@@ -0,0 +1,103 @@
+import React, { useEffect, useRef } from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+
+import {
+  IgrCellTemplateContext,
+  IgrGridToolbar,
+  IgrGridToolbarActions,
+  IgrGridToolbarExporter,
+  IgrGridToolbarHiding,
+  IgrGridToolbarPinning,
+  IgrGridToolbarTitle,
+  IgrTreeGrid,
+  IgrTreeGridModule,
+} from "igniteui-react-grids";
+import { IgrColumn } from "igniteui-react-grids";
+import { IgrAvatar, IgrAvatarModule, IgrButton, IgrIcon, IgrIconModule } from "igniteui-react";
+
+import "igniteui-react-grids/grids/combined";
+import "igniteui-react-grids/grids/themes/light/bootstrap.css";
+
+import { EmployeesFlatAvatars } from "./EmployeesFlatAvatars";
+
+IgrTreeGridModule.register();
+IgrAvatarModule.register();
+IgrIconModule.register();
+
+const icon = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg>`;
+
+export default function App() {
+  const employeesData = new EmployeesFlatAvatars();
+  const treeGridRef = useRef<IgrTreeGrid>(null);
+  const iconClear = useRef<IgrIcon>(null);
+
+  useEffect(() => {
+    if (iconClear?.current) {
+      iconClear.current.registerIconFromText("clear", icon, "material");
+    }
+  }, []);
+
+  function webTreeGridAvatarCellTemplate(props: {
+    dataContext: IgrCellTemplateContext;
+  }) {
+    return (
+      <div className="cell__inner">
+        <IgrAvatar
+          shape="circle"
+          src={props.dataContext.cell.row.data.Avatar}
+        ></IgrAvatar>
+        <span className="name">{props.dataContext.cell.value}</span>
+      </div>
+    );
+  }
+
+  function clearSort() {
+    treeGridRef.current.clearSort("");
+  }
+
+  return (
+    <div className="container sample ig-typography">
+      <div className="container fill">
+
+        <IgrTreeGrid
+          autoGenerate="false"
+          ref={treeGridRef}
+          data={employeesData}
+          primaryKey="ID"
+          foreignKey="ParentID"
+        >
+          <IgrGridToolbar key="toolbar">
+            <IgrGridToolbarTitle key="toolbarTitle">
+              <span key="toolbarTitleText">Tree Grid Toolbar</span>
+            </IgrGridToolbarTitle>
+            <IgrButton key="btn" clicked={clearSort}>
+              <span slot="prefix" key="clearIcon">
+                <IgrIcon name="clear" ref={iconClear} collection="material"></IgrIcon>
+              </span>
+              <span key="clearSort">Clear Sort</span>
+            </IgrButton>
+            <IgrGridToolbarActions key="toolbarActions">
+              <IgrGridToolbarHiding key="toolbarHiding"></IgrGridToolbarHiding>
+              <IgrGridToolbarPinning key="toolbarPinning"></IgrGridToolbarPinning>
+              <IgrGridToolbarExporter key="toolbarExporter"></IgrGridToolbarExporter>
+            </IgrGridToolbarActions>
+          </IgrGridToolbar>
+          <IgrColumn
+            field="Name"
+            dataType="string"
+            bodyTemplate={webTreeGridAvatarCellTemplate}
+          ></IgrColumn>
+          <IgrColumn field="Title" dataType="string" sortable="true"></IgrColumn>
+          <IgrColumn field="ID" dataType="number" sortable="true"></IgrColumn>
+          <IgrColumn field="Age" dataType="number" sortable="true"></IgrColumn>
+          <IgrColumn field="HireDate" dataType="date" sortable="true"></IgrColumn>
+        </IgrTreeGrid>
+      </div>
+    </div>
+  );
+}
+
+// rendering above component in the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<App />);
diff --git a/samples/grids/tree-grid/toolbar-sample-4/src/react-app-env.d.ts b/samples/grids/tree-grid/toolbar-sample-4/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-4/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/grids/tree-grid/toolbar-sample-4/tsconfig.json b/samples/grids/tree-grid/toolbar-sample-4/tsconfig.json
new file mode 100644
index 0000000000..42c6ace1da
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-4/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}

From e462b81a22e9aec682d02577146eb215957e3aa9 Mon Sep 17 00:00:00 2001
From: Ivan Kitanov <IKitanov@infragistics.com>
Date: Fri, 19 Apr 2024 14:36:23 +0300
Subject: [PATCH 02/12] Add tgrid row-drag-base custom sample

---
 .../tree-grid/row-drag-base/.eslintrc.js      |  76 ++++++
 .../grids/tree-grid/row-drag-base/ReadMe.md   |  56 +++++
 .../tree-grid/row-drag-base/package.json      |  49 ++++
 .../tree-grid/row-drag-base/public/index.html |  11 +
 .../row-drag-base/sandbox.config.json         |   5 +
 .../src/EmployeesNestedTreeData.ts            | 224 ++++++++++++++++++
 .../tree-grid/row-drag-base/src/index.css     |   7 +
 .../tree-grid/row-drag-base/src/index.tsx     | 138 +++++++++++
 .../row-drag-base/src/react-app-env.d.ts      |   1 +
 .../tree-grid/row-drag-base/tsconfig.json     |  45 ++++
 10 files changed, 612 insertions(+)
 create mode 100644 samples/grids/tree-grid/row-drag-base/.eslintrc.js
 create mode 100644 samples/grids/tree-grid/row-drag-base/ReadMe.md
 create mode 100644 samples/grids/tree-grid/row-drag-base/package.json
 create mode 100644 samples/grids/tree-grid/row-drag-base/public/index.html
 create mode 100644 samples/grids/tree-grid/row-drag-base/sandbox.config.json
 create mode 100644 samples/grids/tree-grid/row-drag-base/src/EmployeesNestedTreeData.ts
 create mode 100644 samples/grids/tree-grid/row-drag-base/src/index.css
 create mode 100644 samples/grids/tree-grid/row-drag-base/src/index.tsx
 create mode 100644 samples/grids/tree-grid/row-drag-base/src/react-app-env.d.ts
 create mode 100644 samples/grids/tree-grid/row-drag-base/tsconfig.json

diff --git a/samples/grids/tree-grid/row-drag-base/.eslintrc.js b/samples/grids/tree-grid/row-drag-base/.eslintrc.js
new file mode 100644
index 0000000000..9d283f6407
--- /dev/null
+++ b/samples/grids/tree-grid/row-drag-base/.eslintrc.js
@@ -0,0 +1,76 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-drag-base/ReadMe.md b/samples/grids/tree-grid/row-drag-base/ReadMe.md
new file mode 100644
index 0000000000..09f64bb3fc
--- /dev/null
+++ b/samples/grids/tree-grid/row-drag-base/ReadMe.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Overview feature using [Hierarchical Grid](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/grids/hierarchical-grid/overview" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/grids/hierarchical-grid/overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/grids/hierarchical-grid/overview
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/grids/tree-grid/row-drag-base/package.json b/samples/grids/tree-grid/row-drag-base/package.json
new file mode 100644
index 0000000000..64bed6f1bd
--- /dev/null
+++ b/samples/grids/tree-grid/row-drag-base/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.14.3",
+    "igniteui-react": "18.6.0",
+    "igniteui-react-core": "18.6.0",
+    "igniteui-react-datasources": "18.6.0",
+    "igniteui-react-grids": "18.6.0",
+    "igniteui-react-inputs": "18.6.0",
+    "igniteui-react-layouts": "18.6.0",
+    "igniteui-webcomponents": "4.7.0",
+    "lit-html": "^2.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/grids/tree-grid/row-drag-base/public/index.html b/samples/grids/tree-grid/row-drag-base/public/index.html
new file mode 100644
index 0000000000..e2d3265576
--- /dev/null
+++ b/samples/grids/tree-grid/row-drag-base/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/react.png" >
+    <link rel="stylesheet"    href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-drag-base/sandbox.config.json b/samples/grids/tree-grid/row-drag-base/sandbox.config.json
new file mode 100644
index 0000000000..07f53508eb
--- /dev/null
+++ b/samples/grids/tree-grid/row-drag-base/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/grids/tree-grid/row-drag-base/src/EmployeesNestedTreeData.ts b/samples/grids/tree-grid/row-drag-base/src/EmployeesNestedTreeData.ts
new file mode 100644
index 0000000000..313f994ca4
--- /dev/null
+++ b/samples/grids/tree-grid/row-drag-base/src/EmployeesNestedTreeData.ts
@@ -0,0 +1,224 @@
+export class EmployeesNestedTreeDataItem {
+    public constructor(init: Partial<EmployeesNestedTreeDataItem>) {
+        Object.assign(this, init);
+    }
+    
+    public Age: number;
+    public HireDate: string;
+    public ID: number;
+    public Name: string;
+    public Phone: string;
+    public OnPTO: boolean;
+    public ParentID: number;
+    public Title: string;
+
+}
+export class EmployeesNestedTreeData extends Array<EmployeesNestedTreeDataItem> {
+    public constructor(items: Array<EmployeesNestedTreeDataItem> | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 55,
+                    HireDate: `2008-03-20`,
+                    ID: 1,
+                    Name: `Johnathan Winchester`,
+                    Phone: `0251-031259`,
+                    OnPTO: false,
+                    ParentID: -1,
+                    Title: `Development Manager`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 42,
+                    HireDate: `2014-01-22`,
+                    ID: 4,
+                    Name: `Ana Sanders`,
+                    Phone: `(21) 555-0091`,
+                    OnPTO: true,
+                    ParentID: -1,
+                    Title: `CEO`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 49,
+                    HireDate: `2014-01-22`,
+                    ID: 18,
+                    Name: `Victoria Lincoln`,
+                    Phone: `(071) 23 67 22 20`,
+                    OnPTO: true,
+                    ParentID: -1,
+                    Title: `Accounting Manager`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 61,
+                    HireDate: `2010-01-01`,
+                    ID: 10,
+                    Name: `Yang Wang`,
+                    Phone: `(21) 555-0091`,
+                    OnPTO: false,
+                    ParentID: -1,
+                    Title: `Localization Manager`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 43,
+                    HireDate: `2011-06-03`,
+                    ID: 3,
+                    Name: `Michael Burke`,
+                    Phone: `0452-076545`,
+                    OnPTO: true,
+                    ParentID: 1,
+                    Title: `Senior Software Developer`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 29,
+                    HireDate: `2009-06-19`,
+                    ID: 2,
+                    Name: `Thomas Anderson`,
+                    Phone: `(14) 555-8122`,
+                    OnPTO: false,
+                    ParentID: 1,
+                    Title: `Senior Software Developer`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 31,
+                    HireDate: `2014-08-18`,
+                    ID: 11,
+                    Name: `Monica Reyes`,
+                    Phone: `7675-3425`,
+                    OnPTO: false,
+                    ParentID: 1,
+                    Title: `Software Development Team Lead`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 35,
+                    HireDate: `2015-09-17`,
+                    ID: 6,
+                    Name: `Roland Mendel`,
+                    Phone: `(505) 555-5939`,
+                    OnPTO: false,
+                    ParentID: 11,
+                    Title: `Senior Software Developer`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 44,
+                    HireDate: `2009-10-11`,
+                    ID: 12,
+                    Name: `Sven Cooper`,
+                    Phone: `0695-34 67 21`,
+                    OnPTO: true,
+                    ParentID: 11,
+                    Title: `Senior Software Developer`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 44,
+                    HireDate: `2014-04-04`,
+                    ID: 14,
+                    Name: `Laurence Johnson`,
+                    Phone: `981-443655`,
+                    OnPTO: false,
+                    ParentID: 4,
+                    Title: `Director`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 25,
+                    HireDate: `2017-11-09`,
+                    ID: 5,
+                    Name: `Elizabeth Richards`,
+                    Phone: `(2) 283-2951`,
+                    OnPTO: true,
+                    ParentID: 4,
+                    Title: `Vice President`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 39,
+                    HireDate: `2010-03-22`,
+                    ID: 13,
+                    Name: `Trevor Ashworth`,
+                    Phone: `981-443655`,
+                    OnPTO: true,
+                    ParentID: 5,
+                    Title: `Director`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 44,
+                    HireDate: `2014-04-04`,
+                    ID: 17,
+                    Name: `Antonio Moreno`,
+                    Phone: `(505) 555-5939`,
+                    OnPTO: false,
+                    ParentID: 18,
+                    Title: `Senior Accountant`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 50,
+                    HireDate: `2007-11-18`,
+                    ID: 7,
+                    Name: `Pedro Rodriguez`,
+                    Phone: `035-640230`,
+                    OnPTO: false,
+                    ParentID: 10,
+                    Title: `Senior Localization Developer`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 27,
+                    HireDate: `2016-02-19`,
+                    ID: 8,
+                    Name: `Casey Harper`,
+                    Phone: `0342-023176`,
+                    OnPTO: true,
+                    ParentID: 10,
+                    Title: `Senior Localization`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 25,
+                    HireDate: `2017-11-09`,
+                    ID: 15,
+                    Name: `Patricia Simpson`,
+                    Phone: `069-0245984`,
+                    OnPTO: false,
+                    ParentID: 7,
+                    Title: `Localization Intern`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 39,
+                    HireDate: `2010-03-22`,
+                    ID: 9,
+                    Name: `Francisco Chang`,
+                    Phone: `(91) 745 6200`,
+                    OnPTO: false,
+                    ParentID: 7,
+                    Title: `Localization Intern`
+                }),
+                new EmployeesNestedTreeDataItem(
+                {
+                    Age: 25,
+                    HireDate: `2018-03-18`,
+                    ID: 16,
+                    Name: `Peter Lewis`,
+                    Phone: `069-0245984`,
+                    OnPTO: true,
+                    ParentID: 7,
+                    Title: `Localization Intern`
+                }),
+            ];
+            super(...(newItems.slice(0, items)));
+        }
+    }
+}
diff --git a/samples/grids/tree-grid/row-drag-base/src/index.css b/samples/grids/tree-grid/row-drag-base/src/index.css
new file mode 100644
index 0000000000..1fcfe3aac1
--- /dev/null
+++ b/samples/grids/tree-grid/row-drag-base/src/index.css
@@ -0,0 +1,7 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
+.wrapper {
+    justify-content: space-evenly;
+    margin: 1rem;
+}
diff --git a/samples/grids/tree-grid/row-drag-base/src/index.tsx b/samples/grids/tree-grid/row-drag-base/src/index.tsx
new file mode 100644
index 0000000000..3cefa8ca47
--- /dev/null
+++ b/samples/grids/tree-grid/row-drag-base/src/index.tsx
@@ -0,0 +1,138 @@
+import React, { useRef } from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+
+import {
+  IgrTreeGridModule,
+} from "igniteui-react-grids";
+import {
+  IgrTreeGrid,
+  IgrColumn,
+} from "igniteui-react-grids";
+import { EmployeesNestedTreeData } from "./EmployeesNestedTreeData";
+
+import "igniteui-react-grids/grids/combined";
+import "igniteui-react-grids/grids/themes/light/bootstrap.css";
+
+IgrTreeGridModule.register();
+
+export default function App() {
+  const employeesData = new EmployeesNestedTreeData();
+  const treeGridRef = useRef<IgrTreeGrid>(null);
+  const treeGridRef2 = useRef<IgrTreeGrid>(null);
+
+  function RowDragEnd(grid: IgrTreeGrid, evt: any) {
+    const grid2 = treeGridRef2.current;
+    const ghostElement = evt.detail.dragDirective.ghostElement;
+    if (ghostElement != null) {
+      const dragElementPos = ghostElement.getBoundingClientRect();
+      const gridPosition = document.getElementById("treeGrid2").getBoundingClientRect();
+
+      const withinXBounds = dragElementPos.x >= gridPosition.x && dragElementPos.x <= gridPosition.x + gridPosition.width;
+      const withinYBounds = dragElementPos.y >= gridPosition.y && dragElementPos.y <= gridPosition.y + gridPosition.height;
+      if (withinXBounds && withinYBounds) {
+        console.log(evt.detail.dragData.data.ParentID);
+        treeGridRef2.current.addRow(evt.detail.dragData.data, null);        
+      }
+    }
+  }
+
+  return (
+    <div className="container sample ig-typography">
+      <div className="container fill">
+        <div className="container horizontal wrapper">
+          <IgrTreeGrid
+            autoGenerate="false"
+            data={employeesData}
+            primaryKey="ID"
+            foreignKey="ParentID"
+            id="treeGrid"
+            width="40%"
+            ref={treeGridRef}
+            rowDraggable="true"
+            rowDragEnd={RowDragEnd}
+          >
+            <IgrColumn
+              field="Name"
+              header="Full Name"
+              dataType="String"
+              resizable="true"
+              sortable="true"
+              editable="true">
+            </IgrColumn>
+            <IgrColumn
+              field="Age"
+              dataType="Number"
+              resizable="false"
+              sortable="false"
+              filterable="false"
+              editable="true">
+            </IgrColumn>
+            <IgrColumn
+              field="Title"
+              dataType="String"
+              resizable="true"
+              sortable="true"
+              editable="true">
+            </IgrColumn>
+            <IgrColumn
+              field="HireDate"
+              header="Hire Date"
+              dataType="Date"
+              resizable="true"
+              sortable="true"
+              editable="true">
+            </IgrColumn>
+          </IgrTreeGrid>
+
+          <IgrTreeGrid
+            autoGenerate="false"
+            data={[]}
+            primaryKey="ID"
+            foreignKey="ParentID"
+            ref={treeGridRef2}
+            id="treeGrid2"
+            width="40%"
+            emptyGridMessage="Drag and Drop a row from the left grid to this grid"
+          >
+            <IgrColumn
+              field="Name"
+              header="Full Name"
+              dataType="String"
+              resizable="true"
+              sortable="true"
+              editable="true">
+            </IgrColumn>
+            <IgrColumn
+              field="Age"
+              dataType="Number"
+              resizable="false"
+              sortable="false"
+              filterable="false"
+              editable="true">
+            </IgrColumn>
+            <IgrColumn
+              field="Title"
+              dataType="String"
+              resizable="true"
+              sortable="true"
+              editable="true">
+            </IgrColumn>
+            <IgrColumn
+              field="HireDate"
+              header="Hire Date"
+              dataType="Date"
+              resizable="true"
+              sortable="true"
+              editable="true">
+            </IgrColumn>
+          </IgrTreeGrid>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// rendering above component in the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<App />);
diff --git a/samples/grids/tree-grid/row-drag-base/src/react-app-env.d.ts b/samples/grids/tree-grid/row-drag-base/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/grids/tree-grid/row-drag-base/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/grids/tree-grid/row-drag-base/tsconfig.json b/samples/grids/tree-grid/row-drag-base/tsconfig.json
new file mode 100644
index 0000000000..42c6ace1da
--- /dev/null
+++ b/samples/grids/tree-grid/row-drag-base/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}

From d9f633f75588b3719e004b762f3780d69fdabab0 Mon Sep 17 00:00:00 2001
From: RivaIvanova <ivanova.riva@gmail.com>
Date: Mon, 22 Apr 2024 14:28:36 +0300
Subject: [PATCH 03/12] feat(tree-grid): add search sample

---
 .../tree-grid/data-searching/.eslintrc.js     |  76 ++++++
 .../tree-grid/data-searching/package.json     |  49 ++++
 .../data-searching/public/index.html          |  11 +
 .../data-searching/sandbox.config.json        |   5 +
 .../data-searching/src/EmployeesFlatData.ts   | 224 ++++++++++++++++++
 .../tree-grid/data-searching/src/index.css    |   2 +
 .../tree-grid/data-searching/src/index.tsx    | 152 ++++++++++++
 .../data-searching/src/react-app-env.d.ts     |   1 +
 .../tree-grid/data-searching/tsconfig.json    |  45 ++++
 9 files changed, 565 insertions(+)
 create mode 100644 samples/grids/tree-grid/data-searching/.eslintrc.js
 create mode 100644 samples/grids/tree-grid/data-searching/package.json
 create mode 100644 samples/grids/tree-grid/data-searching/public/index.html
 create mode 100644 samples/grids/tree-grid/data-searching/sandbox.config.json
 create mode 100644 samples/grids/tree-grid/data-searching/src/EmployeesFlatData.ts
 create mode 100644 samples/grids/tree-grid/data-searching/src/index.css
 create mode 100644 samples/grids/tree-grid/data-searching/src/index.tsx
 create mode 100644 samples/grids/tree-grid/data-searching/src/react-app-env.d.ts
 create mode 100644 samples/grids/tree-grid/data-searching/tsconfig.json

diff --git a/samples/grids/tree-grid/data-searching/.eslintrc.js b/samples/grids/tree-grid/data-searching/.eslintrc.js
new file mode 100644
index 0000000000..9d283f6407
--- /dev/null
+++ b/samples/grids/tree-grid/data-searching/.eslintrc.js
@@ -0,0 +1,76 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-searching/package.json b/samples/grids/tree-grid/data-searching/package.json
new file mode 100644
index 0000000000..231a4a5987
--- /dev/null
+++ b/samples/grids/tree-grid/data-searching/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.14.2",
+    "igniteui-react": "18.6.0",
+    "igniteui-react-core": "18.6.0",
+    "igniteui-react-datasources": "18.6.0",
+    "igniteui-react-grids": "18.6.0",
+    "igniteui-react-inputs": "18.6.0",
+    "igniteui-react-layouts": "18.6.0",
+    "igniteui-webcomponents": "4.7.0",
+    "lit-html": "^2.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/grids/tree-grid/data-searching/public/index.html b/samples/grids/tree-grid/data-searching/public/index.html
new file mode 100644
index 0000000000..e2d3265576
--- /dev/null
+++ b/samples/grids/tree-grid/data-searching/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/react.png" >
+    <link rel="stylesheet"    href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-searching/sandbox.config.json b/samples/grids/tree-grid/data-searching/sandbox.config.json
new file mode 100644
index 0000000000..07f53508eb
--- /dev/null
+++ b/samples/grids/tree-grid/data-searching/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/grids/tree-grid/data-searching/src/EmployeesFlatData.ts b/samples/grids/tree-grid/data-searching/src/EmployeesFlatData.ts
new file mode 100644
index 0000000000..fe645c942a
--- /dev/null
+++ b/samples/grids/tree-grid/data-searching/src/EmployeesFlatData.ts
@@ -0,0 +1,224 @@
+export class EmployeesFlatDataItem {
+  public constructor(init: Partial<EmployeesFlatDataItem>) {
+      Object.assign(this, init);
+  }
+  
+  public Age: number;
+  public HireDate: string;
+  public ID: number;
+  public Name: string;
+  public Phone: string;
+  public OnPTO: boolean;
+  public ParentID: number;
+  public Title: string;
+
+}
+export class EmployeesFlatData extends Array<EmployeesFlatDataItem> {
+  public constructor(items: Array<EmployeesFlatDataItem> | number = -1) {
+      if (Array.isArray(items)) {
+          super(...items);
+      } else {
+          const newItems = [
+              new EmployeesFlatDataItem(
+              {
+                  Age: 55,
+                  HireDate: `2008-03-20`,
+                  ID: 1,
+                  Name: `Johnathan Winchester`,
+                  Phone: `0251-031259`,
+                  OnPTO: false,
+                  ParentID: -1,
+                  Title: `Development Manager`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 42,
+                  HireDate: `2014-01-22`,
+                  ID: 4,
+                  Name: `Ana Sanders`,
+                  Phone: `(21) 555-0091`,
+                  OnPTO: true,
+                  ParentID: -1,
+                  Title: `CEO`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 49,
+                  HireDate: `2014-01-22`,
+                  ID: 18,
+                  Name: `Victoria Lincoln`,
+                  Phone: `(071) 23 67 22 20`,
+                  OnPTO: true,
+                  ParentID: -1,
+                  Title: `Accounting Manager`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 61,
+                  HireDate: `2010-01-01`,
+                  ID: 10,
+                  Name: `Yang Wang`,
+                  Phone: `(21) 555-0091`,
+                  OnPTO: false,
+                  ParentID: -1,
+                  Title: `Localization Manager`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 43,
+                  HireDate: `2011-06-03`,
+                  ID: 3,
+                  Name: `Michael Burke`,
+                  Phone: `0452-076545`,
+                  OnPTO: true,
+                  ParentID: 1,
+                  Title: `Senior Software Developer`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 29,
+                  HireDate: `2009-06-19`,
+                  ID: 2,
+                  Name: `Thomas Anderson`,
+                  Phone: `(14) 555-8122`,
+                  OnPTO: false,
+                  ParentID: 1,
+                  Title: `Senior Software Developer`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 31,
+                  HireDate: `2014-08-18`,
+                  ID: 11,
+                  Name: `Monica Reyes`,
+                  Phone: `7675-3425`,
+                  OnPTO: false,
+                  ParentID: 1,
+                  Title: `Software Development Team Lead`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 35,
+                  HireDate: `2015-09-17`,
+                  ID: 6,
+                  Name: `Roland Mendel`,
+                  Phone: `(505) 555-5939`,
+                  OnPTO: false,
+                  ParentID: 11,
+                  Title: `Senior Software Developer`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 44,
+                  HireDate: `2009-10-11`,
+                  ID: 12,
+                  Name: `Sven Cooper`,
+                  Phone: `0695-34 67 21`,
+                  OnPTO: true,
+                  ParentID: 11,
+                  Title: `Senior Software Developer`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 44,
+                  HireDate: `2014-04-04`,
+                  ID: 14,
+                  Name: `Laurence Johnson`,
+                  Phone: `981-443655`,
+                  OnPTO: false,
+                  ParentID: 4,
+                  Title: `Director`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 25,
+                  HireDate: `2017-11-09`,
+                  ID: 5,
+                  Name: `Elizabeth Richards`,
+                  Phone: `(2) 283-2951`,
+                  OnPTO: true,
+                  ParentID: 4,
+                  Title: `Vice President`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 39,
+                  HireDate: `2010-03-22`,
+                  ID: 13,
+                  Name: `Trevor Ashworth`,
+                  Phone: `981-443655`,
+                  OnPTO: true,
+                  ParentID: 5,
+                  Title: `Director`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 44,
+                  HireDate: `2014-04-04`,
+                  ID: 17,
+                  Name: `Antonio Moreno`,
+                  Phone: `(505) 555-5939`,
+                  OnPTO: false,
+                  ParentID: 18,
+                  Title: `Senior Accountant`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 50,
+                  HireDate: `2007-11-18`,
+                  ID: 7,
+                  Name: `Pedro Rodriguez`,
+                  Phone: `035-640230`,
+                  OnPTO: false,
+                  ParentID: 10,
+                  Title: `Senior Localization Developer`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 27,
+                  HireDate: `2016-02-19`,
+                  ID: 8,
+                  Name: `Casey Harper`,
+                  Phone: `0342-023176`,
+                  OnPTO: true,
+                  ParentID: 10,
+                  Title: `Senior Localization`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 25,
+                  HireDate: `2017-11-09`,
+                  ID: 15,
+                  Name: `Patricia Simpson`,
+                  Phone: `069-0245984`,
+                  OnPTO: false,
+                  ParentID: 7,
+                  Title: `Localization Intern`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 39,
+                  HireDate: `2010-03-22`,
+                  ID: 9,
+                  Name: `Francisco Chang`,
+                  Phone: `(91) 745 6200`,
+                  OnPTO: false,
+                  ParentID: 7,
+                  Title: `Localization Intern`
+              }),
+              new EmployeesFlatDataItem(
+              {
+                  Age: 25,
+                  HireDate: `2018-03-18`,
+                  ID: 16,
+                  Name: `Peter Lewis`,
+                  Phone: `069-0245984`,
+                  OnPTO: true,
+                  ParentID: 7,
+                  Title: `Localization Intern`
+              }),
+          ];
+          super(...(newItems.slice(0, items)));
+      }
+  }
+}
diff --git a/samples/grids/tree-grid/data-searching/src/index.css b/samples/grids/tree-grid/data-searching/src/index.css
new file mode 100644
index 0000000000..98682b8543
--- /dev/null
+++ b/samples/grids/tree-grid/data-searching/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
diff --git a/samples/grids/tree-grid/data-searching/src/index.tsx b/samples/grids/tree-grid/data-searching/src/index.tsx
new file mode 100644
index 0000000000..b90a58b61d
--- /dev/null
+++ b/samples/grids/tree-grid/data-searching/src/index.tsx
@@ -0,0 +1,152 @@
+import React, { KeyboardEvent, useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+
+import { IgrTreeGridModule } from "igniteui-react-grids";
+import { IgrTreeGrid, IgrColumn } from "igniteui-react-grids";
+import { EmployeesFlatData } from "./EmployeesFlatData";
+
+import "igniteui-react-grids/grids/combined";
+import "igniteui-react-grids/grids/themes/light/bootstrap.css";
+import {
+  IgrChip,
+  IgrChipModule,
+  IgrComponentBoolValueChangedEventArgs,
+  IgrComponentValueChangedEventArgs,
+  IgrIconButton,
+  IgrIconButtonModule,
+  IgrInput,
+  IgrInputModule,
+} from "igniteui-react";
+
+const mods: any[] = [IgrTreeGridModule, IgrChipModule, IgrIconButtonModule, IgrInputModule];
+mods.forEach((m) => m.register());
+
+const prevIconText =
+  "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'></path></svg>";
+const nextIconText =
+  "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'></path></svg>";
+const clearIconText =
+  "<svg width='24' height='24' viewBox='0 0 24 24' title='Clear'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'></path></svg>";
+
+const data = new EmployeesFlatData();
+
+export default function Sample() {
+  const gridRef = useRef<IgrTreeGrid>(null);
+  const clearIconRef = useRef<IgrIconButton>(null);
+  const iconButtonNextRef = useRef<IgrIconButton>(null);
+  const iconButtonPrevRef = useRef<IgrIconButton>(null);
+  const caseSensitiveChipRef = useRef<IgrChip>(null);
+  const exactMatchChipRef = useRef<IgrChip>(null);
+
+  const [searchText, setSearchText] = useState('')
+
+  useEffect(() => {
+    if (clearIconRef?.current) {
+      clearIconRef.current.registerIconFromText("clear", clearIconText, "material");
+    }
+    if (iconButtonPrevRef?.current) {
+      iconButtonPrevRef.current.registerIconFromText("prev", prevIconText,"material");
+    }
+    if (iconButtonNextRef?.current) {
+      iconButtonNextRef.current.registerIconFromText("next", nextIconText, "material");
+    }
+  }, []);
+
+  function handleOnSearchChange(input: IgrInput, event: IgrComponentValueChangedEventArgs) {
+    setSearchText(event.detail);
+    gridRef.current.findNext(event.detail, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+  }
+
+  function handleCaseSensitiveChange(chip: IgrChip, event: IgrComponentBoolValueChangedEventArgs) {
+    gridRef.current.findNext(searchText, event.detail, exactMatchChipRef.current.selected);
+  }
+
+  function handleExactMatchChange(chip: IgrChip, event: IgrComponentBoolValueChangedEventArgs) {
+    gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, event.detail);
+  }
+
+  function clearSearch() {
+    setSearchText('');
+    gridRef.current.clearSearch();
+  }
+
+  function prevSearch() {
+    gridRef.current.findPrev(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+  }
+
+  function nextSearch() {
+    gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+  }
+
+  function searchKeyDown(e: KeyboardEvent<HTMLElement>) {
+    if (e.key === 'Enter' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        gridRef.current.findPrev(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    }
+  }
+
+  return (
+    <div className="container sample">
+      <div className="container vertical">
+        <div style={{ marginBottom: "1rem" }} onKeyDown={searchKeyDown}>
+          <IgrInput name="searchBox" value={searchText} inputOcurred={handleOnSearchChange}>
+
+            <div slot="prefix" key="prefix">
+              <IgrIconButton
+                key="clearIcon"
+                ref={clearIconRef}
+                variant="flat"
+                name="clear"
+                collection="material"
+                clicked={clearSearch}
+              ></IgrIconButton>
+            </div>
+            <div slot="suffix" key="chipSuffix">
+              <IgrChip ref={caseSensitiveChipRef} key="caseSensitiveChip" selectable="true" select={handleCaseSensitiveChange}>
+                <span key="caseSensitive">Case Sensitive</span>
+              </IgrChip>
+              <IgrChip ref={exactMatchChipRef} key="exactMatchChip" selectable="true" select={handleExactMatchChange}>
+                <span key="exactMatch">Exact Match</span>
+              </IgrChip>
+            </div>
+            <div slot="suffix" key="buttonsSuffix">
+              <IgrIconButton
+                key="prevIconButton"
+                ref={iconButtonPrevRef}
+                variant="flat"
+                name="prev"
+                collection="material"
+                clicked={prevSearch}
+              ></IgrIconButton>
+              <IgrIconButton
+                key="nextIconButton"
+                ref={iconButtonNextRef}
+                variant="flat"
+                name="next"
+                collection="material"
+                clicked={nextSearch}
+              ></IgrIconButton>
+            </div>
+          </IgrInput>
+        </div>
+        <IgrTreeGrid ref={gridRef} data={data} autoGenerate="false" 
+          primaryKey="ID" foreignKey="ParentID" allowFiltering="true" height="480px"
+        >
+          <IgrColumn field="Name" dataType="string" sortable="true"></IgrColumn>        
+          <IgrColumn field="ID" dataType="number" sortable="true"></IgrColumn>        
+          <IgrColumn field="Title" dataType="string" sortable="true"></IgrColumn>        
+          <IgrColumn field="Age" dataType="number" sortable="true"></IgrColumn>        
+          <IgrColumn field="HireDate" dataType="date" sortable="true"></IgrColumn>  
+        </IgrTreeGrid>
+      </div>
+    </div>
+  );
+}
+
+// rendering above component in the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Sample />);
diff --git a/samples/grids/tree-grid/data-searching/src/react-app-env.d.ts b/samples/grids/tree-grid/data-searching/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/grids/tree-grid/data-searching/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/grids/tree-grid/data-searching/tsconfig.json b/samples/grids/tree-grid/data-searching/tsconfig.json
new file mode 100644
index 0000000000..42c6ace1da
--- /dev/null
+++ b/samples/grids/tree-grid/data-searching/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}

From af7dbbf250617117cb7005c26571b028f8c11650 Mon Sep 17 00:00:00 2001
From: Ivan Kitanov <IKitanov@infragistics.com>
Date: Thu, 30 May 2024 17:49:27 +0300
Subject: [PATCH 04/12] Adding textarea samples

---
 .../textarea/form-integration/.eslintrc.js    | 75 +++++++++++++++++++
 .../textarea/form-integration/README.md       | 56 ++++++++++++++
 .../textarea/form-integration/package.json    | 38 ++++++++++
 .../form-integration/public/index.html        | 10 +++
 .../form-integration/sandbox.config.json      |  5 ++
 .../textarea/form-integration/src/index.css   |  5 ++
 .../textarea/form-integration/src/index.tsx   | 52 +++++++++++++
 .../form-integration/src/react-app-env.d.ts   |  1 +
 .../textarea/form-integration/tsconfig.json   | 45 +++++++++++
 samples/inputs/textarea/overview/.eslintrc.js | 75 +++++++++++++++++++
 samples/inputs/textarea/overview/README.md    | 56 ++++++++++++++
 samples/inputs/textarea/overview/package.json | 38 ++++++++++
 .../textarea/overview/public/index.html       | 10 +++
 .../textarea/overview/sandbox.config.json     |  5 ++
 .../inputs/textarea/overview/src/index.css    |  2 +
 .../inputs/textarea/overview/src/index.tsx    | 26 +++++++
 .../textarea/overview/src/react-app-env.d.ts  |  1 +
 .../inputs/textarea/overview/tsconfig.json    | 45 +++++++++++
 samples/inputs/textarea/resize/.eslintrc.js   | 75 +++++++++++++++++++
 samples/inputs/textarea/resize/README.md      | 56 ++++++++++++++
 samples/inputs/textarea/resize/package.json   | 38 ++++++++++
 .../inputs/textarea/resize/public/index.html  | 10 +++
 .../textarea/resize/sandbox.config.json       |  5 ++
 samples/inputs/textarea/resize/src/index.css  |  2 +
 samples/inputs/textarea/resize/src/index.tsx  | 34 +++++++++
 .../textarea/resize/src/react-app-env.d.ts    |  1 +
 samples/inputs/textarea/resize/tsconfig.json  | 45 +++++++++++
 samples/inputs/textarea/slots/.eslintrc.js    | 75 +++++++++++++++++++
 samples/inputs/textarea/slots/README.md       | 56 ++++++++++++++
 samples/inputs/textarea/slots/package.json    | 38 ++++++++++
 .../inputs/textarea/slots/public/index.html   | 10 +++
 .../inputs/textarea/slots/sandbox.config.json |  5 ++
 samples/inputs/textarea/slots/src/index.css   |  2 +
 samples/inputs/textarea/slots/src/index.tsx   | 44 +++++++++++
 .../textarea/slots/src/react-app-env.d.ts     |  1 +
 samples/inputs/textarea/slots/tsconfig.json   | 45 +++++++++++
 samples/inputs/textarea/styling/.eslintrc.js  | 75 +++++++++++++++++++
 samples/inputs/textarea/styling/README.md     | 56 ++++++++++++++
 samples/inputs/textarea/styling/package.json  | 38 ++++++++++
 .../inputs/textarea/styling/public/index.html | 10 +++
 .../textarea/styling/sandbox.config.json      |  5 ++
 samples/inputs/textarea/styling/src/index.css | 17 +++++
 samples/inputs/textarea/styling/src/index.tsx | 44 +++++++++++
 .../textarea/styling/src/react-app-env.d.ts   |  1 +
 samples/inputs/textarea/styling/tsconfig.json | 45 +++++++++++
 45 files changed, 1378 insertions(+)
 create mode 100644 samples/inputs/textarea/form-integration/.eslintrc.js
 create mode 100644 samples/inputs/textarea/form-integration/README.md
 create mode 100644 samples/inputs/textarea/form-integration/package.json
 create mode 100644 samples/inputs/textarea/form-integration/public/index.html
 create mode 100644 samples/inputs/textarea/form-integration/sandbox.config.json
 create mode 100644 samples/inputs/textarea/form-integration/src/index.css
 create mode 100644 samples/inputs/textarea/form-integration/src/index.tsx
 create mode 100644 samples/inputs/textarea/form-integration/src/react-app-env.d.ts
 create mode 100644 samples/inputs/textarea/form-integration/tsconfig.json
 create mode 100644 samples/inputs/textarea/overview/.eslintrc.js
 create mode 100644 samples/inputs/textarea/overview/README.md
 create mode 100644 samples/inputs/textarea/overview/package.json
 create mode 100644 samples/inputs/textarea/overview/public/index.html
 create mode 100644 samples/inputs/textarea/overview/sandbox.config.json
 create mode 100644 samples/inputs/textarea/overview/src/index.css
 create mode 100644 samples/inputs/textarea/overview/src/index.tsx
 create mode 100644 samples/inputs/textarea/overview/src/react-app-env.d.ts
 create mode 100644 samples/inputs/textarea/overview/tsconfig.json
 create mode 100644 samples/inputs/textarea/resize/.eslintrc.js
 create mode 100644 samples/inputs/textarea/resize/README.md
 create mode 100644 samples/inputs/textarea/resize/package.json
 create mode 100644 samples/inputs/textarea/resize/public/index.html
 create mode 100644 samples/inputs/textarea/resize/sandbox.config.json
 create mode 100644 samples/inputs/textarea/resize/src/index.css
 create mode 100644 samples/inputs/textarea/resize/src/index.tsx
 create mode 100644 samples/inputs/textarea/resize/src/react-app-env.d.ts
 create mode 100644 samples/inputs/textarea/resize/tsconfig.json
 create mode 100644 samples/inputs/textarea/slots/.eslintrc.js
 create mode 100644 samples/inputs/textarea/slots/README.md
 create mode 100644 samples/inputs/textarea/slots/package.json
 create mode 100644 samples/inputs/textarea/slots/public/index.html
 create mode 100644 samples/inputs/textarea/slots/sandbox.config.json
 create mode 100644 samples/inputs/textarea/slots/src/index.css
 create mode 100644 samples/inputs/textarea/slots/src/index.tsx
 create mode 100644 samples/inputs/textarea/slots/src/react-app-env.d.ts
 create mode 100644 samples/inputs/textarea/slots/tsconfig.json
 create mode 100644 samples/inputs/textarea/styling/.eslintrc.js
 create mode 100644 samples/inputs/textarea/styling/README.md
 create mode 100644 samples/inputs/textarea/styling/package.json
 create mode 100644 samples/inputs/textarea/styling/public/index.html
 create mode 100644 samples/inputs/textarea/styling/sandbox.config.json
 create mode 100644 samples/inputs/textarea/styling/src/index.css
 create mode 100644 samples/inputs/textarea/styling/src/index.tsx
 create mode 100644 samples/inputs/textarea/styling/src/react-app-env.d.ts
 create mode 100644 samples/inputs/textarea/styling/tsconfig.json

diff --git a/samples/inputs/textarea/form-integration/.eslintrc.js b/samples/inputs/textarea/form-integration/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/inputs/textarea/form-integration/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/inputs/textarea/form-integration/README.md b/samples/inputs/textarea/form-integration/README.md
new file mode 100644
index 0000000000..b00ea4ed98
--- /dev/null
+++ b/samples/inputs/textarea/form-integration/README.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Overview feature using [Input](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/input/overview" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/input/overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/inputs/input/overview
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/inputs/textarea/form-integration/package.json b/samples/inputs/textarea/form-integration/package.json
new file mode 100644
index 0000000000..d11b4ecd94
--- /dev/null
+++ b/samples/inputs/textarea/form-integration/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "react-input-overview",
+  "description": "This project provides example of Input Overview using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.14.2",
+    "igniteui-react": "18.6.0",
+    "igniteui-react-core": "18.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/inputs/textarea/form-integration/public/index.html b/samples/inputs/textarea/form-integration/public/index.html
new file mode 100644
index 0000000000..e6fcd73310
--- /dev/null
+++ b/samples/inputs/textarea/form-integration/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>TextAreaFormIntegration</title>
+    <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/inputs/textarea/form-integration/sandbox.config.json b/samples/inputs/textarea/form-integration/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/inputs/textarea/form-integration/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
\ No newline at end of file
diff --git a/samples/inputs/textarea/form-integration/src/index.css b/samples/inputs/textarea/form-integration/src/index.css
new file mode 100644
index 0000000000..3e45a6d28f
--- /dev/null
+++ b/samples/inputs/textarea/form-integration/src/index.css
@@ -0,0 +1,5 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+.controls {
+    margin-top: 1rem;
+}
diff --git a/samples/inputs/textarea/form-integration/src/index.tsx b/samples/inputs/textarea/form-integration/src/index.tsx
new file mode 100644
index 0000000000..58797d0f82
--- /dev/null
+++ b/samples/inputs/textarea/form-integration/src/index.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrTextarea, IgrTextareaModule, IgrButton, IgrButtonModule, IgrToast, IgrToastModule } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+IgrTextareaModule.register();
+IgrButtonModule.register();
+IgrToastModule.register();
+
+export default class TextAreaFormIntegration extends React.Component<any, any> {
+
+    public toastRef: IgrToast;
+
+    constructor(props: any) {
+        super(props);     
+        this.onSubmitButtonClicked = this.onSubmitButtonClicked.bind(this);
+        this.onToastRef = this.onToastRef.bind(this);
+    }
+
+    public render(): JSX.Element {
+        return (
+            <div className="sample">               
+                <form id="form" onSubmit={this.onSubmitButtonClicked}>
+                <IgrTextarea rows="5"  name="user_feedback" label="Your review" required>
+                </IgrTextarea>                
+                <div className="controls">
+                    <IgrButton type="submit"><span>Submit review</span></IgrButton>
+                    <IgrButton type="reset" variant="outlined"><span>Reset</span></IgrButton>                    
+                </div>
+                <IgrToast id="submitted" position="top" display-time="1e3" ref={this.onToastRef}><span>Your review was submitted</span></IgrToast>
+                </form>
+            </div>            
+        );
+    }
+
+    public onToastRef(toast: IgrToast){
+        if (!toast) { return; }
+        this.toastRef = toast;
+    }
+
+    public onSubmitButtonClicked(e:React.FormEvent<HTMLFormElement>) {
+        if(this.toastRef){
+            e.preventDefault();
+            this.toastRef.show();
+        }
+    }
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<TextAreaFormIntegration/>);
diff --git a/samples/inputs/textarea/form-integration/src/react-app-env.d.ts b/samples/inputs/textarea/form-integration/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/inputs/textarea/form-integration/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/inputs/textarea/form-integration/tsconfig.json b/samples/inputs/textarea/form-integration/tsconfig.json
new file mode 100644
index 0000000000..8f5c3b15e4
--- /dev/null
+++ b/samples/inputs/textarea/form-integration/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/inputs/textarea/overview/.eslintrc.js b/samples/inputs/textarea/overview/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/inputs/textarea/overview/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/inputs/textarea/overview/README.md b/samples/inputs/textarea/overview/README.md
new file mode 100644
index 0000000000..b00ea4ed98
--- /dev/null
+++ b/samples/inputs/textarea/overview/README.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Overview feature using [Input](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/input/overview" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/input/overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/inputs/input/overview
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/inputs/textarea/overview/package.json b/samples/inputs/textarea/overview/package.json
new file mode 100644
index 0000000000..d11b4ecd94
--- /dev/null
+++ b/samples/inputs/textarea/overview/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "react-input-overview",
+  "description": "This project provides example of Input Overview using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.14.2",
+    "igniteui-react": "18.6.0",
+    "igniteui-react-core": "18.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/inputs/textarea/overview/public/index.html b/samples/inputs/textarea/overview/public/index.html
new file mode 100644
index 0000000000..ace1cccb87
--- /dev/null
+++ b/samples/inputs/textarea/overview/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>TextAreaOverview</title>
+    <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/inputs/textarea/overview/sandbox.config.json b/samples/inputs/textarea/overview/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/inputs/textarea/overview/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
\ No newline at end of file
diff --git a/samples/inputs/textarea/overview/src/index.css b/samples/inputs/textarea/overview/src/index.css
new file mode 100644
index 0000000000..0fe9368715
--- /dev/null
+++ b/samples/inputs/textarea/overview/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/textarea/overview/src/index.tsx b/samples/inputs/textarea/overview/src/index.tsx
new file mode 100644
index 0000000000..387d50306b
--- /dev/null
+++ b/samples/inputs/textarea/overview/src/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrTextarea, IgrTextareaModule } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+IgrTextareaModule.register();
+
+export default class InputOverview extends React.Component<any, any> {
+
+    constructor(props: any) {
+        super(props);     
+    }
+
+    public render(): JSX.Element {
+        return (
+            <div className="sample">
+                <IgrTextarea rows="5" label="Tell us your story:"><span>It was a dark and stormy night...</span></IgrTextarea>
+            </div>
+        );
+    }
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<InputOverview/>);
diff --git a/samples/inputs/textarea/overview/src/react-app-env.d.ts b/samples/inputs/textarea/overview/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/inputs/textarea/overview/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/inputs/textarea/overview/tsconfig.json b/samples/inputs/textarea/overview/tsconfig.json
new file mode 100644
index 0000000000..8f5c3b15e4
--- /dev/null
+++ b/samples/inputs/textarea/overview/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/inputs/textarea/resize/.eslintrc.js b/samples/inputs/textarea/resize/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/inputs/textarea/resize/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/inputs/textarea/resize/README.md b/samples/inputs/textarea/resize/README.md
new file mode 100644
index 0000000000..b00ea4ed98
--- /dev/null
+++ b/samples/inputs/textarea/resize/README.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Overview feature using [Input](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/input/overview" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/input/overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/inputs/input/overview
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/inputs/textarea/resize/package.json b/samples/inputs/textarea/resize/package.json
new file mode 100644
index 0000000000..d11b4ecd94
--- /dev/null
+++ b/samples/inputs/textarea/resize/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "react-input-overview",
+  "description": "This project provides example of Input Overview using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.14.2",
+    "igniteui-react": "18.6.0",
+    "igniteui-react-core": "18.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/inputs/textarea/resize/public/index.html b/samples/inputs/textarea/resize/public/index.html
new file mode 100644
index 0000000000..9849e41137
--- /dev/null
+++ b/samples/inputs/textarea/resize/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>TextAreaResize</title>
+    <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/inputs/textarea/resize/sandbox.config.json b/samples/inputs/textarea/resize/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/inputs/textarea/resize/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
\ No newline at end of file
diff --git a/samples/inputs/textarea/resize/src/index.css b/samples/inputs/textarea/resize/src/index.css
new file mode 100644
index 0000000000..0fe9368715
--- /dev/null
+++ b/samples/inputs/textarea/resize/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/textarea/resize/src/index.tsx b/samples/inputs/textarea/resize/src/index.tsx
new file mode 100644
index 0000000000..10c4ad0d23
--- /dev/null
+++ b/samples/inputs/textarea/resize/src/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrTextarea, IgrTextareaModule } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+IgrTextareaModule.register();
+
+export default class InputOverview extends React.Component<any, any> {
+
+    constructor(props: any) {
+        super(props);     
+    }
+
+    public render(): JSX.Element {
+        return (
+            <div className="sample">
+               <IgrTextarea label="Resize: none" resize="none">                                      
+                    <p slot="helper-text">This textarea does not resize and uses a scroll bar to show overflow text.</p>
+                </IgrTextarea>
+                <IgrTextarea label="Resize: vertical (default)">                                    
+                    <p slot="helper-text">This textarea lets the user resize vertically.</p>
+                </IgrTextarea>
+                <IgrTextarea label="Resize: auto" resize="auto">                                       
+                    <p slot="helper-text">This textarea shows all the user input at once. Overflow text wraps onto a new line and expands the text area.</p>
+                </IgrTextarea>
+            </div>
+        );
+    }
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<InputOverview/>);
diff --git a/samples/inputs/textarea/resize/src/react-app-env.d.ts b/samples/inputs/textarea/resize/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/inputs/textarea/resize/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/inputs/textarea/resize/tsconfig.json b/samples/inputs/textarea/resize/tsconfig.json
new file mode 100644
index 0000000000..8f5c3b15e4
--- /dev/null
+++ b/samples/inputs/textarea/resize/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/inputs/textarea/slots/.eslintrc.js b/samples/inputs/textarea/slots/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/inputs/textarea/slots/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/inputs/textarea/slots/README.md b/samples/inputs/textarea/slots/README.md
new file mode 100644
index 0000000000..b00ea4ed98
--- /dev/null
+++ b/samples/inputs/textarea/slots/README.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Overview feature using [Input](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/input/overview" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/input/overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/inputs/input/overview
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/inputs/textarea/slots/package.json b/samples/inputs/textarea/slots/package.json
new file mode 100644
index 0000000000..d11b4ecd94
--- /dev/null
+++ b/samples/inputs/textarea/slots/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "react-input-overview",
+  "description": "This project provides example of Input Overview using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.14.2",
+    "igniteui-react": "18.6.0",
+    "igniteui-react-core": "18.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/inputs/textarea/slots/public/index.html b/samples/inputs/textarea/slots/public/index.html
new file mode 100644
index 0000000000..07a8139d43
--- /dev/null
+++ b/samples/inputs/textarea/slots/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>TextAreaSlots</title>
+    <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/inputs/textarea/slots/sandbox.config.json b/samples/inputs/textarea/slots/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/inputs/textarea/slots/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
\ No newline at end of file
diff --git a/samples/inputs/textarea/slots/src/index.css b/samples/inputs/textarea/slots/src/index.css
new file mode 100644
index 0000000000..0fe9368715
--- /dev/null
+++ b/samples/inputs/textarea/slots/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/inputs/textarea/slots/src/index.tsx b/samples/inputs/textarea/slots/src/index.tsx
new file mode 100644
index 0000000000..344469e19c
--- /dev/null
+++ b/samples/inputs/textarea/slots/src/index.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrTextarea, IgrTextareaModule, IgrIcon, IgrIconModule } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+IgrTextareaModule.register();
+IgrIconModule.register();
+
+export default class TextAreaSlot extends React.Component<any, any> {
+
+    constructor(props: any) {
+        super(props);     
+    }
+
+    public render(): JSX.Element {
+        return (
+            <div className="sample">
+                <IgrTextarea label="Your feedback">
+                    <span slot="prefix">
+                    <IgrIcon ref={this.iconRef} name='feedback' collection="material"></IgrIcon>
+                    </span>                    
+                    <p slot="helper-text">Give us a short description of what you liked/disliked</p>
+                </IgrTextarea>
+            </div>
+        );
+        
+    }      
+
+    public iconRef(icon: IgrIcon){
+        if(!icon){
+            return;
+        }
+
+        icon.registerIconFromText( "feedback",
+        `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-360q17 0 28.5-11.5T520-400q0-17-11.5-28.5T480-440q-17 0-28.5 11.5T440-400q0 17 11.5 28.5T480-360Zm-40-160h80v-240h-80v240ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/></svg>`,
+        "material");    
+    } 
+}
+
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<TextAreaSlot/>);
diff --git a/samples/inputs/textarea/slots/src/react-app-env.d.ts b/samples/inputs/textarea/slots/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/inputs/textarea/slots/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/inputs/textarea/slots/tsconfig.json b/samples/inputs/textarea/slots/tsconfig.json
new file mode 100644
index 0000000000..8f5c3b15e4
--- /dev/null
+++ b/samples/inputs/textarea/slots/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/inputs/textarea/styling/.eslintrc.js b/samples/inputs/textarea/styling/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/inputs/textarea/styling/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/inputs/textarea/styling/README.md b/samples/inputs/textarea/styling/README.md
new file mode 100644
index 0000000000..b00ea4ed98
--- /dev/null
+++ b/samples/inputs/textarea/styling/README.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Overview feature using [Input](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/input/overview" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/input/overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/inputs/input/overview
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/inputs/textarea/styling/package.json b/samples/inputs/textarea/styling/package.json
new file mode 100644
index 0000000000..d11b4ecd94
--- /dev/null
+++ b/samples/inputs/textarea/styling/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "react-input-overview",
+  "description": "This project provides example of Input Overview using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.14.2",
+    "igniteui-react": "18.6.0",
+    "igniteui-react-core": "18.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/inputs/textarea/styling/public/index.html b/samples/inputs/textarea/styling/public/index.html
new file mode 100644
index 0000000000..ed6dfb0bf0
--- /dev/null
+++ b/samples/inputs/textarea/styling/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>TextAreaStyling</title>
+    <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/inputs/textarea/styling/sandbox.config.json b/samples/inputs/textarea/styling/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/inputs/textarea/styling/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
\ No newline at end of file
diff --git a/samples/inputs/textarea/styling/src/index.css b/samples/inputs/textarea/styling/src/index.css
new file mode 100644
index 0000000000..a6c1150f22
--- /dev/null
+++ b/samples/inputs/textarea/styling/src/index.css
@@ -0,0 +1,17 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+igc-textarea::part(input) {
+    background-color: rgb(169, 214, 229);
+    border-color: rgb(42, 111, 151);
+}
+
+igc-textarea::part(label) {
+    color: rgb(1, 42, 74);
+}
+
+igc-textarea::part(prefix),
+igc-textarea::part(suffix) {
+    color: white;
+    border-color: rgb(42, 111, 151);
+    background-color: rgb(70, 143, 175);
+}
diff --git a/samples/inputs/textarea/styling/src/index.tsx b/samples/inputs/textarea/styling/src/index.tsx
new file mode 100644
index 0000000000..213582950a
--- /dev/null
+++ b/samples/inputs/textarea/styling/src/index.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrTextarea, IgrTextareaModule, IgrIcon, IgrIconModule } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+IgrTextareaModule.register();
+IgrIconModule.register();
+
+export default class TextAreaStyling extends React.Component<any, any> {
+
+    constructor(props: any) {
+        super(props);     
+    }
+
+    public render(): JSX.Element {
+        return (
+            <div className="sample">
+                <IgrTextarea label="Steps to reproduce">
+                    <span slot="prefix">
+                    <IgrIcon ref={this.iconRef} name='feedback' collection="material"></IgrIcon>
+                    </span>                    
+                    <p slot="helper-text">Provide a detailed description of the steps that led to the issue you experienced</p>
+                </IgrTextarea>
+            </div>
+        );
+        
+    }      
+
+    public iconRef(icon: IgrIcon){
+        if(!icon){
+            return;
+        }
+
+        icon.registerIconFromText( "feedback",
+        `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-360q17 0 28.5-11.5T520-400q0-17-11.5-28.5T480-440q-17 0-28.5 11.5T440-400q0 17 11.5 28.5T480-360Zm-40-160h80v-240h-80v240ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/></svg>`,
+        "material");    
+    } 
+}
+
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<TextAreaStyling/>);
diff --git a/samples/inputs/textarea/styling/src/react-app-env.d.ts b/samples/inputs/textarea/styling/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/inputs/textarea/styling/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/inputs/textarea/styling/tsconfig.json b/samples/inputs/textarea/styling/tsconfig.json
new file mode 100644
index 0000000000..8f5c3b15e4
--- /dev/null
+++ b/samples/inputs/textarea/styling/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}

From 109c985ab1b377c992dbe2a9a235582c772afb76 Mon Sep 17 00:00:00 2001
From: RivaIvanova <ivanova.riva@gmail.com>
Date: Mon, 3 Jun 2024 12:33:04 +0300
Subject: [PATCH 05/12] feat(tree-grid-toolbar): add features sample

---
 .../data-exporting-indicator/package.json     |  14 +-
 .../tree-grid/toolbar-sample-2/.eslintrc.js   |  76 +++++++
 .../tree-grid/toolbar-sample-2/package.json   |  49 +++++
 .../toolbar-sample-2/public/index.html        |  11 +
 .../toolbar-sample-2/sandbox.config.json      |   5 +
 .../src/EmployeesFlatAvatars.ts               | 205 ++++++++++++++++++
 .../tree-grid/toolbar-sample-2/src/index.css  |  16 ++
 .../tree-grid/toolbar-sample-2/src/index.tsx  | 128 +++++++++++
 .../toolbar-sample-2/src/react-app-env.d.ts   |   1 +
 .../tree-grid/toolbar-sample-2/tsconfig.json  |  45 ++++
 .../tree-grid/toolbar-sample-4/package.json   |  14 +-
 11 files changed, 550 insertions(+), 14 deletions(-)
 create mode 100644 samples/grids/tree-grid/toolbar-sample-2/.eslintrc.js
 create mode 100644 samples/grids/tree-grid/toolbar-sample-2/package.json
 create mode 100644 samples/grids/tree-grid/toolbar-sample-2/public/index.html
 create mode 100644 samples/grids/tree-grid/toolbar-sample-2/sandbox.config.json
 create mode 100644 samples/grids/tree-grid/toolbar-sample-2/src/EmployeesFlatAvatars.ts
 create mode 100644 samples/grids/tree-grid/toolbar-sample-2/src/index.css
 create mode 100644 samples/grids/tree-grid/toolbar-sample-2/src/index.tsx
 create mode 100644 samples/grids/tree-grid/toolbar-sample-2/src/react-app-env.d.ts
 create mode 100644 samples/grids/tree-grid/toolbar-sample-2/tsconfig.json

diff --git a/samples/grids/tree-grid/data-exporting-indicator/package.json b/samples/grids/tree-grid/data-exporting-indicator/package.json
index 64bed6f1bd..00232b6565 100644
--- a/samples/grids/tree-grid/data-exporting-indicator/package.json
+++ b/samples/grids/tree-grid/data-exporting-indicator/package.json
@@ -15,13 +15,13 @@
   },
   "dependencies": {
     "igniteui-dockmanager": "1.14.3",
-    "igniteui-react": "18.6.0",
-    "igniteui-react-core": "18.6.0",
-    "igniteui-react-datasources": "18.6.0",
-    "igniteui-react-grids": "18.6.0",
-    "igniteui-react-inputs": "18.6.0",
-    "igniteui-react-layouts": "18.6.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-react": "18.6.1-alpha.0",
+    "igniteui-react-core": "18.6.1-alpha.0",
+    "igniteui-react-datasources": "18.6.1-alpha.0",
+    "igniteui-react-grids": "18.6.1-alpha.0",
+    "igniteui-react-inputs": "18.6.1-alpha.0",
+    "igniteui-react-layouts": "18.6.1-alpha.0",
+    "igniteui-webcomponents": "4.9.0",
     "lit-html": "^2.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/samples/grids/tree-grid/toolbar-sample-2/.eslintrc.js b/samples/grids/tree-grid/toolbar-sample-2/.eslintrc.js
new file mode 100644
index 0000000000..9d283f6407
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-2/.eslintrc.js
@@ -0,0 +1,76 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-sample-2/package.json b/samples/grids/tree-grid/toolbar-sample-2/package.json
new file mode 100644
index 0000000000..00232b6565
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-2/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.14.3",
+    "igniteui-react": "18.6.1-alpha.0",
+    "igniteui-react-core": "18.6.1-alpha.0",
+    "igniteui-react-datasources": "18.6.1-alpha.0",
+    "igniteui-react-grids": "18.6.1-alpha.0",
+    "igniteui-react-inputs": "18.6.1-alpha.0",
+    "igniteui-react-layouts": "18.6.1-alpha.0",
+    "igniteui-webcomponents": "4.9.0",
+    "lit-html": "^2.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/grids/tree-grid/toolbar-sample-2/public/index.html b/samples/grids/tree-grid/toolbar-sample-2/public/index.html
new file mode 100644
index 0000000000..e2d3265576
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-2/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/react.png" >
+    <link rel="stylesheet"    href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-sample-2/sandbox.config.json b/samples/grids/tree-grid/toolbar-sample-2/sandbox.config.json
new file mode 100644
index 0000000000..07f53508eb
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-2/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-sample-2/src/EmployeesFlatAvatars.ts b/samples/grids/tree-grid/toolbar-sample-2/src/EmployeesFlatAvatars.ts
new file mode 100644
index 0000000000..8579dedcc8
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-2/src/EmployeesFlatAvatars.ts
@@ -0,0 +1,205 @@
+export class EmployeesFlatAvatarsItem {
+    public constructor(init: Partial<EmployeesFlatAvatarsItem>) {
+        Object.assign(this, init);
+    }
+    
+    public Age: number;
+    public Avatar: string;
+    public HireDate: string;
+    public ID: number;
+    public Name: string;
+    public ParentID: number;
+    public Title: string;
+
+}
+export class EmployeesFlatAvatars extends Array<EmployeesFlatAvatarsItem> {
+    public constructor(items: Array<EmployeesFlatAvatarsItem> | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 55,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`,
+                    HireDate: `2008-03-20`,
+                    ID: 1,
+                    Name: `Johnathan Winchester`,
+                    ParentID: -1,
+                    Title: `Development Manager`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 42,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`,
+                    HireDate: `2014-01-22`,
+                    ID: 4,
+                    Name: `Ana Sanders`,
+                    ParentID: -1,
+                    Title: `CEO`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 49,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`,
+                    HireDate: `2014-01-22`,
+                    ID: 18,
+                    Name: `Victoria Lincoln`,
+                    ParentID: -1,
+                    Title: `Accounting Manager`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 61,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/4.jpg`,
+                    HireDate: `2010-01-01`,
+                    ID: 10,
+                    Name: `Yang Wang`,
+                    ParentID: -1,
+                    Title: `Localization Manager`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 43,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/1.jpg`,
+                    HireDate: `2011-06-03`,
+                    ID: 3,
+                    Name: `Michael Burke`,
+                    ParentID: 1,
+                    Title: `Senior Software Developer`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 29,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`,
+                    HireDate: `2009-06-19`,
+                    ID: 2,
+                    Name: `Thomas Anderson`,
+                    ParentID: 1,
+                    Title: `Senior Software Developer`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 31,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/women/3.jpg`,
+                    HireDate: `2014-08-18`,
+                    ID: 11,
+                    Name: `Monica Reyes`,
+                    ParentID: 1,
+                    Title: `Software Development Team Lead`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 35,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`,
+                    HireDate: `2015-09-17`,
+                    ID: 6,
+                    Name: `Roland Mendel`,
+                    ParentID: 11,
+                    Title: `Senior Software Developer`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 44,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/6.jpg`,
+                    HireDate: `2009-10-11`,
+                    ID: 12,
+                    Name: `Sven Cooper`,
+                    ParentID: 11,
+                    Title: `Senior Software Developer`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 44,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/7.jpg`,
+                    HireDate: `2014-04-04`,
+                    ID: 14,
+                    Name: `Laurence Johnson`,
+                    ParentID: 4,
+                    Title: `Director`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 25,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`,
+                    HireDate: `2017-11-09`,
+                    ID: 5,
+                    Name: `Elizabeth Richards`,
+                    ParentID: 4,
+                    Title: `Vice President`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 39,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`,
+                    HireDate: `2010-03-22`,
+                    ID: 13,
+                    Name: `Trevor Ashworth`,
+                    ParentID: 5,
+                    Title: `Director`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 44,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`,
+                    HireDate: `2014-04-04`,
+                    ID: 17,
+                    Name: `Antonio Moreno`,
+                    ParentID: 18,
+                    Title: `Senior Accountant`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 50,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`,
+                    HireDate: `2007-11-18`,
+                    ID: 7,
+                    Name: `Pedro Rodriguez`,
+                    ParentID: 10,
+                    Title: `Senior Localization Developer`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 27,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/women/5.jpg`,
+                    HireDate: `2016-02-19`,
+                    ID: 8,
+                    Name: `Casey Harper`,
+                    ParentID: 10,
+                    Title: `Senior Localization Developer`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 25,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`,
+                    HireDate: `2017-11-09`,
+                    ID: 15,
+                    Name: `Patricia Simpson`,
+                    ParentID: 7,
+                    Title: `Localization Intern`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 39,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`,
+                    HireDate: `2010-03-22`,
+                    ID: 9,
+                    Name: `Francisco Chang`,
+                    ParentID: 7,
+                    Title: `Localization Intern`
+                }),
+                new EmployeesFlatAvatarsItem(
+                {
+                    Age: 25,
+                    Avatar: `https://static.infragistics.com/xplatform/images/people/men/27.jpg`,
+                    HireDate: `2018-03-18`,
+                    ID: 16,
+                    Name: `Peter Lewis`,
+                    ParentID: 7,
+                    Title: `Localization Intern`
+                }),
+            ];
+            super(...(newItems.slice(0, items)));
+        }
+    }
+}
diff --git a/samples/grids/tree-grid/toolbar-sample-2/src/index.css b/samples/grids/tree-grid/toolbar-sample-2/src/index.css
new file mode 100644
index 0000000000..98b81be55e
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-2/src/index.css
@@ -0,0 +1,16 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
+.cell__inner {
+    display: flex;
+    align-items: center;
+}
+
+.name {
+    margin-left: 30px;
+}
+
+.control_panel {
+    width: 700px;
+    margin-bottom: 10px;
+}
\ No newline at end of file
diff --git a/samples/grids/tree-grid/toolbar-sample-2/src/index.tsx b/samples/grids/tree-grid/toolbar-sample-2/src/index.tsx
new file mode 100644
index 0000000000..f798169145
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-2/src/index.tsx
@@ -0,0 +1,128 @@
+import React, { useRef } from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+
+import {
+  IgrCellTemplateContext,
+  IgrGridToolbar,
+  IgrGridToolbarActions,
+  IgrGridToolbarAdvancedFiltering,
+  IgrGridToolbarExporter,
+  IgrGridToolbarHiding,
+  IgrGridToolbarPinning,
+  IgrGridToolbarTitle,
+  IgrTreeGrid,
+  IgrTreeGridModule,
+} from "igniteui-react-grids";
+import { IgrColumn } from "igniteui-react-grids";
+import { IgrAvatar, IgrAvatarModule, IgrComponentValueChangedEventArgs, IgrInput, IgrInputModule, IgrSwitch, IgrSwitchModule } from "igniteui-react";
+
+import "igniteui-react-grids/grids/combined";
+import "igniteui-react-grids/grids/themes/light/bootstrap.css";
+
+import { EmployeesFlatAvatars } from "./EmployeesFlatAvatars";
+
+IgrTreeGridModule.register();
+IgrAvatarModule.register();
+IgrSwitchModule.register();
+IgrInputModule.register();
+
+export default function App() {
+  const employeesData = new EmployeesFlatAvatars();
+  const treeGridRef = useRef<IgrTreeGrid>(null);
+
+  function webTreeGridAvatarCellTemplate(props: {
+    dataContext: IgrCellTemplateContext;
+  }) {
+    return (
+      <div className="cell__inner">
+        <IgrAvatar
+          shape="circle"
+          src={props.dataContext.cell.row.data.Avatar}
+        ></IgrAvatar>
+        <span className="name">{props.dataContext.cell.value}</span>
+      </div>
+    );
+  }
+
+  const spanRef = useRef(null);
+
+  const changeTitle = (input: IgrInput, event: IgrComponentValueChangedEventArgs) => {
+    spanRef.current.innerText = event.detail;
+  }
+
+  const enableFiltering = (switchComponent: IgrSwitch) => {
+    const toolbarFiltering = document.getElementsByTagName('igc-grid-toolbar-advanced-filtering')[0] as any;
+    toolbarFiltering.hidden = !switchComponent.checked;
+  };
+
+  const enableHiding = (switchComponent: IgrSwitch) => {
+    const toolbarHiding = document.getElementsByTagName('igc-grid-toolbar-hiding')[0] as any;
+    toolbarHiding.hidden = !switchComponent.checked;
+  };
+
+  const enablePinning = (switchComponent: IgrSwitch) => {
+    const toolbarPinning = document.getElementsByTagName('igc-grid-toolbar-pinning')[0] as any;
+    toolbarPinning.hidden = !switchComponent.checked;
+  };
+
+  const enableExport = (switchComponent: IgrSwitch) => {
+    const toolbarExporter = document.getElementsByTagName('igc-grid-toolbar-exporter')[0] as any;
+    toolbarExporter.hidden = !switchComponent.checked;
+  };
+
+  return (
+    <div className="container sample ig-typography">
+      <div className="container fill">
+        <div className="control_panel">
+          <IgrInput inputOcurred={changeTitle} type="text" label="Toolbar title" value="Tree grid toolbar" />
+          <IgrSwitch change={enableFiltering} checked>
+            <span key="filtering">Advanced Filtering</span>
+          </IgrSwitch>
+          <IgrSwitch change={enableHiding} checked>
+            <span key="hiding">Column hiding</span>
+          </IgrSwitch>
+          <IgrSwitch change={enablePinning} checked>
+            <span key="pinning">Column pinning</span>
+          </IgrSwitch>
+          <IgrSwitch change={enableExport} checked>
+            <span key="exporting">Exporting</span>
+          </IgrSwitch>
+        </div>
+
+        <IgrTreeGrid
+          autoGenerate="false"
+          ref={treeGridRef}
+          data={employeesData}
+          primaryKey="ID"
+          foreignKey="ParentID"
+        >
+          <IgrGridToolbar key="toolbar">
+            <IgrGridToolbarTitle key="toolbarTitle">
+              <span key="toolbarTitleText" ref={spanRef}>Tree grid toolbar</span>
+            </IgrGridToolbarTitle>
+            <IgrGridToolbarActions key="toolbarActions">
+              <IgrGridToolbarAdvancedFiltering key="toolbarFiltering"></IgrGridToolbarAdvancedFiltering>
+              <IgrGridToolbarHiding key="toolbarHiding"></IgrGridToolbarHiding>
+              <IgrGridToolbarPinning key="toolbarPinning"></IgrGridToolbarPinning>
+              <IgrGridToolbarExporter key="toolbarExporter"></IgrGridToolbarExporter>
+            </IgrGridToolbarActions>
+          </IgrGridToolbar>
+          <IgrColumn
+            field="Name"
+            dataType="string"
+            bodyTemplate={webTreeGridAvatarCellTemplate}
+          ></IgrColumn>
+          <IgrColumn field="Title" dataType="string"></IgrColumn>
+          <IgrColumn field="ID" dataType="number"></IgrColumn>
+          <IgrColumn field="Age" dataType="number"></IgrColumn>
+          <IgrColumn field="HireDate" dataType="date"></IgrColumn>
+        </IgrTreeGrid>
+      </div>
+    </div>
+  );
+}
+
+// rendering above component in the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<App />);
diff --git a/samples/grids/tree-grid/toolbar-sample-2/src/react-app-env.d.ts b/samples/grids/tree-grid/toolbar-sample-2/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-2/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/grids/tree-grid/toolbar-sample-2/tsconfig.json b/samples/grids/tree-grid/toolbar-sample-2/tsconfig.json
new file mode 100644
index 0000000000..42c6ace1da
--- /dev/null
+++ b/samples/grids/tree-grid/toolbar-sample-2/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/grids/tree-grid/toolbar-sample-4/package.json b/samples/grids/tree-grid/toolbar-sample-4/package.json
index 64bed6f1bd..00232b6565 100644
--- a/samples/grids/tree-grid/toolbar-sample-4/package.json
+++ b/samples/grids/tree-grid/toolbar-sample-4/package.json
@@ -15,13 +15,13 @@
   },
   "dependencies": {
     "igniteui-dockmanager": "1.14.3",
-    "igniteui-react": "18.6.0",
-    "igniteui-react-core": "18.6.0",
-    "igniteui-react-datasources": "18.6.0",
-    "igniteui-react-grids": "18.6.0",
-    "igniteui-react-inputs": "18.6.0",
-    "igniteui-react-layouts": "18.6.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-react": "18.6.1-alpha.0",
+    "igniteui-react-core": "18.6.1-alpha.0",
+    "igniteui-react-datasources": "18.6.1-alpha.0",
+    "igniteui-react-grids": "18.6.1-alpha.0",
+    "igniteui-react-inputs": "18.6.1-alpha.0",
+    "igniteui-react-layouts": "18.6.1-alpha.0",
+    "igniteui-webcomponents": "4.9.0",
     "lit-html": "^2.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

From 216d6de069d8444e46cb2b5655d48b7642a48feb Mon Sep 17 00:00:00 2001
From: Ivan Kitanov <IKitanov@infragistics.com>
Date: Tue, 4 Jun 2024 12:04:11 +0300
Subject: [PATCH 06/12] Update the sample to add child rows as well as updating
 package.json

---
 .../grids/tree-grid/row-drag-base/package.json   | 12 ++++++------
 .../grids/tree-grid/row-drag-base/src/index.tsx  | 16 +++++++++++++---
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/samples/grids/tree-grid/row-drag-base/package.json b/samples/grids/tree-grid/row-drag-base/package.json
index 64bed6f1bd..3672a6ebc0 100644
--- a/samples/grids/tree-grid/row-drag-base/package.json
+++ b/samples/grids/tree-grid/row-drag-base/package.json
@@ -15,12 +15,12 @@
   },
   "dependencies": {
     "igniteui-dockmanager": "1.14.3",
-    "igniteui-react": "18.6.0",
-    "igniteui-react-core": "18.6.0",
-    "igniteui-react-datasources": "18.6.0",
-    "igniteui-react-grids": "18.6.0",
-    "igniteui-react-inputs": "18.6.0",
-    "igniteui-react-layouts": "18.6.0",
+    "igniteui-react": "18.6.1-alpha.0",
+    "igniteui-react-core": "18.6.1-alpha.0",
+    "igniteui-react-datasources": "18.6.1-alpha.0",
+    "igniteui-react-grids": "18.6.1-alpha.0",
+    "igniteui-react-inputs": "18.6.1-alpha.0",
+    "igniteui-react-layouts": "18.6.1-alpha.0",
     "igniteui-webcomponents": "4.7.0",
     "lit-html": "^2.2.0",
     "react": "^18.2.0",
diff --git a/samples/grids/tree-grid/row-drag-base/src/index.tsx b/samples/grids/tree-grid/row-drag-base/src/index.tsx
index 3cefa8ca47..ab5b2f7e6a 100644
--- a/samples/grids/tree-grid/row-drag-base/src/index.tsx
+++ b/samples/grids/tree-grid/row-drag-base/src/index.tsx
@@ -9,7 +9,7 @@ import {
   IgrTreeGrid,
   IgrColumn,
 } from "igniteui-react-grids";
-import { EmployeesNestedTreeData } from "./EmployeesNestedTreeData";
+import { EmployeesNestedTreeData, EmployeesNestedTreeDataItem } from "./EmployeesNestedTreeData";
 
 import "igniteui-react-grids/grids/combined";
 import "igniteui-react-grids/grids/themes/light/bootstrap.css";
@@ -21,6 +21,13 @@ export default function App() {
   const treeGridRef = useRef<IgrTreeGrid>(null);
   const treeGridRef2 = useRef<IgrTreeGrid>(null);
 
+   // Recursive function to add the row and its children
+  function addRowAndChildren(row:EmployeesNestedTreeDataItem, newData:EmployeesNestedTreeDataItem[]) {
+    newData.push(row);
+    const children = employeesData.filter(emp => emp.ParentID === row.ID);
+    children.forEach(child => addRowAndChildren(child, newData));
+  }
+
   function RowDragEnd(grid: IgrTreeGrid, evt: any) {
     const grid2 = treeGridRef2.current;
     const ghostElement = evt.detail.dragDirective.ghostElement;
@@ -31,8 +38,11 @@ export default function App() {
       const withinXBounds = dragElementPos.x >= gridPosition.x && dragElementPos.x <= gridPosition.x + gridPosition.width;
       const withinYBounds = dragElementPos.y >= gridPosition.y && dragElementPos.y <= gridPosition.y + gridPosition.height;
       if (withinXBounds && withinYBounds) {
-        console.log(evt.detail.dragData.data.ParentID);
-        treeGridRef2.current.addRow(evt.detail.dragData.data, null);        
+        
+        const newData = [...grid2.data];
+        const draggedRowData = evt.detail.dragData.data;
+        addRowAndChildren(draggedRowData, newData);
+        grid2.data = newData;
       }
     }
   }

From b16b8e2692f4bff9be9873b88e61aeff6214ddc3 Mon Sep 17 00:00:00 2001
From: Ivan Kitanov <IKitanov@infragistics.com>
Date: Tue, 4 Jun 2024 15:36:35 +0300
Subject: [PATCH 07/12] Modyfind the addition of rows so that no row is added
 more than once

---
 samples/grids/tree-grid/row-drag-base/src/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/samples/grids/tree-grid/row-drag-base/src/index.tsx b/samples/grids/tree-grid/row-drag-base/src/index.tsx
index ab5b2f7e6a..b791725ca2 100644
--- a/samples/grids/tree-grid/row-drag-base/src/index.tsx
+++ b/samples/grids/tree-grid/row-drag-base/src/index.tsx
@@ -23,6 +23,9 @@ export default function App() {
 
    // Recursive function to add the row and its children
   function addRowAndChildren(row:EmployeesNestedTreeDataItem, newData:EmployeesNestedTreeDataItem[]) {
+    if(newData.includes(row)){
+      return;
+    }
     newData.push(row);
     const children = employeesData.filter(emp => emp.ParentID === row.ID);
     children.forEach(child => addRowAndChildren(child, newData));

From 20ca3acb0c5883929668a02ab3f17eb89c03dc96 Mon Sep 17 00:00:00 2001
From: RivaIvanova <ivanova.riva@gmail.com>
Date: Wed, 5 Jun 2024 09:00:05 +0300
Subject: [PATCH 08/12] chore(tree-grid): address comments

---
 .../tree-grid/data-searching/package.json     | 10 +----
 .../tree-grid/data-searching/src/index.tsx    | 37 +++++++++++++------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/samples/grids/tree-grid/data-searching/package.json b/samples/grids/tree-grid/data-searching/package.json
index 231a4a5987..b3c327cfe1 100644
--- a/samples/grids/tree-grid/data-searching/package.json
+++ b/samples/grids/tree-grid/data-searching/package.json
@@ -14,14 +14,8 @@
     "lint": "eslint ./src/**/*.{ts,tsx}"
   },
   "dependencies": {
-    "igniteui-dockmanager": "1.14.2",
-    "igniteui-react": "18.6.0",
-    "igniteui-react-core": "18.6.0",
-    "igniteui-react-datasources": "18.6.0",
-    "igniteui-react-grids": "18.6.0",
-    "igniteui-react-inputs": "18.6.0",
-    "igniteui-react-layouts": "18.6.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-react": "18.6.1-alpha.0",
+    "igniteui-react-grids": "18.6.1-alpha.0",
     "lit-html": "^2.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/samples/grids/tree-grid/data-searching/src/index.tsx b/samples/grids/tree-grid/data-searching/src/index.tsx
index b90a58b61d..205495698a 100644
--- a/samples/grids/tree-grid/data-searching/src/index.tsx
+++ b/samples/grids/tree-grid/data-searching/src/index.tsx
@@ -22,6 +22,8 @@ import {
 const mods: any[] = [IgrTreeGridModule, IgrChipModule, IgrIconButtonModule, IgrInputModule];
 mods.forEach((m) => m.register());
 
+const searchIconText =
+  "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' /></svg>";
 const prevIconText =
   "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'></path></svg>";
 const nextIconText =
@@ -33,6 +35,7 @@ const data = new EmployeesFlatData();
 
 export default function Sample() {
   const gridRef = useRef<IgrTreeGrid>(null);
+  const searchIconRef = useRef<IgrIconButton>(null);
   const clearIconRef = useRef<IgrIconButton>(null);
   const iconButtonNextRef = useRef<IgrIconButton>(null);
   const iconButtonPrevRef = useRef<IgrIconButton>(null);
@@ -42,8 +45,9 @@ export default function Sample() {
   const [searchText, setSearchText] = useState('')
 
   useEffect(() => {
-    if (clearIconRef?.current) {
-      clearIconRef.current.registerIconFromText("clear", clearIconText, "material");
+    if (searchIconRef?.current) {
+      searchIconRef.current.registerIconFromText("search", searchIconText, "material");
+      searchIconRef.current.registerIconFromText("clear", clearIconText, "material");
     }
     if (iconButtonPrevRef?.current) {
       iconButtonPrevRef.current.registerIconFromText("prev", prevIconText,"material");
@@ -96,15 +100,26 @@ export default function Sample() {
           <IgrInput name="searchBox" value={searchText} inputOcurred={handleOnSearchChange}>
 
             <div slot="prefix" key="prefix">
-              <IgrIconButton
-                key="clearIcon"
-                ref={clearIconRef}
-                variant="flat"
-                name="clear"
-                collection="material"
-                clicked={clearSearch}
-              ></IgrIconButton>
+              {searchText.length === 0 ? (
+                <IgrIconButton
+                  key="searchIcon"
+                  ref={searchIconRef} 
+                  variant="flat"
+                  name="search" 
+                  collection="material"
+                ></IgrIconButton>
+              ) : (
+                <IgrIconButton
+                  key="clearIcon"
+                  ref={clearIconRef}
+                  variant="flat"
+                  name="clear"
+                  collection="material"
+                  clicked={clearSearch}
+                ></IgrIconButton>
+              )}
             </div>
+            
             <div slot="suffix" key="chipSuffix">
               <IgrChip ref={caseSensitiveChipRef} key="caseSensitiveChip" selectable="true" select={handleCaseSensitiveChange}>
                 <span key="caseSensitive">Case Sensitive</span>
@@ -134,7 +149,7 @@ export default function Sample() {
           </IgrInput>
         </div>
         <IgrTreeGrid ref={gridRef} data={data} autoGenerate="false" 
-          primaryKey="ID" foreignKey="ParentID" allowFiltering="true" height="480px"
+          primaryKey="ID" foreignKey="ParentID" allowFiltering="true" height="100%" width="100%"
         >
           <IgrColumn field="Name" dataType="string" sortable="true"></IgrColumn>        
           <IgrColumn field="ID" dataType="number" sortable="true"></IgrColumn>        

From 70cec60da2b6ab7d48b9c31e5f04d4780c823632 Mon Sep 17 00:00:00 2001
From: Borislav Traykov <btraykov@infragistics.com>
Date: Wed, 5 Jun 2024 20:53:11 +0300
Subject: [PATCH 09/12] Add optional - turned on by default - post-build
 cleanup (#517)

Co-authored-by: HUSSAR-mtrela (Martin Trela) <HUSSAR-mtrela@users.noreply.github.com>
---
 azure-pipelines/build-pipeline.yml | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/azure-pipelines/build-pipeline.yml b/azure-pipelines/build-pipeline.yml
index c55259d1c0..57bed62cbc 100644
--- a/azure-pipelines/build-pipeline.yml
+++ b/azure-pipelines/build-pipeline.yml
@@ -11,6 +11,10 @@ parameters:
   displayName: 'Get verbose output from steps - where configurable'
   type: boolean
   default: false
+- name: shouldCleanPostExectuion
+  displayName: 'Clean all pipeline dirs after the pipeline finishes?'
+  type: boolean
+  default: true
 
 name: $(BuildDefinitionName)_$(Year:yyyy).$(Month).$(DayOfMonth)$(Rev:.r)
 
@@ -133,3 +137,6 @@ stages:
         inputs:
           targetPath: '$(Build.ArtifactStagingDirectory)/ReactSamples.zip'
           artifact: 'ReactSamplesBrowser'
+
+      - ${{ if eq(parameters.shouldCleanPostExectuion, true) }}:
+        - task: PostBuildCleanup@4
\ No newline at end of file

From 4c5b03ad60dc0a21b6b4f312b250a0f8f925ae46 Mon Sep 17 00:00:00 2001
From: "HUSSAR-mtrela (Martin Trela)" <HUSSAR-mtrela@users.noreply.github.com>
Date: Wed, 5 Jun 2024 18:45:00 -0400
Subject: [PATCH 10/12] export-samples (#563)

---
 .../.eslintrc.js                              |  76 ++++++++++
 .../package.json                              |  45 ++++++
 .../public/index.html                         |  11 ++
 .../sandbox.config.json                       |   5 +
 .../OlympicMedalsTopCountriesWithTotals.ts    |  92 ++++++++++++
 .../src/index.css                             |   2 +
 .../src/index.tsx                             | 142 ++++++++++++++++++
 .../src/react-app-env.d.ts                    |   1 +
 .../tsconfig.json                             |  45 ++++++
 .../data-legend-grouping/.eslintrc.js         |  76 ++++++++++
 .../data-legend-grouping/package.json         |  45 ++++++
 .../data-legend-grouping/public/index.html    |  11 ++
 .../data-legend-grouping/sandbox.config.json  |   5 +
 .../OlympicMedalsTopCountriesWithTotals.ts    |  92 ++++++++++++
 .../data-legend-grouping/src/index.css        |   2 +
 .../data-legend-grouping/src/index.tsx        | 130 ++++++++++++++++
 .../src/react-app-env.d.ts                    |   1 +
 .../data-legend-grouping/tsconfig.json        |  45 ++++++
 .../data-legend-styling/.eslintrc.js          |  76 ++++++++++
 .../data-legend-styling/package.json          |  45 ++++++
 .../data-legend-styling/public/index.html     |  11 ++
 .../data-legend-styling/sandbox.config.json   |   5 +
 .../OlympicMedalsTopCountriesWithTotals.ts    |  92 ++++++++++++
 .../data-legend-styling/src/index.css         |   2 +
 .../data-legend-styling/src/index.tsx         | 124 +++++++++++++++
 .../src/react-app-env.d.ts                    |   1 +
 .../data-legend-styling/tsconfig.json         |  45 ++++++
 .../.eslintrc.js                              |  76 ++++++++++
 .../package.json                              |  47 ++++++
 .../public/index.html                         |  11 ++
 .../sandbox.config.json                       |   5 +
 .../OlympicMedalsTopCountriesWithTotals.ts    |  92 ++++++++++++
 .../src/index.css                             |   2 +
 .../src/index.tsx                             | 131 ++++++++++++++++
 .../src/react-app-env.d.ts                    |   1 +
 .../tsconfig.json                             |  45 ++++++
 .../data-tooltip-grouping/.eslintrc.js        |  76 ++++++++++
 .../data-tooltip-grouping/package.json        |  47 ++++++
 .../data-tooltip-grouping/public/index.html   |  11 ++
 .../data-tooltip-grouping/sandbox.config.json |   5 +
 .../OlympicMedalsTopCountriesWithTotals.ts    |  92 ++++++++++++
 .../data-tooltip-grouping/src/index.css       |   2 +
 .../data-tooltip-grouping/src/index.tsx       | 121 +++++++++++++++
 .../src/react-app-env.d.ts                    |   1 +
 .../data-tooltip-grouping/tsconfig.json       |  45 ++++++
 .../data-tooltip-styling/.eslintrc.js         |  76 ++++++++++
 .../data-tooltip-styling/package.json         |  47 ++++++
 .../data-tooltip-styling/public/index.html    |  11 ++
 .../data-tooltip-styling/sandbox.config.json  |   5 +
 .../OlympicMedalsTopCountriesWithTotals.ts    |  92 ++++++++++++
 .../data-tooltip-styling/src/index.css        |   2 +
 .../data-tooltip-styling/src/index.tsx        | 107 +++++++++++++
 .../src/react-app-env.d.ts                    |   1 +
 .../data-tooltip-styling/tsconfig.json        |  45 ++++++
 54 files changed, 2423 insertions(+)
 create mode 100644 samples/charts/data-chart/data-legend-grouping-and-highlighting/.eslintrc.js
 create mode 100644 samples/charts/data-chart/data-legend-grouping-and-highlighting/package.json
 create mode 100644 samples/charts/data-chart/data-legend-grouping-and-highlighting/public/index.html
 create mode 100644 samples/charts/data-chart/data-legend-grouping-and-highlighting/sandbox.config.json
 create mode 100644 samples/charts/data-chart/data-legend-grouping-and-highlighting/src/OlympicMedalsTopCountriesWithTotals.ts
 create mode 100644 samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.css
 create mode 100644 samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.tsx
 create mode 100644 samples/charts/data-chart/data-legend-grouping-and-highlighting/src/react-app-env.d.ts
 create mode 100644 samples/charts/data-chart/data-legend-grouping-and-highlighting/tsconfig.json
 create mode 100644 samples/charts/data-chart/data-legend-grouping/.eslintrc.js
 create mode 100644 samples/charts/data-chart/data-legend-grouping/package.json
 create mode 100644 samples/charts/data-chart/data-legend-grouping/public/index.html
 create mode 100644 samples/charts/data-chart/data-legend-grouping/sandbox.config.json
 create mode 100644 samples/charts/data-chart/data-legend-grouping/src/OlympicMedalsTopCountriesWithTotals.ts
 create mode 100644 samples/charts/data-chart/data-legend-grouping/src/index.css
 create mode 100644 samples/charts/data-chart/data-legend-grouping/src/index.tsx
 create mode 100644 samples/charts/data-chart/data-legend-grouping/src/react-app-env.d.ts
 create mode 100644 samples/charts/data-chart/data-legend-grouping/tsconfig.json
 create mode 100644 samples/charts/data-chart/data-legend-styling/.eslintrc.js
 create mode 100644 samples/charts/data-chart/data-legend-styling/package.json
 create mode 100644 samples/charts/data-chart/data-legend-styling/public/index.html
 create mode 100644 samples/charts/data-chart/data-legend-styling/sandbox.config.json
 create mode 100644 samples/charts/data-chart/data-legend-styling/src/OlympicMedalsTopCountriesWithTotals.ts
 create mode 100644 samples/charts/data-chart/data-legend-styling/src/index.css
 create mode 100644 samples/charts/data-chart/data-legend-styling/src/index.tsx
 create mode 100644 samples/charts/data-chart/data-legend-styling/src/react-app-env.d.ts
 create mode 100644 samples/charts/data-chart/data-legend-styling/tsconfig.json
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping-and-highlighting/.eslintrc.js
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping-and-highlighting/public/index.html
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping-and-highlighting/sandbox.config.json
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/OlympicMedalsTopCountriesWithTotals.ts
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.css
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.tsx
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/react-app-env.d.ts
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping-and-highlighting/tsconfig.json
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping/.eslintrc.js
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping/package.json
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping/public/index.html
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping/sandbox.config.json
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping/src/OlympicMedalsTopCountriesWithTotals.ts
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping/src/index.css
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping/src/index.tsx
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping/src/react-app-env.d.ts
 create mode 100644 samples/charts/data-chart/data-tooltip-grouping/tsconfig.json
 create mode 100644 samples/charts/data-chart/data-tooltip-styling/.eslintrc.js
 create mode 100644 samples/charts/data-chart/data-tooltip-styling/package.json
 create mode 100644 samples/charts/data-chart/data-tooltip-styling/public/index.html
 create mode 100644 samples/charts/data-chart/data-tooltip-styling/sandbox.config.json
 create mode 100644 samples/charts/data-chart/data-tooltip-styling/src/OlympicMedalsTopCountriesWithTotals.ts
 create mode 100644 samples/charts/data-chart/data-tooltip-styling/src/index.css
 create mode 100644 samples/charts/data-chart/data-tooltip-styling/src/index.tsx
 create mode 100644 samples/charts/data-chart/data-tooltip-styling/src/react-app-env.d.ts
 create mode 100644 samples/charts/data-chart/data-tooltip-styling/tsconfig.json

diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/.eslintrc.js b/samples/charts/data-chart/data-legend-grouping-and-highlighting/.eslintrc.js
new file mode 100644
index 0000000000..9d283f6407
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/.eslintrc.js
@@ -0,0 +1,76 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/package.json b/samples/charts/data-chart/data-legend-grouping-and-highlighting/package.json
new file mode 100644
index 0000000000..3c07396e45
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-react": "18.6.1-alpha.0",
+    "igniteui-react-charts": "18.6.1-alpha.0",
+    "igniteui-react-core": "18.6.1-alpha.0",
+    "igniteui-webcomponents": "4.9.0",
+    "lit-html": "^2.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/public/index.html b/samples/charts/data-chart/data-legend-grouping-and-highlighting/public/index.html
new file mode 100644
index 0000000000..e2d3265576
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/react.png" >
+    <link rel="stylesheet"    href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/sandbox.config.json b/samples/charts/data-chart/data-legend-grouping-and-highlighting/sandbox.config.json
new file mode 100644
index 0000000000..07f53508eb
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/OlympicMedalsTopCountriesWithTotals.ts b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/OlympicMedalsTopCountriesWithTotals.ts
new file mode 100644
index 0000000000..63183e6f07
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/OlympicMedalsTopCountriesWithTotals.ts
@@ -0,0 +1,92 @@
+export class OlympicMedalsTopCountriesWithTotalsItem {
+    public constructor(init: Partial<OlympicMedalsTopCountriesWithTotalsItem>) {
+        Object.assign(this, init);
+    }
+
+    public year: string;
+    public america: number;
+    public americaGold: number;
+    public china: number;
+    public chinaGold: number;
+    public russia: number;
+    public russiaGold: number;
+    public total: number;
+
+}
+export class OlympicMedalsTopCountriesWithTotals extends Array<OlympicMedalsTopCountriesWithTotalsItem> {
+    public constructor(items: Array<OlympicMedalsTopCountriesWithTotalsItem> | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `1996`,
+                    america: 148,
+                    americaGold: 50,
+                    china: 110,
+                    chinaGold: 40,
+                    russia: 95,
+                    russiaGold: 20,
+                    total: 353
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2000`,
+                    america: 142,
+                    americaGold: 40,
+                    china: 115,
+                    chinaGold: 45,
+                    russia: 91,
+                    russiaGold: 40,
+                    total: 348
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2004`,
+                    america: 134,
+                    americaGold: 35,
+                    china: 121,
+                    chinaGold: 55,
+                    russia: 86,
+                    russiaGold: 25,
+                    total: 341
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2008`,
+                    america: 131,
+                    americaGold: 20,
+                    china: 129,
+                    chinaGold: 35,
+                    russia: 65,
+                    russiaGold: 35,
+                    total: 325
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2012`,
+                    america: 135,
+                    americaGold: 25,
+                    china: 115,
+                    chinaGold: 50,
+                    russia: 77,
+                    russiaGold: 15,
+                    total: 327
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2016`,
+                    america: 146,
+                    americaGold: 45,
+                    china: 112,
+                    chinaGold: 45,
+                    russia: 88,
+                    russiaGold: 30,
+                    total: 346
+                }),
+            ];
+            super(...(newItems.slice(0, items)));
+        }
+    }
+}
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.css b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.css
new file mode 100644
index 0000000000..98682b8543
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.tsx b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.tsx
new file mode 100644
index 0000000000..92fa3b4797
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.tsx
@@ -0,0 +1,142 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+
+import { IgrLegendModule, IgrNumberAbbreviatorModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartInteractivityModule, IgrDataLegendModule, IgrDataChartAnnotationModule } from 'igniteui-react-charts';
+import { IgrDataLegend, IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrColumnSeries } from 'igniteui-react-charts';
+import { ComponentRenderer, LegendDescriptionModule, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataLegendDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-react-core';
+import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals';
+
+const mods: any[] = [
+    IgrLegendModule,
+    IgrNumberAbbreviatorModule,
+    IgrDataChartCoreModule,
+    IgrDataChartCategoryModule,
+    IgrDataChartInteractivityModule,
+    IgrDataLegendModule,
+    IgrDataChartAnnotationModule
+];
+mods.forEach((m) => m.register());
+
+export default class Sample extends React.Component<any, any> {
+    private legend: IgrDataLegend
+    private legendRef(r: IgrDataLegend) {
+        this.legend = r;
+        this.setState({});
+    }
+    private chart: IgrDataChart
+    private chartRef(r: IgrDataChart) {
+        this.chart = r;
+        this.setState({});
+    }
+    private xAxis: IgrCategoryXAxis
+    private yAxis: IgrNumericYAxis
+    private columnSeries1: IgrColumnSeries
+    private columnSeries2: IgrColumnSeries
+    private columnSeries3: IgrColumnSeries
+
+    constructor(props: any) {
+        super(props);
+
+        this.legendRef = this.legendRef.bind(this);
+        this.chartRef = this.chartRef.bind(this);
+    }
+
+    public render(): JSX.Element {
+        return (
+        <div className="container sample">
+
+            <div className="legend">
+                <IgrDataLegend
+                    ref={this.legendRef}
+                    target={this.chart}
+                    groupRowVisible="true">
+                </IgrDataLegend>
+            </div>
+
+            <div className="container fill">
+                <IgrDataChart
+                    shouldAutoExpandMarginForInitialLabels="true"
+                    computedPlotAreaMarginMode="Series"
+                    ref={this.chartRef}
+                    highlightedValuesDisplayMode="Overlay">
+                    <IgrCategoryXAxis
+                        name="xAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        label="year">
+                    </IgrCategoryXAxis>
+                    <IgrNumericYAxis
+                        name="yAxis">
+                    </IgrNumericYAxis>
+                    <IgrColumnSeries
+                        name="ColumnSeries1"
+                        xAxisName="xAxis"
+                        yAxisName="yAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        title="America"
+                        valueMemberPath="america"
+                        dataLegendGroup="Olympic Medals"
+                        highlightedValuesDataLegendGroup="Gold Medals"
+                        highlightedValueMemberPath="americaGold"
+                        highlightedTitleSuffix="">
+                    </IgrColumnSeries>
+                    <IgrColumnSeries
+                        name="ColumnSeries2"
+                        xAxisName="xAxis"
+                        yAxisName="yAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        title="China"
+                        valueMemberPath="china"
+                        dataLegendGroup="Olympic Medals"
+                        highlightedValuesDataLegendGroup="Gold Medals"
+                        highlightedValueMemberPath="chinaGold"
+                        highlightedTitleSuffix="">
+                    </IgrColumnSeries>
+                    <IgrColumnSeries
+                        name="ColumnSeries3"
+                        xAxisName="xAxis"
+                        yAxisName="yAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        title="Russia"
+                        valueMemberPath="russia"
+                        dataLegendGroup="Olympic Medals"
+                        highlightedValuesDataLegendGroup="Gold Medals"
+                        highlightedValueMemberPath="russiaGold"
+                        highlightedTitleSuffix="">
+                    </IgrColumnSeries>
+                </IgrDataChart>
+            </div>
+        </div>
+        );
+    }
+
+    private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null;
+    public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals {
+        if (this._olympicMedalsTopCountriesWithTotals == null)
+        {
+            this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals();
+        }
+        return this._olympicMedalsTopCountriesWithTotals;
+    }
+
+    private _componentRenderer: ComponentRenderer = null;
+    public get renderer(): ComponentRenderer {
+        if (this._componentRenderer == null) {
+            this._componentRenderer = new ComponentRenderer();
+            var context = this._componentRenderer.context;
+            LegendDescriptionModule.register(context);
+            NumberAbbreviatorDescriptionModule.register(context);
+            DataChartCoreDescriptionModule.register(context);
+            DataChartCategoryDescriptionModule.register(context);
+            DataChartInteractivityDescriptionModule.register(context);
+            DataLegendDescriptionModule.register(context);
+            DataChartAnnotationDescriptionModule.register(context);
+        }
+        return this._componentRenderer;
+    }
+
+}
+
+// rendering above component in the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Sample/>);
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/react-app-env.d.ts b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/tsconfig.json b/samples/charts/data-chart/data-legend-grouping-and-highlighting/tsconfig.json
new file mode 100644
index 0000000000..42c6ace1da
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/charts/data-chart/data-legend-grouping/.eslintrc.js b/samples/charts/data-chart/data-legend-grouping/.eslintrc.js
new file mode 100644
index 0000000000..9d283f6407
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping/.eslintrc.js
@@ -0,0 +1,76 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-grouping/package.json b/samples/charts/data-chart/data-legend-grouping/package.json
new file mode 100644
index 0000000000..3c07396e45
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-react": "18.6.1-alpha.0",
+    "igniteui-react-charts": "18.6.1-alpha.0",
+    "igniteui-react-core": "18.6.1-alpha.0",
+    "igniteui-webcomponents": "4.9.0",
+    "lit-html": "^2.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/charts/data-chart/data-legend-grouping/public/index.html b/samples/charts/data-chart/data-legend-grouping/public/index.html
new file mode 100644
index 0000000000..e2d3265576
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/react.png" >
+    <link rel="stylesheet"    href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-grouping/sandbox.config.json b/samples/charts/data-chart/data-legend-grouping/sandbox.config.json
new file mode 100644
index 0000000000..07f53508eb
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-grouping/src/OlympicMedalsTopCountriesWithTotals.ts b/samples/charts/data-chart/data-legend-grouping/src/OlympicMedalsTopCountriesWithTotals.ts
new file mode 100644
index 0000000000..63183e6f07
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping/src/OlympicMedalsTopCountriesWithTotals.ts
@@ -0,0 +1,92 @@
+export class OlympicMedalsTopCountriesWithTotalsItem {
+    public constructor(init: Partial<OlympicMedalsTopCountriesWithTotalsItem>) {
+        Object.assign(this, init);
+    }
+
+    public year: string;
+    public america: number;
+    public americaGold: number;
+    public china: number;
+    public chinaGold: number;
+    public russia: number;
+    public russiaGold: number;
+    public total: number;
+
+}
+export class OlympicMedalsTopCountriesWithTotals extends Array<OlympicMedalsTopCountriesWithTotalsItem> {
+    public constructor(items: Array<OlympicMedalsTopCountriesWithTotalsItem> | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `1996`,
+                    america: 148,
+                    americaGold: 50,
+                    china: 110,
+                    chinaGold: 40,
+                    russia: 95,
+                    russiaGold: 20,
+                    total: 353
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2000`,
+                    america: 142,
+                    americaGold: 40,
+                    china: 115,
+                    chinaGold: 45,
+                    russia: 91,
+                    russiaGold: 40,
+                    total: 348
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2004`,
+                    america: 134,
+                    americaGold: 35,
+                    china: 121,
+                    chinaGold: 55,
+                    russia: 86,
+                    russiaGold: 25,
+                    total: 341
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2008`,
+                    america: 131,
+                    americaGold: 20,
+                    china: 129,
+                    chinaGold: 35,
+                    russia: 65,
+                    russiaGold: 35,
+                    total: 325
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2012`,
+                    america: 135,
+                    americaGold: 25,
+                    china: 115,
+                    chinaGold: 50,
+                    russia: 77,
+                    russiaGold: 15,
+                    total: 327
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2016`,
+                    america: 146,
+                    americaGold: 45,
+                    china: 112,
+                    chinaGold: 45,
+                    russia: 88,
+                    russiaGold: 30,
+                    total: 346
+                }),
+            ];
+            super(...(newItems.slice(0, items)));
+        }
+    }
+}
diff --git a/samples/charts/data-chart/data-legend-grouping/src/index.css b/samples/charts/data-chart/data-legend-grouping/src/index.css
new file mode 100644
index 0000000000..98682b8543
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
diff --git a/samples/charts/data-chart/data-legend-grouping/src/index.tsx b/samples/charts/data-chart/data-legend-grouping/src/index.tsx
new file mode 100644
index 0000000000..1f2ff89981
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping/src/index.tsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+
+import { IgrLegendModule, IgrNumberAbbreviatorModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartInteractivityModule, IgrDataLegendModule, IgrDataChartAnnotationModule } from 'igniteui-react-charts';
+import { IgrDataLegend, IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrColumnSeries } from 'igniteui-react-charts';
+import { ComponentRenderer, LegendDescriptionModule, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataLegendDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-react-core';
+import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals';
+
+const mods: any[] = [
+    IgrLegendModule,
+    IgrNumberAbbreviatorModule,
+    IgrDataChartCoreModule,
+    IgrDataChartCategoryModule,
+    IgrDataChartInteractivityModule,
+    IgrDataLegendModule,
+    IgrDataChartAnnotationModule
+];
+mods.forEach((m) => m.register());
+
+export default class Sample extends React.Component<any, any> {
+    private legend: IgrDataLegend
+    private legendRef(r: IgrDataLegend) {
+        this.legend = r;
+        this.setState({});
+    }
+    private chart: IgrDataChart
+    private chartRef(r: IgrDataChart) {
+        this.chart = r;
+        this.setState({});
+    }
+    private xAxis: IgrCategoryXAxis
+    private yAxis: IgrNumericYAxis
+    private columnSeries1: IgrColumnSeries
+    private columnSeries2: IgrColumnSeries
+    private columnSeries3: IgrColumnSeries
+
+    constructor(props: any) {
+        super(props);
+
+        this.legendRef = this.legendRef.bind(this);
+        this.chartRef = this.chartRef.bind(this);
+    }
+
+    public render(): JSX.Element {
+        return (
+        <div className="container sample">
+
+            <div className="legend">
+                <IgrDataLegend
+                    ref={this.legendRef}
+                    target={this.chart}
+                    groupRowVisible="true">
+                </IgrDataLegend>
+            </div>
+
+            <div className="container fill">
+                <IgrDataChart
+                    ref={this.chartRef}>
+                    <IgrCategoryXAxis
+                        name="xAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        label="year">
+                    </IgrCategoryXAxis>
+                    <IgrNumericYAxis
+                        name="yAxis">
+                    </IgrNumericYAxis>
+                    <IgrColumnSeries
+                        name="ColumnSeries1"
+                        xAxisName="xAxis"
+                        yAxisName="yAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        title="America"
+                        valueMemberPath="america"
+                        dataLegendGroup="Medals by Country">
+                    </IgrColumnSeries>
+                    <IgrColumnSeries
+                        name="ColumnSeries2"
+                        xAxisName="xAxis"
+                        yAxisName="yAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        title="China"
+                        valueMemberPath="china"
+                        dataLegendGroup="Medals by Country">
+                    </IgrColumnSeries>
+                    <IgrColumnSeries
+                        name="ColumnSeries3"
+                        xAxisName="xAxis"
+                        yAxisName="yAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        title="Russia"
+                        valueMemberPath="russia"
+                        dataLegendGroup="Medals by Country">
+                    </IgrColumnSeries>
+                </IgrDataChart>
+            </div>
+        </div>
+        );
+    }
+
+    private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null;
+    public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals {
+        if (this._olympicMedalsTopCountriesWithTotals == null)
+        {
+            this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals();
+        }
+        return this._olympicMedalsTopCountriesWithTotals;
+    }
+
+    private _componentRenderer: ComponentRenderer = null;
+    public get renderer(): ComponentRenderer {
+        if (this._componentRenderer == null) {
+            this._componentRenderer = new ComponentRenderer();
+            var context = this._componentRenderer.context;
+            LegendDescriptionModule.register(context);
+            NumberAbbreviatorDescriptionModule.register(context);
+            DataChartCoreDescriptionModule.register(context);
+            DataChartCategoryDescriptionModule.register(context);
+            DataChartInteractivityDescriptionModule.register(context);
+            DataLegendDescriptionModule.register(context);
+            DataChartAnnotationDescriptionModule.register(context);
+        }
+        return this._componentRenderer;
+    }
+
+}
+
+// rendering above component in the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Sample/>);
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-grouping/src/react-app-env.d.ts b/samples/charts/data-chart/data-legend-grouping/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/charts/data-chart/data-legend-grouping/tsconfig.json b/samples/charts/data-chart/data-legend-grouping/tsconfig.json
new file mode 100644
index 0000000000..42c6ace1da
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-grouping/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/charts/data-chart/data-legend-styling/.eslintrc.js b/samples/charts/data-chart/data-legend-styling/.eslintrc.js
new file mode 100644
index 0000000000..9d283f6407
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-styling/.eslintrc.js
@@ -0,0 +1,76 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-styling/package.json b/samples/charts/data-chart/data-legend-styling/package.json
new file mode 100644
index 0000000000..3c07396e45
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-styling/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-react": "18.6.1-alpha.0",
+    "igniteui-react-charts": "18.6.1-alpha.0",
+    "igniteui-react-core": "18.6.1-alpha.0",
+    "igniteui-webcomponents": "4.9.0",
+    "lit-html": "^2.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/charts/data-chart/data-legend-styling/public/index.html b/samples/charts/data-chart/data-legend-styling/public/index.html
new file mode 100644
index 0000000000..e2d3265576
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-styling/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/react.png" >
+    <link rel="stylesheet"    href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-styling/sandbox.config.json b/samples/charts/data-chart/data-legend-styling/sandbox.config.json
new file mode 100644
index 0000000000..07f53508eb
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-styling/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-styling/src/OlympicMedalsTopCountriesWithTotals.ts b/samples/charts/data-chart/data-legend-styling/src/OlympicMedalsTopCountriesWithTotals.ts
new file mode 100644
index 0000000000..63183e6f07
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-styling/src/OlympicMedalsTopCountriesWithTotals.ts
@@ -0,0 +1,92 @@
+export class OlympicMedalsTopCountriesWithTotalsItem {
+    public constructor(init: Partial<OlympicMedalsTopCountriesWithTotalsItem>) {
+        Object.assign(this, init);
+    }
+
+    public year: string;
+    public america: number;
+    public americaGold: number;
+    public china: number;
+    public chinaGold: number;
+    public russia: number;
+    public russiaGold: number;
+    public total: number;
+
+}
+export class OlympicMedalsTopCountriesWithTotals extends Array<OlympicMedalsTopCountriesWithTotalsItem> {
+    public constructor(items: Array<OlympicMedalsTopCountriesWithTotalsItem> | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `1996`,
+                    america: 148,
+                    americaGold: 50,
+                    china: 110,
+                    chinaGold: 40,
+                    russia: 95,
+                    russiaGold: 20,
+                    total: 353
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2000`,
+                    america: 142,
+                    americaGold: 40,
+                    china: 115,
+                    chinaGold: 45,
+                    russia: 91,
+                    russiaGold: 40,
+                    total: 348
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2004`,
+                    america: 134,
+                    americaGold: 35,
+                    china: 121,
+                    chinaGold: 55,
+                    russia: 86,
+                    russiaGold: 25,
+                    total: 341
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2008`,
+                    america: 131,
+                    americaGold: 20,
+                    china: 129,
+                    chinaGold: 35,
+                    russia: 65,
+                    russiaGold: 35,
+                    total: 325
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2012`,
+                    america: 135,
+                    americaGold: 25,
+                    china: 115,
+                    chinaGold: 50,
+                    russia: 77,
+                    russiaGold: 15,
+                    total: 327
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2016`,
+                    america: 146,
+                    americaGold: 45,
+                    china: 112,
+                    chinaGold: 45,
+                    russia: 88,
+                    russiaGold: 30,
+                    total: 346
+                }),
+            ];
+            super(...(newItems.slice(0, items)));
+        }
+    }
+}
diff --git a/samples/charts/data-chart/data-legend-styling/src/index.css b/samples/charts/data-chart/data-legend-styling/src/index.css
new file mode 100644
index 0000000000..98682b8543
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-styling/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
diff --git a/samples/charts/data-chart/data-legend-styling/src/index.tsx b/samples/charts/data-chart/data-legend-styling/src/index.tsx
new file mode 100644
index 0000000000..cdc1503f77
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-styling/src/index.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+
+import { IgrLegendModule, IgrNumberAbbreviatorModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartInteractivityModule, IgrDataLegendModule, IgrDataChartAnnotationModule } from 'igniteui-react-charts';
+import { IgrDataLegend, IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrColumnSeries, IgrDataToolTipLayer } from 'igniteui-react-charts';
+import { ComponentRenderer, LegendDescriptionModule, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataLegendDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-react-core';
+import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals';
+
+const mods: any[] = [
+    IgrLegendModule,
+    IgrNumberAbbreviatorModule,
+    IgrDataChartCoreModule,
+    IgrDataChartCategoryModule,
+    IgrDataChartInteractivityModule,
+    IgrDataLegendModule,
+    IgrDataChartAnnotationModule
+];
+mods.forEach((m) => m.register());
+
+export default class Sample extends React.Component<any, any> {
+    private legend: IgrDataLegend
+    private legendRef(r: IgrDataLegend) {
+        this.legend = r;
+        this.setState({});
+    }
+    private chart: IgrDataChart
+    private chartRef(r: IgrDataChart) {
+        this.chart = r;
+        this.setState({});
+    }
+    private xAxis: IgrCategoryXAxis
+    private yAxis: IgrNumericYAxis
+    private columnSeries1: IgrColumnSeries
+    private dataToolTipLayer: IgrDataToolTipLayer
+
+    constructor(props: any) {
+        super(props);
+
+        this.legendRef = this.legendRef.bind(this);
+        this.chartRef = this.chartRef.bind(this);
+    }
+
+    public render(): JSX.Element {
+        return (
+        <div className="container sample">
+
+            <div className="legend">
+                <IgrDataLegend
+                    ref={this.legendRef}
+                    target={this.chart}
+                    groupRowVisible="true"
+                    groupTextColor="purple"
+                    groupTextStyle="Italic bold 20px Arial">
+                </IgrDataLegend>
+            </div>
+
+            <div className="container fill">
+                <IgrDataChart
+                    shouldAutoExpandMarginForInitialLabels="true"
+                    computedPlotAreaMarginMode="Series"
+                    ref={this.chartRef}
+                    highlightedValuesDisplayMode="Overlay">
+                    <IgrCategoryXAxis
+                        name="xAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        label="year">
+                    </IgrCategoryXAxis>
+                    <IgrNumericYAxis
+                        name="yAxis">
+                    </IgrNumericYAxis>
+                    <IgrColumnSeries
+                        name="ColumnSeries1"
+                        xAxisName="xAxis"
+                        yAxisName="yAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        title=""
+                        valueMemberPath="total"
+                        dataLegendGroup="Total Medals"
+                        highlightedValuesDataLegendGroup="Country"
+                        highlightedValueMemberPath="america"
+                        highlightedTitleSuffix="America">
+                    </IgrColumnSeries>
+                    <IgrDataToolTipLayer
+                        name="DataToolTipLayer"
+                        groupRowVisible="true"
+                        groupingMode="Grouped">
+                    </IgrDataToolTipLayer>
+                </IgrDataChart>
+            </div>
+        </div>
+        );
+    }
+
+    private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null;
+    public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals {
+        if (this._olympicMedalsTopCountriesWithTotals == null)
+        {
+            this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals();
+        }
+        return this._olympicMedalsTopCountriesWithTotals;
+    }
+
+    private _componentRenderer: ComponentRenderer = null;
+    public get renderer(): ComponentRenderer {
+        if (this._componentRenderer == null) {
+            this._componentRenderer = new ComponentRenderer();
+            var context = this._componentRenderer.context;
+            LegendDescriptionModule.register(context);
+            NumberAbbreviatorDescriptionModule.register(context);
+            DataChartCoreDescriptionModule.register(context);
+            DataChartCategoryDescriptionModule.register(context);
+            DataChartInteractivityDescriptionModule.register(context);
+            DataLegendDescriptionModule.register(context);
+            DataChartAnnotationDescriptionModule.register(context);
+        }
+        return this._componentRenderer;
+    }
+
+}
+
+// rendering above component in the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Sample/>);
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-legend-styling/src/react-app-env.d.ts b/samples/charts/data-chart/data-legend-styling/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-styling/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/charts/data-chart/data-legend-styling/tsconfig.json b/samples/charts/data-chart/data-legend-styling/tsconfig.json
new file mode 100644
index 0000000000..42c6ace1da
--- /dev/null
+++ b/samples/charts/data-chart/data-legend-styling/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/.eslintrc.js b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/.eslintrc.js
new file mode 100644
index 0000000000..9d283f6407
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/.eslintrc.js
@@ -0,0 +1,76 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json
new file mode 100644
index 0000000000..53cc38b7c8
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-react": "18.6.1-alpha.0",
+    "igniteui-react-charts": "18.6.1-alpha.0",
+    "igniteui-react-core": "18.6.1-alpha.0",
+    "igniteui-react-inputs": "18.6.1-alpha.0",
+    "igniteui-react-layouts": "18.6.1-alpha.0",
+    "igniteui-webcomponents": "4.9.0",
+    "lit-html": "^2.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/public/index.html b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/public/index.html
new file mode 100644
index 0000000000..e2d3265576
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/react.png" >
+    <link rel="stylesheet"    href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/sandbox.config.json b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/sandbox.config.json
new file mode 100644
index 0000000000..07f53508eb
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/OlympicMedalsTopCountriesWithTotals.ts b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/OlympicMedalsTopCountriesWithTotals.ts
new file mode 100644
index 0000000000..63183e6f07
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/OlympicMedalsTopCountriesWithTotals.ts
@@ -0,0 +1,92 @@
+export class OlympicMedalsTopCountriesWithTotalsItem {
+    public constructor(init: Partial<OlympicMedalsTopCountriesWithTotalsItem>) {
+        Object.assign(this, init);
+    }
+
+    public year: string;
+    public america: number;
+    public americaGold: number;
+    public china: number;
+    public chinaGold: number;
+    public russia: number;
+    public russiaGold: number;
+    public total: number;
+
+}
+export class OlympicMedalsTopCountriesWithTotals extends Array<OlympicMedalsTopCountriesWithTotalsItem> {
+    public constructor(items: Array<OlympicMedalsTopCountriesWithTotalsItem> | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `1996`,
+                    america: 148,
+                    americaGold: 50,
+                    china: 110,
+                    chinaGold: 40,
+                    russia: 95,
+                    russiaGold: 20,
+                    total: 353
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2000`,
+                    america: 142,
+                    americaGold: 40,
+                    china: 115,
+                    chinaGold: 45,
+                    russia: 91,
+                    russiaGold: 40,
+                    total: 348
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2004`,
+                    america: 134,
+                    americaGold: 35,
+                    china: 121,
+                    chinaGold: 55,
+                    russia: 86,
+                    russiaGold: 25,
+                    total: 341
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2008`,
+                    america: 131,
+                    americaGold: 20,
+                    china: 129,
+                    chinaGold: 35,
+                    russia: 65,
+                    russiaGold: 35,
+                    total: 325
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2012`,
+                    america: 135,
+                    americaGold: 25,
+                    china: 115,
+                    chinaGold: 50,
+                    russia: 77,
+                    russiaGold: 15,
+                    total: 327
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2016`,
+                    america: 146,
+                    americaGold: 45,
+                    china: 112,
+                    chinaGold: 45,
+                    russia: 88,
+                    russiaGold: 30,
+                    total: 346
+                }),
+            ];
+            super(...(newItems.slice(0, items)));
+        }
+    }
+}
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.css b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.css
new file mode 100644
index 0000000000..98682b8543
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.tsx b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.tsx
new file mode 100644
index 0000000000..50393907d7
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+
+import { IgrPropertyEditorPanelModule } from 'igniteui-react-layouts';
+import { IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule } from 'igniteui-react-charts';
+import { IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrColumnSeries, IgrDataToolTipLayer } from 'igniteui-react-charts';
+import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-react-core';
+import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals';
+
+const mods: any[] = [
+    IgrPropertyEditorPanelModule,
+    IgrDataChartCoreModule,
+    IgrDataChartCategoryModule,
+    IgrDataChartInteractivityModule,
+    IgrDataChartAnnotationModule
+];
+mods.forEach((m) => m.register());
+
+export default class Sample extends React.Component<any, any> {
+    private chart: IgrDataChart
+    private chartRef(r: IgrDataChart) {
+        this.chart = r;
+        this.setState({});
+    }
+    private xAxis: IgrCategoryXAxis
+    private yAxis: IgrNumericYAxis
+    private columnSeries1: IgrColumnSeries
+    private columnSeries2: IgrColumnSeries
+    private columnSeries3: IgrColumnSeries
+    private dataToolTipLayer: IgrDataToolTipLayer
+
+    constructor(props: any) {
+        super(props);
+
+        this.chartRef = this.chartRef.bind(this);
+    }
+
+    public render(): JSX.Element {
+        return (
+        <div className="container sample">
+
+            <div className="container fill">
+                <IgrDataChart
+                    shouldAutoExpandMarginForInitialLabels="true"
+                    computedPlotAreaMarginMode="Series"
+                    ref={this.chartRef}
+                    highlightedValuesDisplayMode="Overlay">
+                    <IgrCategoryXAxis
+                        name="xAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        label="year">
+                    </IgrCategoryXAxis>
+                    <IgrNumericYAxis
+                        name="yAxis">
+                    </IgrNumericYAxis>
+                    <IgrColumnSeries
+                        name="ColumnSeries1"
+                        xAxisName="xAxis"
+                        yAxisName="yAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        title="America"
+                        valueMemberPath="america"
+                        dataLegendGroup="Olympic Medals"
+                        highlightedValuesDataLegendGroup="Gold Medals"
+                        highlightedValueMemberPath="americaGold"
+                        highlightedTitleSuffix="">
+                    </IgrColumnSeries>
+                    <IgrColumnSeries
+                        name="ColumnSeries2"
+                        xAxisName="xAxis"
+                        yAxisName="yAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        title="China"
+                        valueMemberPath="china"
+                        dataLegendGroup="Olympic Medals"
+                        highlightedValuesDataLegendGroup="Gold Medals"
+                        highlightedValueMemberPath="chinaGold"
+                        highlightedTitleSuffix="">
+                    </IgrColumnSeries>
+                    <IgrColumnSeries
+                        name="ColumnSeries3"
+                        xAxisName="xAxis"
+                        yAxisName="yAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        title="Russia"
+                        valueMemberPath="russia"
+                        dataLegendGroup="Olympic Medals"
+                        highlightedValuesDataLegendGroup="Gold Medals"
+                        highlightedValueMemberPath="russiaGold"
+                        highlightedTitleSuffix="">
+                    </IgrColumnSeries>
+                    <IgrDataToolTipLayer
+                        name="DataToolTipLayer"
+                        groupRowVisible="true"
+                        groupingMode="Grouped">
+                    </IgrDataToolTipLayer>
+                </IgrDataChart>
+            </div>
+        </div>
+        );
+    }
+
+    private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null;
+    public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals {
+        if (this._olympicMedalsTopCountriesWithTotals == null)
+        {
+            this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals();
+        }
+        return this._olympicMedalsTopCountriesWithTotals;
+    }
+
+    private _componentRenderer: ComponentRenderer = null;
+    public get renderer(): ComponentRenderer {
+        if (this._componentRenderer == null) {
+            this._componentRenderer = new ComponentRenderer();
+            var context = this._componentRenderer.context;
+            PropertyEditorPanelDescriptionModule.register(context);
+            DataChartCoreDescriptionModule.register(context);
+            DataChartCategoryDescriptionModule.register(context);
+            DataChartInteractivityDescriptionModule.register(context);
+            DataChartAnnotationDescriptionModule.register(context);
+        }
+        return this._componentRenderer;
+    }
+
+}
+
+// rendering above component in the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Sample/>);
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/react-app-env.d.ts b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/tsconfig.json b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/tsconfig.json
new file mode 100644
index 0000000000..42c6ace1da
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/charts/data-chart/data-tooltip-grouping/.eslintrc.js b/samples/charts/data-chart/data-tooltip-grouping/.eslintrc.js
new file mode 100644
index 0000000000..9d283f6407
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping/.eslintrc.js
@@ -0,0 +1,76 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-grouping/package.json b/samples/charts/data-chart/data-tooltip-grouping/package.json
new file mode 100644
index 0000000000..53cc38b7c8
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-react": "18.6.1-alpha.0",
+    "igniteui-react-charts": "18.6.1-alpha.0",
+    "igniteui-react-core": "18.6.1-alpha.0",
+    "igniteui-react-inputs": "18.6.1-alpha.0",
+    "igniteui-react-layouts": "18.6.1-alpha.0",
+    "igniteui-webcomponents": "4.9.0",
+    "lit-html": "^2.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/charts/data-chart/data-tooltip-grouping/public/index.html b/samples/charts/data-chart/data-tooltip-grouping/public/index.html
new file mode 100644
index 0000000000..e2d3265576
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/react.png" >
+    <link rel="stylesheet"    href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-grouping/sandbox.config.json b/samples/charts/data-chart/data-tooltip-grouping/sandbox.config.json
new file mode 100644
index 0000000000..07f53508eb
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-grouping/src/OlympicMedalsTopCountriesWithTotals.ts b/samples/charts/data-chart/data-tooltip-grouping/src/OlympicMedalsTopCountriesWithTotals.ts
new file mode 100644
index 0000000000..63183e6f07
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping/src/OlympicMedalsTopCountriesWithTotals.ts
@@ -0,0 +1,92 @@
+export class OlympicMedalsTopCountriesWithTotalsItem {
+    public constructor(init: Partial<OlympicMedalsTopCountriesWithTotalsItem>) {
+        Object.assign(this, init);
+    }
+
+    public year: string;
+    public america: number;
+    public americaGold: number;
+    public china: number;
+    public chinaGold: number;
+    public russia: number;
+    public russiaGold: number;
+    public total: number;
+
+}
+export class OlympicMedalsTopCountriesWithTotals extends Array<OlympicMedalsTopCountriesWithTotalsItem> {
+    public constructor(items: Array<OlympicMedalsTopCountriesWithTotalsItem> | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `1996`,
+                    america: 148,
+                    americaGold: 50,
+                    china: 110,
+                    chinaGold: 40,
+                    russia: 95,
+                    russiaGold: 20,
+                    total: 353
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2000`,
+                    america: 142,
+                    americaGold: 40,
+                    china: 115,
+                    chinaGold: 45,
+                    russia: 91,
+                    russiaGold: 40,
+                    total: 348
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2004`,
+                    america: 134,
+                    americaGold: 35,
+                    china: 121,
+                    chinaGold: 55,
+                    russia: 86,
+                    russiaGold: 25,
+                    total: 341
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2008`,
+                    america: 131,
+                    americaGold: 20,
+                    china: 129,
+                    chinaGold: 35,
+                    russia: 65,
+                    russiaGold: 35,
+                    total: 325
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2012`,
+                    america: 135,
+                    americaGold: 25,
+                    china: 115,
+                    chinaGold: 50,
+                    russia: 77,
+                    russiaGold: 15,
+                    total: 327
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2016`,
+                    america: 146,
+                    americaGold: 45,
+                    china: 112,
+                    chinaGold: 45,
+                    russia: 88,
+                    russiaGold: 30,
+                    total: 346
+                }),
+            ];
+            super(...(newItems.slice(0, items)));
+        }
+    }
+}
diff --git a/samples/charts/data-chart/data-tooltip-grouping/src/index.css b/samples/charts/data-chart/data-tooltip-grouping/src/index.css
new file mode 100644
index 0000000000..98682b8543
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
diff --git a/samples/charts/data-chart/data-tooltip-grouping/src/index.tsx b/samples/charts/data-chart/data-tooltip-grouping/src/index.tsx
new file mode 100644
index 0000000000..803447ff50
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping/src/index.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+
+import { IgrPropertyEditorPanelModule } from 'igniteui-react-layouts';
+import { IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule } from 'igniteui-react-charts';
+import { IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrColumnSeries, IgrDataToolTipLayer } from 'igniteui-react-charts';
+import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-react-core';
+import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals';
+
+const mods: any[] = [
+    IgrPropertyEditorPanelModule,
+    IgrDataChartCoreModule,
+    IgrDataChartCategoryModule,
+    IgrDataChartInteractivityModule,
+    IgrDataChartAnnotationModule
+];
+mods.forEach((m) => m.register());
+
+export default class Sample extends React.Component<any, any> {
+    private chart: IgrDataChart
+    private chartRef(r: IgrDataChart) {
+        this.chart = r;
+        this.setState({});
+    }
+    private xAxis: IgrCategoryXAxis
+    private yAxis: IgrNumericYAxis
+    private columnSeries1: IgrColumnSeries
+    private columnSeries2: IgrColumnSeries
+    private columnSeries3: IgrColumnSeries
+    private dataToolTipLayer: IgrDataToolTipLayer
+
+    constructor(props: any) {
+        super(props);
+
+        this.chartRef = this.chartRef.bind(this);
+    }
+
+    public render(): JSX.Element {
+        return (
+        <div className="container sample">
+
+            <div className="container fill">
+                <IgrDataChart
+                    shouldAutoExpandMarginForInitialLabels="true"
+                    computedPlotAreaMarginMode="Series"
+                    ref={this.chartRef}>
+                    <IgrCategoryXAxis
+                        name="xAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        label="year">
+                    </IgrCategoryXAxis>
+                    <IgrNumericYAxis
+                        name="yAxis">
+                    </IgrNumericYAxis>
+                    <IgrColumnSeries
+                        name="ColumnSeries1"
+                        xAxisName="xAxis"
+                        yAxisName="yAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        title="America"
+                        valueMemberPath="america"
+                        dataLegendGroup="Medals by Country">
+                    </IgrColumnSeries>
+                    <IgrColumnSeries
+                        name="ColumnSeries2"
+                        xAxisName="xAxis"
+                        yAxisName="yAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        title="China"
+                        valueMemberPath="china"
+                        dataLegendGroup="Medals by Country">
+                    </IgrColumnSeries>
+                    <IgrColumnSeries
+                        name="ColumnSeries3"
+                        xAxisName="xAxis"
+                        yAxisName="yAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        title="Russia"
+                        valueMemberPath="russia"
+                        dataLegendGroup="Medals by Country">
+                    </IgrColumnSeries>
+                    <IgrDataToolTipLayer
+                        name="DataToolTipLayer"
+                        groupRowVisible="true"
+                        groupingMode="Grouped">
+                    </IgrDataToolTipLayer>
+                </IgrDataChart>
+            </div>
+        </div>
+        );
+    }
+
+    private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null;
+    public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals {
+        if (this._olympicMedalsTopCountriesWithTotals == null)
+        {
+            this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals();
+        }
+        return this._olympicMedalsTopCountriesWithTotals;
+    }
+
+    private _componentRenderer: ComponentRenderer = null;
+    public get renderer(): ComponentRenderer {
+        if (this._componentRenderer == null) {
+            this._componentRenderer = new ComponentRenderer();
+            var context = this._componentRenderer.context;
+            PropertyEditorPanelDescriptionModule.register(context);
+            DataChartCoreDescriptionModule.register(context);
+            DataChartCategoryDescriptionModule.register(context);
+            DataChartInteractivityDescriptionModule.register(context);
+            DataChartAnnotationDescriptionModule.register(context);
+        }
+        return this._componentRenderer;
+    }
+
+}
+
+// rendering above component in the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Sample/>);
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-grouping/src/react-app-env.d.ts b/samples/charts/data-chart/data-tooltip-grouping/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/charts/data-chart/data-tooltip-grouping/tsconfig.json b/samples/charts/data-chart/data-tooltip-grouping/tsconfig.json
new file mode 100644
index 0000000000..42c6ace1da
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-grouping/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/charts/data-chart/data-tooltip-styling/.eslintrc.js b/samples/charts/data-chart/data-tooltip-styling/.eslintrc.js
new file mode 100644
index 0000000000..9d283f6407
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-styling/.eslintrc.js
@@ -0,0 +1,76 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-styling/package.json b/samples/charts/data-chart/data-tooltip-styling/package.json
new file mode 100644
index 0000000000..53cc38b7c8
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-styling/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-react": "18.6.1-alpha.0",
+    "igniteui-react-charts": "18.6.1-alpha.0",
+    "igniteui-react-core": "18.6.1-alpha.0",
+    "igniteui-react-inputs": "18.6.1-alpha.0",
+    "igniteui-react-layouts": "18.6.1-alpha.0",
+    "igniteui-webcomponents": "4.9.0",
+    "lit-html": "^2.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/charts/data-chart/data-tooltip-styling/public/index.html b/samples/charts/data-chart/data-tooltip-styling/public/index.html
new file mode 100644
index 0000000000..e2d3265576
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-styling/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/react.png" >
+    <link rel="stylesheet"    href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-styling/sandbox.config.json b/samples/charts/data-chart/data-tooltip-styling/sandbox.config.json
new file mode 100644
index 0000000000..07f53508eb
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-styling/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-styling/src/OlympicMedalsTopCountriesWithTotals.ts b/samples/charts/data-chart/data-tooltip-styling/src/OlympicMedalsTopCountriesWithTotals.ts
new file mode 100644
index 0000000000..63183e6f07
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-styling/src/OlympicMedalsTopCountriesWithTotals.ts
@@ -0,0 +1,92 @@
+export class OlympicMedalsTopCountriesWithTotalsItem {
+    public constructor(init: Partial<OlympicMedalsTopCountriesWithTotalsItem>) {
+        Object.assign(this, init);
+    }
+
+    public year: string;
+    public america: number;
+    public americaGold: number;
+    public china: number;
+    public chinaGold: number;
+    public russia: number;
+    public russiaGold: number;
+    public total: number;
+
+}
+export class OlympicMedalsTopCountriesWithTotals extends Array<OlympicMedalsTopCountriesWithTotalsItem> {
+    public constructor(items: Array<OlympicMedalsTopCountriesWithTotalsItem> | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `1996`,
+                    america: 148,
+                    americaGold: 50,
+                    china: 110,
+                    chinaGold: 40,
+                    russia: 95,
+                    russiaGold: 20,
+                    total: 353
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2000`,
+                    america: 142,
+                    americaGold: 40,
+                    china: 115,
+                    chinaGold: 45,
+                    russia: 91,
+                    russiaGold: 40,
+                    total: 348
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2004`,
+                    america: 134,
+                    americaGold: 35,
+                    china: 121,
+                    chinaGold: 55,
+                    russia: 86,
+                    russiaGold: 25,
+                    total: 341
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2008`,
+                    america: 131,
+                    americaGold: 20,
+                    china: 129,
+                    chinaGold: 35,
+                    russia: 65,
+                    russiaGold: 35,
+                    total: 325
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2012`,
+                    america: 135,
+                    americaGold: 25,
+                    china: 115,
+                    chinaGold: 50,
+                    russia: 77,
+                    russiaGold: 15,
+                    total: 327
+                }),
+                new OlympicMedalsTopCountriesWithTotalsItem(
+                {
+                    year: `2016`,
+                    america: 146,
+                    americaGold: 45,
+                    china: 112,
+                    chinaGold: 45,
+                    russia: 88,
+                    russiaGold: 30,
+                    total: 346
+                }),
+            ];
+            super(...(newItems.slice(0, items)));
+        }
+    }
+}
diff --git a/samples/charts/data-chart/data-tooltip-styling/src/index.css b/samples/charts/data-chart/data-tooltip-styling/src/index.css
new file mode 100644
index 0000000000..98682b8543
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-styling/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
diff --git a/samples/charts/data-chart/data-tooltip-styling/src/index.tsx b/samples/charts/data-chart/data-tooltip-styling/src/index.tsx
new file mode 100644
index 0000000000..8be24d3000
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-styling/src/index.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+
+import { IgrPropertyEditorPanelModule } from 'igniteui-react-layouts';
+import { IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule } from 'igniteui-react-charts';
+import { IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrColumnSeries, IgrDataToolTipLayer } from 'igniteui-react-charts';
+import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-react-core';
+import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals';
+
+const mods: any[] = [
+    IgrPropertyEditorPanelModule,
+    IgrDataChartCoreModule,
+    IgrDataChartCategoryModule,
+    IgrDataChartInteractivityModule,
+    IgrDataChartAnnotationModule
+];
+mods.forEach((m) => m.register());
+
+export default class Sample extends React.Component<any, any> {
+    private chart: IgrDataChart
+    private chartRef(r: IgrDataChart) {
+        this.chart = r;
+        this.setState({});
+    }
+    private xAxis: IgrCategoryXAxis
+    private yAxis: IgrNumericYAxis
+    private columnSeries1: IgrColumnSeries
+    private dataToolTipLayer: IgrDataToolTipLayer
+
+    constructor(props: any) {
+        super(props);
+
+        this.chartRef = this.chartRef.bind(this);
+    }
+
+    public render(): JSX.Element {
+        return (
+        <div className="container sample">
+
+            <div className="container fill">
+                <IgrDataChart
+                    shouldAutoExpandMarginForInitialLabels="true"
+                    computedPlotAreaMarginMode="Series"
+                    ref={this.chartRef}
+                    highlightedValuesDisplayMode="Overlay">
+                    <IgrCategoryXAxis
+                        name="xAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        label="year">
+                    </IgrCategoryXAxis>
+                    <IgrNumericYAxis
+                        name="yAxis">
+                    </IgrNumericYAxis>
+                    <IgrColumnSeries
+                        name="ColumnSeries1"
+                        xAxisName="xAxis"
+                        yAxisName="yAxis"
+                        dataSource={this.olympicMedalsTopCountriesWithTotals}
+                        title=""
+                        valueMemberPath="total"
+                        dataLegendGroup="Total Medals"
+                        highlightedValuesDataLegendGroup="Country"
+                        highlightedValueMemberPath="america"
+                        highlightedTitleSuffix="America">
+                    </IgrColumnSeries>
+                    <IgrDataToolTipLayer
+                        name="DataToolTipLayer"
+                        groupRowVisible="true"
+                        groupingMode="Grouped"
+                        groupTextColor="purple"
+                        groupTextStyle="Italic bold 14px Arial">
+                    </IgrDataToolTipLayer>
+                </IgrDataChart>
+            </div>
+        </div>
+        );
+    }
+
+    private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null;
+    public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals {
+        if (this._olympicMedalsTopCountriesWithTotals == null)
+        {
+            this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals();
+        }
+        return this._olympicMedalsTopCountriesWithTotals;
+    }
+
+    private _componentRenderer: ComponentRenderer = null;
+    public get renderer(): ComponentRenderer {
+        if (this._componentRenderer == null) {
+            this._componentRenderer = new ComponentRenderer();
+            var context = this._componentRenderer.context;
+            PropertyEditorPanelDescriptionModule.register(context);
+            DataChartCoreDescriptionModule.register(context);
+            DataChartCategoryDescriptionModule.register(context);
+            DataChartInteractivityDescriptionModule.register(context);
+            DataChartAnnotationDescriptionModule.register(context);
+        }
+        return this._componentRenderer;
+    }
+
+}
+
+// rendering above component in the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Sample/>);
\ No newline at end of file
diff --git a/samples/charts/data-chart/data-tooltip-styling/src/react-app-env.d.ts b/samples/charts/data-chart/data-tooltip-styling/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-styling/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/charts/data-chart/data-tooltip-styling/tsconfig.json b/samples/charts/data-chart/data-tooltip-styling/tsconfig.json
new file mode 100644
index 0000000000..42c6ace1da
--- /dev/null
+++ b/samples/charts/data-chart/data-tooltip-styling/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}

From 6c26a3aa797066cc99b9e6224f541bb52302849c Mon Sep 17 00:00:00 2001
From: Ivan Kitanov <IKitanov@infragistics.com>
Date: Thu, 6 Jun 2024 15:48:21 +0300
Subject: [PATCH 11/12] Addressing comments

---
 samples/inputs/textarea/form-integration/package.json | 8 ++++----
 samples/inputs/textarea/overview/package.json         | 8 ++++----
 samples/inputs/textarea/overview/src/index.tsx        | 4 ++--
 samples/inputs/textarea/resize/package.json           | 8 ++++----
 samples/inputs/textarea/resize/src/index.tsx          | 4 ++--
 samples/inputs/textarea/slots/package.json            | 8 ++++----
 samples/inputs/textarea/slots/src/index.tsx           | 4 ++--
 samples/inputs/textarea/styling/package.json          | 4 ++--
 8 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/samples/inputs/textarea/form-integration/package.json b/samples/inputs/textarea/form-integration/package.json
index d11b4ecd94..4cfde522b2 100644
--- a/samples/inputs/textarea/form-integration/package.json
+++ b/samples/inputs/textarea/form-integration/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-input-overview",
-  "description": "This project provides example of Input Overview using Infragistics React components",
+  "name": "react-textarea-form-integration",
+  "description": "This project provides example of Text Area Form Integration using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",
@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "igniteui-dockmanager": "1.14.2",
-    "igniteui-react": "18.6.0",
-    "igniteui-react-core": "18.6.0",
+    "igniteui-react": "18.6.1-alpha.0",
+    "igniteui-react-core": "18.6.1-alpha.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
diff --git a/samples/inputs/textarea/overview/package.json b/samples/inputs/textarea/overview/package.json
index d11b4ecd94..4d58abb0ba 100644
--- a/samples/inputs/textarea/overview/package.json
+++ b/samples/inputs/textarea/overview/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-input-overview",
-  "description": "This project provides example of Input Overview using Infragistics React components",
+  "name": "react-textarea-overview",
+  "description": "This project provides example of Text Area Overview using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",
@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "igniteui-dockmanager": "1.14.2",
-    "igniteui-react": "18.6.0",
-    "igniteui-react-core": "18.6.0",
+    "igniteui-react": "18.6.1-alpha.0",
+    "igniteui-react-core": "18.6.1-alpha.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
diff --git a/samples/inputs/textarea/overview/src/index.tsx b/samples/inputs/textarea/overview/src/index.tsx
index 387d50306b..6420c3cbc4 100644
--- a/samples/inputs/textarea/overview/src/index.tsx
+++ b/samples/inputs/textarea/overview/src/index.tsx
@@ -6,7 +6,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 IgrTextareaModule.register();
 
-export default class InputOverview extends React.Component<any, any> {
+export default class TextAreaOverview extends React.Component<any, any> {
 
     constructor(props: any) {
         super(props);     
@@ -23,4 +23,4 @@ export default class InputOverview extends React.Component<any, any> {
 
 // rendering above class to the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<InputOverview/>);
+root.render(<TextAreaOverview/>);
diff --git a/samples/inputs/textarea/resize/package.json b/samples/inputs/textarea/resize/package.json
index d11b4ecd94..7580ebd2ad 100644
--- a/samples/inputs/textarea/resize/package.json
+++ b/samples/inputs/textarea/resize/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-input-overview",
-  "description": "This project provides example of Input Overview using Infragistics React components",
+  "name": "react-textarea-resize",
+  "description": "This project provides example of Text Area Resize using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",
@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "igniteui-dockmanager": "1.14.2",
-    "igniteui-react": "18.6.0",
-    "igniteui-react-core": "18.6.0",
+    "igniteui-react": "18.6.1-alpha.0",
+    "igniteui-react-core": "18.6.1-alpha.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
diff --git a/samples/inputs/textarea/resize/src/index.tsx b/samples/inputs/textarea/resize/src/index.tsx
index 10c4ad0d23..650a0009e8 100644
--- a/samples/inputs/textarea/resize/src/index.tsx
+++ b/samples/inputs/textarea/resize/src/index.tsx
@@ -6,7 +6,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 IgrTextareaModule.register();
 
-export default class InputOverview extends React.Component<any, any> {
+export default class TextAreaResize extends React.Component<any, any> {
 
     constructor(props: any) {
         super(props);     
@@ -31,4 +31,4 @@ export default class InputOverview extends React.Component<any, any> {
 
 // rendering above class to the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<InputOverview/>);
+root.render(<TextAreaResize/>);
diff --git a/samples/inputs/textarea/slots/package.json b/samples/inputs/textarea/slots/package.json
index d11b4ecd94..9ca3176b9b 100644
--- a/samples/inputs/textarea/slots/package.json
+++ b/samples/inputs/textarea/slots/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-input-overview",
-  "description": "This project provides example of Input Overview using Infragistics React components",
+  "name": "react-textarea-slots",
+  "description": "This project provides example of Text Area Slots using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",
@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "igniteui-dockmanager": "1.14.2",
-    "igniteui-react": "18.6.0",
-    "igniteui-react-core": "18.6.0",
+    "igniteui-react": "18.6.1-alpha.0",
+    "igniteui-react-core": "18.6.1-alpha.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
diff --git a/samples/inputs/textarea/slots/src/index.tsx b/samples/inputs/textarea/slots/src/index.tsx
index 344469e19c..523cbb025d 100644
--- a/samples/inputs/textarea/slots/src/index.tsx
+++ b/samples/inputs/textarea/slots/src/index.tsx
@@ -7,7 +7,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 IgrTextareaModule.register();
 IgrIconModule.register();
 
-export default class TextAreaSlot extends React.Component<any, any> {
+export default class TextAreaSlots extends React.Component<any, any> {
 
     constructor(props: any) {
         super(props);     
@@ -41,4 +41,4 @@ export default class TextAreaSlot extends React.Component<any, any> {
 
 // rendering above class to the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<TextAreaSlot/>);
+root.render(<TextAreaSlots/>);
diff --git a/samples/inputs/textarea/styling/package.json b/samples/inputs/textarea/styling/package.json
index d11b4ecd94..f0b19a1102 100644
--- a/samples/inputs/textarea/styling/package.json
+++ b/samples/inputs/textarea/styling/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-input-overview",
-  "description": "This project provides example of Input Overview using Infragistics React components",
+  "name": "react-textarea-styling",
+  "description": "This project provides example of Text Area Styling using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",

From bafec47328f0281e6d8f9a8567566404d3732977 Mon Sep 17 00:00:00 2001
From: IvanKitanov17 <ikitanov117@gmail.com>
Date: Mon, 10 Jun 2024 10:25:51 +0300
Subject: [PATCH 12/12] Decrasing the number of rows to better fit sample frame

---
 samples/inputs/textarea/form-integration/src/index.tsx | 2 +-
 samples/inputs/textarea/overview/src/index.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/samples/inputs/textarea/form-integration/src/index.tsx b/samples/inputs/textarea/form-integration/src/index.tsx
index 58797d0f82..fc18d7ff68 100644
--- a/samples/inputs/textarea/form-integration/src/index.tsx
+++ b/samples/inputs/textarea/form-integration/src/index.tsx
@@ -22,7 +22,7 @@ export default class TextAreaFormIntegration extends React.Component<any, any> {
         return (
             <div className="sample">               
                 <form id="form" onSubmit={this.onSubmitButtonClicked}>
-                <IgrTextarea rows="5"  name="user_feedback" label="Your review" required>
+                <IgrTextarea rows="3"  name="user_feedback" label="Your review" required>
                 </IgrTextarea>                
                 <div className="controls">
                     <IgrButton type="submit"><span>Submit review</span></IgrButton>
diff --git a/samples/inputs/textarea/overview/src/index.tsx b/samples/inputs/textarea/overview/src/index.tsx
index 6420c3cbc4..471d537f1f 100644
--- a/samples/inputs/textarea/overview/src/index.tsx
+++ b/samples/inputs/textarea/overview/src/index.tsx
@@ -15,7 +15,7 @@ export default class TextAreaOverview extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="sample">
-                <IgrTextarea rows="5" label="Tell us your story:"><span>It was a dark and stormy night...</span></IgrTextarea>
+                <IgrTextarea rows="3" label="Tell us your story:"><span>It was a dark and stormy night...</span></IgrTextarea>
             </div>
         );
     }