Add cell-selection-custom-palette samples for Grid, Hierarchical Grid, and Tree Grid

samples/grids/grid/cell-selection-custom-palette/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+    "name": "Node.js",
+    "image": "mcr.microsoft.com/devcontainers/javascript-node:22"
+}

samples/grids/grid/cell-selection-custom-palette/.eslintrc.js

@@ -0,0 +1,78 @@
+// 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",
+      "no-mixed-spaces-and-tabs": 0,
+      "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-mixed-spaces-and-tabs": 0,
+            "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"
+        }
+      }
+    ]
+  };

samples/grids/grid/cell-selection-custom-palette/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 Cell Selection Style feature using [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/grid/cell-selection-style" 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/grid/cell-selection-style?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/grid/cell-selection-style
+```
+
+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).

samples/grids/grid/cell-selection-custom-palette/index.html

@@ -0,0 +1,12 @@
+<!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>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

samples/grids/grid/cell-selection-custom-palette/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": "vite --port 4200",
+    "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "^1.17.0",
+    "igniteui-react": "^19.3.0-rc.2",
+    "igniteui-react-core": "19.2.2",
+    "igniteui-react-grids": "^19.2.0",
+    "igniteui-webcomponents": "^6.3.0",
+    "lit-html": "^3.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^24.7.1",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser": "^3.2.4",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "typescript": "^4.8.4",
+    "vite": "^7.1.9",
+    "vitest": "^3.2.4",
+    "vitest-canvas-mock": "^0.3.3",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

samples/grids/grid/cell-selection-custom-palette/sandbox.config.json

@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}

samples/grids/grid/cell-selection-custom-palette/src/CustomersData.ts

@@ -0,0 +1,56 @@
+export class CustomersDataItem {
+    public constructor(init: Partial<CustomersDataItem>) {
+        Object.assign(this, init);
+    }
+
+    public ID: string;
+    public Company: string;
+    public ContactName: string;
+    public ContactTitle: string;
+    public Address: string;
+    public City: string;
+    public Region: string;
+    public PostalCode: number;
+    public Country: string;
+    public Phone: string;
+    public Fax: string;
+
+}
+export class CustomersData extends Array<CustomersDataItem> {
+    public constructor(items: Array<CustomersDataItem> | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new CustomersDataItem({ ID: `ALFKI`, Company: `Alfreds Futterkiste`, ContactName: `Maria Anders`, ContactTitle: `Sales Representative`, Address: `Obere Str. 57`, City: `Berlin`, Region: `East`, PostalCode: 12209, Country: `Germany`, Phone: `030-0074321`, Fax: `030-0076545` }),
+                new CustomersDataItem({ ID: `ANATR`, Company: `Ana Trujillo Emparedados y helados`, ContactName: `Ana Trujillo`, ContactTitle: `Owner`, Address: `Avda. de la Constitución 2222`, City: `México D.F.`, Region: `South`, PostalCode: 5021, Country: `Mexico`, Phone: `(5) 555-4729`, Fax: `(5) 555-3745` }),
+                new CustomersDataItem({ ID: `ANTON`, Company: `Antonio Moreno Taquería`, ContactName: `Antonio Moreno`, ContactTitle: `Owner`, Address: `Mataderos 2312`, City: `México D.F.`, Region: `South`, PostalCode: 5023, Country: `Mexico`, Phone: `(5) 555-3932`, Fax: `(5) 555-3745` }),
+                new CustomersDataItem({ ID: `AROUT`, Company: `Around the Horn`, ContactName: `Thomas Hardy`, ContactTitle: `Sales Representative`, Address: `120 Hanover Sq.`, City: `London`, Region: `East`, PostalCode: 22000, Country: `UK`, Phone: `(171) 555-7788`, Fax: `(171) 555-6750` }),
+                new CustomersDataItem({ ID: `BERGS`, Company: `Berglunds snabbköp`, ContactName: `Christina Berglund`, ContactTitle: `Order Administrator`, Address: `Berguvsvägen 8`, City: `Luleå`, Region: `South`, PostalCode: 17000, Country: `Sweden`, Phone: `0921-12 34 65`, Fax: `0921-12 34 67` }),
+                new CustomersDataItem({ ID: `BLAUS`, Company: `Blauer See Delikatessen`, ContactName: `Hanna Moos`, ContactTitle: `Sales Representative`, Address: `Forsterstr. 57`, City: `Mannheim`, Region: `East`, PostalCode: 68306, Country: `Germany`, Phone: `0621-08460`, Fax: `0621-08924` }),
+                new CustomersDataItem({ ID: `BLONP`, Company: `Blondesddsl père et fils`, ContactName: `Frédérique Citeaux`, ContactTitle: `Marketing Manager`, Address: `24, place Kléber`, City: `Strasbourg`, Region: `East`, PostalCode: 67000, Country: `France`, Phone: `88.60.15.31`, Fax: `88.60.15.32` }),
+                new CustomersDataItem({ ID: `BOLID`, Company: `Bólido Comidas preparadas`, ContactName: `Martín Sommer`, ContactTitle: `Owner`, Address: `C/ Araquil, 67`, City: `Madrid`, Region: `East`, PostalCode: 28023, Country: `Spain`, Phone: `(91) 555 22 82`, Fax: `(91) 555 91 99` }),
+                new CustomersDataItem({ ID: `BONAP`, Company: `Bon app'`, ContactName: `Laurence Lebihan`, ContactTitle: `Owner`, Address: `12, rue des Bouchers`, City: `Marseille`, Region: `West`, PostalCode: 13008, Country: `France`, Phone: `91.24.45.40`, Fax: `91.24.45.41` }),
+                new CustomersDataItem({ ID: `BOTTM`, Company: `Bottom-Dollar Markets`, ContactName: `Elizabeth Lincoln`, ContactTitle: `Accounting Manager`, Address: `23 Tsawassen Blvd.`, City: `Tsawassen`, Region: `BC`, PostalCode: 28000, Country: `Canada`, Phone: `(604) 555-4729`, Fax: `(604) 555-3745` }),
+                new CustomersDataItem({ ID: `BSBEV`, Company: `B's Beverages`, ContactName: `Victoria Ashworth`, ContactTitle: `Sales Representative`, Address: `Fauntleroy Circus`, City: `London`, Region: `South`, PostalCode: 10000, Country: `UK`, Phone: `(171) 555-1212`, Fax: `(5) 555-3745` }),
+                new CustomersDataItem({ ID: `CACTU`, Company: `Cactus Comidas para llevar`, ContactName: `Patricio Simpson`, ContactTitle: `Sales Agent`, Address: `Cerrito 333`, City: `Buenos Aires`, Region: `East`, PostalCode: 1010, Country: `Argentina`, Phone: `(1) 135-5555`, Fax: `(1) 135-4892` }),
+                new CustomersDataItem({ ID: `CENTC`, Company: `Centro comercial Moctezuma`, ContactName: `Francisco Chang`, ContactTitle: `Marketing Manager`, Address: `Sierras de Granada 9993`, City: `México D.F.`, Region: `South`, PostalCode: 5022, Country: `Mexico`, Phone: `(5) 555-3392`, Fax: `(5) 555-7293` }),
+                new CustomersDataItem({ ID: `CHOPS`, Company: `Chop-suey Chinese`, ContactName: `Yang Wang`, ContactTitle: `Owner`, Address: `Hauptstr. 29`, City: `Bern`, Region: `East`, PostalCode: 3012, Country: `Switzerland`, Phone: `0452-076545`, Fax: `(5) 555-3745` }),
+                new CustomersDataItem({ ID: `COMMI`, Company: `Comércio Mineiro`, ContactName: `Pedro Afonso`, ContactTitle: `Sales Associate`, Address: `Av. dos Lusíadas, 23`, City: `Sao Paulo`, Region: `SP`, PostalCode: 34000, Country: `Brazil`, Phone: `(11) 555-7647`, Fax: `(5) 555-3745` }),
+                new CustomersDataItem({ ID: `CONSH`, Company: `Consolidated Holdings`, ContactName: `Elizabeth Brown`, ContactTitle: `Sales Representative`, Address: `Berkeley Gardens 12 Brewery`, City: `London`, Region: `South`, PostalCode: 27000, Country: `UK`, Phone: `(171) 555-2282`, Fax: `(171) 555-9199` }),
+                new CustomersDataItem({ ID: `DRACD`, Company: `Drachenblut Delikatessen`, ContactName: `Sven Ottlieb`, ContactTitle: `Order Administrator`, Address: `Walserweg 21`, City: `Aachen`, Region: `South`, PostalCode: 52066, Country: `Germany`, Phone: `0241-039123`, Fax: `0241-059428` }),
+                new CustomersDataItem({ ID: `DUMON`, Company: `Du monde entier`, ContactName: `Janine Labrune`, ContactTitle: `Owner`, Address: `67, rue des Cinquante Otages`, City: `Nantes`, Region: `East`, PostalCode: 44000, Country: `France`, Phone: `40.67.88.88`, Fax: `40.67.89.89` }),
+                new CustomersDataItem({ ID: `EASTC`, Company: `Eastern Connection`, ContactName: `Ann Devon`, ContactTitle: `Sales Agent`, Address: `35 King George`, City: `London`, Region: `East`, PostalCode: 41000, Country: `UK`, Phone: `(171) 555-0297`, Fax: `(171) 555-3373` }),
+                new CustomersDataItem({ ID: `ERNSH`, Company: `Ernst Handel`, ContactName: `Roland Mendel`, ContactTitle: `Sales Manager`, Address: `Kirchgasse 6`, City: `Graz`, Region: `South`, PostalCode: 8010, Country: `Austria`, Phone: `7675-3425`, Fax: `7675-3426` }),
+                new CustomersDataItem({ ID: `FAMIA`, Company: `Familia Arquibaldo`, ContactName: `Aria Cruz`, ContactTitle: `Marketing Assistant`, Address: `Rua Orós, 92`, City: `Sao Paulo`, Region: `SP`, PostalCode: 27000, Country: `Brazil`, Phone: `(11) 555-9857`, Fax: `(5) 555-3745` }),
+                new CustomersDataItem({ ID: `FISSA`, Company: `FISSA Fabrica Inter. Salchichas S.A.`, ContactName: `Diego Roel`, ContactTitle: `Accounting Manager`, Address: `C/ Moralzarzal, 86`, City: `Madrid`, Region: `East`, PostalCode: 28034, Country: `Spain`, Phone: `(91) 555 94 44`, Fax: `(91) 555 55 93` }),
+                new CustomersDataItem({ ID: `FOLIG`, Company: `Folies gourmandes`, ContactName: `Martine Rancé`, ContactTitle: `Assistant Sales Agent`, Address: `184, chaussée de Tournai`, City: `Lille`, Region: `South`, PostalCode: 59000, Country: `France`, Phone: `20.16.10.16`, Fax: `20.16.10.17` }),
+                new CustomersDataItem({ ID: `FOLKO`, Company: `Folk och fä HB`, ContactName: `Maria Larsson`, ContactTitle: `Owner`, Address: `Åkergatan 24`, City: `Bräcke`, Region: `East`, PostalCode: 36000, Country: `Sweden`, Phone: `0695-34 67 21`, Fax: `0695 33-4455` }),
+                new CustomersDataItem({ ID: `FRANK`, Company: `Frankenversand`, ContactName: `Peter Franken`, ContactTitle: `Marketing Manager`, Address: `Berliner Platz 43`, City: `München`, Region: `East`, PostalCode: 80805, Country: `Germany`, Phone: `089-0877310`, Fax: `089-0877451` }),
+                new CustomersDataItem({ ID: `FRANR`, Company: `France restauration`, ContactName: `Carine Schmitt`, ContactTitle: `Marketing Manager`, Address: `54, rue Royale`, City: `Nantes`, Region: `South`, PostalCode: 44000, Country: `France`, Phone: `40.32.21.21`, Fax: `40.32.21.20` }),
+                new CustomersDataItem({ ID: `FRANS`, Company: `Franchi S.p.A.`, ContactName: `Paolo Accorti`, ContactTitle: `Sales Representative`, Address: `Via Monte Bianco 34`, City: `Torino`, Region: `East`, PostalCode: 10100, Country: `Italy`, Phone: `011-4988260`, Fax: `011-4988261` }),
+            ];
+            super(...newItems.slice(0));
+        }
+    }
+}

samples/grids/grid/cell-selection-custom-palette/src/index.css

@@ -0,0 +1,47 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
+:root {
+    /* Base Palette Colors */
+    --selection-primary: #0062a3;
+    --selection-primary-light: #338bc7;
+    --selection-primary-dark: #004d82;
+    --selection-secondary: #f2c43c;
+    --selection-accent: #e74c3c;
+    --selection-success: #27ae60;
+    --selection-text-light: #ffffff;
+    --selection-text-dark: #2c3e50;
+    --selection-border: #34495e;
+    --selection-hover: rgba(0, 98, 163, 0.1);
+    --selection-focus: rgba(242, 196, 60, 0.3);
+}
+
+.custom-selection-palette {
+    /* Core cell selection properties */
+    --ig-grid-cell-selected-background: var(--selection-primary);
+    --ig-grid-cell-selected-text-color: var(--selection-text-light);
+    --ig-grid-cell-active-border-color: var(--selection-secondary);
+
+    /* Enhanced selection states */
+    --ig-grid-cell-selected-range-background: var(--selection-primary-light);
+    --ig-grid-cell-selected-range-border-color: var(--selection-primary-dark);
+    --ig-grid-cell-hover-background: var(--selection-hover);
+    --ig-grid-cell-focus-background: var(--selection-focus);
+
+    /* Header selection styling */
+    --ig-grid-header-selected-background: var(--selection-primary);
+    --ig-grid-header-selected-text-color: var(--selection-text-light);
+
+    /* Row selection integration */
+    --ig-grid-row-selected-background: var(--selection-primary-light);
+    --ig-grid-row-selected-text-color: var(--selection-text-dark);
+    --ig-grid-row-selected-hover-background: var(--selection-primary);
+
+    /* Selection indicators and borders */
+    --ig-grid-selection-fill-color: var(--selection-secondary);
+    --ig-grid-selection-border-color: var(--selection-border);
+
+    /* Grid sizing */
+    --ig-size: var(--ig-size-medium);
+}
+