From c04c22571da5c41176da79dc6167da12940a1e44 Mon Sep 17 00:00:00 2001 From: Hristo Hristov <57346540+Hristo313@users.noreply.github.com> Date: Wed, 9 Sep 2026 11:33:19 +0300 Subject: [PATCH 01/14] Merge pull request #1097 from IgniteUI/hhristov/update-button-samples feat(button): update button samples --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/button/contained/src/index.tsx | 29 +++---- samples/inputs/button/fab/src/index.tsx | 32 ++++---- samples/inputs/button/flat/src/index.css | 5 -- samples/inputs/button/flat/src/index.tsx | 29 +++---- .../.devcontainer/devcontainer.json | 4 + .../button/interaction-states/.eslintrc.js | 75 ++++++++++++++++++ .../button/interaction-states/README.md | 56 ++++++++++++++ .../button/interaction-states/index.html | 11 +++ .../button/interaction-states/package.json | 42 ++++++++++ .../interaction-states/sandbox.config.json | 5 ++ .../button/interaction-states/src/index.css | 43 +++++++++++ .../button/interaction-states/src/index.tsx | 41 ++++++++++ .../button/interaction-states/tsconfig.json | 44 +++++++++++ .../button/interaction-states/vite.config.js | 12 +++ .../layout/.devcontainer/devcontainer.json | 4 + samples/inputs/button/layout/.eslintrc.js | 10 +++ samples/inputs/button/layout/README.md | 56 ++++++++++++++ samples/inputs/button/layout/index.html | 11 +++ samples/inputs/button/layout/package.json | 37 +++++++++ .../inputs/button/layout/sandbox.config.json | 5 ++ samples/inputs/button/layout/src/index.css | 26 +++++++ samples/inputs/button/layout/src/index.tsx | 52 +++++++++++++ samples/inputs/button/layout/tsconfig.json | 29 +++++++ samples/inputs/button/layout/vite.config.js | 12 +++ samples/inputs/button/outlined/src/index.tsx | 29 +++---- .../overview/src/ButtonOverviewStyle.css | 6 -- samples/inputs/button/overview/src/index.css | 33 ++++++++ samples/inputs/button/overview/src/index.tsx | 36 +++++---- .../button/size/src/ButtonSizingStyle.css | 22 ------ samples/inputs/button/size/src/index.css | 68 ++++++++++++++++ samples/inputs/button/size/src/index.tsx | 77 ++++++++++--------- .../states/.devcontainer/devcontainer.json | 4 + samples/inputs/button/states/.eslintrc.js | 75 ++++++++++++++++++ samples/inputs/button/states/README.md | 56 ++++++++++++++ samples/inputs/button/states/index.html | 11 +++ samples/inputs/button/states/package.json | 42 ++++++++++ .../inputs/button/states/sandbox.config.json | 5 ++ samples/inputs/button/states/src/index.css | 17 ++++ samples/inputs/button/states/src/index.tsx | 54 +++++++++++++ samples/inputs/button/states/tsconfig.json | 44 +++++++++++ samples/inputs/button/states/vite.config.js | 12 +++ .../inputs/button/styling/src/ButtonStyle.css | 4 - samples/inputs/button/styling/src/index.css | 76 +++++++++++++++++- samples/inputs/button/styling/src/index.tsx | 40 ++++++---- .../.devcontainer/devcontainer.json | 4 + .../button/tailwind-styling/.eslintrc.js | 31 ++++++++ .../inputs/button/tailwind-styling/README.md | 56 ++++++++++++++ .../inputs/button/tailwind-styling/index.html | 11 +++ .../button/tailwind-styling/package.json | 44 +++++++++++ .../tailwind-styling/sandbox.config.json | 5 ++ .../button/tailwind-styling/src/index.css | 77 +++++++++++++++++++ .../button/tailwind-styling/src/index.tsx | 37 +++++++++ .../button/tailwind-styling/tsconfig.json | 44 +++++++++++ .../button/tailwind-styling/vite.config.js | 13 ++++ 56 files changed, 1543 insertions(+), 164 deletions(-) create mode 100644 samples/inputs/button/interaction-states/.devcontainer/devcontainer.json create mode 100644 samples/inputs/button/interaction-states/.eslintrc.js create mode 100644 samples/inputs/button/interaction-states/README.md create mode 100644 samples/inputs/button/interaction-states/index.html create mode 100644 samples/inputs/button/interaction-states/package.json create mode 100644 samples/inputs/button/interaction-states/sandbox.config.json create mode 100644 samples/inputs/button/interaction-states/src/index.css create mode 100644 samples/inputs/button/interaction-states/src/index.tsx create mode 100644 samples/inputs/button/interaction-states/tsconfig.json create mode 100644 samples/inputs/button/interaction-states/vite.config.js create mode 100644 samples/inputs/button/layout/.devcontainer/devcontainer.json create mode 100644 samples/inputs/button/layout/.eslintrc.js create mode 100644 samples/inputs/button/layout/README.md create mode 100644 samples/inputs/button/layout/index.html create mode 100644 samples/inputs/button/layout/package.json create mode 100644 samples/inputs/button/layout/sandbox.config.json create mode 100644 samples/inputs/button/layout/src/index.css create mode 100644 samples/inputs/button/layout/src/index.tsx create mode 100644 samples/inputs/button/layout/tsconfig.json create mode 100644 samples/inputs/button/layout/vite.config.js delete mode 100644 samples/inputs/button/overview/src/ButtonOverviewStyle.css create mode 100644 samples/inputs/button/overview/src/index.css delete mode 100644 samples/inputs/button/size/src/ButtonSizingStyle.css create mode 100644 samples/inputs/button/size/src/index.css create mode 100644 samples/inputs/button/states/.devcontainer/devcontainer.json create mode 100644 samples/inputs/button/states/.eslintrc.js create mode 100644 samples/inputs/button/states/README.md create mode 100644 samples/inputs/button/states/index.html create mode 100644 samples/inputs/button/states/package.json create mode 100644 samples/inputs/button/states/sandbox.config.json create mode 100644 samples/inputs/button/states/src/index.css create mode 100644 samples/inputs/button/states/src/index.tsx create mode 100644 samples/inputs/button/states/tsconfig.json create mode 100644 samples/inputs/button/states/vite.config.js delete mode 100644 samples/inputs/button/styling/src/ButtonStyle.css create mode 100644 samples/inputs/button/tailwind-styling/.devcontainer/devcontainer.json create mode 100644 samples/inputs/button/tailwind-styling/.eslintrc.js create mode 100644 samples/inputs/button/tailwind-styling/README.md create mode 100644 samples/inputs/button/tailwind-styling/index.html create mode 100644 samples/inputs/button/tailwind-styling/package.json create mode 100644 samples/inputs/button/tailwind-styling/sandbox.config.json create mode 100644 samples/inputs/button/tailwind-styling/src/index.css create mode 100644 samples/inputs/button/tailwind-styling/src/index.tsx create mode 100644 samples/inputs/button/tailwind-styling/tsconfig.json create mode 100644 samples/inputs/button/tailwind-styling/vite.config.js diff --git a/browser/public/meta.json b/browser/public/meta.json index b57b1e34c3..f14291184a 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-20 10:35:10","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-04 17:02:55","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index b57b1e34c3..f14291184a 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-20 10:35:10","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-04 17:02:55","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/button/contained/src/index.tsx b/samples/inputs/button/contained/src/index.tsx index 3d20d80e57..39c7fb29f9 100644 --- a/samples/inputs/button/contained/src/index.tsx +++ b/samples/inputs/button/contained/src/index.tsx @@ -1,22 +1,25 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrButton } from 'igniteui-react'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class ButtonContained extends React.Component { +const notificationsIcon = ''; - constructor(props: any) { - super(props); - } +export default function ButtonContained() { + useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + }, []); - public render(): JSX.Element { - return ( -
- Contained -
- ); - } + return ( +
+ + + Contained + + +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/button/fab/src/index.tsx b/samples/inputs/button/fab/src/index.tsx index 921df14c2c..69fc08516c 100644 --- a/samples/inputs/button/fab/src/index.tsx +++ b/samples/inputs/button/fab/src/index.tsx @@ -1,25 +1,25 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrButton } from 'igniteui-react'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class ButtonFab extends React.Component { +const addIcon = ''; - constructor(props: any) { - super(props); - } +export default function ButtonFab() { + useEffect(() => { + registerIconFromText('add', addIcon, 'material'); + }, []); - public render(): JSX.Element { - return ( -
- - + - Add - -
- ); - } + return ( +
+ + + Floating Action + + +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/button/flat/src/index.css b/samples/inputs/button/flat/src/index.css index 9263b38c47..019bfa2d76 100644 --- a/samples/inputs/button/flat/src/index.css +++ b/samples/inputs/button/flat/src/index.css @@ -1,12 +1,7 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -.container { - background: var(--ig-surface-600); -} - igc-button { width: 40%; margin: auto; - background: var(--ig-surface-50); } \ No newline at end of file diff --git a/samples/inputs/button/flat/src/index.tsx b/samples/inputs/button/flat/src/index.tsx index d808fbef41..77d790cd13 100644 --- a/samples/inputs/button/flat/src/index.tsx +++ b/samples/inputs/button/flat/src/index.tsx @@ -1,22 +1,25 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrButton } from 'igniteui-react'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class ButtonFlat extends React.Component { +const notificationsIcon = ''; - constructor(props: any) { - super(props); - } +export default function ButtonFlat() { + useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + }, []); - public render(): JSX.Element { - return ( -
- Flat -
- ); - } + return ( +
+ + + Flat + + +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/button/interaction-states/.devcontainer/devcontainer.json b/samples/inputs/button/interaction-states/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/button/interaction-states/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/button/interaction-states/.eslintrc.js b/samples/inputs/button/interaction-states/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/button/interaction-states/.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/button/interaction-states/README.md b/samples/inputs/button/interaction-states/README.md new file mode 100644 index 0000000000..d8b44dba6b --- /dev/null +++ b/samples/inputs/button/interaction-states/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Interaction States feature using [Button](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/button/interaction-states +``` + +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/button/interaction-states/index.html b/samples/inputs/button/interaction-states/index.html new file mode 100644 index 0000000000..6ba03a0262 --- /dev/null +++ b/samples/inputs/button/interaction-states/index.html @@ -0,0 +1,11 @@ + + + + ButtonInteractionStates + + + +
+ + + diff --git a/samples/inputs/button/interaction-states/package.json b/samples/inputs/button/interaction-states/package.json new file mode 100644 index 0000000000..ae5ee19153 --- /dev/null +++ b/samples/inputs/button/interaction-states/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-button-interaction-states", + "description": "This project provides example of Button Interaction States using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "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", + "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" + ] +} diff --git a/samples/inputs/button/interaction-states/sandbox.config.json b/samples/inputs/button/interaction-states/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/button/interaction-states/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/button/interaction-states/src/index.css b/samples/inputs/button/interaction-states/src/index.css new file mode 100644 index 0000000000..1a88704aac --- /dev/null +++ b/samples/inputs/button/interaction-states/src/index.css @@ -0,0 +1,43 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.button-container { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + padding: 1rem; +} + +.button-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; +} + +.button-label { + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + font-style: normal; + line-height: 20px; + letter-spacing: 0.3px; +} + +igc-button.state-hover::part(base) { + background: var(--hover-background); + color: var(--hover-foreground); +} + +igc-button.state-focused::part(base), +igc-button.state-focused-hover::part(base) { + background: var(--focus-background); + color: var(--focus-foreground); +} + +igc-button.state-focused-hover::part(base) { + background: var(--focus-hover-background); + color: var(--focus-hover-foreground); +} diff --git a/samples/inputs/button/interaction-states/src/index.tsx b/samples/inputs/button/interaction-states/src/index.tsx new file mode 100644 index 0000000000..f1635686ef --- /dev/null +++ b/samples/inputs/button/interaction-states/src/index.tsx @@ -0,0 +1,41 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const notificationsIcon = ''; + +const states = [ + { label: 'Idle', value: 'idle' }, + { label: 'Hover', value: 'state-hover' }, + { label: 'Focused', value: 'state-focused' }, + { label: 'Focused & Hover', value: 'state-focused-hover' }, +]; + +export default function ButtonInteractionStates() { + useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + }, []); + + return ( +
+
+ {states.map((state) => ( +
+ {state.label} + + + Contained + + +
+ ))} +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/button/interaction-states/tsconfig.json b/samples/inputs/button/interaction-states/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/button/interaction-states/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/button/interaction-states/vite.config.js b/samples/inputs/button/interaction-states/vite.config.js new file mode 100644 index 0000000000..4fc593892f --- /dev/null +++ b/samples/inputs/button/interaction-states/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); diff --git a/samples/inputs/button/layout/.devcontainer/devcontainer.json b/samples/inputs/button/layout/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/button/layout/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/button/layout/.eslintrc.js b/samples/inputs/button/layout/.eslintrc.js new file mode 100644 index 0000000000..72ac261251 --- /dev/null +++ b/samples/inputs/button/layout/.eslintrc.js @@ -0,0 +1,10 @@ +module.exports = { + parser: "@typescript-eslint/parser", + parserOptions: { ecmaVersion: 2020, sourceType: "module", ecmaFeatures: { jsx: true } }, + extends: ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended"], + rules: { + "no-undef": "off", "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off" + } +}; diff --git a/samples/inputs/button/layout/README.md b/samples/inputs/button/layout/README.md new file mode 100644 index 0000000000..c4aafc49ab --- /dev/null +++ b/samples/inputs/button/layout/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Layout feature using [Button](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/button/layout +``` + +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/button/layout/index.html b/samples/inputs/button/layout/index.html new file mode 100644 index 0000000000..10985db98a --- /dev/null +++ b/samples/inputs/button/layout/index.html @@ -0,0 +1,11 @@ + + + + ButtonLayout + + + +
+ + + diff --git a/samples/inputs/button/layout/package.json b/samples/inputs/button/layout/package.json new file mode 100644 index 0000000000..0ea36e0a51 --- /dev/null +++ b/samples/inputs/button/layout/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-button-layout", + "description": "This project provides example of Button Layout using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "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", + "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"] +} diff --git a/samples/inputs/button/layout/sandbox.config.json b/samples/inputs/button/layout/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/button/layout/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/button/layout/src/index.css b/samples/inputs/button/layout/src/index.css new file mode 100644 index 0000000000..bf227b0183 --- /dev/null +++ b/samples/inputs/button/layout/src/index.css @@ -0,0 +1,26 @@ +/* shared styles are loaded from: + https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.button-container { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + width: 100%; + box-sizing: border-box; + padding: 2rem; +} + +.button-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; +} + +igc-button::part(base) { + font-family: 'Titillium Web', sans-serif; + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 1px; +} diff --git a/samples/inputs/button/layout/src/index.tsx b/samples/inputs/button/layout/src/index.tsx new file mode 100644 index 0000000000..db0fdc612f --- /dev/null +++ b/samples/inputs/button/layout/src/index.tsx @@ -0,0 +1,52 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const addIcon = ''; + +export default function ButtonLayout() { + useEffect(() => { + registerIconFromText('add', addIcon, 'material'); + }, []); + + return ( +
+
+
+ + + Add + +
+
+ Buy Now +
+
+ + Add + + +
+
+ + + Floating Action + +
+
+ + + +
+
+ Floating Action +
+
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/button/layout/tsconfig.json b/samples/inputs/button/layout/tsconfig.json new file mode 100644 index 0000000000..6c343726b3 --- /dev/null +++ b/samples/inputs/button/layout/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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/button/layout/vite.config.js b/samples/inputs/button/layout/vite.config.js new file mode 100644 index 0000000000..4fc593892f --- /dev/null +++ b/samples/inputs/button/layout/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); diff --git a/samples/inputs/button/outlined/src/index.tsx b/samples/inputs/button/outlined/src/index.tsx index 2bf99a463b..cea939b336 100644 --- a/samples/inputs/button/outlined/src/index.tsx +++ b/samples/inputs/button/outlined/src/index.tsx @@ -1,22 +1,25 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrButton } from 'igniteui-react'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class ButtonOutlined extends React.Component { +const notificationsIcon = ''; - constructor(props: any) { - super(props); - } +export default function ButtonOutlined() { + useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + }, []); - public render(): JSX.Element { - return ( -
- Outlined -
- ); - } + return ( +
+ + + Outlined + + +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/button/overview/src/ButtonOverviewStyle.css b/samples/inputs/button/overview/src/ButtonOverviewStyle.css deleted file mode 100644 index 8fbc85d09d..0000000000 --- a/samples/inputs/button/overview/src/ButtonOverviewStyle.css +++ /dev/null @@ -1,6 +0,0 @@ -.button-container { - display: flex; - justify-content: space-evenly; - align-items: center; - height: 100%; -} \ No newline at end of file diff --git a/samples/inputs/button/overview/src/index.css b/samples/inputs/button/overview/src/index.css new file mode 100644 index 0000000000..776e466b12 --- /dev/null +++ b/samples/inputs/button/overview/src/index.css @@ -0,0 +1,33 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.form { + display: flex; + justify-content: center; + gap: 1.25rem; + padding: 1.5rem; +} + +.form igc-avatar { + --ig-size: var(--ig-size-large); +} + +.fields { + display: flex; + flex-direction: column; + gap: 1rem; + max-width: 260px; + width: 100%; +} + +.fields igc-input::part(container), +.fields igc-input::part(input) { + background-color: var(--ig-gray-50); +} + +.actions { + display: flex; + justify-content: flex-end; + gap: 1rem; + margin-top: 0.5rem; +} diff --git a/samples/inputs/button/overview/src/index.tsx b/samples/inputs/button/overview/src/index.tsx index 56d86a8ab6..b39ea3f5e2 100644 --- a/samples/inputs/button/overview/src/index.tsx +++ b/samples/inputs/button/overview/src/index.tsx @@ -1,26 +1,28 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import './ButtonOverviewStyle.css'; -import { IgrButton } from 'igniteui-react'; +import { IgrAvatar, IgrButton, IgrInput } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './index.css'; -export default class ButtonOverview extends React.Component { - - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
-
- Flat - Contained - Outlined +export default function ButtonOverview() { + return ( +
+
+ +
+ + +
+ Cancel + Save +
- ); - } +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/button/size/src/ButtonSizingStyle.css b/samples/inputs/button/size/src/ButtonSizingStyle.css deleted file mode 100644 index d2f4c0b947..0000000000 --- a/samples/inputs/button/size/src/ButtonSizingStyle.css +++ /dev/null @@ -1,22 +0,0 @@ -.button-container { - display: flex; - justify-content: space-evenly; - align-items: center; - margin-top: 20px; -} - -.container { - justify-content: center; -} - -.size-small { - --ig-size: var(--ig-size-small); -} - -.size-medium { - --ig-size: var(--ig-size-medium); -} - -.size-large { - --ig-size: var(--ig-size-large); -} \ No newline at end of file diff --git a/samples/inputs/button/size/src/index.css b/samples/inputs/button/size/src/index.css new file mode 100644 index 0000000000..253b1675af --- /dev/null +++ b/samples/inputs/button/size/src/index.css @@ -0,0 +1,68 @@ +.container { + justify-content: center; + align-items: center; +} + +.size-grid { + display: flex; + flex-direction: column; + gap: 1.25rem; + padding: 1rem; + width: 100%; + box-sizing: border-box; + overflow: hidden; +} + +.size-row { + display: grid; + grid-template-columns: 70px repeat(4, minmax(0, 1fr)); + align-items: center; + justify-items: center; + column-gap: 1rem; + row-gap: 0.5rem; + width: 100%; +} + +.size-header { + display: grid; + grid-template-columns: 70px repeat(4, minmax(0, 1fr)); + align-items: center; + justify-items: center; + column-gap: 1rem; + width: 100%; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + line-height: 20px; + letter-spacing: 0.3px; +} + +.size-row igc-button { + width: auto; + transform: scale(0.9); +} + +.size-label { + justify-self: start; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + font-style: normal; + line-height: 20px; + letter-spacing: 0.3px; + display: inline-flex; + align-items: center; +} + +.size-small { + --ig-size: var(--ig-size-small); +} + +.size-medium { + --ig-size: var(--ig-size-medium); +} + +.size-large { + --ig-size: var(--ig-size-large); +} \ No newline at end of file diff --git a/samples/inputs/button/size/src/index.tsx b/samples/inputs/button/size/src/index.tsx index a454e6259c..ccd65e856d 100644 --- a/samples/inputs/button/size/src/index.tsx +++ b/samples/inputs/button/size/src/index.tsx @@ -1,47 +1,52 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; -import './ButtonSizingStyle.css'; -import { IgrButton, IgrRadio, IgrRadioGroup } from 'igniteui-react'; +import './index.css'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class ButtonSize extends React.Component { +const notificationsIcon = ''; +const addIcon = ''; - constructor(props: any) { - super(props); - this.onRadioChange = this.onRadioChange.bind(this); - this.state = { size: "medium"}; - } +const sizes = ['large', 'medium', 'small']; +const variants: any[] = ['contained', 'outlined', 'flat']; - public render(): JSX.Element { - return ( -
- - - Small - - - Medium - - - Large - - +export default function ButtonSize() { + useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + registerIconFromText('add', addIcon, 'material'); + }, []); -
- Flat - Contained - Outlined - Like + return ( +
+
+
+ + Contained + Outlined + Flat + Fab
-
- ); - } + {sizes.map((size) => ( +
+ {size[0].toUpperCase() + size.slice(1)} + {variants.map((variant) => ( + + + {variant[0].toUpperCase() + variant.slice(1)} + + + ))} + + + Floating Action + + +
+ ))} - public onRadioChange(e: any) { - if (e.detail.checked == true) { - this.setState({ size: e.detail.value }); - } - } +
+
+ ); } diff --git a/samples/inputs/button/states/.devcontainer/devcontainer.json b/samples/inputs/button/states/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/button/states/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/button/states/.eslintrc.js b/samples/inputs/button/states/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/button/states/.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/button/states/README.md b/samples/inputs/button/states/README.md new file mode 100644 index 0000000000..026ad425da --- /dev/null +++ b/samples/inputs/button/states/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of States feature using [Button](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/button/states +``` + +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/button/states/index.html b/samples/inputs/button/states/index.html new file mode 100644 index 0000000000..3e8e1d0379 --- /dev/null +++ b/samples/inputs/button/states/index.html @@ -0,0 +1,11 @@ + + + + ButtonStates + + + +
+ + + diff --git a/samples/inputs/button/states/package.json b/samples/inputs/button/states/package.json new file mode 100644 index 0000000000..63d1867b4a --- /dev/null +++ b/samples/inputs/button/states/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-button-states", + "description": "This project provides example of Button States using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "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", + "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" + ] +} diff --git a/samples/inputs/button/states/sandbox.config.json b/samples/inputs/button/states/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/button/states/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/button/states/src/index.css b/samples/inputs/button/states/src/index.css new file mode 100644 index 0000000000..fcf8002f65 --- /dev/null +++ b/samples/inputs/button/states/src/index.css @@ -0,0 +1,17 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.button-container { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + padding: 1.5rem; +} + +.button-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5rem; +} diff --git a/samples/inputs/button/states/src/index.tsx b/samples/inputs/button/states/src/index.tsx new file mode 100644 index 0000000000..5f852586a1 --- /dev/null +++ b/samples/inputs/button/states/src/index.tsx @@ -0,0 +1,54 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const notificationsIcon = ''; +const addIcon = ''; + +export default function ButtonStates() { + useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + registerIconFromText('add', addIcon, 'material'); + }, []); + + return ( +
+
+
+ + + Contained + + +
+
+ + + Outlined + + +
+
+ + + Flat + + +
+
+ + + Floating Action + + +
+
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/button/states/tsconfig.json b/samples/inputs/button/states/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/button/states/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/button/states/vite.config.js b/samples/inputs/button/states/vite.config.js new file mode 100644 index 0000000000..4fc593892f --- /dev/null +++ b/samples/inputs/button/states/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); diff --git a/samples/inputs/button/styling/src/ButtonStyle.css b/samples/inputs/button/styling/src/ButtonStyle.css deleted file mode 100644 index 8e9b561851..0000000000 --- a/samples/inputs/button/styling/src/ButtonStyle.css +++ /dev/null @@ -1,4 +0,0 @@ -igc-button::part(base) { - background-color: var(--ig-warn-700); - color: var(--ig-warn-700-contrast); -} diff --git a/samples/inputs/button/styling/src/index.css b/samples/inputs/button/styling/src/index.css index 019bfa2d76..ed276b2c0d 100644 --- a/samples/inputs/button/styling/src/index.css +++ b/samples/inputs/button/styling/src/index.css @@ -1,7 +1,75 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-button { - width: 40%; - margin: auto; -} \ No newline at end of file +.container { + justify-content: center; + align-items: center; +} + +.button-grid { + display: flex; + flex-direction: column; + gap: 1.5rem; + padding: 1rem; +} + +.button-row { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + align-items: center; + justify-items: center; + gap: 3rem; +} + +igc-button.confirm-button::part(base) { + background-color: #1275c4; + color: #ffffff; +} + +igc-button.confirm-button:hover::part(base) { + background-color: #0b4f8a; + color: #ffffff; +} + +igc-button.send-button::part(base) { + border-color: #8a2be2; + color: #8a2be2; +} + +igc-button.send-button:hover::part(base) { + background-color: #8a2be2; + border-color: #6a1bb1; + color: #ffffff; +} + +igc-button.send-button igc-icon { + color: #8a2be2; +} + +igc-button.send-button:hover igc-icon { + color: #ffffff; +} + +igc-button.cancel-button::part(base) { + color: #1275c4; +} + +igc-button.cancel-button:hover::part(base) { + background-color: #dbeeff; + color: #063b68; +} + +igc-button.add-button::part(base) { + background-color: #4caf50; + color: #000000; + border-radius: 999px; +} + +igc-button.add-button:hover::part(base) { + background-color: #257a2b; + color: #ffffff; +} + +igc-button.add-button igc-icon { + color: #000000; +} diff --git a/samples/inputs/button/styling/src/index.tsx b/samples/inputs/button/styling/src/index.tsx index 3840167aa0..7cda1a5452 100644 --- a/samples/inputs/button/styling/src/index.tsx +++ b/samples/inputs/button/styling/src/index.tsx @@ -1,23 +1,37 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import './ButtonStyle.css'; -import { IgrButton } from 'igniteui-react'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class ButtonStyling extends React.Component { +const icons = [ + { name: 'send', text: '' }, + { name: 'add', text: '' }, +]; - constructor(props: any) { - super(props); - } +export default function ButtonStyling() { + useEffect(() => { + icons.forEach((icon) => registerIconFromText(icon.name, icon.text, 'material')); + }, []); - public render(): JSX.Element { - return ( -
- Contained + return ( +
+
+
+ Confirm + + + Send + + Cancel + + Add + + +
- ); - } +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/button/tailwind-styling/.devcontainer/devcontainer.json b/samples/inputs/button/tailwind-styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/button/tailwind-styling/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/button/tailwind-styling/.eslintrc.js b/samples/inputs/button/tailwind-styling/.eslintrc.js new file mode 100644 index 0000000000..75a0e4251b --- /dev/null +++ b/samples/inputs/button/tailwind-styling/.eslintrc.js @@ -0,0 +1,31 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", + parserOptions: { + ecmaVersion: 2020, + sourceType: "module", + ecmaFeatures: { + jsx: true + } + }, + settings: { + react: { + version: "999.999.999" + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended" + ], + rules: { + "no-undef": "off", + "no-unused-vars": "off", + "prefer-const": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } +}; diff --git a/samples/inputs/button/tailwind-styling/README.md b/samples/inputs/button/tailwind-styling/README.md new file mode 100644 index 0000000000..3279dcc8f2 --- /dev/null +++ b/samples/inputs/button/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Button](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/button/tailwind-styling +``` + +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/button/tailwind-styling/index.html b/samples/inputs/button/tailwind-styling/index.html new file mode 100644 index 0000000000..5b35d0cdfb --- /dev/null +++ b/samples/inputs/button/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + ButtonTailwindStyling + + + +
+ + + diff --git a/samples/inputs/button/tailwind-styling/package.json b/samples/inputs/button/tailwind-styling/package.json new file mode 100644 index 0000000000..4db0e74b0e --- /dev/null +++ b/samples/inputs/button/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-button-tailwind-styling", + "description": "This project provides example of Button Tailwind Styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.1.14", + "@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", + "tailwindcss": "^4.1.14", + "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" + ] +} diff --git a/samples/inputs/button/tailwind-styling/sandbox.config.json b/samples/inputs/button/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/button/tailwind-styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/button/tailwind-styling/src/index.css b/samples/inputs/button/tailwind-styling/src/index.css new file mode 100644 index 0000000000..af88ee1c32 --- /dev/null +++ b/samples/inputs/button/tailwind-styling/src/index.css @@ -0,0 +1,77 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +@layer theme, base, components, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); + +/* web component internals cannot be styled with Tailwind utilities, + because they live in the shadow DOM, so exposed CSS parts are used */ + +.button-grid { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + gap: 1.5rem; + padding: 1rem; +} + +.button-row { + display: grid; + grid-template-columns: repeat(4, 7rem); + align-items: center; + justify-items: center; + gap: 1.5rem; +} + +.confirm-button::part(base) { + background-color: var(--color-indigo-700); + color: var(--color-white); +} + +.confirm-button:hover::part(base) { + background-color: var(--color-indigo-900); + color: var(--color-white); +} + +.send-button::part(base) { + border-color: var(--color-pink-600); + color: var(--color-pink-600); +} + +.send-button:hover::part(base) { + background-color: var(--color-pink-600); + border-color: var(--color-pink-700); + color: var(--color-white); +} + +.send-button igc-icon { + color: var(--color-pink-600); +} + +.send-button:hover igc-icon { + color: var(--color-white); +} + +.cancel-button::part(base) { + color: var(--color-amber-700); +} + +.cancel-button:hover::part(base) { + background-color: var(--color-amber-100); + color: var(--color-amber-900); +} + +.add-button::part(base) { + background-color: var(--color-teal-500); + color: var(--color-black); + border-radius: 9999px; +} + +.add-button:hover::part(base) { + background-color: var(--color-teal-800); + color: var(--color-white); +} + diff --git a/samples/inputs/button/tailwind-styling/src/index.tsx b/samples/inputs/button/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..55ccbde39d --- /dev/null +++ b/samples/inputs/button/tailwind-styling/src/index.tsx @@ -0,0 +1,37 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButton, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const icons = [ + { name: 'send', text: '' }, + { name: 'add', text: '' }, +]; + +export default function ButtonTailwindStyling(): JSX.Element { + useEffect(() => { + icons.forEach((icon) => registerIconFromText(icon.name, icon.text, 'material')); + }, []); + + return ( +
+
+ Confirm + + + Send + + Cancel + + Add + + +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/button/tailwind-styling/tsconfig.json b/samples/inputs/button/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/button/tailwind-styling/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/button/tailwind-styling/vite.config.js b/samples/inputs/button/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..c1fff0c83c --- /dev/null +++ b/samples/inputs/button/tailwind-styling/vite.config.js @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); From 8745b7299ae3cecd95a663b1edd1abf21e4ec3f0 Mon Sep 17 00:00:00 2001 From: Hristo Hristov <57346540+Hristo313@users.noreply.github.com> Date: Tue, 15 Sep 2026 16:47:42 +0300 Subject: [PATCH 02/14] feat(switch): update samples content (#1102) --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- .../inputs/switches/checking/src/index.css | 2 - .../inputs/switches/checking/src/index.tsx | 18 --- .../inputs/switches/disabled/src/index.css | 29 ++++- .../inputs/switches/disabled/src/index.tsx | 15 ++- .../.devcontainer/devcontainer.json | 0 .../{checking => enabled}/.eslintrc.js | 0 samples/inputs/switches/enabled/README.md | 56 ++++++++++ .../switches/{checking => enabled}/index.html | 2 +- .../{checking => enabled}/package.json | 4 +- .../{checking => enabled}/sandbox.config.json | 0 samples/inputs/switches/enabled/src/index.css | 33 ++++++ samples/inputs/switches/enabled/src/index.tsx | 45 ++++++++ .../{checking => enabled}/tsconfig.json | 0 .../{checking => enabled}/vite.config.js | 0 .../switches/label/src/SwitchLabelStyles.css | 5 - samples/inputs/switches/label/src/index.css | 2 - samples/inputs/switches/label/src/index.tsx | 22 ---- .../.devcontainer/devcontainer.json | 0 .../switches/{label => layout}/.eslintrc.js | 0 .../switches/{label => layout}/README.md | 8 +- .../switches/{label => layout}/index.html | 2 +- .../switches/{label => layout}/package.json | 4 +- .../{label => layout}/sandbox.config.json | 0 samples/inputs/switches/layout/src/index.css | 29 +++++ samples/inputs/switches/layout/src/index.tsx | 31 ++++++ .../switches/{label => layout}/tsconfig.json | 0 .../switches/{label => layout}/vite.config.js | 0 .../inputs/switches/overview/src/index.css | 59 +++++++++- .../inputs/switches/overview/src/index.tsx | 28 ++++- .../selected/.devcontainer/devcontainer.json | 4 + samples/inputs/switches/selected/.eslintrc.js | 75 +++++++++++++ .../switches/{checking => selected}/README.md | 8 +- samples/inputs/switches/selected/index.html | 11 ++ samples/inputs/switches/selected/package.json | 42 +++++++ .../switches/selected/sandbox.config.json | 5 + .../inputs/switches/selected/src/index.css | 26 +++++ .../inputs/switches/selected/src/index.tsx | 34 ++++++ .../inputs/switches/selected/tsconfig.json | 44 ++++++++ .../inputs/switches/selected/vite.config.js | 12 ++ samples/inputs/switches/styling/src/index.css | 104 ++++++++++++++++-- samples/inputs/switches/styling/src/index.tsx | 24 +++- .../.devcontainer/devcontainer.json | 4 + .../switches/tailwind-styling/.eslintrc.js | 75 +++++++++++++ .../switches/tailwind-styling/README.md | 56 ++++++++++ .../switches/tailwind-styling/index.html | 11 ++ .../switches/tailwind-styling/package.json | 44 ++++++++ .../tailwind-styling/sandbox.config.json | 5 + .../switches/tailwind-styling/src/index.css | 15 +++ .../switches/tailwind-styling/src/index.tsx | 43 ++++++++ .../switches/tailwind-styling/tsconfig.json | 44 ++++++++ .../switches/tailwind-styling/vite.config.js | 13 +++ 53 files changed, 1018 insertions(+), 79 deletions(-) delete mode 100644 samples/inputs/switches/checking/src/index.css delete mode 100644 samples/inputs/switches/checking/src/index.tsx rename samples/inputs/switches/{checking => enabled}/.devcontainer/devcontainer.json (100%) rename samples/inputs/switches/{checking => enabled}/.eslintrc.js (100%) create mode 100644 samples/inputs/switches/enabled/README.md rename samples/inputs/switches/{checking => enabled}/index.html (88%) rename samples/inputs/switches/{checking => enabled}/package.json (87%) rename samples/inputs/switches/{checking => enabled}/sandbox.config.json (100%) create mode 100644 samples/inputs/switches/enabled/src/index.css create mode 100644 samples/inputs/switches/enabled/src/index.tsx rename samples/inputs/switches/{checking => enabled}/tsconfig.json (100%) rename samples/inputs/switches/{checking => enabled}/vite.config.js (100%) delete mode 100644 samples/inputs/switches/label/src/SwitchLabelStyles.css delete mode 100644 samples/inputs/switches/label/src/index.css delete mode 100644 samples/inputs/switches/label/src/index.tsx rename samples/inputs/switches/{label => layout}/.devcontainer/devcontainer.json (100%) rename samples/inputs/switches/{label => layout}/.eslintrc.js (100%) rename samples/inputs/switches/{label => layout}/README.md (86%) rename samples/inputs/switches/{label => layout}/index.html (88%) rename samples/inputs/switches/{label => layout}/package.json (87%) rename samples/inputs/switches/{label => layout}/sandbox.config.json (100%) create mode 100644 samples/inputs/switches/layout/src/index.css create mode 100644 samples/inputs/switches/layout/src/index.tsx rename samples/inputs/switches/{label => layout}/tsconfig.json (100%) rename samples/inputs/switches/{label => layout}/vite.config.js (100%) create mode 100644 samples/inputs/switches/selected/.devcontainer/devcontainer.json create mode 100644 samples/inputs/switches/selected/.eslintrc.js rename samples/inputs/switches/{checking => selected}/README.md (91%) create mode 100644 samples/inputs/switches/selected/index.html create mode 100644 samples/inputs/switches/selected/package.json create mode 100644 samples/inputs/switches/selected/sandbox.config.json create mode 100644 samples/inputs/switches/selected/src/index.css create mode 100644 samples/inputs/switches/selected/src/index.tsx create mode 100644 samples/inputs/switches/selected/tsconfig.json create mode 100644 samples/inputs/switches/selected/vite.config.js create mode 100644 samples/inputs/switches/tailwind-styling/.devcontainer/devcontainer.json create mode 100644 samples/inputs/switches/tailwind-styling/.eslintrc.js create mode 100644 samples/inputs/switches/tailwind-styling/README.md create mode 100644 samples/inputs/switches/tailwind-styling/index.html create mode 100644 samples/inputs/switches/tailwind-styling/package.json create mode 100644 samples/inputs/switches/tailwind-styling/sandbox.config.json create mode 100644 samples/inputs/switches/tailwind-styling/src/index.css create mode 100644 samples/inputs/switches/tailwind-styling/src/index.tsx create mode 100644 samples/inputs/switches/tailwind-styling/tsconfig.json create mode 100644 samples/inputs/switches/tailwind-styling/vite.config.js diff --git a/browser/public/meta.json b/browser/public/meta.json index f14291184a..528f88907d 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-04 17:02:55","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-10 00:01:40","note":"this file is auto-generated"} diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index f14291184a..528f88907d 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-04 17:02:55","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-10 00:01:40","note":"this file is auto-generated"} diff --git a/samples/inputs/switches/checking/src/index.css b/samples/inputs/switches/checking/src/index.css deleted file mode 100644 index 1f53b8aa05..0000000000 --- a/samples/inputs/switches/checking/src/index.css +++ /dev/null @@ -1,2 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/inputs/switches/checking/src/index.tsx b/samples/inputs/switches/checking/src/index.tsx deleted file mode 100644 index 2c7125cc24..0000000000 --- a/samples/inputs/switches/checking/src/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrSwitch } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -export default function SwitchOutlined() { - - return ( -
- Label -
- ); -} - -// rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/inputs/switches/disabled/src/index.css b/samples/inputs/switches/disabled/src/index.css index 1f53b8aa05..b808c875fa 100644 --- a/samples/inputs/switches/disabled/src/index.css +++ b/samples/inputs/switches/disabled/src/index.css @@ -1,2 +1,29 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.states { + --variant-gap: 60px; + --label-gap: 30px; + + display: flex; + align-items: center; + gap: var(--variant-gap); + + & .states__variant { + display: flex; + align-items: center; + gap: var(--label-gap); + } + + & .states__label { + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); + } +} \ No newline at end of file diff --git a/samples/inputs/switches/disabled/src/index.tsx b/samples/inputs/switches/disabled/src/index.tsx index 5ab9aa932f..b4df9c15de 100644 --- a/samples/inputs/switches/disabled/src/index.tsx +++ b/samples/inputs/switches/disabled/src/index.tsx @@ -8,7 +8,20 @@ export default function SwitchDisabled() { return (
- +
+
+ Disabled Checked + + Power + +
+
+ Disabled Unchecked + + Power + +
+
); } diff --git a/samples/inputs/switches/checking/.devcontainer/devcontainer.json b/samples/inputs/switches/enabled/.devcontainer/devcontainer.json similarity index 100% rename from samples/inputs/switches/checking/.devcontainer/devcontainer.json rename to samples/inputs/switches/enabled/.devcontainer/devcontainer.json diff --git a/samples/inputs/switches/checking/.eslintrc.js b/samples/inputs/switches/enabled/.eslintrc.js similarity index 100% rename from samples/inputs/switches/checking/.eslintrc.js rename to samples/inputs/switches/enabled/.eslintrc.js diff --git a/samples/inputs/switches/enabled/README.md b/samples/inputs/switches/enabled/README.md new file mode 100644 index 0000000000..d2e32ff8a2 --- /dev/null +++ b/samples/inputs/switches/enabled/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Enabled feature using [Switches](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/switches/enabled +``` + +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/switches/checking/index.html b/samples/inputs/switches/enabled/index.html similarity index 88% rename from samples/inputs/switches/checking/index.html rename to samples/inputs/switches/enabled/index.html index 304d0bb440..d5f3c7421f 100644 --- a/samples/inputs/switches/checking/index.html +++ b/samples/inputs/switches/enabled/index.html @@ -1,7 +1,7 @@ - SwitchChecking + SwitchEnabled diff --git a/samples/inputs/switches/checking/package.json b/samples/inputs/switches/enabled/package.json similarity index 87% rename from samples/inputs/switches/checking/package.json rename to samples/inputs/switches/enabled/package.json index 035625c19a..0ee6989e41 100644 --- a/samples/inputs/switches/checking/package.json +++ b/samples/inputs/switches/enabled/package.json @@ -1,6 +1,6 @@ { - "name": "react-switch-checking", - "description": "This project provides example of Switch Checking using Infragistics React components", + "name": "react-switch-enabled", + "description": "This project provides example of Switch Enabled using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/switches/checking/sandbox.config.json b/samples/inputs/switches/enabled/sandbox.config.json similarity index 100% rename from samples/inputs/switches/checking/sandbox.config.json rename to samples/inputs/switches/enabled/sandbox.config.json diff --git a/samples/inputs/switches/enabled/src/index.css b/samples/inputs/switches/enabled/src/index.css new file mode 100644 index 0000000000..379ecd447f --- /dev/null +++ b/samples/inputs/switches/enabled/src/index.css @@ -0,0 +1,33 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.states { + display: grid; + grid-template-columns: repeat(4, auto); + align-items: center; + gap: 32px; + + & :is(.states__column, .states__row) { + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); + } + + & .states__column { + text-align: center; + } + + & .states__row { + text-align: end; + } + + & igc-switch { + justify-self: center; + } +} diff --git a/samples/inputs/switches/enabled/src/index.tsx b/samples/inputs/switches/enabled/src/index.tsx new file mode 100644 index 0000000000..24bf4a3151 --- /dev/null +++ b/samples/inputs/switches/enabled/src/index.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrSwitch } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function SwitchEnabled() { + + return ( +
+
+ + Hover + Focused + Focused & Hover + + Enabled / On + + Power + + + Power + + + Power + + + Enabled / Off + + Power + + + Power + + + Power + +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/switches/checking/tsconfig.json b/samples/inputs/switches/enabled/tsconfig.json similarity index 100% rename from samples/inputs/switches/checking/tsconfig.json rename to samples/inputs/switches/enabled/tsconfig.json diff --git a/samples/inputs/switches/checking/vite.config.js b/samples/inputs/switches/enabled/vite.config.js similarity index 100% rename from samples/inputs/switches/checking/vite.config.js rename to samples/inputs/switches/enabled/vite.config.js diff --git a/samples/inputs/switches/label/src/SwitchLabelStyles.css b/samples/inputs/switches/label/src/SwitchLabelStyles.css deleted file mode 100644 index 21bf881ab2..0000000000 --- a/samples/inputs/switches/label/src/SwitchLabelStyles.css +++ /dev/null @@ -1,5 +0,0 @@ -.wrapper { - display: flex; - align-items: center; - gap: 0.5rem; -} \ No newline at end of file diff --git a/samples/inputs/switches/label/src/index.css b/samples/inputs/switches/label/src/index.css deleted file mode 100644 index 1f53b8aa05..0000000000 --- a/samples/inputs/switches/label/src/index.css +++ /dev/null @@ -1,2 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/inputs/switches/label/src/index.tsx b/samples/inputs/switches/label/src/index.tsx deleted file mode 100644 index 39ae73b8c9..0000000000 --- a/samples/inputs/switches/label/src/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import './SwitchLabelStyles.css'; -import { IgrSwitch } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -export default function SwitchLabel() { - - return ( -
- Label -
- Label -
-
- ); -} - -// rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/inputs/switches/label/.devcontainer/devcontainer.json b/samples/inputs/switches/layout/.devcontainer/devcontainer.json similarity index 100% rename from samples/inputs/switches/label/.devcontainer/devcontainer.json rename to samples/inputs/switches/layout/.devcontainer/devcontainer.json diff --git a/samples/inputs/switches/label/.eslintrc.js b/samples/inputs/switches/layout/.eslintrc.js similarity index 100% rename from samples/inputs/switches/label/.eslintrc.js rename to samples/inputs/switches/layout/.eslintrc.js diff --git a/samples/inputs/switches/label/README.md b/samples/inputs/switches/layout/README.md similarity index 86% rename from samples/inputs/switches/label/README.md rename to samples/inputs/switches/layout/README.md index 7dbefe7c58..f8eedc8414 100644 --- a/samples/inputs/switches/label/README.md +++ b/samples/inputs/switches/layout/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Label feature using [Switches](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Layout feature using [Switches](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Label f View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ 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/switches/label +cd ./samples/inputs/switches/layout ``` open above folder in VS Code or type: diff --git a/samples/inputs/switches/label/index.html b/samples/inputs/switches/layout/index.html similarity index 88% rename from samples/inputs/switches/label/index.html rename to samples/inputs/switches/layout/index.html index a5c362fa44..4ae350158f 100644 --- a/samples/inputs/switches/label/index.html +++ b/samples/inputs/switches/layout/index.html @@ -1,7 +1,7 @@ - SwitchLabel + SwitchLayout diff --git a/samples/inputs/switches/label/package.json b/samples/inputs/switches/layout/package.json similarity index 87% rename from samples/inputs/switches/label/package.json rename to samples/inputs/switches/layout/package.json index ca7e54766a..41ccf6d2c2 100644 --- a/samples/inputs/switches/label/package.json +++ b/samples/inputs/switches/layout/package.json @@ -1,6 +1,6 @@ { - "name": "react-switch-label", - "description": "This project provides example of Switch Label using Infragistics React components", + "name": "react-switch-layout", + "description": "This project provides example of Switch Layout using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/switches/label/sandbox.config.json b/samples/inputs/switches/layout/sandbox.config.json similarity index 100% rename from samples/inputs/switches/label/sandbox.config.json rename to samples/inputs/switches/layout/sandbox.config.json diff --git a/samples/inputs/switches/layout/src/index.css b/samples/inputs/switches/layout/src/index.css new file mode 100644 index 0000000000..3b71591b7c --- /dev/null +++ b/samples/inputs/switches/layout/src/index.css @@ -0,0 +1,29 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.variants { + --variant-gap: 60px; + --label-gap: 30px; + + display: flex; + align-items: center; + gap: var(--variant-gap); + + & .variants__item { + display: flex; + align-items: center; + gap: var(--label-gap); + } + + & .variants__label { + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); + } +} diff --git a/samples/inputs/switches/layout/src/index.tsx b/samples/inputs/switches/layout/src/index.tsx new file mode 100644 index 0000000000..6625efd335 --- /dev/null +++ b/samples/inputs/switches/layout/src/index.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrSwitch } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function SwitchLayout() { + + return ( +
+
+
+ Label Before + + Power + +
+
+ Label After + + Power + +
+
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/switches/label/tsconfig.json b/samples/inputs/switches/layout/tsconfig.json similarity index 100% rename from samples/inputs/switches/label/tsconfig.json rename to samples/inputs/switches/layout/tsconfig.json diff --git a/samples/inputs/switches/label/vite.config.js b/samples/inputs/switches/layout/vite.config.js similarity index 100% rename from samples/inputs/switches/label/vite.config.js rename to samples/inputs/switches/layout/vite.config.js diff --git a/samples/inputs/switches/overview/src/index.css b/samples/inputs/switches/overview/src/index.css index 1f53b8aa05..38aea371df 100644 --- a/samples/inputs/switches/overview/src/index.css +++ b/samples/inputs/switches/overview/src/index.css @@ -1,2 +1,59 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.notifications { + inline-size: 100%; + max-inline-size: 384px; + background: var(--ig-surface-500); + border-radius: 4px; + overflow: hidden; + + & .notifications__title { + margin: 0; + padding: 16px; + font: 400 10px / 16px "Titillium Web", sans-serif; + letter-spacing: 1.5px; + text-transform: uppercase; + color: var(--ig-primary-500); + } + + & .notifications__row { + padding-block: 12px; + padding-inline: 16px; + + & igc-switch { + display: block; + inline-size: 100%; + + &::part(base) { + inline-size: 100%; + justify-content: space-between; + gap: 16px; + } + } + } +} + +.option { + display: flex; + flex-direction: column; + gap: 2px; + text-align: start; + white-space: normal; + + & .option__label { + font-size: 16px; + color: var(--ig-gray-900); + } + + & .option__hint { + font-size: 13px; + color: var(--ig-gray-700); + } +} \ No newline at end of file diff --git a/samples/inputs/switches/overview/src/index.tsx b/samples/inputs/switches/overview/src/index.tsx index ea33b4c482..4e73359bc9 100644 --- a/samples/inputs/switches/overview/src/index.tsx +++ b/samples/inputs/switches/overview/src/index.tsx @@ -8,7 +8,33 @@ export default function SwitchOverview() { return (
- +
+
Notifications
+
+ + + Push notifications + Deliver alerts to this device + + +
+
+ + + Weekly digest + Summary email every Monday + + +
+
+ + + SMS alerts + Unavailable on your plan + + +
+
); } diff --git a/samples/inputs/switches/selected/.devcontainer/devcontainer.json b/samples/inputs/switches/selected/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/switches/selected/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/switches/selected/.eslintrc.js b/samples/inputs/switches/selected/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/switches/selected/.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/switches/checking/README.md b/samples/inputs/switches/selected/README.md similarity index 91% rename from samples/inputs/switches/checking/README.md rename to samples/inputs/switches/selected/README.md index b8edb447c9..5895b10d6c 100644 --- a/samples/inputs/switches/checking/README.md +++ b/samples/inputs/switches/selected/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Checking feature using [Switches](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Selected feature using [Switches](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Checkin View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ 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/switches/checking +cd ./samples/inputs/switches/selected ``` open above folder in VS Code or type: diff --git a/samples/inputs/switches/selected/index.html b/samples/inputs/switches/selected/index.html new file mode 100644 index 0000000000..8450fca17b --- /dev/null +++ b/samples/inputs/switches/selected/index.html @@ -0,0 +1,11 @@ + + + + SwitchSelected + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/switches/selected/package.json b/samples/inputs/switches/selected/package.json new file mode 100644 index 0000000000..e697c1bedf --- /dev/null +++ b/samples/inputs/switches/selected/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-switch-selected", + "description": "This project provides example of Switch Selected using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "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", + "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" + ] +} diff --git a/samples/inputs/switches/selected/sandbox.config.json b/samples/inputs/switches/selected/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/switches/selected/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/switches/selected/src/index.css b/samples/inputs/switches/selected/src/index.css new file mode 100644 index 0000000000..32f67af851 --- /dev/null +++ b/samples/inputs/switches/selected/src/index.css @@ -0,0 +1,26 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.states { + display: grid; + grid-template-columns: repeat(3, auto); + align-items: center; + gap: 32px; + + & .states__row { + text-align: end; + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); + } + + & .states__disabled { + margin-inline-start: 16px; + } +} diff --git a/samples/inputs/switches/selected/src/index.tsx b/samples/inputs/switches/selected/src/index.tsx new file mode 100644 index 0000000000..89a8b56136 --- /dev/null +++ b/samples/inputs/switches/selected/src/index.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrSwitch } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function SwitchSelected() { + + return ( +
+
+ On + + Power + + + Power + + + Off + + Power + + + Power + +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/switches/selected/tsconfig.json b/samples/inputs/switches/selected/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/switches/selected/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/switches/selected/vite.config.js b/samples/inputs/switches/selected/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/switches/selected/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/inputs/switches/styling/src/index.css b/samples/inputs/switches/styling/src/index.css index fc42274b5e..66e5527723 100644 --- a/samples/inputs/switches/styling/src/index.css +++ b/samples/inputs/switches/styling/src/index.css @@ -1,10 +1,100 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - igc-switch { - --thumb-on-color: white; - --thumb-off-color: var(--ig-success-500); - --track-on-color: var(--ig-success-500); /* Background color when checked */ - --track-off-color: white; /* Background color when unchecked */ - --track-on-hover-color: var(--ig-success-500); /* Background hover color when checked */ - } +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.security { + display: block; + inline-size: 100%; + max-inline-size: 348px; + background: var(--ig-surface-500); + border: 1px solid var(--ig-gray-300); + border-radius: 16px; + box-shadow: 0 1px 3px rgb(0 0 0 / 12%); + overflow: hidden; + + &::part(header) { + padding: 16px; + padding-inline-end: 6px; + gap: 16px; + } + + &[open]::part(header) { + border-block-end: 1px solid var(--ig-gray-300); + } + + &::part(indicator) { + transform: none; + } + + &::part(content) { + padding-left: 5px; + } + + & igc-switch { + display: block; + inline-size: 60px; + block-size: 40px; + + &::part(base) { + inline-size: 60px; + block-size: 40px; + justify-content: center; + align-items: center; + overflow: visible; + } + + &::part(control) { + overflow: visible; + } + } + + & igc-radio-group { + display: flex; + flex-direction: column; + gap: 24px; + margin-inline-start: 0; + } + + & igc-radio { + font: 600 12px / 16px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.15px; + color: var(--ig-primary-900); + + &::part(label) { + padding-inline-start: 4px; + } + + &::part(control) { + transform: translateX(-4px); + --fill-color: var(--ig-primary-500); + --fill-color-border: var(--ig-primary-500); + --fill-color-hover: var(--ig-primary-500); + --fill-hover-border-color: var(--ig-primary-500); + } + } +} + +.option { + display: flex; + flex-direction: column; + gap: 2px; + text-align: start; + white-space: normal; + + & .option__label { + font: 600 16px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.15px; + color: var(--ig-gray-700); + } + + & .option__hint { + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); + } +} diff --git a/samples/inputs/switches/styling/src/index.tsx b/samples/inputs/switches/styling/src/index.tsx index db4492f79e..0674c6726e 100644 --- a/samples/inputs/switches/styling/src/index.tsx +++ b/samples/inputs/switches/styling/src/index.tsx @@ -1,14 +1,32 @@ -import React from 'react'; +import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrSwitch } from 'igniteui-react'; +import { IgrSwitch, IgrRadio, IgrRadioGroup, IgrExpansionPanel } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; export default function SwitchStyling() { + const [open, setOpen] = useState(true); return (
- Label + {/* a click on the switch bubbles up to the panel header, so only the open state has to be mirrored back */} + setOpen(true)} + onClosed={() => setOpen(false)}> +
+ Two-factor authentication + Extra sign-in verification +
+ + + Authenticator app + Security key + Backup codes + +
); } diff --git a/samples/inputs/switches/tailwind-styling/.devcontainer/devcontainer.json b/samples/inputs/switches/tailwind-styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/switches/tailwind-styling/.eslintrc.js b/samples/inputs/switches/tailwind-styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/switches/tailwind-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/switches/tailwind-styling/README.md b/samples/inputs/switches/tailwind-styling/README.md new file mode 100644 index 0000000000..f46ca8e656 --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Switches](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/switches/tailwind-styling +``` + +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/switches/tailwind-styling/index.html b/samples/inputs/switches/tailwind-styling/index.html new file mode 100644 index 0000000000..c0a13703ee --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + SwitchTailwindStyling + + + +
+ + + diff --git a/samples/inputs/switches/tailwind-styling/package.json b/samples/inputs/switches/tailwind-styling/package.json new file mode 100644 index 0000000000..f5c00e039d --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-switch-tailwind-styling", + "description": "This project provides example of Switch Tailwind Styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.1.14", + "@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", + "tailwindcss": "^4.1.14", + "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" + ] +} diff --git a/samples/inputs/switches/tailwind-styling/sandbox.config.json b/samples/inputs/switches/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/switches/tailwind-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/switches/tailwind-styling/src/index.css b/samples/inputs/switches/tailwind-styling/src/index.css new file mode 100644 index 0000000000..48aba56acb --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/src/index.css @@ -0,0 +1,15 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +@layer theme, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); +@source "./index.tsx"; + +@custom-variant dark (&:where(.dark, .dark *)); + +.container.sample { + display: flex; + place-content: center; + place-items: center; +} diff --git a/samples/inputs/switches/tailwind-styling/src/index.tsx b/samples/inputs/switches/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..e82673e757 --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/src/index.tsx @@ -0,0 +1,43 @@ +import React, { useEffect, useState } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrSwitch, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const darkModeIcon = + ''; + +export default function SwitchTailwindStyling(): JSX.Element { + const [isDarkMode, setIsDarkMode] = useState(true); + + useEffect(() => { + registerIconFromText('dark_mode', darkModeIcon, 'material'); + }, []); + + return ( +
+
+
+ Dashboard + setIsDarkMode((current) => !current)} className="[--track-on-color:var(--color-blue-500)] [--track-off-color:var(--color-slate-600)] [--thumb-on-color:var(--color-white)] [--thumb-off-color:var(--color-slate-300)] [--track-on-hover-color:var(--color-blue-600)]"> + + + Dark mode + + +
+
+
Revenue overview
+

+ $84,290 this month, up 12% from July.
+ Your top-performing channel is Direct, driving 41% of total revenue. +

+
+
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/switches/tailwind-styling/tsconfig.json b/samples/inputs/switches/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/switches/tailwind-styling/vite.config.js b/samples/inputs/switches/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..663868e022 --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/vite.config.js @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file From cb7d46fe7c1fe0f5185411a88dbc61f471e9c384 Mon Sep 17 00:00:00 2001 From: Ivan Minchev <61944284+IMinchev64@users.noreply.github.com> Date: Fri, 18 Sep 2026 16:59:20 +0300 Subject: [PATCH 03/14] fix(sample-theme): use configureTheme() for proper theme change (#1105) --- browser/src/sample-theme.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/browser/src/sample-theme.ts b/browser/src/sample-theme.ts index 1c202a346a..3b2ba115b0 100644 --- a/browser/src/sample-theme.ts +++ b/browser/src/sample-theme.ts @@ -12,6 +12,8 @@ * Dormant unless a trusted docs host asks for a theme. */ +import { configureTheme } from 'igniteui-react'; + type ThemeName = 'material' | 'fluent' | 'bootstrap' | 'indigo'; type ThemeMode = 'light' | 'dark' | 'system'; type ResolvedMode = 'light' | 'dark'; @@ -139,6 +141,10 @@ function applyTheme(theme: ThemeName, mode: ThemeMode): void { root.setAttribute('data-igd-theme', theme); root.setAttribute('data-igd-mode', resolved); root.style.colorScheme = resolved; + + // Tell the Shadow DOM / Lit components to re-adopt their + // per-theme stylesheet now that the global CSS is in place. + configureTheme(theme, resolved); }) .catch((err) => { console.warn('[sample-theme] Could not load theme "' + theme + '":', err); From 1bfb1159c18328319d9d969894c1a1f95fc4209f Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Fri, 18 Sep 2026 17:02:50 +0300 Subject: [PATCH 04/14] fix(avatar): fix overview sample styling to work with Indigo theme --- samples/layouts/avatar/overview/src/index.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/samples/layouts/avatar/overview/src/index.css b/samples/layouts/avatar/overview/src/index.css index 9407c4b19a..8c31e65714 100644 --- a/samples/layouts/avatar/overview/src/index.css +++ b/samples/layouts/avatar/overview/src/index.css @@ -30,11 +30,14 @@ } .avatar-stack igc-avatar + igc-avatar { - margin-inline-start: -1.5rem; + /* Proportional to the avatar's own rendered size (--size, set internally + by the theme) rather than a fixed length, since themes disagree widely + on how big a "large" avatar actually is. */ + margin-inline-start: calc(var(--size) * -0.27); } .avatar-stack igc-avatar::part(base) { - box-shadow: 0 0 0 0.375rem var(--ig-surface-500); + box-shadow: 0 0 0 calc(var(--size) * 0.07) var(--ig-surface-500); } .avatar-stack igc-avatar:last-child { From f763e54be5cbccc34736e2f7280a293ccfe69c10 Mon Sep 17 00:00:00 2001 From: Hristo Hristov <57346540+Hristo313@users.noreply.github.com> Date: Fri, 18 Sep 2026 18:01:37 +0300 Subject: [PATCH 05/14] fix(button-group): update samples styling (#1100) * fix(button-group): update samples styling * fix(button-group): add comment to interaction states styles * fix(build): fix comment line * fix(button-group): update labels styling * fix(button-group): update layout style * fix(samples): update styling * fix(button-group): update samples to use bootstrap theme * fix(badge): update badge samples to bootstrap and fix css --- samples/inputs/badge/dot/src/index.css | 18 +-- samples/inputs/badge/icon/src/index.css | 23 +--- samples/inputs/badge/outlined/src/index.css | 106 ++++++---------- samples/inputs/badge/outlined/src/index.tsx | 47 +++---- samples/inputs/badge/overview/src/index.css | 15 ++- samples/inputs/badge/shape/src/index.css | 28 ++--- samples/inputs/badge/shape/src/index.tsx | 6 +- samples/inputs/badge/size/src/index.css | 28 ++--- samples/inputs/badge/size/src/index.tsx | 6 +- samples/inputs/badge/styling/src/index.css | 6 +- .../badge/tailwind-styling/src/index.css | 6 +- samples/inputs/badge/type/src/index.css | 2 +- samples/inputs/badge/variants/src/index.css | 47 ++----- samples/inputs/badge/variants/src/index.tsx | 6 +- .../alignment/src/ButtonGroupAlignment.css | 39 ------ .../button-group/alignment/src/index.css | 36 +++++- .../button-group/alignment/src/index.tsx | 7 +- .../button-group/custom-toggle/src/index.css | 16 +-- .../button-group/custom-toggle/src/index.tsx | 16 ++- .../src/ButtonGroupStates.css | 76 ----------- .../interaction-states/src/index.css | 119 +++++++++++++++++- .../interaction-states/src/index.tsx | 38 ++++-- .../layout/src/ButtonGroupLayout.css | 19 --- .../inputs/button-group/layout/src/index.css | 29 ++++- .../inputs/button-group/layout/src/index.tsx | 5 +- .../overview/src/ButtonGroupOverview.css | 40 ------ .../button-group/overview/src/index.css | 38 +++++- .../button-group/overview/src/index.tsx | 7 +- .../selection/src/ButtonGroupSelection.css | 34 ----- .../button-group/selection/src/index.css | 48 ++++++- .../button-group/selection/src/index.tsx | 11 +- .../button-group/size/src/ButtonGroupSize.css | 33 ----- .../inputs/button-group/size/src/index.css | 56 ++++++++- .../inputs/button-group/size/src/index.tsx | 17 ++- .../src/ButtonGroupInteractionStates.css | 37 ------ .../inputs/button-group/states/src/index.css | 90 ++++++++++++- .../inputs/button-group/states/src/index.tsx | 49 ++++---- .../styling/src/ButtonGroupStyling.css | 32 ----- .../inputs/button-group/styling/src/index.css | 26 +++- .../inputs/button-group/styling/src/index.tsx | 29 ++--- .../tailwind-styling/src/index.css | 40 ++---- .../tailwind-styling/src/index.tsx | 28 ++--- 42 files changed, 666 insertions(+), 693 deletions(-) delete mode 100644 samples/inputs/button-group/alignment/src/ButtonGroupAlignment.css delete mode 100644 samples/inputs/button-group/interaction-states/src/ButtonGroupStates.css delete mode 100644 samples/inputs/button-group/layout/src/ButtonGroupLayout.css delete mode 100644 samples/inputs/button-group/overview/src/ButtonGroupOverview.css delete mode 100644 samples/inputs/button-group/selection/src/ButtonGroupSelection.css delete mode 100644 samples/inputs/button-group/size/src/ButtonGroupSize.css delete mode 100644 samples/inputs/button-group/states/src/ButtonGroupInteractionStates.css delete mode 100644 samples/inputs/button-group/styling/src/ButtonGroupStyling.css diff --git a/samples/inputs/badge/dot/src/index.css b/samples/inputs/badge/dot/src/index.css index 086ae8114d..4419879348 100644 --- a/samples/inputs/badge/dot/src/index.css +++ b/samples/inputs/badge/dot/src/index.css @@ -55,8 +55,8 @@ igc-avatar { .icon-circle { justify-content: center; border-radius: 50%; - background: var(--ig-gray-200); - color: var(--ig-gray-800); + background: var(--ig-gray-300); + color: var(--ig-gray-900); } .notifications-card, @@ -86,16 +86,6 @@ igc-avatar { width: 12px; } -.row-indicator igc-badge, -.nav-icon igc-badge { - --ig-badge-background-color: #0057A9; -} - -.row-indicator igc-badge::part(base), -.nav-icon igc-badge::part(base) { - background-color: #0057A9; -} - .row-title { flex: 1; } @@ -106,7 +96,7 @@ igc-avatar { } .row-time.unread { - color: #0057A9; + color: var(--ig-gray-900); font-weight: 600; } @@ -135,7 +125,7 @@ igc-avatar { } .nav-item.active { - color: #0075D2; + color: var(--ig-primary-800); } .nav-icon { diff --git a/samples/inputs/badge/icon/src/index.css b/samples/inputs/badge/icon/src/index.css index 274be2aa0e..892ad58c6e 100644 --- a/samples/inputs/badge/icon/src/index.css +++ b/samples/inputs/badge/icon/src/index.css @@ -3,16 +3,8 @@ igc-avatar { --size: 40px; - --ig-avatar-background: var(--ig-gray-700); - --ig-avatar-color: var(--ig-gray-50); -} - -igc-badge[variant="info"] { - --ig-badge-background-color: #0057A9; -} - -igc-badge[variant="info"]::part(base) { - background-color: #0057A9; + --ig-avatar-background: var(--ig-gray-400); + --ig-avatar-color: var(--ig-gray-800); } igc-badge igc-icon { @@ -46,14 +38,6 @@ igc-badge igc-icon { height: 40px; } -.badge-settings { - --ig-badge-background-color: #0070BA; -} - -.badge-settings::part(base) { - background-color: #0070BA; -} - .badge-icon { display: flex; align-items: center; @@ -71,13 +55,14 @@ igc-badge igc-icon { } .badge-icon-item span { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; font-style: normal; line-height: 20px; letter-spacing: 0.3px; + white-space: nowrap; transform: translateY(4px); } diff --git a/samples/inputs/badge/outlined/src/index.css b/samples/inputs/badge/outlined/src/index.css index 708e928a08..262863328b 100644 --- a/samples/inputs/badge/outlined/src/index.css +++ b/samples/inputs/badge/outlined/src/index.css @@ -7,8 +7,8 @@ igc-badge { igc-avatar { --size: 40px; - --ig-avatar-background: var(--ig-gray-700); - --ig-avatar-color: var(--ig-gray-50); + --ig-avatar-background: var(--ig-gray-400); + --ig-avatar-color: var(--ig-gray-800); } .outlined-example igc-avatar igc-icon { @@ -21,12 +21,6 @@ igc-avatar { inset-inline-end: -6px; } -.step-marker igc-badge { - position: absolute; - inset-block-start: -1px; - inset-inline-end: -2px; -} - .outlined-example igc-badge { position: absolute; inset-block-start: -6px; @@ -42,7 +36,8 @@ igc-avatar { align-items: center; justify-content: center; gap: 60px; - min-height: 7rem; + min-height: 100vh; + box-sizing: border-box; } .outlined-example { @@ -65,23 +60,6 @@ igc-avatar { color: var(--ig-gray-800); } -.badge-info-blue { - --ig-badge-background-color: #0057A9; -} - -.badge-info-blue::part(base) { - background-color: #0057A9; -} - -.payment-dot-blue { - --ig-badge-background-color: #0057A9; - --ig-badge-dot-size: 0.5rem; -} - -.payment-dot-blue::part(base) { - background-color: #0057A9; -} - igc-badge::part(base), igc-badge igc-icon { color: var(--ig-gray-50); @@ -92,53 +70,41 @@ igc-badge igc-icon { } .steps { - display: flex; - align-items: flex-start; - gap: 8px; -} - -.step { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; -} - -.step-marker { + width: 316px; +} + +.steps, +.steps igc-step { + --indicator-size: 24px; + --ig-stepper-step-separator-style: dashed; + --ig-stepper-step-separator-color: var(--ig-gray-400); + --border-radius-indicator: 50%; + --indicator-background: var(--ig-gray-200); + --indicator-color: var(--ig-gray-800); + --indicator-outline: var(--ig-gray-200); + --separator-size: 1px; + --separator-type: solid; + --step-separator-style: dashed; + --complete-indicator-background: var(--ig-gray-900); + --complete-indicator-color: var(--ig-gray-50); + --complete-step-separator-style: solid; + --complete-step-separator-color: var(--ig-gray-900); +} + +.stepper-wrapper { position: relative; - display: flex; -} - -.step-circle { - width: 26px; - height: 26px; - background: var(--ig-gray-900); - color: var(--ig-gray-50); - font-size: 12px; + align-self: center; + top: 18px; } -.step-circle.pending { - background: var(--ig-gray-200); - color: var(--ig-gray-800); -} - -.step-connector { - width: 56px; - margin-block-start: 13px; - border-block-start: 1px solid var(--ig-gray-900); -} - -.step-connector.pending { - border-block-start-style: dashed; - border-block-start-color: var(--ig-gray-400); +.flagged-badge { + position: absolute; + inset-block-start: 8px; + inset-inline-start: calc(50% - 1px); + transform: scale(1.2); + transform-origin: center; } -.step-label { - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; +.steps::part(content) { + display: none; } diff --git a/samples/inputs/badge/outlined/src/index.tsx b/samples/inputs/badge/outlined/src/index.tsx index a110275e9b..88ec9cc018 100644 --- a/samples/inputs/badge/outlined/src/index.tsx +++ b/samples/inputs/badge/outlined/src/index.tsx @@ -1,7 +1,7 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useRef } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge, IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react'; +import { IgrBadge, IgrAvatar, IgrIcon, IgrStepper, IgrStep, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; const favoriteBorderIcon = @@ -9,16 +9,13 @@ const favoriteBorderIcon = const closeIcon = ''; -const steps = [ - { index: 1, label: 'Orders', current: false, pending: false }, - { index: 2, label: 'Payment', current: true, pending: false }, - { index: 3, label: 'Shipping', current: false, pending: true } -]; - export default function BadgeOutlined(): JSX.Element { + const stepperRef = useRef(null); + useEffect(() => { registerIconFromText('favorite_border', favoriteBorderIcon, 'material'); registerIconFromText('close', closeIcon, 'material'); + stepperRef.current?.navigateTo(1); }, []); return ( @@ -27,7 +24,7 @@ export default function BadgeOutlined(): JSX.Element {
- 23 + 23
@@ -35,25 +32,19 @@ export default function BadgeOutlined(): JSX.Element {
-
- {steps.map((step, i) => ( - - {i > 0 && ( - - )} -
-
- - {step.index} - - {step.current && ( - - )} -
- {step.label} -
- - ))} +
+ + + Orders + + + Payment + + + Shipping + + +
); diff --git a/samples/inputs/badge/overview/src/index.css b/samples/inputs/badge/overview/src/index.css index 6a1e390d1f..d304ba139c 100644 --- a/samples/inputs/badge/overview/src/index.css +++ b/samples/inputs/badge/overview/src/index.css @@ -17,6 +17,15 @@ igc-badge { inset-inline-end: -0.15rem; } +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} + .avatar-example igc-badge { inset-block-start: auto; inset-block-end: -0.15rem; @@ -33,7 +42,6 @@ igc-badge { } .event-example igc-chip::part(base) { - background-color: #E0E0E0; border-radius: 999px; } @@ -42,11 +50,6 @@ igc-badge { inset-inline-end: -0.8rem; } -.event-example igc-badge::part(base) { - background-color: #0057A9; - color: var(--ig-gray-50); -} - .icon-example igc-badge { inset-block-start: 0; inset-inline-end: 0; diff --git a/samples/inputs/badge/shape/src/index.css b/samples/inputs/badge/shape/src/index.css index 4d24943e5a..f6e6b4da52 100644 --- a/samples/inputs/badge/shape/src/index.css +++ b/samples/inputs/badge/shape/src/index.css @@ -1,6 +1,15 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} + .badge-shape { display: flex; flex-direction: column; @@ -20,7 +29,7 @@ .row-label { justify-self: end; - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; @@ -32,20 +41,3 @@ .badge-small { --ig-size: var(--ig-size-small); } - -.badge-info-blue { - --ig-badge-background-color: #0057A9; -} - -.badge-info-blue::part(base) { - background-color: #0057A9; -} - -igc-badge::part(base), -igc-badge igc-icon { - color: var(--ig-gray-50); -} - -igc-badge igc-icon { - fill: var(--ig-gray-50); -} diff --git a/samples/inputs/badge/shape/src/index.tsx b/samples/inputs/badge/shape/src/index.tsx index fe423f3edf..91cdd7f710 100644 --- a/samples/inputs/badge/shape/src/index.tsx +++ b/samples/inputs/badge/shape/src/index.tsx @@ -26,11 +26,11 @@ export default function BadgeShape(): JSX.Element {
Square - + - 2 - + 2 +
diff --git a/samples/inputs/badge/size/src/index.css b/samples/inputs/badge/size/src/index.css index 2806b0cd4e..6e6cc5197c 100644 --- a/samples/inputs/badge/size/src/index.css +++ b/samples/inputs/badge/size/src/index.css @@ -1,6 +1,15 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} + .badge-size { display: flex; flex-direction: column; @@ -21,7 +30,7 @@ .row-label { justify-self: end; - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; @@ -30,23 +39,6 @@ letter-spacing: 0.3px; } -.badge-info-blue { - --ig-badge-background-color: #0057A9; -} - -.badge-info-blue::part(base) { - background-color: #0057A9; -} - -igc-badge::part(base), -igc-badge igc-icon { - color: var(--ig-gray-50); -} - -igc-badge igc-icon { - fill: var(--ig-gray-50); -} - .badge-large { --ig-size: var(--ig-size-large); } .badge-medium { --ig-size: var(--ig-size-medium); } .badge-small { --ig-size: var(--ig-size-small); } diff --git a/samples/inputs/badge/size/src/index.tsx b/samples/inputs/badge/size/src/index.tsx index 0a997231d4..c006c0311d 100644 --- a/samples/inputs/badge/size/src/index.tsx +++ b/samples/inputs/badge/size/src/index.tsx @@ -17,7 +17,7 @@ export default function BadgeSize(): JSX.Element {
Small - 2 + 2 @@ -25,7 +25,7 @@ export default function BadgeSize(): JSX.Element {
Medium - 2 + 2 @@ -33,7 +33,7 @@ export default function BadgeSize(): JSX.Element {
Large - 2 + 2 diff --git a/samples/inputs/badge/styling/src/index.css b/samples/inputs/badge/styling/src/index.css index d6d6fca0d4..dd46d8149c 100644 --- a/samples/inputs/badge/styling/src/index.css +++ b/samples/inputs/badge/styling/src/index.css @@ -53,9 +53,9 @@ igc-badge { } .styling-item.green igc-avatar { - --icon-color: #248436; - --ig-avatar-background: #A9CEB0; - --ig-avatar-color: #248436; + --icon-color: var(--ig-success-900); + --ig-avatar-background: var(--ig-success-200); + --ig-avatar-color: var(--ig-success-900); } .styling-item.pink igc-avatar { diff --git a/samples/inputs/badge/tailwind-styling/src/index.css b/samples/inputs/badge/tailwind-styling/src/index.css index 101b4607d2..d98898d2b6 100644 --- a/samples/inputs/badge/tailwind-styling/src/index.css +++ b/samples/inputs/badge/tailwind-styling/src/index.css @@ -11,12 +11,12 @@ igc-badge { igc-avatar { --size: 40px; - --ig-avatar-background: var(--ig-gray-700); - --ig-avatar-color: var(--ig-gray-50); + --ig-avatar-background: var(--ig-gray-400); + --ig-avatar-color: var(--ig-gray-800); } igc-avatar igc-icon { - color: var(--ig-gray-50); + color: var(--ig-gray-800); } .badge-close { diff --git a/samples/inputs/badge/type/src/index.css b/samples/inputs/badge/type/src/index.css index fa38411058..d6398f8cdf 100644 --- a/samples/inputs/badge/type/src/index.css +++ b/samples/inputs/badge/type/src/index.css @@ -51,7 +51,7 @@ igc-badge { } .badge-type-item span { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; diff --git a/samples/inputs/badge/variants/src/index.css b/samples/inputs/badge/variants/src/index.css index 96358179e2..81710d4ed0 100644 --- a/samples/inputs/badge/variants/src/index.css +++ b/samples/inputs/badge/variants/src/index.css @@ -8,15 +8,24 @@ igc-badge { inset-inline-end: -4px; } +.variant-item:not(:nth-child(4)) igc-badge::part(base), +.variant-item:not(:nth-child(4)) igc-badge igc-icon { + color: var(--ig-gray-50); +} + +.variant-item:not(:nth-child(4)) igc-badge igc-icon { + fill: var(--ig-gray-50); +} + igc-avatar { --ig-size: var(--ig-size-small); - --ig-avatar-background: var(--ig-gray-700); - --ig-avatar-color: var(--ig-gray-50); + --ig-avatar-background: var(--ig-gray-400); + --ig-avatar-color: var(--ig-gray-800); } .variant-item:first-child igc-avatar igc-icon, .variant-item:nth-child(4) igc-avatar igc-icon { - color: var(--ig-gray-50); + color: var(--ig-gray-800); } .badge-variants { @@ -36,7 +45,7 @@ igc-avatar { } .variant-item span { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; @@ -49,33 +58,3 @@ igc-avatar { position: relative; display: flex; } - -.badge-info-blue { - --ig-badge-background-color: #0057A9; -} - -.badge-info-blue::part(base) { - background-color: #0057A9; -} - -.badge-primary-blue { - --ig-badge-background-color: #0070BA; -} - -.badge-primary-blue::part(base) { - background-color: #0070BA; -} - -.badge-warning-black::part(base) { - background-color: #FAA419; - color: #000; -} - -igc-badge::part(base), -igc-badge igc-icon { - color: var(--ig-gray-50); -} - -igc-badge igc-icon { - fill: var(--ig-gray-50); -} diff --git a/samples/inputs/badge/variants/src/index.tsx b/samples/inputs/badge/variants/src/index.tsx index 47cfdd62e8..f5f468ea09 100644 --- a/samples/inputs/badge/variants/src/index.tsx +++ b/samples/inputs/badge/variants/src/index.tsx @@ -28,14 +28,14 @@ export default function BadgeVariants(): JSX.Element { - 2 + 2
Primary
- +
@@ -58,7 +58,7 @@ export default function BadgeVariants(): JSX.Element { - 2 + 2
Warn
diff --git a/samples/inputs/button-group/alignment/src/ButtonGroupAlignment.css b/samples/inputs/button-group/alignment/src/ButtonGroupAlignment.css deleted file mode 100644 index 3ba295daf3..0000000000 --- a/samples/inputs/button-group/alignment/src/ButtonGroupAlignment.css +++ /dev/null @@ -1,39 +0,0 @@ -igc-ripple { - --color: gray; -} - -.button-group-alignment { - display: flex; - align-items: flex-start; - justify-content: center; - gap: 60px; - padding: 24px; -} - -.button-group-alignment-item { - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - gap: 16px; -} - -.button-group-alignment-item igc-button-group { - width: 240px; -} - -.button-group-alignment-item:first-child igc-button-group { - width: 320px; -} - -.button-group-alignment-item span { - width: 100%; - text-align: center; - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; -} \ No newline at end of file diff --git a/samples/inputs/button-group/alignment/src/index.css b/samples/inputs/button-group/alignment/src/index.css index 1f53b8aa05..7e486aa9f5 100644 --- a/samples/inputs/button-group/alignment/src/index.css +++ b/samples/inputs/button-group/alignment/src/index.css @@ -1,2 +1,34 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +.sbSwitch { + display: grid; + place-items: center; + height: 100vh; +} + +.sample-layout { + display: flex; + gap: 2rem; + align-items: start; + justify-content: center; + flex-wrap: wrap; +} + +.sample-inner-layout { + display: grid; + gap: 0.5rem; + align-items: start; +} + +igc-button-group { + width: 17.5rem; +} + +.sample-layout span { + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; + margin: 0.5rem; + text-align: center; +} \ No newline at end of file diff --git a/samples/inputs/button-group/alignment/src/index.tsx b/samples/inputs/button-group/alignment/src/index.tsx index aa28f9252e..8ae72d5626 100644 --- a/samples/inputs/button-group/alignment/src/index.tsx +++ b/samples/inputs/button-group/alignment/src/index.tsx @@ -1,8 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupAlignment.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; const cities = ['Sofia', 'London', 'New York']; @@ -11,9 +10,9 @@ const alignments: Array<'horizontal' | 'vertical'> = ['horizontal', 'vertical']; export default function ButtonGroupAlignment(): JSX.Element { return ( -
+
{alignments.map((alignment) => ( -
+
{alignment.charAt(0).toUpperCase() + alignment.slice(1)} {cities.map((city) => ( diff --git a/samples/inputs/button-group/custom-toggle/src/index.css b/samples/inputs/button-group/custom-toggle/src/index.css index 06a54b66a2..dd43f14e32 100644 --- a/samples/inputs/button-group/custom-toggle/src/index.css +++ b/samples/inputs/button-group/custom-toggle/src/index.css @@ -1,13 +1,9 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -igc-button-group { - display: inline-block; - width: 300px; +.sbSwitch { + display: grid; + place-items: center; + height: 100vh; } -.container.sample { - display: flex; - justify-content: center; - align-items: center; +igc-button-group { + max-width: 18.75rem; } diff --git a/samples/inputs/button-group/custom-toggle/src/index.tsx b/samples/inputs/button-group/custom-toggle/src/index.tsx index fe93f01e7f..f4ea4d7c1f 100644 --- a/samples/inputs/button-group/custom-toggle/src/index.tsx +++ b/samples/inputs/button-group/custom-toggle/src/index.tsx @@ -6,7 +6,7 @@ import { IgrToggleButton, registerIconFromText, } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; const icons = [ @@ -20,14 +20,12 @@ icons.forEach(([name, text]) => registerIconFromText(name, text, 'material')); export default function ButtonGroupCustomToggle() { return ( -
- - - - - - -
+ + + + + + ); } diff --git a/samples/inputs/button-group/interaction-states/src/ButtonGroupStates.css b/samples/inputs/button-group/interaction-states/src/ButtonGroupStates.css deleted file mode 100644 index 0595d21413..0000000000 --- a/samples/inputs/button-group/interaction-states/src/ButtonGroupStates.css +++ /dev/null @@ -1,76 +0,0 @@ -igc-ripple { - --color: gray; -} - -.button-group-states { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - gap: 20px; - padding: 20px; -} - -.button-group-states-row { - display: grid; - grid-template-columns: 120px 164px 164px 164px; - align-items: center; - gap: 16px; -} - -.button-group-states .row-label, -.button-group-states .column-label { - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; -} - -.button-group-states .column-label { - text-align: center; -} - -.button-group-states igc-button-group { - width: 164px; -} - -.button-group-states igc-toggle-button { - width: 100%; -} - -.button-group-states igc-icon { - font-size: 16px; -} - -.button-group-states igc-toggle-button[selected]::part(toggle) { - background: var(--item-active-background); - border-color: var(--item-active-border-color); - color: var(--item-hover-text-color); -} - -.button-group-states igc-toggle-button.state-hover:not([selected])::part(toggle) { - background: var(--item-hover-background); - border-color: var(--item-hover-border-color); - color: var(--item-hover-text-color); -} - -.button-group-states igc-toggle-button.state-focused:not([selected])::part(toggle) { - background: var(--item-focused-hover-background); - border-color: var(--item-focused-hover-border-color); - color: var(--item-focused-hover-text-color); -} - -.button-group-states igc-toggle-button.state-hover[selected]::part(toggle) { - background: var(--item-selected-active-background); - border-color: var(--item-selected-active-border-color); - color: var(--item-selected-hover-text-color); -} - -.button-group-states igc-toggle-button.state-focused[selected]::part(toggle) { - background: var(--item-selected-active-background); - border-color: var(--item-selected-active-border-color); - color: var(--item-focused-hover-text-color); -} \ No newline at end of file diff --git a/samples/inputs/button-group/interaction-states/src/index.css b/samples/inputs/button-group/interaction-states/src/index.css index 1f53b8aa05..aaadcf3f91 100644 --- a/samples/inputs/button-group/interaction-states/src/index.css +++ b/samples/inputs/button-group/interaction-states/src/index.css @@ -1,2 +1,117 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +.sbSwitch { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-content: center; + height: 100vh; +} + +.states-matrix { + display: grid; + grid-template-columns: auto repeat(3, minmax(7.75rem, 1fr)); + gap: 1rem; + inline-size: 100%; + max-inline-size: 42.5rem; + margin-inline: auto; +} + +.states-row { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; + align-items: center; +} + +.row-label, +.column-label, +.cell-label { + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; +} + +.column-label, +.cell-label { + text-align: center; +} + +.cell-label { + display: none; +} + +.state-cell { + display: grid; + gap: 0.25rem; +} + +igc-icon { + --ig-icon-size: 1rem; +} + +@container (width < 34rem) { + .states-matrix { + grid-template-columns: minmax(0, 1fr); + } + + .states-row { + grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); + } + + header.states-row { + display: none; + } + + .row-label { + grid-column: 1 / -1; + } + + .cell-label { + display: block; + text-align: start; + margin-block-start: 1rem; + } + + .state-cell { + margin-inline-end: 0.5rem; + } +} + +/* WARNING START: Demo overrides only. Do not copy to production. */ +/* Forced state classes are used here solely to present all component states visually. */ +igc-button-group { + pointer-events: none; +} + +igc-toggle-button[selected]::part(toggle) { + background: var(--item-active-background); + border-color: var(--item-active-border-color); + color: var(--item-hover-text-color); +} + +igc-toggle-button.state-hover:not([selected])::part(toggle) { + background: var(--item-hover-background); + border-color: var(--item-hover-border-color); + color: var(--item-hover-text-color); +} + +igc-toggle-button.state-focused:not([selected])::part(toggle) { + background: var(--item-focused-hover-background); + border-color: var(--item-focused-hover-border-color); + color: var(--item-focused-hover-text-color); +} + +igc-toggle-button.state-hover[selected]::part(toggle) { + background: var(--item-selected-active-background); + border-color: var(--item-selected-active-border-color); + color: var(--item-selected-hover-text-color); +} + +igc-toggle-button.state-focused[selected]::part(toggle) { + background: var(--item-selected-active-background); + border-color: var(--item-selected-active-border-color); + color: var(--item-focused-hover-text-color); +} +/* WARNING END */ \ No newline at end of file diff --git a/samples/inputs/button-group/interaction-states/src/index.tsx b/samples/inputs/button-group/interaction-states/src/index.tsx index d039104a6d..3668481d2e 100644 --- a/samples/inputs/button-group/interaction-states/src/index.tsx +++ b/samples/inputs/button-group/interaction-states/src/index.tsx @@ -1,8 +1,13 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import { IgrButtonGroup, IgrIcon, IgrRipple, IgrToggleButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupStates.css'; +import { + IgrButtonGroup, + IgrIcon, + IgrRipple, + IgrToggleButton, + registerIconFromText +} from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; const rows: Array<{ label: string; selected: boolean }> = [ @@ -12,6 +17,12 @@ const rows: Array<{ label: string; selected: boolean }> = [ const states = ['idle', 'hover', 'focused']; +registerIconFromText( + 'notifications', + '', + 'material' +); + function StateButton({ selected, state }: { selected: boolean; state: string }): JSX.Element { return ( @@ -25,22 +36,29 @@ function StateButton({ selected, state }: { selected: boolean; state: string }): export default function ButtonGroupStates(): JSX.Element { return ( -
-
+
+
{states.map((state) => ( {state.charAt(0).toUpperCase() + state.slice(1)} ))} -
+ {rows.map((row) => ( -
+
{row.label} - {states.map((state) => )} -
+ {states.map((state) => ( +
+ {state.charAt(0).toUpperCase() + state.slice(1)} + + + +
+ ))} + ))} -
+ ); } diff --git a/samples/inputs/button-group/layout/src/ButtonGroupLayout.css b/samples/inputs/button-group/layout/src/ButtonGroupLayout.css deleted file mode 100644 index 936a3bc2f3..0000000000 --- a/samples/inputs/button-group/layout/src/ButtonGroupLayout.css +++ /dev/null @@ -1,19 +0,0 @@ -igc-ripple { - --color: gray; -} - -.button-group-layout { - display: flex; - align-items: center; - justify-content: center; - gap: 80px; - min-height: 7rem; -} - -.button-group-layout igc-toggle-button { - min-width: 100px; -} - -.button-group-layout igc-icon { - --size: 20px; -} diff --git a/samples/inputs/button-group/layout/src/index.css b/samples/inputs/button-group/layout/src/index.css index e41c7c710b..b4583727ba 100644 --- a/samples/inputs/button-group/layout/src/index.css +++ b/samples/inputs/button-group/layout/src/index.css @@ -1,11 +1,28 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +.sbSwitch { + display: grid; + place-items: center; + height: 100vh; +} + +.sample-layout { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 80px; + min-height: 5.5rem; +} igc-button-group { - display: inline-block; - max-width: 400px; + display: inline-block; + max-width: 400px; +} + +.sample-layout igc-toggle-button { + min-width: 100px; } -igc-ripple { - --color: grey; +.sample-layout igc-icon { + --ig-size: 20px; + --igc-icon-size: 20px; } diff --git a/samples/inputs/button-group/layout/src/index.tsx b/samples/inputs/button-group/layout/src/index.tsx index 3bc28e0a57..eb25755d92 100644 --- a/samples/inputs/button-group/layout/src/index.tsx +++ b/samples/inputs/button-group/layout/src/index.tsx @@ -1,8 +1,7 @@ import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import { IgrButtonGroup, IgrIcon, IgrRipple, IgrToggleButton, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupLayout.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; const alignLeftIcon = @@ -26,7 +25,7 @@ export default function ButtonGroupLayout(): JSX.Element { }, []); return ( -
+
{layouts.map((layout) => ( diff --git a/samples/inputs/button-group/overview/src/ButtonGroupOverview.css b/samples/inputs/button-group/overview/src/ButtonGroupOverview.css deleted file mode 100644 index 88a89a0721..0000000000 --- a/samples/inputs/button-group/overview/src/ButtonGroupOverview.css +++ /dev/null @@ -1,40 +0,0 @@ - .container.sample { - display: flex; - flex-direction: column; - align-items: center; - padding: 1rem; -} - -igc-button-group { - display: block; - width: 280px; - max-width: 100%; -} - -igc-ripple { - --color: gray; -} - -.album { - margin-top: 8px; - width: 280px; - max-width: 100%; -} - -.album-title { - display: inline-block; - margin-bottom: 8px; - color: #1f89d4; -} - -.album-photos { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 4px; -} - -.album-photos img { - width: 100%; - object-fit: cover; - display: block; -} \ No newline at end of file diff --git a/samples/inputs/button-group/overview/src/index.css b/samples/inputs/button-group/overview/src/index.css index 1f53b8aa05..2190c366e5 100644 --- a/samples/inputs/button-group/overview/src/index.css +++ b/samples/inputs/button-group/overview/src/index.css @@ -1,2 +1,36 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +.sbSwitch { + display: grid; + place-items: center; + height: 100vh; +} + +.sample-layout { + display: grid; + width: 17.5rem; + gap: 0.5rem; +} + +igc-button-group { + max-width: 17.5rem; +} + +.album-title { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.429; + letter-spacing: 0.0178571em; + margin-block: 0 0.5rem; + color: var(--ig-primary-500); +} + +.album-photos { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.25rem; +} + +.album-photos img { + width: 100%; + object-fit: cover; + display: block; +} \ No newline at end of file diff --git a/samples/inputs/button-group/overview/src/index.tsx b/samples/inputs/button-group/overview/src/index.tsx index 923e753db6..78f6fef144 100644 --- a/samples/inputs/button-group/overview/src/index.tsx +++ b/samples/inputs/button-group/overview/src/index.tsx @@ -5,8 +5,7 @@ import { IgrRipple, IgrToggleButton, } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupOverview.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; @@ -36,7 +35,7 @@ export default function ButtonGroupOverview() { const album = albums[source]; return ( -
+
) => { @@ -56,7 +55,7 @@ export default function ButtonGroupOverview() {
- {album.title} +

{album.title}

{album.photos.map((photo) => ( {album.title} diff --git a/samples/inputs/button-group/selection/src/ButtonGroupSelection.css b/samples/inputs/button-group/selection/src/ButtonGroupSelection.css deleted file mode 100644 index 6d0a1eb8a7..0000000000 --- a/samples/inputs/button-group/selection/src/ButtonGroupSelection.css +++ /dev/null @@ -1,34 +0,0 @@ -.selection-samples { - display: flex; - justify-content: center; - flex-direction: column; - align-items: flex-start; - gap: 32px; - padding-left: 32px; -} - -.selection-sample { - display: flex; - align-items: center; - gap: 30px; -} - -.selection-sample > span { - width: 120px; - text-align: right; - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; -} - -.selection-sample igc-button-group { - width: 200px; -} - -igc-ripple { - --color: gray; -} \ No newline at end of file diff --git a/samples/inputs/button-group/selection/src/index.css b/samples/inputs/button-group/selection/src/index.css index 1f53b8aa05..55d7c524ad 100644 --- a/samples/inputs/button-group/selection/src/index.css +++ b/samples/inputs/button-group/selection/src/index.css @@ -1,2 +1,46 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +.sbSwitch { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-content: center; + height: 100vh; +} + +.selection-samples { + display: grid; + grid-template-columns: auto minmax(11.25rem, 1fr); + align-items: center; + gap: 1.5rem 2rem; + inline-size: 100%; + max-inline-size: 23.75rem; + margin-inline: auto; +} + +.sample-label { + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; + text-align: end; +} + +igc-button-group { + inline-size: 100%; +} + +@container (width < 22rem) { + .selection-samples { + grid-template-columns: minmax(0, 1fr); + gap: 0.25rem; + } + + .sample-label { + text-align: start; + } + + .sample-label:not(:first-of-type) { + margin-block-start: 1rem; + } +} \ No newline at end of file diff --git a/samples/inputs/button-group/selection/src/index.tsx b/samples/inputs/button-group/selection/src/index.tsx index 684c40b64c..e22a27d2d0 100644 --- a/samples/inputs/button-group/selection/src/index.tsx +++ b/samples/inputs/button-group/selection/src/index.tsx @@ -7,8 +7,7 @@ import { IgrToggleButton, registerIconFromText, } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupSelection.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; const icons = [ @@ -34,10 +33,10 @@ export default function ButtonGroupSelectionSample() { }, []) return ( -
+
{(['single', 'single-required', 'multiple'] as const).map((selection) => ( -
- {selection === 'single-required' ? 'Single-Required' : selection.charAt(0).toUpperCase() + selection.slice(1)} + + {selection === 'single-required' ? 'Single-Required' : selection.charAt(0).toUpperCase() + selection.slice(1)} @@ -52,7 +51,7 @@ export default function ButtonGroupSelectionSample() { -
+ ))}
); diff --git a/samples/inputs/button-group/size/src/ButtonGroupSize.css b/samples/inputs/button-group/size/src/ButtonGroupSize.css deleted file mode 100644 index 5a83e77d14..0000000000 --- a/samples/inputs/button-group/size/src/ButtonGroupSize.css +++ /dev/null @@ -1,33 +0,0 @@ -igc-ripple { - --color: gray; -} - -.button-group-size { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - gap: 32px; - padding: 13px; - padding-left: 3rem; -} - -.button-group-size-item { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - gap: 32px; -} - -.button-group-size-item span { - width: 52px; - text-align: right; - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; -} diff --git a/samples/inputs/button-group/size/src/index.css b/samples/inputs/button-group/size/src/index.css index 1f53b8aa05..1933c706c6 100644 --- a/samples/inputs/button-group/size/src/index.css +++ b/samples/inputs/button-group/size/src/index.css @@ -1,2 +1,54 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +.sbSwitch { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + place-items: center; + height: 100vh; +} + +.button-group-size { + display: grid; + grid-template-columns: auto minmax(15rem, 1fr); + align-items: center; + gap: 1.5rem 2rem; + inline-size: 100%; + max-inline-size: 30rem; + margin-inline: auto; +} + +.sample-label { + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; + text-align: end; +} + +igc-button-group:nth-of-type(1n) { + --ig-size: var(--ig-size-small); +} + +igc-button-group:nth-of-type(2n) { + --ig-size: var(--ig-size-medium); +} + +igc-button-group:nth-of-type(3n) { + --ig-size: var(--ig-size-large); +} + +@container (width < 22rem) { + .button-group-size { + grid-template-columns: minmax(0, 1fr); + gap: 0.25rem; + } + + .sample-label { + text-align: start; + } + + .sample-label:not(:first-of-type) { + margin-block-start: 1rem; + } +} \ No newline at end of file diff --git a/samples/inputs/button-group/size/src/index.tsx b/samples/inputs/button-group/size/src/index.tsx index 28ce3d496c..84a89a658a 100644 --- a/samples/inputs/button-group/size/src/index.tsx +++ b/samples/inputs/button-group/size/src/index.tsx @@ -1,8 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupSize.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; const cities = ['Sofia', 'London', 'New York']; @@ -11,13 +10,11 @@ const sizes = ['small', 'medium', 'large']; export default function ButtonGroupSize(): JSX.Element { return ( -
+
{sizes.map((size) => ( -
- {size.charAt(0).toUpperCase() + size.slice(1)} - + + {size.charAt(0).toUpperCase() + size.slice(1)} + {cities.map((city) => ( ))} -
+ ))} -
+ ); } diff --git a/samples/inputs/button-group/states/src/ButtonGroupInteractionStates.css b/samples/inputs/button-group/states/src/ButtonGroupInteractionStates.css deleted file mode 100644 index b64aef2ce9..0000000000 --- a/samples/inputs/button-group/states/src/ButtonGroupInteractionStates.css +++ /dev/null @@ -1,37 +0,0 @@ -igc-ripple { - --color: gray; -} - -.button-group-interaction-states { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - gap: 20px; - padding: 20px; -} - -.button-group-interaction-states-row { - display: grid; - grid-template-columns: 120px 160px 160px; - align-items: center; - gap: 16px; -} - -.button-group-interaction-states .row-label, -.button-group-interaction-states .column-label { - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; - text-align: center; -} - -.button-group-interaction-states-row igc-button-group:not([disabled]) igc-toggle-button[selected]::part(toggle) { - background: var(--item-active-background); - border-color: var(--item-active-border-color); - color: var(--item-selected-text-color); -} \ No newline at end of file diff --git a/samples/inputs/button-group/states/src/index.css b/samples/inputs/button-group/states/src/index.css index 1f53b8aa05..fde4086238 100644 --- a/samples/inputs/button-group/states/src/index.css +++ b/samples/inputs/button-group/states/src/index.css @@ -1,2 +1,88 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +.sbSwitch { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-content: center; + height: 100vh; +} + +.states-matrix { + --state-columns: 2; + + display: grid; + grid-template-columns: auto repeat(var(--state-columns), minmax(7.5rem, 1fr)); + gap: 1rem; + inline-size: 100%; + max-inline-size: 32.5rem; + margin-inline: auto; +} + +.states-row { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; + align-items: center; +} + +.row-label, +.column-label, +.cell-label { + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; +} + +.column-label, +.cell-label { + text-align: center; +} + +.cell-label { + display: none; +} + +.state-cell { + display: grid; + gap: 0.25rem; +} + +@container (width < 24rem) { + .states-matrix { + grid-template-columns: minmax(0, 1fr); + } + + .states-row { + grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr)); + column-gap: 0.5rem; + } + + header.states-row { + display: none; + } + + .row-label { + grid-column: 1 / -1; + } + + .cell-label { + display: block; + text-align: start; + margin-block-start: 1rem; + } +} + +/* WARNING START: Demo overrides only. Do not copy to production. */ +/* Forced state classes are used here solely to present all component states visually. */ +igc-button-group { + pointer-events: none; +} + +igc-toggle-button:not([disabled])[selected]::part(toggle) { + background: var(--item-active-background); + border-color: var(--item-active-border-color); + color: var(--item-selected-text-color); +} +/* WARNING END */ \ No newline at end of file diff --git a/samples/inputs/button-group/states/src/index.tsx b/samples/inputs/button-group/states/src/index.tsx index 77e39628a2..b1e5df5d64 100644 --- a/samples/inputs/button-group/states/src/index.tsx +++ b/samples/inputs/button-group/states/src/index.tsx @@ -1,8 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupInteractionStates.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; const rows: Array<{ label: string; selected: boolean }> = [ @@ -12,32 +11,38 @@ const rows: Array<{ label: string; selected: boolean }> = [ export default function ButtonGroupInteractionStates(): JSX.Element { return ( -
-
+
+
Enabled Disabled -
+ {rows.map((row) => ( -
+
{row.label} - - - Device - - - - - - Cloud - - -
+
+ Enabled + + + Device + + + +
+
+ Disabled + + + Cloud + + +
+ ))} -
+ ); } diff --git a/samples/inputs/button-group/styling/src/ButtonGroupStyling.css b/samples/inputs/button-group/styling/src/ButtonGroupStyling.css deleted file mode 100644 index 22c9d20f42..0000000000 --- a/samples/inputs/button-group/styling/src/ButtonGroupStyling.css +++ /dev/null @@ -1,32 +0,0 @@ -igc-ripple { - --color: gray; -} - -.button-group-styling { - display: flex; - align-items: center; - justify-content: center; - min-height: 7rem; -} - -.button-group-styling igc-button-group { - width: 420px; - border: 2px solid #4da3e8; - border-radius: 4px; - overflow: hidden; -} - -.button-group-styling igc-toggle-button::part(toggle) { - color: #4a5a66; - background: #cfe8fb; - border-color: #4da3e8; -} - -.button-group-styling igc-toggle-button::part(toggle):hover { - background: #b3daf8; -} - -.button-group-styling igc-toggle-button[selected]::part(toggle) { - color: #2f4d6a; - background: #6db3ea; -} \ No newline at end of file diff --git a/samples/inputs/button-group/styling/src/index.css b/samples/inputs/button-group/styling/src/index.css index 1f53b8aa05..e676fef095 100644 --- a/samples/inputs/button-group/styling/src/index.css +++ b/samples/inputs/button-group/styling/src/index.css @@ -1,2 +1,24 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +igc-button-group { + display: inline-block; + width: 100%; + max-width: 25rem; +} + +.sbSwitch { + display: grid; + place-items: center; + height: 100vh; + + --ig-button-group-border-radius: 4px; + --ig-button-group-item-text-color: #4a5a66; + --ig-button-group-item-background: #cfe8fb; + --ig-button-group-item-border-color: #4da3e8; + --ig-button-group-item-hover-text-color: #4a5a66; + --ig-button-group-item-hover-background: #b3daf8; + --ig-button-group-item-hover-border-color: #4da3e8; + --ig-button-group-item-selected-text-color: #2f4d6a; + --ig-button-group-item-selected-background: #6db3ea; + --ig-button-group-item-selected-border-color: #4da3e8; + --ig-button-group-item-selected-hover-text-color: #2f4d6a; + --ig-button-group-item-selected-hover-background: #6db3ea; +} diff --git a/samples/inputs/button-group/styling/src/index.tsx b/samples/inputs/button-group/styling/src/index.tsx index 61f3d984f9..720820b4d1 100644 --- a/samples/inputs/button-group/styling/src/index.tsx +++ b/samples/inputs/button-group/styling/src/index.tsx @@ -1,28 +1,25 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; -import './ButtonGroupStyling.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; import './index.css'; const layouts = ['Left', 'Center', 'Right']; export default function ButtonGroupStyling(): JSX.Element { return ( -
- - {layouts.map((layout) => ( - - {layout} - - - ))} - -
+ + {layouts.map((layout) => ( + + {layout} + + + ))} + ); } diff --git a/samples/inputs/button-group/tailwind-styling/src/index.css b/samples/inputs/button-group/tailwind-styling/src/index.css index 6ff2900474..cfaa860e96 100644 --- a/samples/inputs/button-group/tailwind-styling/src/index.css +++ b/samples/inputs/button-group/tailwind-styling/src/index.css @@ -1,37 +1,15 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -@layer theme, base, components, utilities; +@layer theme, utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities); -igc-ripple { - --color: gray; -} - -.button-group-center { - display: flex; - align-items: center; - justify-content: center; - min-height: 7rem; -} - -.button-group-style { - width: 420px; - max-width: 100%; -} - -.button-group-style igc-toggle-button::part(toggle) { - color: var(--color-violet-700); - background: var(--color-white); - border-color: var(--color-violet-300); -} - -.button-group-style igc-toggle-button::part(toggle):hover { - background: var(--color-fuchsia-100); +.sbSwitch { + display: grid; + place-items: center; + height: 100vh; } -.button-group-style igc-toggle-button[selected]::part(toggle) { - color: var(--color-white); - background: var(--color-violet-600); +igc-button-group { + display: inline-block; + width: 100%; + max-width: 25rem; } diff --git a/samples/inputs/button-group/tailwind-styling/src/index.tsx b/samples/inputs/button-group/tailwind-styling/src/index.tsx index 3f4363a7c7..72227c4df0 100644 --- a/samples/inputs/button-group/tailwind-styling/src/index.tsx +++ b/samples/inputs/button-group/tailwind-styling/src/index.tsx @@ -2,26 +2,24 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/material.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; const views = ['Day', 'Week', 'Month']; export default function ButtonGroupTailwindStyling(): JSX.Element { return ( -
- - {views.map((view) => ( - - {view} - - - ))} - -
+ + {views.map((view) => ( + + {view} + + + ))} + ); } From 5704a4da30258b600978a05e8f7631bb30d5e8ba Mon Sep 17 00:00:00 2001 From: Hristo Hristov <57346540+Hristo313@users.noreply.github.com> Date: Thu, 24 Sep 2026 17:25:37 +0300 Subject: [PATCH 06/14] fix(button): update overview inputs (#1107) --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/button/overview/src/index.css | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index 528f88907d..37b29dffdd 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-10 00:01:40","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-09-18 18:23:12","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index 528f88907d..37b29dffdd 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-10 00:01:40","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-09-18 18:23:12","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/button/overview/src/index.css b/samples/inputs/button/overview/src/index.css index 776e466b12..fe9aacd195 100644 --- a/samples/inputs/button/overview/src/index.css +++ b/samples/inputs/button/overview/src/index.css @@ -20,8 +20,7 @@ width: 100%; } -.fields igc-input::part(container), -.fields igc-input::part(input) { +.fields igc-input::part(container) { background-color: var(--ig-gray-50); } From da29ecac4bbc3e2bdc4f0aa537e419f31cfe24ea Mon Sep 17 00:00:00 2001 From: Ivan Minchev <61944284+IMinchev64@users.noreply.github.com> Date: Fri, 25 Sep 2026 19:19:29 +0300 Subject: [PATCH 07/14] Merge pull request #1090 from IgniteUI/iminchev/accordion-programmatic-expansion feat(accordion): update accordion samples for new documentation --- browser/index.html | 2 +- .../badge/tailwind-styling/package.json | 4 +- .../badge/tailwind-styling/src/index.css | 8 +- .../src/AccordionCustomization.css | 35 ---- .../accordion/customization/src/index.css | 66 ++++++++ .../accordion/customization/src/index.tsx | 88 +++++++--- .../src/AccordionNestedScenario.css | 17 -- .../accordion/nested-scenario/src/index.css | 24 +++ .../accordion/nested-scenario/src/index.tsx | 152 ++++++++++-------- .../overview/src/AccordionOverview.css | 17 -- .../layouts/accordion/overview/src/index.css | 24 +++ .../layouts/accordion/overview/src/index.tsx | 77 ++++----- .../programmatic-expansion/README.md | 56 +++++++ .../programmatic-expansion/index.html | 11 ++ .../programmatic-expansion/package.json | 42 +++++ .../sandbox.config.json | 5 + .../programmatic-expansion/src/index.css | 29 ++++ .../programmatic-expansion/src/index.tsx | 64 ++++++++ .../programmatic-expansion/tsconfig.json | 44 +++++ .../programmatic-expansion/vite.config.js | 12 ++ .../styling/.devcontainer/devcontainer.json | 1 + samples/layouts/accordion/styling/README.md | 56 +++++++ samples/layouts/accordion/styling/index.html | 11 ++ .../layouts/accordion/styling/package.json | 42 +++++ .../accordion/styling/sandbox.config.json | 5 + .../layouts/accordion/styling/src/index.css | 50 ++++++ .../layouts/accordion/styling/src/index.tsx | 45 ++++++ .../layouts/accordion/styling/tsconfig.json | 44 +++++ .../layouts/accordion/styling/vite.config.js | 12 ++ .../.devcontainer/devcontainer.json | 1 + .../accordion/tailwind-styling/README.md | 56 +++++++ .../accordion/tailwind-styling/index.html | 11 ++ .../accordion/tailwind-styling/package.json | 44 +++++ .../tailwind-styling/sandbox.config.json | 5 + .../accordion/tailwind-styling/src/index.css | 9 ++ .../accordion/tailwind-styling/src/index.tsx | 59 +++++++ .../accordion/tailwind-styling/tsconfig.json | 44 +++++ .../accordion/tailwind-styling/vite.config.js | 13 ++ 38 files changed, 1073 insertions(+), 212 deletions(-) delete mode 100644 samples/layouts/accordion/customization/src/AccordionCustomization.css delete mode 100644 samples/layouts/accordion/nested-scenario/src/AccordionNestedScenario.css delete mode 100644 samples/layouts/accordion/overview/src/AccordionOverview.css create mode 100644 samples/layouts/accordion/programmatic-expansion/README.md create mode 100644 samples/layouts/accordion/programmatic-expansion/index.html create mode 100644 samples/layouts/accordion/programmatic-expansion/package.json create mode 100644 samples/layouts/accordion/programmatic-expansion/sandbox.config.json create mode 100644 samples/layouts/accordion/programmatic-expansion/src/index.css create mode 100644 samples/layouts/accordion/programmatic-expansion/src/index.tsx create mode 100644 samples/layouts/accordion/programmatic-expansion/tsconfig.json create mode 100644 samples/layouts/accordion/programmatic-expansion/vite.config.js create mode 100644 samples/layouts/accordion/styling/.devcontainer/devcontainer.json create mode 100644 samples/layouts/accordion/styling/README.md create mode 100644 samples/layouts/accordion/styling/index.html create mode 100644 samples/layouts/accordion/styling/package.json create mode 100644 samples/layouts/accordion/styling/sandbox.config.json create mode 100644 samples/layouts/accordion/styling/src/index.css create mode 100644 samples/layouts/accordion/styling/src/index.tsx create mode 100644 samples/layouts/accordion/styling/tsconfig.json create mode 100644 samples/layouts/accordion/styling/vite.config.js create mode 100644 samples/layouts/accordion/tailwind-styling/.devcontainer/devcontainer.json create mode 100644 samples/layouts/accordion/tailwind-styling/README.md create mode 100644 samples/layouts/accordion/tailwind-styling/index.html create mode 100644 samples/layouts/accordion/tailwind-styling/package.json create mode 100644 samples/layouts/accordion/tailwind-styling/sandbox.config.json create mode 100644 samples/layouts/accordion/tailwind-styling/src/index.css create mode 100644 samples/layouts/accordion/tailwind-styling/src/index.tsx create mode 100644 samples/layouts/accordion/tailwind-styling/tsconfig.json create mode 100644 samples/layouts/accordion/tailwind-styling/vite.config.js diff --git a/browser/index.html b/browser/index.html index b201e4022b..682d763d8d 100644 --- a/browser/index.html +++ b/browser/index.html @@ -30,7 +30,7 @@ - +
diff --git a/samples/inputs/badge/tailwind-styling/package.json b/samples/inputs/badge/tailwind-styling/package.json index a4300fd58d..e1d7f6b876 100644 --- a/samples/inputs/badge/tailwind-styling/package.json +++ b/samples/inputs/badge/tailwind-styling/package.json @@ -21,14 +21,14 @@ "tslib": "^2.4.0" }, "devDependencies": { - "@tailwindcss/vite": "^4.1.14", + "@tailwindcss/vite": "^4.3.3", "@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", - "tailwindcss": "^4.1.14", + "tailwindcss": "^4.3.3", "typescript": "^4.8.4", "vite": "^7.1.9", "vitest": "^3.2.4", diff --git a/samples/inputs/badge/tailwind-styling/src/index.css b/samples/inputs/badge/tailwind-styling/src/index.css index d98898d2b6..04602a2cac 100644 --- a/samples/inputs/badge/tailwind-styling/src/index.css +++ b/samples/inputs/badge/tailwind-styling/src/index.css @@ -1,9 +1,9 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -@layer theme, base, components, utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities); +@source "./index.tsx"; + +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ igc-badge { --ig-size: var(--ig-size-small); diff --git a/samples/layouts/accordion/customization/src/AccordionCustomization.css b/samples/layouts/accordion/customization/src/AccordionCustomization.css deleted file mode 100644 index 89acd44513..0000000000 --- a/samples/layouts/accordion/customization/src/AccordionCustomization.css +++ /dev/null @@ -1,35 +0,0 @@ -igc-accordion { - width: 100%; -} - -.sample-wrapper { - overflow-y: auto; - max-height: 530px; - margin: 8px; -} - -igc-range-slider { - margin: 24px; -} - -.categories-container { - display: flex; - flex-flow: column nowrap; -} - -igc-checkbox, -igc-radio { - margin: 4px 0; -} - -igc-expansion-panel { - border: 1px solid rgba(174, 174, 174, 0.25); -} - -igc-rating { - flex-direction: row; -} - -.size-small { - --ig-size: var(--ig-size-small); -} diff --git a/samples/layouts/accordion/customization/src/index.css b/samples/layouts/accordion/customization/src/index.css index e69de29bb2..af3552c32b 100644 --- a/samples/layouts/accordion/customization/src/index.css +++ b/samples/layouts/accordion/customization/src/index.css @@ -0,0 +1,66 @@ +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(760px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-sample igc-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} + +.panel-description { + margin: 0 0 16px; + color: var(--ig-gray-700); +} + +.categories-container { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px 24px; + max-width: 520px; +} + +.category-option, +.rating-option { + margin: 4px 0; +} + +.range-summary { + display: flex; + justify-content: space-between; + max-width: 560px; + margin-bottom: 4px; + font-weight: 600; +} + +.cost-slider { + max-width: 560px; + margin: 8px 0 0; +} + +.rating-options { + display: grid; + gap: 8px; + max-width: 360px; +} + +.rating-control { + flex-direction: row; +} + +.time-input { + max-width: 260px; +} + +.size-small { + --ig-size: var(--ig-size-small); +} diff --git a/samples/layouts/accordion/customization/src/index.tsx b/samples/layouts/accordion/customization/src/index.tsx index 8e138630bb..23b94cd758 100644 --- a/samples/layouts/accordion/customization/src/index.tsx +++ b/samples/layouts/accordion/customization/src/index.tsx @@ -1,7 +1,6 @@ import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; -import "./AccordionCustomization.css"; import { IgrAccordion, IgrCheckbox, @@ -22,6 +21,8 @@ import "igniteui-webcomponents/themes/light/bootstrap.css"; type Category = { checked: boolean; type: string }; +const ratingOptions = [2, 3, 4, 5]; + const clearIcon = ""; const clockIcon = @@ -37,6 +38,7 @@ export default class AccordionCustomization extends React.Component { ]; private dateTimeInput: IgrDateTimeInput; + private transportationPanel: IgrExpansionPanel; constructor(props: any) { super(props); @@ -44,7 +46,7 @@ export default class AccordionCustomization extends React.Component { categories: this.categories, cost: { lower: 200, upper: 800 }, rating: "", - time: "Time", + time: "Any time", }; this.categoriesChange = this.categoriesChange.bind(this); @@ -53,30 +55,42 @@ export default class AccordionCustomization extends React.Component { this.timeChange = this.timeChange.bind(this); this.clearTime = this.clearTime.bind(this); this.dateTimeInputRef = this.dateTimeInputRef.bind(this); + this.transportationPanelRef = this.transportationPanelRef.bind(this); registerIconFromText("clear", clearIcon, "material"); registerIconFromText("clock", clockIcon, "material"); } + public componentDidMount() { + if (this.transportationPanel) { + this.transportationPanel.open = true; + } + } + public render(): JSX.Element { + const selectedCategories = this.state.categories + .filter((c: Category) => c.checked) + .map((c: Category) => c.type) + .join(", "); + return ( -
-
+
+
- + - Categories - {this.state.categories.some((c: Category) => c.checked) && ": "} - {this.state.categories - .filter((c: Category) => c.checked) - .map((c: Category) => c.type) - .join(", ")} + Transportation{selectedCategories && `: ${selectedCategories}`} + Choose how you want to travel +

+ Select one or more transportation options for your trip. +

{this.state.categories.map((c: Category) => { return ( this.categoriesChange(e, c.type) @@ -91,11 +105,19 @@ export default class AccordionCustomization extends React.Component { - Cost: ${this.state.cost.lower} to $ - {this.state.cost.upper} + Budget: ${this.state.cost.lower} - ${this.state.cost.upper} + Set the price range +

+ Adjust the minimum and maximum cost for available options. +

+
+ ${this.state.cost.lower} + ${this.state.cost.upper} +
{ - Rating{this.state.rating && ": "} + Minimum Rating{this.state.rating && ": "} {this.state.rating} + Filter by review score - - {[1, 2, 3, 4].map((rating) => { +

+ Choose the lowest rating you want to include in the results. +

+ + {ratingOptions.map((rating) => { return ( { rating > 1 ? "s" : "" } or more`} max={5} - value={rating + 0.5} - className="size-small" + value={rating} + className="rating-control size-small" readOnly={true} > @@ -136,11 +163,16 @@ export default class AccordionCustomization extends React.Component { - {this.state.time} + Arrival Time + {this.state.time !== "Any time" && `: ${this.state.time}`} + Set the latest arrival time +

+ Pick the latest acceptable arrival time for your trip. +

{ const s = e.target as IgrDateTimeInput; const result = s.value !== null - ? `Arrive before ${e.detail.toLocaleTimeString([], { + ? e.detail.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", - })}` - : "Time"; + }) + : "Any time"; this.setState({ time: result, }); @@ -207,7 +239,7 @@ export default class AccordionCustomization extends React.Component { public clearTime() { this.dateTimeInput.clear(); this.setState({ - time: "Time", + time: "Any time", }); } @@ -217,8 +249,14 @@ export default class AccordionCustomization extends React.Component { } this.dateTimeInput = input; } + + public transportationPanelRef(panel: IgrExpansionPanel) { + if (!panel) { + return; + } + this.transportationPanel = panel; + } } -// rendering above component to the React DOM const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); diff --git a/samples/layouts/accordion/nested-scenario/src/AccordionNestedScenario.css b/samples/layouts/accordion/nested-scenario/src/AccordionNestedScenario.css deleted file mode 100644 index 2eb281b0e4..0000000000 --- a/samples/layouts/accordion/nested-scenario/src/AccordionNestedScenario.css +++ /dev/null @@ -1,17 +0,0 @@ -igc-accordion { - width: 100%; -} - -.sample-wrapper { - overflow-y: auto; - max-height: 470px; - margin: 8px; -} - -igc-switch { - padding: 16px; -} - -igc-expansion-panel { - border: 1px solid rgba(174, 174, 174, 0.25); -} diff --git a/samples/layouts/accordion/nested-scenario/src/index.css b/samples/layouts/accordion/nested-scenario/src/index.css index e69de29bb2..091f1b043c 100644 --- a/samples/layouts/accordion/nested-scenario/src/index.css +++ b/samples/layouts/accordion/nested-scenario/src/index.css @@ -0,0 +1,24 @@ +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(760px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: 12px; +} + +.accordion-sample igc-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} diff --git a/samples/layouts/accordion/nested-scenario/src/index.tsx b/samples/layouts/accordion/nested-scenario/src/index.tsx index 8d7a68fbac..809eb67c19 100644 --- a/samples/layouts/accordion/nested-scenario/src/index.tsx +++ b/samples/layouts/accordion/nested-scenario/src/index.tsx @@ -1,75 +1,97 @@ -import React, { useState } from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import './AccordionNestedScenario.css'; +import React, { useRef } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; import { - IgrAccordion, IgrExpansionPanel, IgrSwitch, - IgrCheckboxChangeEventArgs -} from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; + IgrAccordion, + IgrCheckboxChangeEventArgs, + IgrExpansionPanel, + IgrSwitch, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; export default function AccordionNestedScenario() { + const outerAccordionRef = useRef(null); + const innerAccordionRef = useRef(null); - const [singleExpand, setSingleExpand] = useState(false); - - const switchChange = (e: IgrCheckboxChangeEventArgs) => { - setSingleExpand(e.detail.checked); + const switchChange = (e: IgrCheckboxChangeEventArgs) => { + const { checked } = e.detail; + + if (outerAccordionRef.current) { + outerAccordionRef.current.singleExpand = checked; + } + + if (innerAccordionRef.current) { + innerAccordionRef.current.singleExpand = checked; } + }; - return ( -
- Single Expand -
- - - Common questions about renewal. - - - - What happens if I don't renew my subscription? - Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark. - - - If I don't renew my subscription will I still have access to previous versions of Infragistics products? - Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or - previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing - to renew it. - - - Will I be automatically charged for my renewal/ Can I be automatically charged for renewal? - Any new subscriptions purchased online, via our eCommerce system, will renew automatically. Subscription renewal can be canceled, - at any time, before the next automatic renewal date. Subscriptions purchased directly from Infragistics or Infragistics' partners are - subject to the renewal terms that were agreed upon as part of that purchase. - - - - - - What has changed about subscription and pricing model? - We have moved to a subscription-based pricing model for all our developer tools. This makes it easier - for you to manage your license subscriptions and allows us to provide a better level of service for you. We - updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI - (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development, - including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components, as well as Infragistics Professional, - Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount, - so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best - price. - - - Who will the updated changes impact? - The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and - Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript, - Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this - blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages. - So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will - be honored and renewed based upon the current agreement. - - -
+ return ( +
+
+
+ + Single Expand +
- ); + + + + Workspace Settings + + Nested account, access, and billing options + + + + + Profile + Name, photo, and contact details +

+ Update the public information shown to other workspace + members. +

+ + + + Security + Password and sign-in preferences +

+ Review active sessions, change your password, and configure + sign-in requirements. +

+ + + + Notifications + Email and product updates +

+ Choose the messages you receive for comments, assignments, and + releases. +

+ + + + + + Team Access + Members, roles, and permissions +

+ Invite teammates, assign roles, and review workspace permissions. +

+ + + + Billing + Plan, invoices, and payment method +

+ Manage subscription details, billing contacts, and invoice + delivery. +

+ + +
+
+ ); } -// rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); diff --git a/samples/layouts/accordion/overview/src/AccordionOverview.css b/samples/layouts/accordion/overview/src/AccordionOverview.css deleted file mode 100644 index 816b7feede..0000000000 --- a/samples/layouts/accordion/overview/src/AccordionOverview.css +++ /dev/null @@ -1,17 +0,0 @@ -igc-accordion { - width: 100%; -} - -.sample-wrapper { - overflow-y: auto; - max-height: 380px; - margin: 8px; -} - -igc-switch { - padding: 16px; -} - -igc-expansion-panel { - border: 1px solid rgba(174, 174, 174, 0.25); -} diff --git a/samples/layouts/accordion/overview/src/index.css b/samples/layouts/accordion/overview/src/index.css index e69de29bb2..f6a5352f94 100644 --- a/samples/layouts/accordion/overview/src/index.css +++ b/samples/layouts/accordion/overview/src/index.css @@ -0,0 +1,24 @@ +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: 12px; +} + +.accordion-sample igc-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} diff --git a/samples/layouts/accordion/overview/src/index.tsx b/samples/layouts/accordion/overview/src/index.tsx index cd982a3bd7..a0dfa46bfd 100644 --- a/samples/layouts/accordion/overview/src/index.tsx +++ b/samples/layouts/accordion/overview/src/index.tsx @@ -1,68 +1,53 @@ -import React, { useState } from 'react'; +import React, { useRef } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import './AccordionOverview.css'; import { - IgrAccordion, IgrExpansionPanel, IgrSwitch, - IgrCheckboxChangeEventArgs } from 'igniteui-react'; + IgrAccordion, + IgrCheckboxChangeEventArgs, + IgrExpansionPanel, + IgrSwitch +} from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; export default function AccordionOverview() { - - const [singleExpand, setSingleExpand] = useState(false); + const accordionRef = useRef(null); const switchChange = (e: IgrCheckboxChangeEventArgs) => { - setSingleExpand(e.detail.checked); - } - + if (accordionRef.current) { + accordionRef.current.singleExpand = e.detail.checked; + } + }; + return ( -
- Single Expand -
- - - What has changed about subscription and pricing model? - We have moved to a subscription-based pricing model for all our developer tools. This makes it easier - for you to manage your license subscriptions and allows us to provide a better level of service for you. We - updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI - (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development, - including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components, as well as Infragistics Professional, - Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount, - so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best - price. - - - Who will the updated changes impact? - The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and - Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript, - Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this - blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages. - So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will - be honored and renewed based upon the current agreement. - - - What is the difference between your old model and your current subscription model for Ignite UI? - For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages will be replaced with - packages that include a “Trial Version” watermark. Licensed packages for Ignite UI will be available from our cloud hosted ProGet - server. For more information, please refer to this article: Moving from Trial to Licensed Ignite UI NPM Packages +
+
+
+ + Single Expand + +
+ + + + Account + Profile and security settings +

Update your profile details, password, and sign-in preferences.

 - What happens if I don't renew my subscription? - Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark. + Notifications + Email and product updates +

Choose which notifications you receive and how often they are delivered.

 - If I don't renew my subscription will I still have access to previous versions of Infragistics products? - Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or - previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing - to renew it. + Billing + Payment and invoice settings +

Manage payment methods, billing contacts, and invoice delivery options.
- ); } -// rendering above component to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); diff --git a/samples/layouts/accordion/programmatic-expansion/README.md b/samples/layouts/accordion/programmatic-expansion/README.md new file mode 100644 index 0000000000..5ee8cc0584 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Programmatic Expansion feature using [Accordion](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/accordion/programmatic-expansion +``` + +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/layouts/accordion/programmatic-expansion/index.html b/samples/layouts/accordion/programmatic-expansion/index.html new file mode 100644 index 0000000000..050be7adb0 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/index.html @@ -0,0 +1,11 @@ + + + + Accordion Programmatic Expansion + + + +
+ + + diff --git a/samples/layouts/accordion/programmatic-expansion/package.json b/samples/layouts/accordion/programmatic-expansion/package.json new file mode 100644 index 0000000000..de10646370 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-accordion-programmatic-expansion", + "description": "This project provides example of Accordion Programmatic Expansion using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "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", + "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" + ] +} diff --git a/samples/layouts/accordion/programmatic-expansion/sandbox.config.json b/samples/layouts/accordion/programmatic-expansion/sandbox.config.json new file mode 100644 index 0000000000..f8b5562bd6 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/layouts/accordion/programmatic-expansion/src/index.css b/samples/layouts/accordion/programmatic-expansion/src/index.css new file mode 100644 index 0000000000..0d434aede3 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/src/index.css @@ -0,0 +1,29 @@ +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-toolbar { + display: flex; + justify-content: flex-end; + gap: 8px; + margin-bottom: 12px; +} + +.action-button { + min-width: 96px; +} + +.accordion-sample igc-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} diff --git a/samples/layouts/accordion/programmatic-expansion/src/index.tsx b/samples/layouts/accordion/programmatic-expansion/src/index.tsx new file mode 100644 index 0000000000..a33174d2d2 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/src/index.tsx @@ -0,0 +1,64 @@ +import React, { useRef } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrAccordion, IgrButton, IgrExpansionPanel } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function AccordionProgrammaticExpansion() { + const accordionRef = useRef(null); + + return ( +
+
+
+ accordionRef.current?.showAll()} + > + Show All + + accordionRef.current?.hideAll()} + > + Hide All + +
+ + + + Billing + Invoices and payment settings +

+ Review invoices, update payment methods, and manage billing + contacts. +

+ + + + Security + Password and access controls +

+ Configure password rules, multi-factor authentication, and + recovery options. +

+ + + + Notifications + Product updates and account alerts +

+ Choose which product updates and account alerts are sent to your + team. +

+ + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/accordion/programmatic-expansion/tsconfig.json b/samples/layouts/accordion/programmatic-expansion/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/accordion/programmatic-expansion/vite.config.js b/samples/layouts/accordion/programmatic-expansion/vite.config.js new file mode 100644 index 0000000000..4fc593892f --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); diff --git a/samples/layouts/accordion/styling/.devcontainer/devcontainer.json b/samples/layouts/accordion/styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..5779654722 --- /dev/null +++ b/samples/layouts/accordion/styling/.devcontainer/devcontainer.json @@ -0,0 +1 @@ +{"image":"mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye"} diff --git a/samples/layouts/accordion/styling/README.md b/samples/layouts/accordion/styling/README.md new file mode 100644 index 0000000000..abd2d2cb78 --- /dev/null +++ b/samples/layouts/accordion/styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Styling feature using [Accordion](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/accordion/styling +``` + +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/layouts/accordion/styling/index.html b/samples/layouts/accordion/styling/index.html new file mode 100644 index 0000000000..a658e62846 --- /dev/null +++ b/samples/layouts/accordion/styling/index.html @@ -0,0 +1,11 @@ + + + + Accordion Styling + + + +
+ + + diff --git a/samples/layouts/accordion/styling/package.json b/samples/layouts/accordion/styling/package.json new file mode 100644 index 0000000000..ebf67487ca --- /dev/null +++ b/samples/layouts/accordion/styling/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-accordion-styling", + "description": "This project provides example of Accordion Styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "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", + "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" + ] +} diff --git a/samples/layouts/accordion/styling/sandbox.config.json b/samples/layouts/accordion/styling/sandbox.config.json new file mode 100644 index 0000000000..f8b5562bd6 --- /dev/null +++ b/samples/layouts/accordion/styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/layouts/accordion/styling/src/index.css b/samples/layouts/accordion/styling/src/index.css new file mode 100644 index 0000000000..543269784c --- /dev/null +++ b/samples/layouts/accordion/styling/src/index.css @@ -0,0 +1,50 @@ +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-sample igc-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} + +.accordion-sample igc-expansion-panel { + background-color: var(--ig-gray-50); + color: var(--ig-gray-900); + border-radius: 4px; +} + +.accordion-sample igc-expansion-panel::part(header) { + background-color: var(--ig-gray-100); +} + +.accordion-sample igc-expansion-panel[open]::part(header) { + background-color: var(--ig-primary-50); +} + +.accordion-sample igc-expansion-panel::part(indicator) { + color: var(--ig-primary-500); +} + +.accordion-sample igc-expansion-panel::part(title) { + color: var(--ig-gray-900); + font-weight: 600; +} + +.accordion-sample igc-expansion-panel[open]::part(title), +.accordion-sample igc-expansion-panel[open]::part(subtitle) { + color: var(--ig-primary-700); +} + +.accordion-sample igc-expansion-panel::part(content) { + color: var(--ig-gray-700); +} diff --git a/samples/layouts/accordion/styling/src/index.tsx b/samples/layouts/accordion/styling/src/index.tsx new file mode 100644 index 0000000000..420d3786ce --- /dev/null +++ b/samples/layouts/accordion/styling/src/index.tsx @@ -0,0 +1,45 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrAccordion, IgrExpansionPanel } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function AccordionStyling() { + return ( +
+
+ + + Getting Started + Setup and onboarding +

+ Find installation steps, project setup guidance, and resources for + building your first application. +

+ + + + Billing + Invoices and payment methods +

+ Review invoices, update payment methods, and manage billing + contacts for your account. +

+ + + + Security + Access and authentication +

+ Configure password rules, multi-factor authentication, and + recovery options for your team. +

+ + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/accordion/styling/tsconfig.json b/samples/layouts/accordion/styling/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/accordion/styling/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/accordion/styling/vite.config.js b/samples/layouts/accordion/styling/vite.config.js new file mode 100644 index 0000000000..4fc593892f --- /dev/null +++ b/samples/layouts/accordion/styling/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); diff --git a/samples/layouts/accordion/tailwind-styling/.devcontainer/devcontainer.json b/samples/layouts/accordion/tailwind-styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..5779654722 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/.devcontainer/devcontainer.json @@ -0,0 +1 @@ +{"image":"mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye"} diff --git a/samples/layouts/accordion/tailwind-styling/README.md b/samples/layouts/accordion/tailwind-styling/README.md new file mode 100644 index 0000000000..e5af6a5a19 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Accordion](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/accordion/tailwind-styling +``` + +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/layouts/accordion/tailwind-styling/index.html b/samples/layouts/accordion/tailwind-styling/index.html new file mode 100644 index 0000000000..d21cb0e1c3 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + Accordion Tailwind Styling + + + +
+ + + diff --git a/samples/layouts/accordion/tailwind-styling/package.json b/samples/layouts/accordion/tailwind-styling/package.json new file mode 100644 index 0000000000..24d204ed97 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-accordion-tailwind-styling", + "description": "This project provides example of Accordion Tailwind Styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.3.3", + "@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", + "tailwindcss": "^4.3.3", + "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" + ] +} diff --git a/samples/layouts/accordion/tailwind-styling/sandbox.config.json b/samples/layouts/accordion/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..f8b5562bd6 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/layouts/accordion/tailwind-styling/src/index.css b/samples/layouts/accordion/tailwind-styling/src/index.css new file mode 100644 index 0000000000..d5519b6763 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/src/index.css @@ -0,0 +1,9 @@ +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); +@source "./index.tsx"; + +.accordion-tailwind-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} diff --git a/samples/layouts/accordion/tailwind-styling/src/index.tsx b/samples/layouts/accordion/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..4067390c92 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/src/index.tsx @@ -0,0 +1,59 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrAccordion, IgrExpansionPanel } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +const panelClassName = [ + "rounded", + "bg-[var(--ig-gray-50)]", + "text-[var(--ig-gray-900)]", + "[&::part(header)]:bg-[var(--ig-gray-100)]", + "[&[open]::part(header)]:bg-[var(--ig-primary-50)]", + "[&::part(indicator)]:text-[var(--ig-primary-500)]", + "[&::part(title)]:font-semibold", + "[&::part(title)]:text-[var(--ig-gray-900)]", + "[&[open]::part(title)]:text-[var(--ig-primary-700)]", + "[&[open]::part(subtitle)]:text-[var(--ig-primary-700)]", + "[&::part(content)]:text-[var(--ig-gray-700)]", +].join(" "); + +export default function AccordionTailwindStyling() { + return ( +
+
+ + + Getting Started + Setup and onboarding +

+ Find installation steps, project setup guidance, and resources for + building your first application. +

+ + + + Billing + Invoices and payment methods +

+ Review invoices, update payment methods, and manage billing + contacts for your account. +

+ + + + Security + Access and authentication +

+ Configure password rules, multi-factor authentication, and + recovery options for your team. +

+ + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/accordion/tailwind-styling/tsconfig.json b/samples/layouts/accordion/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/accordion/tailwind-styling/vite.config.js b/samples/layouts/accordion/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..c1fff0c83c --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/vite.config.js @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); From 517ec33d00894d206f0f6c76325a726ee927f431 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 29 Sep 2026 20:53:33 +0300 Subject: [PATCH 08/14] feat(breadcrumbs): add samples --- browser/package-lock.json | 29 +++-- browser/package.json | 4 +- .../.devcontainer/devcontainer.json | 4 + .../breadcrumbs/custom-separator/.eslintrc.js | 75 +++++++++++ .../breadcrumbs/custom-separator/README.md | 56 +++++++++ .../breadcrumbs/custom-separator/index.html | 11 ++ .../breadcrumbs/custom-separator/package.json | 42 +++++++ .../custom-separator/sandbox.config.json | 5 + .../custom-separator/src/index.css | 7 ++ .../custom-separator/src/index.tsx | 31 +++++ .../custom-separator/tsconfig.json | 44 +++++++ .../custom-separator/vite.config.js | 12 ++ .../overview/.devcontainer/devcontainer.json | 4 + .../layouts/breadcrumbs/overview/.eslintrc.js | 75 +++++++++++ .../layouts/breadcrumbs/overview/README.md | 56 +++++++++ .../layouts/breadcrumbs/overview/index.html | 11 ++ .../layouts/breadcrumbs/overview/package.json | 42 +++++++ .../breadcrumbs/overview/sandbox.config.json | 5 + .../breadcrumbs/overview/src/index.css | 7 ++ .../breadcrumbs/overview/src/index.tsx | 50 ++++++++ .../breadcrumbs/overview/tsconfig.json | 44 +++++++ .../breadcrumbs/overview/vite.config.js | 12 ++ .../.devcontainer/devcontainer.json | 4 + .../breadcrumbs/prefix-suffix/.eslintrc.js | 75 +++++++++++ .../breadcrumbs/prefix-suffix/README.md | 56 +++++++++ .../breadcrumbs/prefix-suffix/index.html | 11 ++ .../breadcrumbs/prefix-suffix/package.json | 42 +++++++ .../prefix-suffix/sandbox.config.json | 5 + .../breadcrumbs/prefix-suffix/src/index.css | 11 ++ .../breadcrumbs/prefix-suffix/src/index.tsx | 41 ++++++ .../breadcrumbs/prefix-suffix/tsconfig.json | 44 +++++++ .../breadcrumbs/prefix-suffix/vite.config.js | 12 ++ .../sizes/.devcontainer/devcontainer.json | 4 + .../layouts/breadcrumbs/sizes/.eslintrc.js | 75 +++++++++++ samples/layouts/breadcrumbs/sizes/README.md | 56 +++++++++ samples/layouts/breadcrumbs/sizes/index.html | 11 ++ .../layouts/breadcrumbs/sizes/package.json | 42 +++++++ .../breadcrumbs/sizes/sandbox.config.json | 5 + .../layouts/breadcrumbs/sizes/src/index.css | 43 +++++++ .../layouts/breadcrumbs/sizes/src/index.tsx | 61 +++++++++ .../layouts/breadcrumbs/sizes/tsconfig.json | 44 +++++++ .../layouts/breadcrumbs/sizes/vite.config.js | 12 ++ .../states/.devcontainer/devcontainer.json | 4 + .../layouts/breadcrumbs/states/.eslintrc.js | 75 +++++++++++ samples/layouts/breadcrumbs/states/README.md | 56 +++++++++ samples/layouts/breadcrumbs/states/index.html | 11 ++ .../layouts/breadcrumbs/states/package.json | 42 +++++++ .../breadcrumbs/states/sandbox.config.json | 5 + .../layouts/breadcrumbs/states/src/index.css | 118 ++++++++++++++++++ .../layouts/breadcrumbs/states/src/index.tsx | 81 ++++++++++++ .../layouts/breadcrumbs/states/tsconfig.json | 44 +++++++ .../layouts/breadcrumbs/states/vite.config.js | 12 ++ .../styling/.devcontainer/devcontainer.json | 4 + .../layouts/breadcrumbs/styling/.eslintrc.js | 75 +++++++++++ samples/layouts/breadcrumbs/styling/README.md | 56 +++++++++ .../layouts/breadcrumbs/styling/index.html | 11 ++ .../layouts/breadcrumbs/styling/package.json | 42 +++++++ .../breadcrumbs/styling/sandbox.config.json | 5 + .../layouts/breadcrumbs/styling/src/index.css | 19 +++ .../layouts/breadcrumbs/styling/src/index.tsx | 38 ++++++ .../layouts/breadcrumbs/styling/tsconfig.json | 44 +++++++ .../breadcrumbs/styling/vite.config.js | 12 ++ .../.devcontainer/devcontainer.json | 4 + .../breadcrumbs/tailwind-styling/.eslintrc.js | 75 +++++++++++ .../breadcrumbs/tailwind-styling/README.md | 56 +++++++++ .../breadcrumbs/tailwind-styling/index.html | 11 ++ .../breadcrumbs/tailwind-styling/package.json | 44 +++++++ .../tailwind-styling/sandbox.config.json | 5 + .../tailwind-styling/src/index.css | 10 ++ .../tailwind-styling/src/index.tsx | 35 ++++++ .../tailwind-styling/tsconfig.json | 44 +++++++ .../tailwind-styling/vite.config.js | 13 ++ .../wrapping/.devcontainer/devcontainer.json | 4 + .../layouts/breadcrumbs/wrapping/.eslintrc.js | 75 +++++++++++ .../layouts/breadcrumbs/wrapping/README.md | 56 +++++++++ .../layouts/breadcrumbs/wrapping/index.html | 11 ++ .../layouts/breadcrumbs/wrapping/package.json | 42 +++++++ .../breadcrumbs/wrapping/sandbox.config.json | 5 + .../breadcrumbs/wrapping/src/index.css | 9 ++ .../breadcrumbs/wrapping/src/index.tsx | 32 +++++ .../breadcrumbs/wrapping/tsconfig.json | 44 +++++++ .../breadcrumbs/wrapping/vite.config.js | 12 ++ 82 files changed, 2604 insertions(+), 17 deletions(-) create mode 100644 samples/layouts/breadcrumbs/custom-separator/.devcontainer/devcontainer.json create mode 100644 samples/layouts/breadcrumbs/custom-separator/.eslintrc.js create mode 100644 samples/layouts/breadcrumbs/custom-separator/README.md create mode 100644 samples/layouts/breadcrumbs/custom-separator/index.html create mode 100644 samples/layouts/breadcrumbs/custom-separator/package.json create mode 100644 samples/layouts/breadcrumbs/custom-separator/sandbox.config.json create mode 100644 samples/layouts/breadcrumbs/custom-separator/src/index.css create mode 100644 samples/layouts/breadcrumbs/custom-separator/src/index.tsx create mode 100644 samples/layouts/breadcrumbs/custom-separator/tsconfig.json create mode 100644 samples/layouts/breadcrumbs/custom-separator/vite.config.js create mode 100644 samples/layouts/breadcrumbs/overview/.devcontainer/devcontainer.json create mode 100644 samples/layouts/breadcrumbs/overview/.eslintrc.js create mode 100644 samples/layouts/breadcrumbs/overview/README.md create mode 100644 samples/layouts/breadcrumbs/overview/index.html create mode 100644 samples/layouts/breadcrumbs/overview/package.json create mode 100644 samples/layouts/breadcrumbs/overview/sandbox.config.json create mode 100644 samples/layouts/breadcrumbs/overview/src/index.css create mode 100644 samples/layouts/breadcrumbs/overview/src/index.tsx create mode 100644 samples/layouts/breadcrumbs/overview/tsconfig.json create mode 100644 samples/layouts/breadcrumbs/overview/vite.config.js create mode 100644 samples/layouts/breadcrumbs/prefix-suffix/.devcontainer/devcontainer.json create mode 100644 samples/layouts/breadcrumbs/prefix-suffix/.eslintrc.js create mode 100644 samples/layouts/breadcrumbs/prefix-suffix/README.md create mode 100644 samples/layouts/breadcrumbs/prefix-suffix/index.html create mode 100644 samples/layouts/breadcrumbs/prefix-suffix/package.json create mode 100644 samples/layouts/breadcrumbs/prefix-suffix/sandbox.config.json create mode 100644 samples/layouts/breadcrumbs/prefix-suffix/src/index.css create mode 100644 samples/layouts/breadcrumbs/prefix-suffix/src/index.tsx create mode 100644 samples/layouts/breadcrumbs/prefix-suffix/tsconfig.json create mode 100644 samples/layouts/breadcrumbs/prefix-suffix/vite.config.js create mode 100644 samples/layouts/breadcrumbs/sizes/.devcontainer/devcontainer.json create mode 100644 samples/layouts/breadcrumbs/sizes/.eslintrc.js create mode 100644 samples/layouts/breadcrumbs/sizes/README.md create mode 100644 samples/layouts/breadcrumbs/sizes/index.html create mode 100644 samples/layouts/breadcrumbs/sizes/package.json create mode 100644 samples/layouts/breadcrumbs/sizes/sandbox.config.json create mode 100644 samples/layouts/breadcrumbs/sizes/src/index.css create mode 100644 samples/layouts/breadcrumbs/sizes/src/index.tsx create mode 100644 samples/layouts/breadcrumbs/sizes/tsconfig.json create mode 100644 samples/layouts/breadcrumbs/sizes/vite.config.js create mode 100644 samples/layouts/breadcrumbs/states/.devcontainer/devcontainer.json create mode 100644 samples/layouts/breadcrumbs/states/.eslintrc.js create mode 100644 samples/layouts/breadcrumbs/states/README.md create mode 100644 samples/layouts/breadcrumbs/states/index.html create mode 100644 samples/layouts/breadcrumbs/states/package.json create mode 100644 samples/layouts/breadcrumbs/states/sandbox.config.json create mode 100644 samples/layouts/breadcrumbs/states/src/index.css create mode 100644 samples/layouts/breadcrumbs/states/src/index.tsx create mode 100644 samples/layouts/breadcrumbs/states/tsconfig.json create mode 100644 samples/layouts/breadcrumbs/states/vite.config.js create mode 100644 samples/layouts/breadcrumbs/styling/.devcontainer/devcontainer.json create mode 100644 samples/layouts/breadcrumbs/styling/.eslintrc.js create mode 100644 samples/layouts/breadcrumbs/styling/README.md create mode 100644 samples/layouts/breadcrumbs/styling/index.html create mode 100644 samples/layouts/breadcrumbs/styling/package.json create mode 100644 samples/layouts/breadcrumbs/styling/sandbox.config.json create mode 100644 samples/layouts/breadcrumbs/styling/src/index.css create mode 100644 samples/layouts/breadcrumbs/styling/src/index.tsx create mode 100644 samples/layouts/breadcrumbs/styling/tsconfig.json create mode 100644 samples/layouts/breadcrumbs/styling/vite.config.js create mode 100644 samples/layouts/breadcrumbs/tailwind-styling/.devcontainer/devcontainer.json create mode 100644 samples/layouts/breadcrumbs/tailwind-styling/.eslintrc.js create mode 100644 samples/layouts/breadcrumbs/tailwind-styling/README.md create mode 100644 samples/layouts/breadcrumbs/tailwind-styling/index.html create mode 100644 samples/layouts/breadcrumbs/tailwind-styling/package.json create mode 100644 samples/layouts/breadcrumbs/tailwind-styling/sandbox.config.json create mode 100644 samples/layouts/breadcrumbs/tailwind-styling/src/index.css create mode 100644 samples/layouts/breadcrumbs/tailwind-styling/src/index.tsx create mode 100644 samples/layouts/breadcrumbs/tailwind-styling/tsconfig.json create mode 100644 samples/layouts/breadcrumbs/tailwind-styling/vite.config.js create mode 100644 samples/layouts/breadcrumbs/wrapping/.devcontainer/devcontainer.json create mode 100644 samples/layouts/breadcrumbs/wrapping/.eslintrc.js create mode 100644 samples/layouts/breadcrumbs/wrapping/README.md create mode 100644 samples/layouts/breadcrumbs/wrapping/index.html create mode 100644 samples/layouts/breadcrumbs/wrapping/package.json create mode 100644 samples/layouts/breadcrumbs/wrapping/sandbox.config.json create mode 100644 samples/layouts/breadcrumbs/wrapping/src/index.css create mode 100644 samples/layouts/breadcrumbs/wrapping/src/index.tsx create mode 100644 samples/layouts/breadcrumbs/wrapping/tsconfig.json create mode 100644 samples/layouts/breadcrumbs/wrapping/vite.config.js diff --git a/browser/package-lock.json b/browser/package-lock.json index a250139e76..60ae214bf2 100644 --- a/browser/package-lock.json +++ b/browser/package-lock.json @@ -18,7 +18,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-grid-lite": "~0.8.0", "igniteui-i18n-resources": "^1.0.5", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-dashboards": "19.6.0", @@ -34,7 +34,7 @@ "igniteui-react-spreadsheet": "19.6.0", "igniteui-react-spreadsheet-chart-adapter": "19.6.0", "igniteui-theming": "^25.0.1", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "marked": "^17.0.0", "marked-shiki": "^1.2.1", @@ -9699,17 +9699,17 @@ } }, "node_modules/igniteui-react": { - "version": "19.7.0", - "resolved": "https://registry.npmjs.org/igniteui-react/-/igniteui-react-19.7.0.tgz", - "integrity": "sha512-yI+pGyARnpCB3le6zWtxFLXoegy82b1q9iUJjYClHdUX/U0i0yO/7f3e59VZNP3a9/daruha91YdK6BWdwY/Cg==", + "version": "19.9.0", + "resolved": "https://registry.npmjs.org/igniteui-react/-/igniteui-react-19.9.0.tgz", + "integrity": "sha512-nb0iyPqid1CSOjrsIyWiDozuR0PTDPc2feGfJ0off5QfkSYTVyjlNyKvEd4cv6S6ajxdQ8KpIHmdti3LruZAEA==", "license": "MIT", "dependencies": { "@lit/react": "^1.0.7", - "igniteui-webcomponents": "~7.2.1", + "igniteui-webcomponents": "~7.4.1", "lit": "^3.3.0" }, "peerDependencies": { - "igniteui-grid-lite": "~0.8.0" + "igniteui-grid-lite": "~0.11.0" }, "peerDependenciesMeta": { "igniteui-grid-lite": { @@ -9948,13 +9948,12 @@ "license": "Apache-2.0" }, "node_modules/igniteui-webcomponents": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-7.2.1.tgz", - "integrity": "sha512-EBd5xWdap0A1bH298zlPQZM0vkjam2F8rgVZZ4t/yjzmOla1ipbRI9yM69m5RNP+6I3ay+9MWR6gcCR2D5NIhQ==", + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-7.4.1.tgz", + "integrity": "sha512-4VxbkDO4QpEmhy7ga609RRDpnuX1N4SU7CveavzXQ/xVYdxZb7olcPcqRlcKvKn9abAYR9wsDIhB0MUT7AwUow==", "license": "MIT", "dependencies": { - "@floating-ui/dom": "^1.7.0", - "@lit-labs/virtualizer": "^2.1.0", + "@floating-ui/dom": "^1.8.0", "@lit/context": "^1.1.0", "igniteui-i18n-core": "^1.0.5", "lit": "^3.3.0" @@ -9963,11 +9962,11 @@ "node": ">=22" }, "peerDependencies": { - "dompurify": "^3.3.0", + "dompurify": "^3.4.0", "igniteui-i18n-resources": "^1.0.5", - "marked": "^17.0.0", + "marked": "^18.0.0", "marked-shiki": "^1.2.0", - "shiki": "^3.20.0" + "shiki": "^4.3.0" }, "peerDependenciesMeta": { "dompurify": { diff --git a/browser/package.json b/browser/package.json index 3e837e82e4..d0742db8fb 100644 --- a/browser/package.json +++ b/browser/package.json @@ -26,7 +26,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-grid-lite": "~0.8.0", "igniteui-i18n-resources": "^1.0.5", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-dashboards": "19.6.0", @@ -42,7 +42,7 @@ "igniteui-react-spreadsheet": "19.6.0", "igniteui-react-spreadsheet-chart-adapter": "19.6.0", "igniteui-theming": "^25.0.1", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "marked": "^17.0.0", "marked-shiki": "^1.2.1", diff --git a/samples/layouts/breadcrumbs/custom-separator/.devcontainer/devcontainer.json b/samples/layouts/breadcrumbs/custom-separator/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/breadcrumbs/custom-separator/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/custom-separator/.eslintrc.js b/samples/layouts/breadcrumbs/custom-separator/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/breadcrumbs/custom-separator/.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/layouts/breadcrumbs/custom-separator/README.md b/samples/layouts/breadcrumbs/custom-separator/README.md new file mode 100644 index 0000000000..67047ac32d --- /dev/null +++ b/samples/layouts/breadcrumbs/custom-separator/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Custom Separator feature using [Breadcrumbs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/breadcrumbs/custom-separator +``` + +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/layouts/breadcrumbs/custom-separator/index.html b/samples/layouts/breadcrumbs/custom-separator/index.html new file mode 100644 index 0000000000..d5fc876e2c --- /dev/null +++ b/samples/layouts/breadcrumbs/custom-separator/index.html @@ -0,0 +1,11 @@ + + + + Breadcrumbs Custom Separator + + + +
+ + + diff --git a/samples/layouts/breadcrumbs/custom-separator/package.json b/samples/layouts/breadcrumbs/custom-separator/package.json new file mode 100644 index 0000000000..f041473b3c --- /dev/null +++ b/samples/layouts/breadcrumbs/custom-separator/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-breadcrumbs-custom-separator", + "description": "This project provides example of Breadcrumbs Custom Separator using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.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", + "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" + ] +} diff --git a/samples/layouts/breadcrumbs/custom-separator/sandbox.config.json b/samples/layouts/breadcrumbs/custom-separator/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/breadcrumbs/custom-separator/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/custom-separator/src/index.css b/samples/layouts/breadcrumbs/custom-separator/src/index.css new file mode 100644 index 0000000000..bd1fd3b154 --- /dev/null +++ b/samples/layouts/breadcrumbs/custom-separator/src/index.css @@ -0,0 +1,7 @@ +.sample { + display: flex; + justify-content: center; + align-items: center; + overflow: auto; + font-family: "Aktiv Grotesk", sans-serif; +} diff --git a/samples/layouts/breadcrumbs/custom-separator/src/index.tsx b/samples/layouts/breadcrumbs/custom-separator/src/index.tsx new file mode 100644 index 0000000000..a264af1ab2 --- /dev/null +++ b/samples/layouts/breadcrumbs/custom-separator/src/index.tsx @@ -0,0 +1,31 @@ +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrBreadcrumbs, IgrBreadcrumb, registerIconFromText } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; + +const slashIcon = + ''; + +export default function BreadcrumbsCustomSeparator() { + useEffect(() => { + registerIconFromText("slash", slashIcon); + }, []); + + return ( + + ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/breadcrumbs/custom-separator/tsconfig.json b/samples/layouts/breadcrumbs/custom-separator/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/breadcrumbs/custom-separator/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/breadcrumbs/custom-separator/vite.config.js b/samples/layouts/breadcrumbs/custom-separator/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/breadcrumbs/custom-separator/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/overview/.devcontainer/devcontainer.json b/samples/layouts/breadcrumbs/overview/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/breadcrumbs/overview/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/overview/.eslintrc.js b/samples/layouts/breadcrumbs/overview/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/breadcrumbs/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/layouts/breadcrumbs/overview/README.md b/samples/layouts/breadcrumbs/overview/README.md new file mode 100644 index 0000000000..ebf531dc46 --- /dev/null +++ b/samples/layouts/breadcrumbs/overview/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Overview feature using [Breadcrumbs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/breadcrumbs/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/layouts/breadcrumbs/overview/index.html b/samples/layouts/breadcrumbs/overview/index.html new file mode 100644 index 0000000000..c825106cb1 --- /dev/null +++ b/samples/layouts/breadcrumbs/overview/index.html @@ -0,0 +1,11 @@ + + + + Breadcrumbs Overview + + + +
+ + + diff --git a/samples/layouts/breadcrumbs/overview/package.json b/samples/layouts/breadcrumbs/overview/package.json new file mode 100644 index 0000000000..829e83893b --- /dev/null +++ b/samples/layouts/breadcrumbs/overview/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-breadcrumbs-overview", + "description": "This project provides example of Breadcrumbs Overview using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.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", + "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" + ] +} diff --git a/samples/layouts/breadcrumbs/overview/sandbox.config.json b/samples/layouts/breadcrumbs/overview/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/breadcrumbs/overview/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/overview/src/index.css b/samples/layouts/breadcrumbs/overview/src/index.css new file mode 100644 index 0000000000..09cd9a0957 --- /dev/null +++ b/samples/layouts/breadcrumbs/overview/src/index.css @@ -0,0 +1,7 @@ +.sample { + display: flex; + justify-content: center; + align-items: center; + font-family: var(--ig-font-family); + overflow: auto; +} diff --git a/samples/layouts/breadcrumbs/overview/src/index.tsx b/samples/layouts/breadcrumbs/overview/src/index.tsx new file mode 100644 index 0000000000..87ce1370c7 --- /dev/null +++ b/samples/layouts/breadcrumbs/overview/src/index.tsx @@ -0,0 +1,50 @@ +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrBreadcrumbs, IgrBreadcrumb, IgrIcon, registerIconFromText } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; + +const homeIcon = + ''; +const notificationsIcon = + ''; + +export default function BreadcrumbsOverview() { + useEffect(() => { + registerIconFromText("home", homeIcon); + registerIconFromText("notifications", notificationsIcon); + }, []); + + return ( + + ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/breadcrumbs/overview/tsconfig.json b/samples/layouts/breadcrumbs/overview/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/breadcrumbs/overview/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/breadcrumbs/overview/vite.config.js b/samples/layouts/breadcrumbs/overview/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/breadcrumbs/overview/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/prefix-suffix/.devcontainer/devcontainer.json b/samples/layouts/breadcrumbs/prefix-suffix/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/breadcrumbs/prefix-suffix/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/prefix-suffix/.eslintrc.js b/samples/layouts/breadcrumbs/prefix-suffix/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/breadcrumbs/prefix-suffix/.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/layouts/breadcrumbs/prefix-suffix/README.md b/samples/layouts/breadcrumbs/prefix-suffix/README.md new file mode 100644 index 0000000000..80b866d8ea --- /dev/null +++ b/samples/layouts/breadcrumbs/prefix-suffix/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Prefix Suffix feature using [Breadcrumbs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/breadcrumbs/prefix-suffix +``` + +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/layouts/breadcrumbs/prefix-suffix/index.html b/samples/layouts/breadcrumbs/prefix-suffix/index.html new file mode 100644 index 0000000000..d9ce565ad5 --- /dev/null +++ b/samples/layouts/breadcrumbs/prefix-suffix/index.html @@ -0,0 +1,11 @@ + + + + Breadcrumbs Prefix Suffix + + + +
+ + + diff --git a/samples/layouts/breadcrumbs/prefix-suffix/package.json b/samples/layouts/breadcrumbs/prefix-suffix/package.json new file mode 100644 index 0000000000..9e616a9753 --- /dev/null +++ b/samples/layouts/breadcrumbs/prefix-suffix/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-breadcrumbs-prefix-suffix", + "description": "This project provides example of Breadcrumbs Prefix and Suffix using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.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", + "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" + ] +} diff --git a/samples/layouts/breadcrumbs/prefix-suffix/sandbox.config.json b/samples/layouts/breadcrumbs/prefix-suffix/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/breadcrumbs/prefix-suffix/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/prefix-suffix/src/index.css b/samples/layouts/breadcrumbs/prefix-suffix/src/index.css new file mode 100644 index 0000000000..448da1d62e --- /dev/null +++ b/samples/layouts/breadcrumbs/prefix-suffix/src/index.css @@ -0,0 +1,11 @@ +.sample { + display: flex; + justify-content: center; + align-items: center; + overflow: auto; + font-family: "Aktiv Grotesk", sans-serif; +} + +igc-badge::part(base) { + color: var(--ig-gray-50); +} diff --git a/samples/layouts/breadcrumbs/prefix-suffix/src/index.tsx b/samples/layouts/breadcrumbs/prefix-suffix/src/index.tsx new file mode 100644 index 0000000000..e55745ba38 --- /dev/null +++ b/samples/layouts/breadcrumbs/prefix-suffix/src/index.tsx @@ -0,0 +1,41 @@ +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrBreadcrumbs, IgrBreadcrumb, IgrIcon, IgrBadge, registerIconFromText } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; + +const homeIcon = + ''; + +export default function BreadcrumbsPrefixSuffix() { + useEffect(() => { + registerIconFromText("home", homeIcon); + }, []); + + return ( + + ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/breadcrumbs/prefix-suffix/tsconfig.json b/samples/layouts/breadcrumbs/prefix-suffix/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/breadcrumbs/prefix-suffix/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/breadcrumbs/prefix-suffix/vite.config.js b/samples/layouts/breadcrumbs/prefix-suffix/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/breadcrumbs/prefix-suffix/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/sizes/.devcontainer/devcontainer.json b/samples/layouts/breadcrumbs/sizes/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/breadcrumbs/sizes/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/sizes/.eslintrc.js b/samples/layouts/breadcrumbs/sizes/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/breadcrumbs/sizes/.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/layouts/breadcrumbs/sizes/README.md b/samples/layouts/breadcrumbs/sizes/README.md new file mode 100644 index 0000000000..d23317e01e --- /dev/null +++ b/samples/layouts/breadcrumbs/sizes/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Sizes feature using [Breadcrumbs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/breadcrumbs/sizes +``` + +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/layouts/breadcrumbs/sizes/index.html b/samples/layouts/breadcrumbs/sizes/index.html new file mode 100644 index 0000000000..3a93beb78b --- /dev/null +++ b/samples/layouts/breadcrumbs/sizes/index.html @@ -0,0 +1,11 @@ + + + + Breadcrumbs Sizes + + + +
+ + + diff --git a/samples/layouts/breadcrumbs/sizes/package.json b/samples/layouts/breadcrumbs/sizes/package.json new file mode 100644 index 0000000000..d9cf89e508 --- /dev/null +++ b/samples/layouts/breadcrumbs/sizes/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-breadcrumbs-sizes", + "description": "This project provides example of Breadcrumbs Sizes using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.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", + "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" + ] +} diff --git a/samples/layouts/breadcrumbs/sizes/sandbox.config.json b/samples/layouts/breadcrumbs/sizes/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/breadcrumbs/sizes/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/sizes/src/index.css b/samples/layouts/breadcrumbs/sizes/src/index.css new file mode 100644 index 0000000000..3af7bf694f --- /dev/null +++ b/samples/layouts/breadcrumbs/sizes/src/index.css @@ -0,0 +1,43 @@ +.small { + --ig-size: var(--ig-size-small); +} + +.medium { + --ig-size: var(--ig-size-medium); +} + +.large { + --ig-size: var(--ig-size-large); + + margin-block-start: -0.25rem; +} + +.sample { + display: flex; + justify-content: center; + font-family: "Aktiv Grotesk", sans-serif; +} + +span { + color: #7d8a96; + width: 3.75rem; + margin-inline-end: 2rem; + font-size: 0.875rem; +} + +nav { + display: flex; + flex-direction: column; + gap: 1rem; +} + +@media (width < 290px) { + span { + width: auto; + margin-inline-end: 1rem; + } + + .sample { + overflow: auto; + } +} diff --git a/samples/layouts/breadcrumbs/sizes/src/index.tsx b/samples/layouts/breadcrumbs/sizes/src/index.tsx new file mode 100644 index 0000000000..d2828664f8 --- /dev/null +++ b/samples/layouts/breadcrumbs/sizes/src/index.tsx @@ -0,0 +1,61 @@ +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrBreadcrumbs, IgrBreadcrumb, IgrIcon, registerIconFromText } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; + +const homeIcon = + ''; +const notificationsIcon = + ''; + +export default function BreadcrumbsSizes() { + useEffect(() => { + registerIconFromText("home", homeIcon); + registerIconFromText("notifications", notificationsIcon); + }, []); + + return ( + + ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/breadcrumbs/sizes/tsconfig.json b/samples/layouts/breadcrumbs/sizes/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/breadcrumbs/sizes/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/breadcrumbs/sizes/vite.config.js b/samples/layouts/breadcrumbs/sizes/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/breadcrumbs/sizes/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/states/.devcontainer/devcontainer.json b/samples/layouts/breadcrumbs/states/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/breadcrumbs/states/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/states/.eslintrc.js b/samples/layouts/breadcrumbs/states/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/breadcrumbs/states/.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/layouts/breadcrumbs/states/README.md b/samples/layouts/breadcrumbs/states/README.md new file mode 100644 index 0000000000..3504bc6a18 --- /dev/null +++ b/samples/layouts/breadcrumbs/states/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of States feature using [Breadcrumbs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/breadcrumbs/states +``` + +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/layouts/breadcrumbs/states/index.html b/samples/layouts/breadcrumbs/states/index.html new file mode 100644 index 0000000000..7457682ebb --- /dev/null +++ b/samples/layouts/breadcrumbs/states/index.html @@ -0,0 +1,11 @@ + + + + Breadcrumbs States + + + +
+ + + diff --git a/samples/layouts/breadcrumbs/states/package.json b/samples/layouts/breadcrumbs/states/package.json new file mode 100644 index 0000000000..85e989e03a --- /dev/null +++ b/samples/layouts/breadcrumbs/states/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-breadcrumbs-states", + "description": "This project provides example of Breadcrumbs States using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.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", + "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" + ] +} diff --git a/samples/layouts/breadcrumbs/states/sandbox.config.json b/samples/layouts/breadcrumbs/states/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/breadcrumbs/states/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/states/src/index.css b/samples/layouts/breadcrumbs/states/src/index.css new file mode 100644 index 0000000000..ed038d662f --- /dev/null +++ b/samples/layouts/breadcrumbs/states/src/index.css @@ -0,0 +1,118 @@ +.state-hover { + igc-icon { + color: var(--hover-icon-color); + } + + a { + color: var(--hover-text-color); + } +} + +.state-focused { + igc-icon { + color: var(--focus-icon-color); + } + + a { + color: var(--focus-text-color); + text-decoration: underline var(--focus-underline-color); + } +} + +.state-pressed { + igc-icon { + color: var(--pressed-icon-color); + } + + a { + color: var(--pressed-text-color); + } +} + +.state-focused-hover { + igc-icon { + color: var(--focus-hover-icon-color); + } + + a { + color: var(--focus-hover-text-color); + text-decoration: underline var(--focus-hover-underline-color); + } +} + +.state-focused-pressed { + igc-icon { + color: var(--focus-pressed-icon-color); + } + + a { + color: var(--focus-pressed-text-color); + text-decoration: underline var(--focus-pressed-underline-color); + } +} + +.state-disabled { + igc-icon { + color: var(--disabled-icon-color); + } + + a { + color: var(--disabled-text-color); + } +} + +:host { + overflow: auto; +} + +:root { + overflow: auto; +} + +.sample { + display: flex; + justify-content: center; + max-height: 15rem; + overflow: auto; + font-family: "Aktiv Grotesk", sans-serif; +} + +span { + color: #7d8a96; + font-size: 0.875rem; + margin-block-end: 1rem; +} + +nav { + display: grid; + column-gap: 3rem; + row-gap: 1rem; +} + +igc-breadcrumbs { + flex-direction: column; + height: fit-content; +} + +igc-breadcrumbs:nth-of-type(-n+3) { + grid-row: 1; +} + +igc-breadcrumbs:nth-of-type(n+4) { + grid-row: 2; +} + +@media (width < 510px) { + igc-breadcrumbs:nth-of-type(-n+3), + igc-breadcrumbs:nth-of-type(n+4) { + grid-row: unset; + } + + nav { + row-gap: 3rem; + } + + .sample { + max-height: unset; + } +} diff --git a/samples/layouts/breadcrumbs/states/src/index.tsx b/samples/layouts/breadcrumbs/states/src/index.tsx new file mode 100644 index 0000000000..44a8c9cdc3 --- /dev/null +++ b/samples/layouts/breadcrumbs/states/src/index.tsx @@ -0,0 +1,81 @@ +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrBreadcrumbs, IgrBreadcrumb, IgrIcon, registerIconFromText } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; + +const homeIcon = + ''; + +export default function BreadcrumbsStates() { + useEffect(() => { + registerIconFromText("home", homeIcon); + }, []); + + return ( +
+ +
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/breadcrumbs/states/tsconfig.json b/samples/layouts/breadcrumbs/states/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/breadcrumbs/states/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/breadcrumbs/states/vite.config.js b/samples/layouts/breadcrumbs/states/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/breadcrumbs/states/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/styling/.devcontainer/devcontainer.json b/samples/layouts/breadcrumbs/styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/breadcrumbs/styling/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/styling/.eslintrc.js b/samples/layouts/breadcrumbs/styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/breadcrumbs/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/layouts/breadcrumbs/styling/README.md b/samples/layouts/breadcrumbs/styling/README.md new file mode 100644 index 0000000000..8d92a91f7e --- /dev/null +++ b/samples/layouts/breadcrumbs/styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Styling feature using [Breadcrumbs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/breadcrumbs/styling +``` + +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/layouts/breadcrumbs/styling/index.html b/samples/layouts/breadcrumbs/styling/index.html new file mode 100644 index 0000000000..24f25f8446 --- /dev/null +++ b/samples/layouts/breadcrumbs/styling/index.html @@ -0,0 +1,11 @@ + + + + Breadcrumbs Styling + + + +
+ + + diff --git a/samples/layouts/breadcrumbs/styling/package.json b/samples/layouts/breadcrumbs/styling/package.json new file mode 100644 index 0000000000..514299322b --- /dev/null +++ b/samples/layouts/breadcrumbs/styling/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-breadcrumbs-styling", + "description": "This project provides example of Breadcrumbs Styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.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", + "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" + ] +} diff --git a/samples/layouts/breadcrumbs/styling/sandbox.config.json b/samples/layouts/breadcrumbs/styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/breadcrumbs/styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/styling/src/index.css b/samples/layouts/breadcrumbs/styling/src/index.css new file mode 100644 index 0000000000..68d87f523d --- /dev/null +++ b/samples/layouts/breadcrumbs/styling/src/index.css @@ -0,0 +1,19 @@ +igc-breadcrumbs { + --ig-breadcrumb-text-color: var(--ig-gray-900); + --ig-breadcrumb-icon-color: #8b5bb1; + --ig-breadcrumb-hover-text-color: var(--ig-gray-900); + --ig-breadcrumb-hover-icon-color: #8b5bb1; + --ig-breadcrumb-focus-text-color: var(--ig-gray-900); + --ig-breadcrumb-focus-icon-color: #8b5bb1; + --ig-breadcrumb-current-text-color: #8b5bb1; + --ig-breadcrumb-separator-color: #8b5bb1; + --ig-breadcrumb-focus-pressed-text-color: var(--ig-gray-900); + --ig-breadcrumb-focus-pressed-icon-color: #8b5bb1; +} + +.sample { + display: flex; + justify-content: center; + align-items: center; + font-family: "Roboto", sans-serif; +} diff --git a/samples/layouts/breadcrumbs/styling/src/index.tsx b/samples/layouts/breadcrumbs/styling/src/index.tsx new file mode 100644 index 0000000000..0b4e1e5e8f --- /dev/null +++ b/samples/layouts/breadcrumbs/styling/src/index.tsx @@ -0,0 +1,38 @@ +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrBreadcrumbs, IgrBreadcrumb, IgrIcon, registerIconFromText } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +const homeIcon = + ''; +const musicNoteIcon = + ''; + +export default function BreadcrumbsStyling() { + useEffect(() => { + registerIconFromText("home", homeIcon); + registerIconFromText("music_note", musicNoteIcon); + }, []); + + return ( + + ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/breadcrumbs/styling/tsconfig.json b/samples/layouts/breadcrumbs/styling/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/breadcrumbs/styling/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/breadcrumbs/styling/vite.config.js b/samples/layouts/breadcrumbs/styling/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/breadcrumbs/styling/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/tailwind-styling/.devcontainer/devcontainer.json b/samples/layouts/breadcrumbs/tailwind-styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/breadcrumbs/tailwind-styling/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/tailwind-styling/.eslintrc.js b/samples/layouts/breadcrumbs/tailwind-styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/breadcrumbs/tailwind-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/layouts/breadcrumbs/tailwind-styling/README.md b/samples/layouts/breadcrumbs/tailwind-styling/README.md new file mode 100644 index 0000000000..acb519b9df --- /dev/null +++ b/samples/layouts/breadcrumbs/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Breadcrumbs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/breadcrumbs/tailwind-styling +``` + +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/layouts/breadcrumbs/tailwind-styling/index.html b/samples/layouts/breadcrumbs/tailwind-styling/index.html new file mode 100644 index 0000000000..86f17fd3f9 --- /dev/null +++ b/samples/layouts/breadcrumbs/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + Breadcrumbs Tailwind Styling + + + +
+ + + diff --git a/samples/layouts/breadcrumbs/tailwind-styling/package.json b/samples/layouts/breadcrumbs/tailwind-styling/package.json new file mode 100644 index 0000000000..4154b519c4 --- /dev/null +++ b/samples/layouts/breadcrumbs/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-breadcrumbs-tailwind-styling", + "description": "This project provides example of Breadcrumbs Tailwind Styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.0", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.3.3", + "@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", + "tailwindcss": "^4.3.3", + "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" + ] +} diff --git a/samples/layouts/breadcrumbs/tailwind-styling/sandbox.config.json b/samples/layouts/breadcrumbs/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/breadcrumbs/tailwind-styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/tailwind-styling/src/index.css b/samples/layouts/breadcrumbs/tailwind-styling/src/index.css new file mode 100644 index 0000000000..794a43db6e --- /dev/null +++ b/samples/layouts/breadcrumbs/tailwind-styling/src/index.css @@ -0,0 +1,10 @@ +@import "tailwindcss/theme.css"; +@import "tailwindcss/utilities.css"; + +.sample { + display: flex; + justify-content: center; + align-items: center; + overflow: auto; + font-family: "Aktiv Grotesk", sans-serif; +} diff --git a/samples/layouts/breadcrumbs/tailwind-styling/src/index.tsx b/samples/layouts/breadcrumbs/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..b158fd4a43 --- /dev/null +++ b/samples/layouts/breadcrumbs/tailwind-styling/src/index.tsx @@ -0,0 +1,35 @@ +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrBreadcrumbs, IgrBreadcrumb, registerIconFromText } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +const slashIcon = + ''; + +export default function BreadcrumbsTailwindStyling() { + useEffect(() => { + registerIconFromText("slash", slashIcon); + }, []); + + return ( + + ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/breadcrumbs/tailwind-styling/tsconfig.json b/samples/layouts/breadcrumbs/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/breadcrumbs/tailwind-styling/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/breadcrumbs/tailwind-styling/vite.config.js b/samples/layouts/breadcrumbs/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..c1fff0c83c --- /dev/null +++ b/samples/layouts/breadcrumbs/tailwind-styling/vite.config.js @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); diff --git a/samples/layouts/breadcrumbs/wrapping/.devcontainer/devcontainer.json b/samples/layouts/breadcrumbs/wrapping/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/breadcrumbs/wrapping/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/wrapping/.eslintrc.js b/samples/layouts/breadcrumbs/wrapping/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/breadcrumbs/wrapping/.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/layouts/breadcrumbs/wrapping/README.md b/samples/layouts/breadcrumbs/wrapping/README.md new file mode 100644 index 0000000000..d76a83a6e8 --- /dev/null +++ b/samples/layouts/breadcrumbs/wrapping/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Wrapping feature using [Breadcrumbs](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/breadcrumbs/wrapping +``` + +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/layouts/breadcrumbs/wrapping/index.html b/samples/layouts/breadcrumbs/wrapping/index.html new file mode 100644 index 0000000000..55fca94eaa --- /dev/null +++ b/samples/layouts/breadcrumbs/wrapping/index.html @@ -0,0 +1,11 @@ + + + + Breadcrumbs Wrapping + + + +
+ + + diff --git a/samples/layouts/breadcrumbs/wrapping/package.json b/samples/layouts/breadcrumbs/wrapping/package.json new file mode 100644 index 0000000000..d64a76ed6b --- /dev/null +++ b/samples/layouts/breadcrumbs/wrapping/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-breadcrumbs-wrapping", + "description": "This project provides example of Breadcrumbs Wrapping using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.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", + "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" + ] +} diff --git a/samples/layouts/breadcrumbs/wrapping/sandbox.config.json b/samples/layouts/breadcrumbs/wrapping/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/breadcrumbs/wrapping/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/breadcrumbs/wrapping/src/index.css b/samples/layouts/breadcrumbs/wrapping/src/index.css new file mode 100644 index 0000000000..3d31f93ca8 --- /dev/null +++ b/samples/layouts/breadcrumbs/wrapping/src/index.css @@ -0,0 +1,9 @@ +.sample { + display: flex; + justify-content: center; + align-items: center; +} + +igc-breadcrumbs { + max-width: 16rem; +} diff --git a/samples/layouts/breadcrumbs/wrapping/src/index.tsx b/samples/layouts/breadcrumbs/wrapping/src/index.tsx new file mode 100644 index 0000000000..d348148f89 --- /dev/null +++ b/samples/layouts/breadcrumbs/wrapping/src/index.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrBreadcrumbs, IgrBreadcrumb } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; + +export default function BreadcrumbsWrapping() { + return ( + + ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/breadcrumbs/wrapping/tsconfig.json b/samples/layouts/breadcrumbs/wrapping/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/breadcrumbs/wrapping/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/breadcrumbs/wrapping/vite.config.js b/samples/layouts/breadcrumbs/wrapping/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/breadcrumbs/wrapping/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file From 0dbbe631c16aa1526a2e2344e05e397300bd04cb Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Wed, 30 Sep 2026 14:11:11 +0300 Subject: [PATCH 09/14] feat(color-picker, qrcode, breadcrumbs): add samples --- .../alpha/.devcontainer/devcontainer.json | 4 + .../inputs/color-picker/alpha/.eslintrc.js | 75 +++++++ samples/inputs/color-picker/alpha/README.md | 56 ++++++ samples/inputs/color-picker/alpha/index.html | 11 + .../inputs/color-picker/alpha/package.json | 37 ++++ .../color-picker/alpha/sandbox.config.json | 5 + .../inputs/color-picker/alpha/src/index.css | 10 + .../inputs/color-picker/alpha/src/index.tsx | 27 +++ .../inputs/color-picker/alpha/tsconfig.json | 29 +++ .../inputs/color-picker/alpha/vite.config.js | 8 + .../format/.devcontainer/devcontainer.json | 4 + .../inputs/color-picker/format/.eslintrc.js | 75 +++++++ samples/inputs/color-picker/format/README.md | 56 ++++++ samples/inputs/color-picker/format/index.html | 11 + .../inputs/color-picker/format/package.json | 37 ++++ .../color-picker/format/sandbox.config.json | 5 + .../inputs/color-picker/format/src/index.css | 10 + .../inputs/color-picker/format/src/index.tsx | 22 ++ .../inputs/color-picker/format/tsconfig.json | 29 +++ .../inputs/color-picker/format/vite.config.js | 8 + .../.devcontainer/devcontainer.json | 4 + .../color-picker/input-sizes/.eslintrc.js | 75 +++++++ .../inputs/color-picker/input-sizes/README.md | 56 ++++++ .../color-picker/input-sizes/index.html | 11 + .../color-picker/input-sizes/package.json | 37 ++++ .../input-sizes/sandbox.config.json | 5 + .../color-picker/input-sizes/src/index.css | 43 ++++ .../color-picker/input-sizes/src/index.tsx | 33 +++ .../color-picker/input-sizes/tsconfig.json | 29 +++ .../color-picker/input-sizes/vite.config.js | 8 + .../input/.devcontainer/devcontainer.json | 4 + .../inputs/color-picker/input/.eslintrc.js | 75 +++++++ samples/inputs/color-picker/input/README.md | 56 ++++++ samples/inputs/color-picker/input/index.html | 11 + .../inputs/color-picker/input/package.json | 37 ++++ .../color-picker/input/sandbox.config.json | 5 + .../inputs/color-picker/input/src/index.css | 10 + .../inputs/color-picker/input/src/index.tsx | 22 ++ .../inputs/color-picker/input/tsconfig.json | 29 +++ .../inputs/color-picker/input/vite.config.js | 8 + .../overview/.devcontainer/devcontainer.json | 4 + .../inputs/color-picker/overview/.eslintrc.js | 75 +++++++ .../inputs/color-picker/overview/README.md | 56 ++++++ .../inputs/color-picker/overview/index.html | 11 + .../inputs/color-picker/overview/package.json | 37 ++++ .../color-picker/overview/sandbox.config.json | 5 + .../color-picker/overview/src/index.css | 79 ++++++++ .../color-picker/overview/src/index.tsx | 76 +++++++ .../color-picker/overview/tsconfig.json | 29 +++ .../color-picker/overview/vite.config.js | 8 + .../sizes/.devcontainer/devcontainer.json | 4 + .../inputs/color-picker/sizes/.eslintrc.js | 75 +++++++ samples/inputs/color-picker/sizes/README.md | 56 ++++++ samples/inputs/color-picker/sizes/index.html | 11 + .../inputs/color-picker/sizes/package.json | 37 ++++ .../color-picker/sizes/sandbox.config.json | 5 + .../inputs/color-picker/sizes/src/index.css | 43 ++++ .../inputs/color-picker/sizes/src/index.tsx | 33 +++ .../inputs/color-picker/sizes/tsconfig.json | 29 +++ .../inputs/color-picker/sizes/vite.config.js | 8 + .../states/.devcontainer/devcontainer.json | 4 + .../inputs/color-picker/states/.eslintrc.js | 75 +++++++ samples/inputs/color-picker/states/README.md | 56 ++++++ samples/inputs/color-picker/states/index.html | 11 + .../inputs/color-picker/states/package.json | 37 ++++ .../color-picker/states/sandbox.config.json | 5 + .../inputs/color-picker/states/src/index.css | 31 +++ .../inputs/color-picker/states/src/index.tsx | 40 ++++ .../inputs/color-picker/states/tsconfig.json | 29 +++ .../inputs/color-picker/states/vite.config.js | 8 + .../styling/.devcontainer/devcontainer.json | 4 + .../inputs/color-picker/styling/.eslintrc.js | 75 +++++++ samples/inputs/color-picker/styling/README.md | 56 ++++++ .../inputs/color-picker/styling/index.html | 11 + .../inputs/color-picker/styling/package.json | 37 ++++ .../color-picker/styling/sandbox.config.json | 5 + .../inputs/color-picker/styling/src/index.css | 21 ++ .../inputs/color-picker/styling/src/index.tsx | 98 +++++++++ .../color-picker/styling/src/layout.css | 114 +++++++++++ .../inputs/color-picker/styling/tsconfig.json | 29 +++ .../color-picker/styling/vite.config.js | 8 + .../swatches/.devcontainer/devcontainer.json | 4 + .../inputs/color-picker/swatches/.eslintrc.js | 75 +++++++ .../inputs/color-picker/swatches/README.md | 56 ++++++ .../inputs/color-picker/swatches/index.html | 11 + .../inputs/color-picker/swatches/package.json | 37 ++++ .../color-picker/swatches/sandbox.config.json | 5 + .../color-picker/swatches/src/index.css | 21 ++ .../color-picker/swatches/src/index.tsx | 71 +++++++ .../color-picker/swatches/tsconfig.json | 29 +++ .../color-picker/swatches/vite.config.js | 8 + .../.devcontainer/devcontainer.json | 4 + .../tailwind-styling/.eslintrc.js | 75 +++++++ .../color-picker/tailwind-styling/README.md | 56 ++++++ .../color-picker/tailwind-styling/index.html | 11 + .../tailwind-styling/package.json | 39 ++++ .../tailwind-styling/sandbox.config.json | 5 + .../tailwind-styling/src/index.css | 189 ++++++++++++++++++ .../tailwind-styling/src/index.tsx | 158 +++++++++++++++ .../tailwind-styling/tsconfig.json | 29 +++ .../tailwind-styling/vite.config.js | 9 + .../value/.devcontainer/devcontainer.json | 4 + .../inputs/color-picker/value/.eslintrc.js | 75 +++++++ samples/inputs/color-picker/value/README.md | 56 ++++++ samples/inputs/color-picker/value/index.html | 11 + .../inputs/color-picker/value/package.json | 37 ++++ .../color-picker/value/sandbox.config.json | 5 + .../inputs/color-picker/value/src/index.css | 10 + .../inputs/color-picker/value/src/index.tsx | 22 ++ .../inputs/color-picker/value/tsconfig.json | 29 +++ .../inputs/color-picker/value/vite.config.js | 8 + .../.devcontainer/devcontainer.json | 4 + .../inputs/qr-code/corner-shapes/.eslintrc.js | 75 +++++++ .../inputs/qr-code/corner-shapes/README.md | 56 ++++++ .../inputs/qr-code/corner-shapes/index.html | 11 + .../inputs/qr-code/corner-shapes/package.json | 37 ++++ .../qr-code/corner-shapes/sandbox.config.json | 5 + .../qr-code/corner-shapes/src/index.css | 29 +++ .../qr-code/corner-shapes/src/index.tsx | 33 +++ .../qr-code/corner-shapes/tsconfig.json | 29 +++ .../qr-code/corner-shapes/vite.config.js | 8 + .../.devcontainer/devcontainer.json | 4 + .../inputs/qr-code/dot-shapes/.eslintrc.js | 75 +++++++ samples/inputs/qr-code/dot-shapes/README.md | 56 ++++++ samples/inputs/qr-code/dot-shapes/index.html | 11 + .../inputs/qr-code/dot-shapes/package.json | 37 ++++ .../qr-code/dot-shapes/sandbox.config.json | 5 + .../inputs/qr-code/dot-shapes/src/index.css | 29 +++ .../inputs/qr-code/dot-shapes/src/index.tsx | 33 +++ .../inputs/qr-code/dot-shapes/tsconfig.json | 29 +++ .../inputs/qr-code/dot-shapes/vite.config.js | 8 + .../.devcontainer/devcontainer.json | 4 + .../qr-code/error-correction/.eslintrc.js | 75 +++++++ .../inputs/qr-code/error-correction/README.md | 56 ++++++ .../qr-code/error-correction/index.html | 11 + .../qr-code/error-correction/package.json | 37 ++++ .../error-correction/sandbox.config.json | 5 + .../qr-code/error-correction/src/index.css | 29 +++ .../qr-code/error-correction/src/index.tsx | 33 +++ .../qr-code/error-correction/tsconfig.json | 29 +++ .../qr-code/error-correction/vite.config.js | 8 + .../logo/.devcontainer/devcontainer.json | 4 + samples/inputs/qr-code/logo/.eslintrc.js | 75 +++++++ samples/inputs/qr-code/logo/README.md | 56 ++++++ samples/inputs/qr-code/logo/index.html | 11 + samples/inputs/qr-code/logo/package.json | 37 ++++ .../inputs/qr-code/logo/sandbox.config.json | 5 + samples/inputs/qr-code/logo/src/index.css | 5 + samples/inputs/qr-code/logo/src/index.tsx | 22 ++ samples/inputs/qr-code/logo/tsconfig.json | 29 +++ samples/inputs/qr-code/logo/vite.config.js | 8 + .../overview/.devcontainer/devcontainer.json | 4 + samples/inputs/qr-code/overview/.eslintrc.js | 75 +++++++ samples/inputs/qr-code/overview/README.md | 56 ++++++ samples/inputs/qr-code/overview/index.html | 11 + samples/inputs/qr-code/overview/package.json | 37 ++++ .../qr-code/overview/sandbox.config.json | 5 + samples/inputs/qr-code/overview/src/index.css | 22 ++ samples/inputs/qr-code/overview/src/index.tsx | 104 ++++++++++ samples/inputs/qr-code/overview/tsconfig.json | 29 +++ .../inputs/qr-code/overview/vite.config.js | 8 + .../size/.devcontainer/devcontainer.json | 4 + samples/inputs/qr-code/size/.eslintrc.js | 75 +++++++ samples/inputs/qr-code/size/README.md | 56 ++++++ samples/inputs/qr-code/size/index.html | 11 + samples/inputs/qr-code/size/package.json | 37 ++++ .../inputs/qr-code/size/sandbox.config.json | 5 + samples/inputs/qr-code/size/src/index.css | 29 +++ samples/inputs/qr-code/size/src/index.tsx | 33 +++ samples/inputs/qr-code/size/tsconfig.json | 29 +++ samples/inputs/qr-code/size/vite.config.js | 8 + .../styling/.devcontainer/devcontainer.json | 4 + samples/inputs/qr-code/styling/.eslintrc.js | 75 +++++++ samples/inputs/qr-code/styling/README.md | 56 ++++++ samples/inputs/qr-code/styling/index.html | 11 + samples/inputs/qr-code/styling/package.json | 37 ++++ .../qr-code/styling/sandbox.config.json | 5 + samples/inputs/qr-code/styling/src/index.css | 36 ++++ samples/inputs/qr-code/styling/src/index.tsx | 47 +++++ samples/inputs/qr-code/styling/tsconfig.json | 29 +++ samples/inputs/qr-code/styling/vite.config.js | 8 + .../.devcontainer/devcontainer.json | 4 + .../qr-code/tailwind-styling/.eslintrc.js | 75 +++++++ .../inputs/qr-code/tailwind-styling/README.md | 56 ++++++ .../qr-code/tailwind-styling/index.html | 11 + .../qr-code/tailwind-styling/package.json | 39 ++++ .../tailwind-styling/sandbox.config.json | 5 + .../qr-code/tailwind-styling/src/index.css | 20 ++ .../qr-code/tailwind-styling/src/index.tsx | 55 +++++ .../qr-code/tailwind-styling/tsconfig.json | 29 +++ .../qr-code/tailwind-styling/vite.config.js | 9 + 191 files changed, 6023 insertions(+) create mode 100644 samples/inputs/color-picker/alpha/.devcontainer/devcontainer.json create mode 100644 samples/inputs/color-picker/alpha/.eslintrc.js create mode 100644 samples/inputs/color-picker/alpha/README.md create mode 100644 samples/inputs/color-picker/alpha/index.html create mode 100644 samples/inputs/color-picker/alpha/package.json create mode 100644 samples/inputs/color-picker/alpha/sandbox.config.json create mode 100644 samples/inputs/color-picker/alpha/src/index.css create mode 100644 samples/inputs/color-picker/alpha/src/index.tsx create mode 100644 samples/inputs/color-picker/alpha/tsconfig.json create mode 100644 samples/inputs/color-picker/alpha/vite.config.js create mode 100644 samples/inputs/color-picker/format/.devcontainer/devcontainer.json create mode 100644 samples/inputs/color-picker/format/.eslintrc.js create mode 100644 samples/inputs/color-picker/format/README.md create mode 100644 samples/inputs/color-picker/format/index.html create mode 100644 samples/inputs/color-picker/format/package.json create mode 100644 samples/inputs/color-picker/format/sandbox.config.json create mode 100644 samples/inputs/color-picker/format/src/index.css create mode 100644 samples/inputs/color-picker/format/src/index.tsx create mode 100644 samples/inputs/color-picker/format/tsconfig.json create mode 100644 samples/inputs/color-picker/format/vite.config.js create mode 100644 samples/inputs/color-picker/input-sizes/.devcontainer/devcontainer.json create mode 100644 samples/inputs/color-picker/input-sizes/.eslintrc.js create mode 100644 samples/inputs/color-picker/input-sizes/README.md create mode 100644 samples/inputs/color-picker/input-sizes/index.html create mode 100644 samples/inputs/color-picker/input-sizes/package.json create mode 100644 samples/inputs/color-picker/input-sizes/sandbox.config.json create mode 100644 samples/inputs/color-picker/input-sizes/src/index.css create mode 100644 samples/inputs/color-picker/input-sizes/src/index.tsx create mode 100644 samples/inputs/color-picker/input-sizes/tsconfig.json create mode 100644 samples/inputs/color-picker/input-sizes/vite.config.js create mode 100644 samples/inputs/color-picker/input/.devcontainer/devcontainer.json create mode 100644 samples/inputs/color-picker/input/.eslintrc.js create mode 100644 samples/inputs/color-picker/input/README.md create mode 100644 samples/inputs/color-picker/input/index.html create mode 100644 samples/inputs/color-picker/input/package.json create mode 100644 samples/inputs/color-picker/input/sandbox.config.json create mode 100644 samples/inputs/color-picker/input/src/index.css create mode 100644 samples/inputs/color-picker/input/src/index.tsx create mode 100644 samples/inputs/color-picker/input/tsconfig.json create mode 100644 samples/inputs/color-picker/input/vite.config.js create mode 100644 samples/inputs/color-picker/overview/.devcontainer/devcontainer.json create mode 100644 samples/inputs/color-picker/overview/.eslintrc.js create mode 100644 samples/inputs/color-picker/overview/README.md create mode 100644 samples/inputs/color-picker/overview/index.html create mode 100644 samples/inputs/color-picker/overview/package.json create mode 100644 samples/inputs/color-picker/overview/sandbox.config.json create mode 100644 samples/inputs/color-picker/overview/src/index.css create mode 100644 samples/inputs/color-picker/overview/src/index.tsx create mode 100644 samples/inputs/color-picker/overview/tsconfig.json create mode 100644 samples/inputs/color-picker/overview/vite.config.js create mode 100644 samples/inputs/color-picker/sizes/.devcontainer/devcontainer.json create mode 100644 samples/inputs/color-picker/sizes/.eslintrc.js create mode 100644 samples/inputs/color-picker/sizes/README.md create mode 100644 samples/inputs/color-picker/sizes/index.html create mode 100644 samples/inputs/color-picker/sizes/package.json create mode 100644 samples/inputs/color-picker/sizes/sandbox.config.json create mode 100644 samples/inputs/color-picker/sizes/src/index.css create mode 100644 samples/inputs/color-picker/sizes/src/index.tsx create mode 100644 samples/inputs/color-picker/sizes/tsconfig.json create mode 100644 samples/inputs/color-picker/sizes/vite.config.js create mode 100644 samples/inputs/color-picker/states/.devcontainer/devcontainer.json create mode 100644 samples/inputs/color-picker/states/.eslintrc.js create mode 100644 samples/inputs/color-picker/states/README.md create mode 100644 samples/inputs/color-picker/states/index.html create mode 100644 samples/inputs/color-picker/states/package.json create mode 100644 samples/inputs/color-picker/states/sandbox.config.json create mode 100644 samples/inputs/color-picker/states/src/index.css create mode 100644 samples/inputs/color-picker/states/src/index.tsx create mode 100644 samples/inputs/color-picker/states/tsconfig.json create mode 100644 samples/inputs/color-picker/states/vite.config.js create mode 100644 samples/inputs/color-picker/styling/.devcontainer/devcontainer.json create mode 100644 samples/inputs/color-picker/styling/.eslintrc.js create mode 100644 samples/inputs/color-picker/styling/README.md create mode 100644 samples/inputs/color-picker/styling/index.html create mode 100644 samples/inputs/color-picker/styling/package.json create mode 100644 samples/inputs/color-picker/styling/sandbox.config.json create mode 100644 samples/inputs/color-picker/styling/src/index.css create mode 100644 samples/inputs/color-picker/styling/src/index.tsx create mode 100644 samples/inputs/color-picker/styling/src/layout.css create mode 100644 samples/inputs/color-picker/styling/tsconfig.json create mode 100644 samples/inputs/color-picker/styling/vite.config.js create mode 100644 samples/inputs/color-picker/swatches/.devcontainer/devcontainer.json create mode 100644 samples/inputs/color-picker/swatches/.eslintrc.js create mode 100644 samples/inputs/color-picker/swatches/README.md create mode 100644 samples/inputs/color-picker/swatches/index.html create mode 100644 samples/inputs/color-picker/swatches/package.json create mode 100644 samples/inputs/color-picker/swatches/sandbox.config.json create mode 100644 samples/inputs/color-picker/swatches/src/index.css create mode 100644 samples/inputs/color-picker/swatches/src/index.tsx create mode 100644 samples/inputs/color-picker/swatches/tsconfig.json create mode 100644 samples/inputs/color-picker/swatches/vite.config.js create mode 100644 samples/inputs/color-picker/tailwind-styling/.devcontainer/devcontainer.json create mode 100644 samples/inputs/color-picker/tailwind-styling/.eslintrc.js create mode 100644 samples/inputs/color-picker/tailwind-styling/README.md create mode 100644 samples/inputs/color-picker/tailwind-styling/index.html create mode 100644 samples/inputs/color-picker/tailwind-styling/package.json create mode 100644 samples/inputs/color-picker/tailwind-styling/sandbox.config.json create mode 100644 samples/inputs/color-picker/tailwind-styling/src/index.css create mode 100644 samples/inputs/color-picker/tailwind-styling/src/index.tsx create mode 100644 samples/inputs/color-picker/tailwind-styling/tsconfig.json create mode 100644 samples/inputs/color-picker/tailwind-styling/vite.config.js create mode 100644 samples/inputs/color-picker/value/.devcontainer/devcontainer.json create mode 100644 samples/inputs/color-picker/value/.eslintrc.js create mode 100644 samples/inputs/color-picker/value/README.md create mode 100644 samples/inputs/color-picker/value/index.html create mode 100644 samples/inputs/color-picker/value/package.json create mode 100644 samples/inputs/color-picker/value/sandbox.config.json create mode 100644 samples/inputs/color-picker/value/src/index.css create mode 100644 samples/inputs/color-picker/value/src/index.tsx create mode 100644 samples/inputs/color-picker/value/tsconfig.json create mode 100644 samples/inputs/color-picker/value/vite.config.js create mode 100644 samples/inputs/qr-code/corner-shapes/.devcontainer/devcontainer.json create mode 100644 samples/inputs/qr-code/corner-shapes/.eslintrc.js create mode 100644 samples/inputs/qr-code/corner-shapes/README.md create mode 100644 samples/inputs/qr-code/corner-shapes/index.html create mode 100644 samples/inputs/qr-code/corner-shapes/package.json create mode 100644 samples/inputs/qr-code/corner-shapes/sandbox.config.json create mode 100644 samples/inputs/qr-code/corner-shapes/src/index.css create mode 100644 samples/inputs/qr-code/corner-shapes/src/index.tsx create mode 100644 samples/inputs/qr-code/corner-shapes/tsconfig.json create mode 100644 samples/inputs/qr-code/corner-shapes/vite.config.js create mode 100644 samples/inputs/qr-code/dot-shapes/.devcontainer/devcontainer.json create mode 100644 samples/inputs/qr-code/dot-shapes/.eslintrc.js create mode 100644 samples/inputs/qr-code/dot-shapes/README.md create mode 100644 samples/inputs/qr-code/dot-shapes/index.html create mode 100644 samples/inputs/qr-code/dot-shapes/package.json create mode 100644 samples/inputs/qr-code/dot-shapes/sandbox.config.json create mode 100644 samples/inputs/qr-code/dot-shapes/src/index.css create mode 100644 samples/inputs/qr-code/dot-shapes/src/index.tsx create mode 100644 samples/inputs/qr-code/dot-shapes/tsconfig.json create mode 100644 samples/inputs/qr-code/dot-shapes/vite.config.js create mode 100644 samples/inputs/qr-code/error-correction/.devcontainer/devcontainer.json create mode 100644 samples/inputs/qr-code/error-correction/.eslintrc.js create mode 100644 samples/inputs/qr-code/error-correction/README.md create mode 100644 samples/inputs/qr-code/error-correction/index.html create mode 100644 samples/inputs/qr-code/error-correction/package.json create mode 100644 samples/inputs/qr-code/error-correction/sandbox.config.json create mode 100644 samples/inputs/qr-code/error-correction/src/index.css create mode 100644 samples/inputs/qr-code/error-correction/src/index.tsx create mode 100644 samples/inputs/qr-code/error-correction/tsconfig.json create mode 100644 samples/inputs/qr-code/error-correction/vite.config.js create mode 100644 samples/inputs/qr-code/logo/.devcontainer/devcontainer.json create mode 100644 samples/inputs/qr-code/logo/.eslintrc.js create mode 100644 samples/inputs/qr-code/logo/README.md create mode 100644 samples/inputs/qr-code/logo/index.html create mode 100644 samples/inputs/qr-code/logo/package.json create mode 100644 samples/inputs/qr-code/logo/sandbox.config.json create mode 100644 samples/inputs/qr-code/logo/src/index.css create mode 100644 samples/inputs/qr-code/logo/src/index.tsx create mode 100644 samples/inputs/qr-code/logo/tsconfig.json create mode 100644 samples/inputs/qr-code/logo/vite.config.js create mode 100644 samples/inputs/qr-code/overview/.devcontainer/devcontainer.json create mode 100644 samples/inputs/qr-code/overview/.eslintrc.js create mode 100644 samples/inputs/qr-code/overview/README.md create mode 100644 samples/inputs/qr-code/overview/index.html create mode 100644 samples/inputs/qr-code/overview/package.json create mode 100644 samples/inputs/qr-code/overview/sandbox.config.json create mode 100644 samples/inputs/qr-code/overview/src/index.css create mode 100644 samples/inputs/qr-code/overview/src/index.tsx create mode 100644 samples/inputs/qr-code/overview/tsconfig.json create mode 100644 samples/inputs/qr-code/overview/vite.config.js create mode 100644 samples/inputs/qr-code/size/.devcontainer/devcontainer.json create mode 100644 samples/inputs/qr-code/size/.eslintrc.js create mode 100644 samples/inputs/qr-code/size/README.md create mode 100644 samples/inputs/qr-code/size/index.html create mode 100644 samples/inputs/qr-code/size/package.json create mode 100644 samples/inputs/qr-code/size/sandbox.config.json create mode 100644 samples/inputs/qr-code/size/src/index.css create mode 100644 samples/inputs/qr-code/size/src/index.tsx create mode 100644 samples/inputs/qr-code/size/tsconfig.json create mode 100644 samples/inputs/qr-code/size/vite.config.js create mode 100644 samples/inputs/qr-code/styling/.devcontainer/devcontainer.json create mode 100644 samples/inputs/qr-code/styling/.eslintrc.js create mode 100644 samples/inputs/qr-code/styling/README.md create mode 100644 samples/inputs/qr-code/styling/index.html create mode 100644 samples/inputs/qr-code/styling/package.json create mode 100644 samples/inputs/qr-code/styling/sandbox.config.json create mode 100644 samples/inputs/qr-code/styling/src/index.css create mode 100644 samples/inputs/qr-code/styling/src/index.tsx create mode 100644 samples/inputs/qr-code/styling/tsconfig.json create mode 100644 samples/inputs/qr-code/styling/vite.config.js create mode 100644 samples/inputs/qr-code/tailwind-styling/.devcontainer/devcontainer.json create mode 100644 samples/inputs/qr-code/tailwind-styling/.eslintrc.js create mode 100644 samples/inputs/qr-code/tailwind-styling/README.md create mode 100644 samples/inputs/qr-code/tailwind-styling/index.html create mode 100644 samples/inputs/qr-code/tailwind-styling/package.json create mode 100644 samples/inputs/qr-code/tailwind-styling/sandbox.config.json create mode 100644 samples/inputs/qr-code/tailwind-styling/src/index.css create mode 100644 samples/inputs/qr-code/tailwind-styling/src/index.tsx create mode 100644 samples/inputs/qr-code/tailwind-styling/tsconfig.json create mode 100644 samples/inputs/qr-code/tailwind-styling/vite.config.js diff --git a/samples/inputs/color-picker/alpha/.devcontainer/devcontainer.json b/samples/inputs/color-picker/alpha/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/color-picker/alpha/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/color-picker/alpha/.eslintrc.js b/samples/inputs/color-picker/alpha/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/color-picker/alpha/.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/color-picker/alpha/README.md b/samples/inputs/color-picker/alpha/README.md new file mode 100644 index 0000000000..07ac23b276 --- /dev/null +++ b/samples/inputs/color-picker/alpha/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Alpha feature using [Color Picker](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/color-picker/alpha +``` + +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/color-picker/alpha/index.html b/samples/inputs/color-picker/alpha/index.html new file mode 100644 index 0000000000..76094cd35d --- /dev/null +++ b/samples/inputs/color-picker/alpha/index.html @@ -0,0 +1,11 @@ + + + + Color Picker Alpha + + + +
+ + + diff --git a/samples/inputs/color-picker/alpha/package.json b/samples/inputs/color-picker/alpha/package.json new file mode 100644 index 0000000000..a9b50717c2 --- /dev/null +++ b/samples/inputs/color-picker/alpha/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-color-picker-alpha", + "description": "This project provides example of Color Picker Alpha using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.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", + "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"] +} diff --git a/samples/inputs/color-picker/alpha/sandbox.config.json b/samples/inputs/color-picker/alpha/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/color-picker/alpha/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/color-picker/alpha/src/index.css b/samples/inputs/color-picker/alpha/src/index.css new file mode 100644 index 0000000000..1598afe899 --- /dev/null +++ b/samples/inputs/color-picker/alpha/src/index.css @@ -0,0 +1,10 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-color-picker::part(picker) { + margin-top: 0.5rem; +} + +.sample { + align-items: center; +} diff --git a/samples/inputs/color-picker/alpha/src/index.tsx b/samples/inputs/color-picker/alpha/src/index.tsx new file mode 100644 index 0000000000..aaec85698c --- /dev/null +++ b/samples/inputs/color-picker/alpha/src/index.tsx @@ -0,0 +1,27 @@ +import React, { useEffect, useRef } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrColorPicker } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function ColorPickerAlpha() { + const pickerRef = useRef(null); + + useEffect(() => { + pickerRef.current?.toggle(); + }, []); + + return ( +
+ +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/color-picker/alpha/tsconfig.json b/samples/inputs/color-picker/alpha/tsconfig.json new file mode 100644 index 0000000000..9bf0334b71 --- /dev/null +++ b/samples/inputs/color-picker/alpha/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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/color-picker/alpha/vite.config.js b/samples/inputs/color-picker/alpha/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/color-picker/alpha/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/color-picker/format/.devcontainer/devcontainer.json b/samples/inputs/color-picker/format/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/color-picker/format/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/color-picker/format/.eslintrc.js b/samples/inputs/color-picker/format/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/color-picker/format/.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/color-picker/format/README.md b/samples/inputs/color-picker/format/README.md new file mode 100644 index 0000000000..393e851b84 --- /dev/null +++ b/samples/inputs/color-picker/format/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Format feature using [Color Picker](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/color-picker/format +``` + +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/color-picker/format/index.html b/samples/inputs/color-picker/format/index.html new file mode 100644 index 0000000000..d1b7c94d5c --- /dev/null +++ b/samples/inputs/color-picker/format/index.html @@ -0,0 +1,11 @@ + + + + Color Picker Format + + + +
+ + + diff --git a/samples/inputs/color-picker/format/package.json b/samples/inputs/color-picker/format/package.json new file mode 100644 index 0000000000..dd4bcd09c7 --- /dev/null +++ b/samples/inputs/color-picker/format/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-color-picker-format", + "description": "This project provides example of Color Picker Format using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.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", + "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"] +} diff --git a/samples/inputs/color-picker/format/sandbox.config.json b/samples/inputs/color-picker/format/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/color-picker/format/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/color-picker/format/src/index.css b/samples/inputs/color-picker/format/src/index.css new file mode 100644 index 0000000000..1598afe899 --- /dev/null +++ b/samples/inputs/color-picker/format/src/index.css @@ -0,0 +1,10 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-color-picker::part(picker) { + margin-top: 0.5rem; +} + +.sample { + align-items: center; +} diff --git a/samples/inputs/color-picker/format/src/index.tsx b/samples/inputs/color-picker/format/src/index.tsx new file mode 100644 index 0000000000..71a048f33f --- /dev/null +++ b/samples/inputs/color-picker/format/src/index.tsx @@ -0,0 +1,22 @@ +import React, { useEffect, useRef } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrColorPicker } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function ColorPickerFormat() { + const pickerRef = useRef(null); + + useEffect(() => { + pickerRef.current?.toggle(); + }, []); + + return ( +
+ +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/color-picker/format/tsconfig.json b/samples/inputs/color-picker/format/tsconfig.json new file mode 100644 index 0000000000..9bf0334b71 --- /dev/null +++ b/samples/inputs/color-picker/format/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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/color-picker/format/vite.config.js b/samples/inputs/color-picker/format/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/color-picker/format/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/color-picker/input-sizes/.devcontainer/devcontainer.json b/samples/inputs/color-picker/input-sizes/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/color-picker/input-sizes/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/color-picker/input-sizes/.eslintrc.js b/samples/inputs/color-picker/input-sizes/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/color-picker/input-sizes/.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/color-picker/input-sizes/README.md b/samples/inputs/color-picker/input-sizes/README.md new file mode 100644 index 0000000000..48920bf37c --- /dev/null +++ b/samples/inputs/color-picker/input-sizes/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Input Sizes feature using [Color Picker](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/color-picker/input-sizes +``` + +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/color-picker/input-sizes/index.html b/samples/inputs/color-picker/input-sizes/index.html new file mode 100644 index 0000000000..f5fdae9024 --- /dev/null +++ b/samples/inputs/color-picker/input-sizes/index.html @@ -0,0 +1,11 @@ + + + + Color Picker Input Sizes + + + +
+ + + diff --git a/samples/inputs/color-picker/input-sizes/package.json b/samples/inputs/color-picker/input-sizes/package.json new file mode 100644 index 0000000000..391e35c529 --- /dev/null +++ b/samples/inputs/color-picker/input-sizes/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-color-picker-input-sizes", + "description": "This project provides example of Color Picker Input Sizes using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.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", + "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"] +} diff --git a/samples/inputs/color-picker/input-sizes/sandbox.config.json b/samples/inputs/color-picker/input-sizes/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/color-picker/input-sizes/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/color-picker/input-sizes/src/index.css b/samples/inputs/color-picker/input-sizes/src/index.css new file mode 100644 index 0000000000..4c56cc190e --- /dev/null +++ b/samples/inputs/color-picker/input-sizes/src/index.css @@ -0,0 +1,43 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.smallPicker { + --ig-size: var(--ig-size-small); +} + +.mediumPicker { + --ig-size: var(--ig-size-medium); +} + +.largePicker { + --ig-size: var(--ig-size-large); +} + +.container { + display: flex; + flex-direction: row; + justify-content: center; + gap: 2rem; + font-family: "Aktiv Grotesk", sans-serif; +} + +span { + display: block; + text-align: center; + margin-block-end: 1rem; + color: var(--ig-gray-600); + font-size: 0.875rem; +} + +igc-color-picker::part(picker) { + margin-top: 0.5rem; +} + +@media (width < 450px) { + .container { + flex-direction: column; + justify-content: normal; + gap: 5.5rem; + align-items: center; + } +} diff --git a/samples/inputs/color-picker/input-sizes/src/index.tsx b/samples/inputs/color-picker/input-sizes/src/index.tsx new file mode 100644 index 0000000000..7692d78ec1 --- /dev/null +++ b/samples/inputs/color-picker/input-sizes/src/index.tsx @@ -0,0 +1,33 @@ +import React, { useEffect, useRef } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrColorPicker } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function ColorPickerInputSizes() { + const smallRef = useRef(null); + + useEffect(() => { + smallRef.current?.toggle(); + }, []); + + return ( +
+
+ Small + +
+
+ Medium + +
+
+ Large + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/color-picker/input-sizes/tsconfig.json b/samples/inputs/color-picker/input-sizes/tsconfig.json new file mode 100644 index 0000000000..9bf0334b71 --- /dev/null +++ b/samples/inputs/color-picker/input-sizes/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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/color-picker/input-sizes/vite.config.js b/samples/inputs/color-picker/input-sizes/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/color-picker/input-sizes/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/color-picker/input/.devcontainer/devcontainer.json b/samples/inputs/color-picker/input/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/color-picker/input/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/color-picker/input/.eslintrc.js b/samples/inputs/color-picker/input/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/color-picker/input/.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/color-picker/input/README.md b/samples/inputs/color-picker/input/README.md new file mode 100644 index 0000000000..b1ea8959d6 --- /dev/null +++ b/samples/inputs/color-picker/input/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Input feature using [Color Picker](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/color-picker/input +``` + +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/color-picker/input/index.html b/samples/inputs/color-picker/input/index.html new file mode 100644 index 0000000000..8dcd828b1b --- /dev/null +++ b/samples/inputs/color-picker/input/index.html @@ -0,0 +1,11 @@ + + + + Color Picker Input + + + +
+ + + diff --git a/samples/inputs/color-picker/input/package.json b/samples/inputs/color-picker/input/package.json new file mode 100644 index 0000000000..978c03adce --- /dev/null +++ b/samples/inputs/color-picker/input/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-color-picker-input", + "description": "This project provides example of Color Picker Input using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.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", + "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"] +} diff --git a/samples/inputs/color-picker/input/sandbox.config.json b/samples/inputs/color-picker/input/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/color-picker/input/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/color-picker/input/src/index.css b/samples/inputs/color-picker/input/src/index.css new file mode 100644 index 0000000000..1598afe899 --- /dev/null +++ b/samples/inputs/color-picker/input/src/index.css @@ -0,0 +1,10 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-color-picker::part(picker) { + margin-top: 0.5rem; +} + +.sample { + align-items: center; +} diff --git a/samples/inputs/color-picker/input/src/index.tsx b/samples/inputs/color-picker/input/src/index.tsx new file mode 100644 index 0000000000..09f473008a --- /dev/null +++ b/samples/inputs/color-picker/input/src/index.tsx @@ -0,0 +1,22 @@ +import React, { useEffect, useRef } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrColorPicker } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function ColorPickerInput() { + const pickerRef = useRef(null); + + useEffect(() => { + pickerRef.current?.toggle(); + }, []); + + return ( +
+ +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/color-picker/input/tsconfig.json b/samples/inputs/color-picker/input/tsconfig.json new file mode 100644 index 0000000000..9bf0334b71 --- /dev/null +++ b/samples/inputs/color-picker/input/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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/color-picker/input/vite.config.js b/samples/inputs/color-picker/input/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/color-picker/input/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/color-picker/overview/.devcontainer/devcontainer.json b/samples/inputs/color-picker/overview/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/color-picker/overview/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/color-picker/overview/.eslintrc.js b/samples/inputs/color-picker/overview/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/color-picker/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/color-picker/overview/README.md b/samples/inputs/color-picker/overview/README.md new file mode 100644 index 0000000000..8154bdbdc8 --- /dev/null +++ b/samples/inputs/color-picker/overview/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Overview feature using [Color Picker](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/color-picker/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/color-picker/overview/index.html b/samples/inputs/color-picker/overview/index.html new file mode 100644 index 0000000000..728f535a40 --- /dev/null +++ b/samples/inputs/color-picker/overview/index.html @@ -0,0 +1,11 @@ + + + + Color Picker Overview + + + +
+ + + diff --git a/samples/inputs/color-picker/overview/package.json b/samples/inputs/color-picker/overview/package.json new file mode 100644 index 0000000000..a2dbac235d --- /dev/null +++ b/samples/inputs/color-picker/overview/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-color-picker-overview", + "description": "This project provides example of Color Picker Overview using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.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", + "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"] +} diff --git a/samples/inputs/color-picker/overview/sandbox.config.json b/samples/inputs/color-picker/overview/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/color-picker/overview/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/color-picker/overview/src/index.css b/samples/inputs/color-picker/overview/src/index.css new file mode 100644 index 0000000000..82b6ebac68 --- /dev/null +++ b/samples/inputs/color-picker/overview/src/index.css @@ -0,0 +1,79 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + align-items: center; +} + +igc-card { + width: 22rem; +} + +.sample igc-card h2 { + margin: 0 0 1rem; + font-size: 1.25rem; + line-height: 1.25rem; + color: var(--ig-gray-900); +} + +igc-card-content { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +igc-select { + width: 100%; +} + +.color-row { + position: relative; +} + +igc-color-picker { + width: 100%; +} + +igc-color-picker::part(color-picker) { + width: 100%; + grid-template-columns: auto; +} + +igc-color-picker::part(picker) { + --picker-elevation: var(--ig-elevation-12); +} + +igc-icon-button { + position: absolute; + right: 0.5rem; + align-self: center; + z-index: 1; +} + +igc-card-actions { + display: flex; + align-items: center; + justify-content: space-between; +} + +.stepper { + display: flex; + gap: 0.375rem; +} + +.stepper .dot { + width: 0.375rem; + height: 0.375rem; + border-radius: 50%; + background: var(--ig-gray-300); +} + +.stepper .dot.active { + background: var(--ig-secondary-500); +} + +@media (width < 420px) { + .container { + width: fit-content; + } +} diff --git a/samples/inputs/color-picker/overview/src/index.tsx b/samples/inputs/color-picker/overview/src/index.tsx new file mode 100644 index 0000000000..0d2b597728 --- /dev/null +++ b/samples/inputs/color-picker/overview/src/index.tsx @@ -0,0 +1,76 @@ +import React, { useEffect, useRef } from "react"; +import ReactDOM from "react-dom/client"; +import { + IgrButton, + IgrCard, + IgrCardActions, + IgrCardContent, + IgrColorPicker, + IgrIconButton, + IgrSelect, + IgrSelectItem, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import "./index.css"; + +const refreshIcon = + ''; + +export default function ColorPickerOverview() { + const pickerRef = useRef(null); + + useEffect(() => { + registerIconFromText("refresh", refreshIcon, "material"); + }, []); + + const resetColor = () => { + if (pickerRef.current) { + pickerRef.current.value = ""; + } + }; + + return ( +
+ + +

Choose your interior color

+ + Matte + Satin + Eggshell + Gloss + + + 1 litre + 3 litres + 5 litres + 10 litres + +
+ + +
+ + + Back +
+ + + +
+ Confirm + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/color-picker/overview/tsconfig.json b/samples/inputs/color-picker/overview/tsconfig.json new file mode 100644 index 0000000000..9bf0334b71 --- /dev/null +++ b/samples/inputs/color-picker/overview/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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/color-picker/overview/vite.config.js b/samples/inputs/color-picker/overview/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/color-picker/overview/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/color-picker/sizes/.devcontainer/devcontainer.json b/samples/inputs/color-picker/sizes/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/color-picker/sizes/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/color-picker/sizes/.eslintrc.js b/samples/inputs/color-picker/sizes/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/color-picker/sizes/.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/color-picker/sizes/README.md b/samples/inputs/color-picker/sizes/README.md new file mode 100644 index 0000000000..d21d7a039e --- /dev/null +++ b/samples/inputs/color-picker/sizes/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Sizes feature using [Color Picker](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/color-picker/sizes +``` + +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/color-picker/sizes/index.html b/samples/inputs/color-picker/sizes/index.html new file mode 100644 index 0000000000..8d4682a4a3 --- /dev/null +++ b/samples/inputs/color-picker/sizes/index.html @@ -0,0 +1,11 @@ + + + + Color Picker Sizes + + + +
+ + + diff --git a/samples/inputs/color-picker/sizes/package.json b/samples/inputs/color-picker/sizes/package.json new file mode 100644 index 0000000000..c180c7ff18 --- /dev/null +++ b/samples/inputs/color-picker/sizes/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-color-picker-sizes", + "description": "This project provides example of Color Picker Sizes using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.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", + "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"] +} diff --git a/samples/inputs/color-picker/sizes/sandbox.config.json b/samples/inputs/color-picker/sizes/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/color-picker/sizes/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/color-picker/sizes/src/index.css b/samples/inputs/color-picker/sizes/src/index.css new file mode 100644 index 0000000000..728e3d3833 --- /dev/null +++ b/samples/inputs/color-picker/sizes/src/index.css @@ -0,0 +1,43 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.smallPicker { + --ig-size: var(--ig-size-small); +} + +.mediumPicker { + --ig-size: var(--ig-size-medium); +} + +.largePicker { + --ig-size: var(--ig-size-large); +} + +.container { + display: flex; + flex-direction: row; + justify-content: center; + gap: 2rem; + font-family: "Aktiv Grotesk", sans-serif; +} + +span { + display: block; + text-align: center; + margin-block-end: 1rem; + color: var(--ig-gray-600); + font-size: 0.875rem; +} + +igc-color-picker::part(picker) { + margin-top: 0.5rem; +} + +@media (width < 450px) { + .container { + flex-direction: column; + justify-content: normal; + gap: 1rem; + align-items: center; + } +} diff --git a/samples/inputs/color-picker/sizes/src/index.tsx b/samples/inputs/color-picker/sizes/src/index.tsx new file mode 100644 index 0000000000..76be2dade8 --- /dev/null +++ b/samples/inputs/color-picker/sizes/src/index.tsx @@ -0,0 +1,33 @@ +import React, { useEffect, useRef } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrColorPicker } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function ColorPickerSizes() { + const smallRef = useRef(null); + + useEffect(() => { + smallRef.current?.toggle(); + }, []); + + return ( +
+
+ Small + +
+
+ Medium + +
+
+ Large + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/color-picker/sizes/tsconfig.json b/samples/inputs/color-picker/sizes/tsconfig.json new file mode 100644 index 0000000000..9bf0334b71 --- /dev/null +++ b/samples/inputs/color-picker/sizes/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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/color-picker/sizes/vite.config.js b/samples/inputs/color-picker/sizes/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/color-picker/sizes/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/color-picker/states/.devcontainer/devcontainer.json b/samples/inputs/color-picker/states/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/color-picker/states/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/color-picker/states/.eslintrc.js b/samples/inputs/color-picker/states/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/color-picker/states/.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/color-picker/states/README.md b/samples/inputs/color-picker/states/README.md new file mode 100644 index 0000000000..4157b581d2 --- /dev/null +++ b/samples/inputs/color-picker/states/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of States feature using [Color Picker](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/color-picker/states +``` + +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/color-picker/states/index.html b/samples/inputs/color-picker/states/index.html new file mode 100644 index 0000000000..b758e0506c --- /dev/null +++ b/samples/inputs/color-picker/states/index.html @@ -0,0 +1,11 @@ + + + + Color Picker States + + + +
+ + + diff --git a/samples/inputs/color-picker/states/package.json b/samples/inputs/color-picker/states/package.json new file mode 100644 index 0000000000..a7c3649ba2 --- /dev/null +++ b/samples/inputs/color-picker/states/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-color-picker-states", + "description": "This project provides example of Color Picker States using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.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", + "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"] +} diff --git a/samples/inputs/color-picker/states/sandbox.config.json b/samples/inputs/color-picker/states/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/color-picker/states/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/color-picker/states/src/index.css b/samples/inputs/color-picker/states/src/index.css new file mode 100644 index 0000000000..13c40b2f9b --- /dev/null +++ b/samples/inputs/color-picker/states/src/index.css @@ -0,0 +1,31 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.container { + display: flex; + flex-direction: row; + justify-content: center; + gap: 2rem; + font-family: "Aktiv Grotesk", sans-serif; +} + +span { + display: block; + text-align: center; + margin-block-end: 1rem; + color: var(--ig-gray-600); + font-size: 0.875rem; +} + +igc-color-picker::part(picker) { + margin-top: 0.5rem; +} + +@media (width < 450px) { + .container { + flex-direction: column; + justify-content: normal; + gap: 20%; + align-items: center; + } +} diff --git a/samples/inputs/color-picker/states/src/index.tsx b/samples/inputs/color-picker/states/src/index.tsx new file mode 100644 index 0000000000..df6f1e6ee6 --- /dev/null +++ b/samples/inputs/color-picker/states/src/index.tsx @@ -0,0 +1,40 @@ +import React, { useEffect, useRef, useState } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrColorPicker } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function ColorPickerStates() { + const defaultRef = useRef(null); + const [invalid, setInvalid] = useState(true); + + useEffect(() => { + defaultRef.current?.toggle(); + }, []); + + return ( +
+
+ Default state + +
+
+ Invalid state + setInvalid(false)} + /> +
+
+ Disabled state + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/color-picker/states/tsconfig.json b/samples/inputs/color-picker/states/tsconfig.json new file mode 100644 index 0000000000..9bf0334b71 --- /dev/null +++ b/samples/inputs/color-picker/states/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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/color-picker/states/vite.config.js b/samples/inputs/color-picker/states/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/color-picker/states/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/color-picker/styling/.devcontainer/devcontainer.json b/samples/inputs/color-picker/styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/color-picker/styling/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/color-picker/styling/.eslintrc.js b/samples/inputs/color-picker/styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/color-picker/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/color-picker/styling/README.md b/samples/inputs/color-picker/styling/README.md new file mode 100644 index 0000000000..517634c0b6 --- /dev/null +++ b/samples/inputs/color-picker/styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Styling feature using [Color Picker](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/color-picker/styling +``` + +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/color-picker/styling/index.html b/samples/inputs/color-picker/styling/index.html new file mode 100644 index 0000000000..71e31a1432 --- /dev/null +++ b/samples/inputs/color-picker/styling/index.html @@ -0,0 +1,11 @@ + + + + Color Picker Styling + + + +
+ + + diff --git a/samples/inputs/color-picker/styling/package.json b/samples/inputs/color-picker/styling/package.json new file mode 100644 index 0000000000..46d82361a9 --- /dev/null +++ b/samples/inputs/color-picker/styling/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-color-picker-styling", + "description": "This project provides example of Color Picker Styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.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", + "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"] +} diff --git a/samples/inputs/color-picker/styling/sandbox.config.json b/samples/inputs/color-picker/styling/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/color-picker/styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/color-picker/styling/src/index.css b/samples/inputs/color-picker/styling/src/index.css new file mode 100644 index 0000000000..a595528e9f --- /dev/null +++ b/samples/inputs/color-picker/styling/src/index.css @@ -0,0 +1,21 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + align-items: center; +} + +igc-color-picker { + --ig-color-picker-picker-background: #e6f2ff; + --ig-color-picker-picker-border-color: #a9b8cc; + --ig-color-picker-picker-border-radius: 1rem; + --ig-color-picker-picker-elevation: none; +} + +igc-color-picker::part(anchor) { + border: 0.125rem solid #a9b8cc; +} + +igc-color-picker::part(picker-canvas) { + border-radius: 0.25rem; +} diff --git a/samples/inputs/color-picker/styling/src/index.tsx b/samples/inputs/color-picker/styling/src/index.tsx new file mode 100644 index 0000000000..db0d13901d --- /dev/null +++ b/samples/inputs/color-picker/styling/src/index.tsx @@ -0,0 +1,98 @@ +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./layout.css"; +import "./index.css"; +import { IgrColorPicker, IgrIconButton, registerIconFromText } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; + +const textColorIcon = + ''; + +const alignJustifyIcon = + ''; + +const alignRightIcon = + ''; + +const alignCenterIcon = + ''; + +const alignLeftIcon = + ''; + +const shapesIcon = + ''; + +const imageIcon = + ''; + +const layoutIcon = + ''; + +const barChartIcon = + ''; + +const editorIcons: Record = { + "text-color": textColorIcon, + "align-justify": alignJustifyIcon, + "align-right": alignRightIcon, + "align-center": alignCenterIcon, + "align-left": alignLeftIcon, + shapes: shapesIcon, + image: imageIcon, + layout: layoutIcon, + "bar-chart": barChartIcon, +}; + +export default function ColorPickerStyling() { + useEffect(() => { + for (const [name, svg] of Object.entries(editorIcons)) { + registerIconFromText(name, svg); + } + }, []); + + return ( +
+
+
+ Text +
+ +
+
+
+ Alignment +
+ + + + +
+
+
+ Content +
+ + + +
+
+
+ Charts +
+ +
+
+
+ Colors +
+ +
+
+
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/color-picker/styling/src/layout.css b/samples/inputs/color-picker/styling/src/layout.css new file mode 100644 index 0000000000..fbe9a227e4 --- /dev/null +++ b/samples/inputs/color-picker/styling/src/layout.css @@ -0,0 +1,114 @@ +.editor-toolbar { + display: flex; + align-items: stretch; + gap: 0.5rem; + padding: 1rem; + border-radius: 1rem; + background: #00142b; + font-family: "Aktiv Grotesk", sans-serif; +} + +.toolbar-group { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; +} + +.toolbar-group .toolbar-actions { + flex: 1; +} + +.toolbar-group-label { + font-size: 0.75rem; + font-weight: 600; + line-height: 1rem; + letter-spacing: 0.009375rem; + color: #d2dbe8; +} + +.toolbar-actions { + display: flex; + align-items: center; + border-radius: 0.5rem; + background: #556c86; +} + +igc-icon-button::part(base) { + width: 1.5rem; + height: 1.5rem; + padding: 0; + border-radius: 1.125rem; + background: transparent; + color: #fcfcfc; +} + +igc-icon-button::part(icon) { + --size: 0.875rem; +} + +igc-icon-button:hover::part(base) { + background: rgb(255 255 255 / 15%); +} + +igc-icon-button { + --foreground: #fff; + padding: 0.5rem; +} + +igc-color-picker { + --ig-size: var(--ig-size-small); + --ig-input-group-border-color: transparent; + --ig-input-group-hover-border-color: rgb(255 255 255 / 15%); + --ig-input-group-focused-border-color: transparent; + --ig-input-group-border-border-radius: 0.5rem; + --ig-input-group-filled-text-color: #fff; + --ig-input-group-filled-text-hover-color: #fff; + --ig-input-group-focused-text-color: #fff; + --ig-input-group-placeholder-color: #fff; + --ig-input-group-hover-placeholder-color: #fff; + --ig-input-group-focus-placeholder-color: #fff; + + width: 8.75rem; +} + +igc-color-picker::part(picker) { + --ig-input-group-filled-text-color: var(--ig-gray-900); + --ig-input-group-filled-text-hover-color: var(--ig-gray-900); + --ig-input-group-focused-text-color: var(--ig-gray-900); + --ig-input-group-placeholder-color: var(--ig-gray-900); + --ig-input-group-hover-placeholder-color: var(--ig-gray-900); + --ig-input-group-focus-placeholder-color: var(--ig-gray-900); + --ig-input-group-border-color: var(--ig-gray-500); + --ig-input-group-hover-border-color: var(--ig-gray-500); + --ig-input-group-focused-border-color: var(--ig-gray-500); + --ig-input-group-border-border-radius: 0.25rem; + + margin-top: 1.25rem; +} + +igc-color-picker::part(anchor) { + width: 1rem; + height: 1rem; + border-radius: 0.1875rem; +} + +.toolbar-group:nth-child(2) { + igc-icon-button:nth-of-type(2) { + padding-inline: unset; + } + + igc-icon-button:nth-of-type(3) { + padding-inline-end: unset; + } +} + +.toolbar-group:nth-child(3) igc-icon-button:nth-of-type(2) { + padding-inline: unset; +} + +@media (width < 640px) { + .container { + width: fit-content; + } +} diff --git a/samples/inputs/color-picker/styling/tsconfig.json b/samples/inputs/color-picker/styling/tsconfig.json new file mode 100644 index 0000000000..9bf0334b71 --- /dev/null +++ b/samples/inputs/color-picker/styling/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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/color-picker/styling/vite.config.js b/samples/inputs/color-picker/styling/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/color-picker/styling/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/color-picker/swatches/.devcontainer/devcontainer.json b/samples/inputs/color-picker/swatches/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/color-picker/swatches/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/color-picker/swatches/.eslintrc.js b/samples/inputs/color-picker/swatches/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/color-picker/swatches/.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/color-picker/swatches/README.md b/samples/inputs/color-picker/swatches/README.md new file mode 100644 index 0000000000..ffad6bab26 --- /dev/null +++ b/samples/inputs/color-picker/swatches/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Swatches feature using [Color Picker](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/color-picker/swatches +``` + +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/color-picker/swatches/index.html b/samples/inputs/color-picker/swatches/index.html new file mode 100644 index 0000000000..e5e92e79c4 --- /dev/null +++ b/samples/inputs/color-picker/swatches/index.html @@ -0,0 +1,11 @@ + + + + Color Picker Swatches + + + +
+ + + diff --git a/samples/inputs/color-picker/swatches/package.json b/samples/inputs/color-picker/swatches/package.json new file mode 100644 index 0000000000..542e194a1a --- /dev/null +++ b/samples/inputs/color-picker/swatches/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-color-picker-swatches", + "description": "This project provides example of Color Picker Swatches using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.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", + "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"] +} diff --git a/samples/inputs/color-picker/swatches/sandbox.config.json b/samples/inputs/color-picker/swatches/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/color-picker/swatches/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/color-picker/swatches/src/index.css b/samples/inputs/color-picker/swatches/src/index.css new file mode 100644 index 0000000000..9a2278cf73 --- /dev/null +++ b/samples/inputs/color-picker/swatches/src/index.css @@ -0,0 +1,21 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.container { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +igc-color-picker::part(picker) { + margin-top: 0.5rem; +} + +@media (width < 450px) { + .container { + flex-direction: column; + justify-content: normal; + gap: 35%; + align-items: center; + } +} diff --git a/samples/inputs/color-picker/swatches/src/index.tsx b/samples/inputs/color-picker/swatches/src/index.tsx new file mode 100644 index 0000000000..7f6779988e --- /dev/null +++ b/samples/inputs/color-picker/swatches/src/index.tsx @@ -0,0 +1,71 @@ +import React, { useEffect, useRef } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrColorPicker } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +const oneLineSwatches = [ + "#f44336", + "#e91e63", + "#9c27b0", + "#3f51b5", + "#2196f3", + "#4caf50", +]; + +const multiLineSwatches = [ + "#f44336", + "#e91e63", + "#9c27b0", + "#3f51b5", + "#2196f3", + "#4caf50", + "#ffeb3b", + "#ff9800", + "#795548", + "#607d8b", + "#ffffff", + "#000000", + "#0000ff", + "#00ff00", + "#ff00ff", + "#00ffff", + "#ff0000", + "#ffff00", + "#ff00ff", + "#00ffff", + "#c0c0c0", + "#808080", + "#800000", + "#808000", +]; + +export default function ColorPickerSwatches() { + const oneLineRef = useRef(null); + const multiLineRef = useRef(null); + + useEffect(() => { + oneLineRef.current?.toggle(); + multiLineRef.current?.toggle(); + }, []); + + return ( +
+ + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/color-picker/swatches/tsconfig.json b/samples/inputs/color-picker/swatches/tsconfig.json new file mode 100644 index 0000000000..9bf0334b71 --- /dev/null +++ b/samples/inputs/color-picker/swatches/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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/color-picker/swatches/vite.config.js b/samples/inputs/color-picker/swatches/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/color-picker/swatches/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/color-picker/tailwind-styling/.devcontainer/devcontainer.json b/samples/inputs/color-picker/tailwind-styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/color-picker/tailwind-styling/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/color-picker/tailwind-styling/.eslintrc.js b/samples/inputs/color-picker/tailwind-styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/color-picker/tailwind-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/color-picker/tailwind-styling/README.md b/samples/inputs/color-picker/tailwind-styling/README.md new file mode 100644 index 0000000000..782114e6fb --- /dev/null +++ b/samples/inputs/color-picker/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Color Picker](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/color-picker/tailwind-styling +``` + +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/color-picker/tailwind-styling/index.html b/samples/inputs/color-picker/tailwind-styling/index.html new file mode 100644 index 0000000000..ebc971e727 --- /dev/null +++ b/samples/inputs/color-picker/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + Color Picker Tailwind Styling + + + +
+ + + diff --git a/samples/inputs/color-picker/tailwind-styling/package.json b/samples/inputs/color-picker/tailwind-styling/package.json new file mode 100644 index 0000000000..6c1356b481 --- /dev/null +++ b/samples/inputs/color-picker/tailwind-styling/package.json @@ -0,0 +1,39 @@ +{ + "name": "react-color-picker-tailwind-styling", + "description": "This project provides example of Color Picker Tailwind Styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.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", + "@tailwindcss/vite": "^4.3.3", + "tailwindcss": "^4.3.3", + "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"] +} diff --git a/samples/inputs/color-picker/tailwind-styling/sandbox.config.json b/samples/inputs/color-picker/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/color-picker/tailwind-styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/color-picker/tailwind-styling/src/index.css b/samples/inputs/color-picker/tailwind-styling/src/index.css new file mode 100644 index 0000000000..75ed86234b --- /dev/null +++ b/samples/inputs/color-picker/tailwind-styling/src/index.css @@ -0,0 +1,189 @@ +@import "tailwindcss/theme.css"; +@import "tailwindcss/utilities.css"; + +igc-color-picker::part(copy), +igc-color-picker::part(eye-dropper) { + --foreground: #c6451b; +} + +igc-color-picker::part(picker) { + --ig-input-group-border-color: #f95924; + --ig-input-group-hover-border-color: #f95924; + --ig-input-group-focused-border-color: #f95924; + + margin-top: 1.25rem; +} + +igc-color-picker::part(buttons) { + gap: 0rem; +} + +igc-color-picker { + --ig-color-picker-picker-elevation: none; +} + +.sample { + --ig-font-family: "Aktiv Grotesk", sans-serif; + + display: flex; + height: fit-content; + max-width: 55rem; + margin-inline: auto; +} + +.theme-editor { + width: 100%; + border-radius: 0.75rem; + border: 0.063rem solid; + padding: 1.5rem; + border-color: var(--ig-gray-200); + background: var(--ig-surface-500); +} + +.theme-editor-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.5rem 1rem; + border-bottom: 0.063rem solid; + border-color: var(--ig-gray-200); + font-family: "Aktiv Grotesk", sans-serif; +} + +.sample .theme-editor-header h2 { + font-size: 1rem; + line-height: 1.5rem; + font-weight: 600; + margin: 0; + color: var(--ig-gray-900); + letter-spacing: 0.009rem; +} + +.sample .theme-editor-header p { + font-size: 0.875rem; + line-height: 1.25rem; + margin: 0.125rem 0 0; + color: var(--ig-gray-600); +} + +igc-icon-button::part(icon) { + --size: 1.5rem; +} + +.swatches { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + padding: 1.5rem 1rem 1rem; +} + +.swatch-item { + display: flex; + align-items: center; + gap: 0.5rem; + max-width: 8.5rem; + width: 100%; +} + +.swatch-item igc-color-picker { + --ig-color-picker-anchor-border-radius: 0.375rem; + --ig-color-picker-label-color: var(--ig-gray-900); +} + +.swatch-item igc-color-picker::part(label) { + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; +} + +igc-color-picker::part(anchor) { + --anchor-border-radius: 0.25rem; + --anchor-border-color: var(--ig-gray-600); + --swatch-preview-border-color: var(--ig-gray-300); +} + +.swatch-item.disabled igc-color-picker { + --ig-color-picker-label-color-disabled: var(--ig-gray-400); +} + +.swatch-item.disabled .swatch-hint { + color: var(--ig-gray-400); +} + +.swatch-hint { + font-size: 0.75rem; + line-height: 1rem; + color: var(--ig-gray-600); +} + +igc-card { + margin-block-start: 1rem; + border-radius: 0.5rem; + background: var(--preview-bg); + border: 0.063rem solid var(--preview-border); + box-shadow: var(--ig-elevation-4); +} + +igc-chip { + --ig-size: var(--ig-size-large); + --ig-chip-background: color-mix(in srgb, var(--preview-accent) 25%, transparent); + --ig-chip-hover-background: color-mix(in srgb, var(--preview-accent) 75%, transparent); + --ig-chip-text-color: var(--preview-accent); +} + +igc-button { + --ig-size: var(--ig-size-medium); +} + +igc-button::part(base) { + text-transform: capitalize; +} + +#readMoreBtn { + --background: var(--preview-accent); + --foreground: var(--preview-bg); + --hover-background: hsl(from var(--preview-accent) h s 40%); +} + +#saveBtn { + --foreground: var(--preview-accent); + --hover-foreground: hsl(from var(--preview-accent) h s 40%); + --border-color: var(--preview-accent); + --hover-border-color: hsl(from var(--preview-accent) h s 40%); + + &::part(base) { + min-width: unset; + } +} + +#previewTitle, +#previewText { + color: var(--preview-text); +} + +#previewTitle { + font-size: 1rem; + line-height: 1.5rem; + font-weight: 600; + margin: 1rem 0 0.25rem; + letter-spacing: 0.009rem; +} + +#previewText { + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; +} + +.preview-actions { + display: flex; + gap: 0.75rem; + margin-top: 1.25rem; +} + +@media (width < 420px) { + .sample { + width: fit-content; + overflow-y: auto; + } +} diff --git a/samples/inputs/color-picker/tailwind-styling/src/index.tsx b/samples/inputs/color-picker/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..1c5b7e056e --- /dev/null +++ b/samples/inputs/color-picker/tailwind-styling/src/index.tsx @@ -0,0 +1,158 @@ +import React, { useEffect, useRef, useState } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrButton, + IgrCard, + IgrCardContent, + IgrChip, + IgrColorPicker, + IgrIconButton, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; + +const refreshIcon = + ''; + +const defaults = { + background: "#1a314a", + text: "#e5ebf3", + accent: "#f9592a", + border: "#00142b", +}; + +const pickerClassName = + "!light-color-picker [--ig-color-picker-picker-background:#FFF0EB] [--ig-color-picker-picker-border-color:#F95924] [--ig-color-picker-picker-border-radius:0.5rem]"; + +export default function ColorPickerTailwindStyling() { + const cardRef = useRef(null); + const [background, setBackground] = useState(defaults.background); + const [text, setText] = useState(defaults.text); + const [accent, setAccent] = useState(defaults.accent); + const [border, setBorder] = useState(defaults.border); + + useEffect(() => { + registerIconFromText("refresh", refreshIcon, "material"); + }, []); + + useEffect(() => { + const card = cardRef.current; + card?.style.setProperty("--preview-bg", background); + card?.style.setProperty("--preview-text", text); + card?.style.setProperty("--preview-accent", accent); + card?.style.setProperty("--preview-border", border); + }, [background, text, accent, border]); + + const resetTheme = () => { + setBackground(defaults.background); + setText(defaults.text); + setAccent(defaults.accent); + setBorder(defaults.border); + }; + + return ( +
+
+
+
+

Theme Editor

+

Use the pickers to style the card.

+
+ +
+
+
+ ) => setBackground(e.detail)} + > + Card surface color + +
+
+ ) => setText(e.detail)} + > + + Body & heading color + + +
+
+ ) => setAccent(e.detail)} + > + + Button & tag color + + +
+
+ ) => setBorder(e.detail)} + > + + Card edge color + + +
+
+ + + Upgrade to unlock + + +
+
+ + + Design +

Color Picker in Practice

+

+ Pick colors above to see them applied live across every element of this + card. +

+
+ Read more + Save +
+ + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/color-picker/tailwind-styling/tsconfig.json b/samples/inputs/color-picker/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..9bf0334b71 --- /dev/null +++ b/samples/inputs/color-picker/tailwind-styling/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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/color-picker/tailwind-styling/vite.config.js b/samples/inputs/color-picker/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..a1425de7e5 --- /dev/null +++ b/samples/inputs/color-picker/tailwind-styling/vite.config.js @@ -0,0 +1,9 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/color-picker/value/.devcontainer/devcontainer.json b/samples/inputs/color-picker/value/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/color-picker/value/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/color-picker/value/.eslintrc.js b/samples/inputs/color-picker/value/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/color-picker/value/.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/color-picker/value/README.md b/samples/inputs/color-picker/value/README.md new file mode 100644 index 0000000000..008b8fadfe --- /dev/null +++ b/samples/inputs/color-picker/value/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Value feature using [Color Picker](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/color-picker/value +``` + +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/color-picker/value/index.html b/samples/inputs/color-picker/value/index.html new file mode 100644 index 0000000000..6e90d5f339 --- /dev/null +++ b/samples/inputs/color-picker/value/index.html @@ -0,0 +1,11 @@ + + + + Color Picker Value + + + +
+ + + diff --git a/samples/inputs/color-picker/value/package.json b/samples/inputs/color-picker/value/package.json new file mode 100644 index 0000000000..8baf3a498e --- /dev/null +++ b/samples/inputs/color-picker/value/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-color-picker-value", + "description": "This project provides example of Color Picker Value using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.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", + "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"] +} diff --git a/samples/inputs/color-picker/value/sandbox.config.json b/samples/inputs/color-picker/value/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/color-picker/value/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/color-picker/value/src/index.css b/samples/inputs/color-picker/value/src/index.css new file mode 100644 index 0000000000..1598afe899 --- /dev/null +++ b/samples/inputs/color-picker/value/src/index.css @@ -0,0 +1,10 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-color-picker::part(picker) { + margin-top: 0.5rem; +} + +.sample { + align-items: center; +} diff --git a/samples/inputs/color-picker/value/src/index.tsx b/samples/inputs/color-picker/value/src/index.tsx new file mode 100644 index 0000000000..ddf23e01eb --- /dev/null +++ b/samples/inputs/color-picker/value/src/index.tsx @@ -0,0 +1,22 @@ +import React, { useEffect, useRef } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrColorPicker } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function ColorPickerValue() { + const pickerRef = useRef(null); + + useEffect(() => { + pickerRef.current?.toggle(); + }, []); + + return ( +
+ +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/color-picker/value/tsconfig.json b/samples/inputs/color-picker/value/tsconfig.json new file mode 100644 index 0000000000..9bf0334b71 --- /dev/null +++ b/samples/inputs/color-picker/value/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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/color-picker/value/vite.config.js b/samples/inputs/color-picker/value/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/color-picker/value/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/qr-code/corner-shapes/.devcontainer/devcontainer.json b/samples/inputs/qr-code/corner-shapes/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/qr-code/corner-shapes/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/qr-code/corner-shapes/.eslintrc.js b/samples/inputs/qr-code/corner-shapes/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/qr-code/corner-shapes/.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/qr-code/corner-shapes/README.md b/samples/inputs/qr-code/corner-shapes/README.md new file mode 100644 index 0000000000..26d8bef974 --- /dev/null +++ b/samples/inputs/qr-code/corner-shapes/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Corner Shapes feature using [Qr Code](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/qr-code/corner-shapes +``` + +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/qr-code/corner-shapes/index.html b/samples/inputs/qr-code/corner-shapes/index.html new file mode 100644 index 0000000000..afd382b187 --- /dev/null +++ b/samples/inputs/qr-code/corner-shapes/index.html @@ -0,0 +1,11 @@ + + + + QrCode Corner Shapes + + + +
+ + + diff --git a/samples/inputs/qr-code/corner-shapes/package.json b/samples/inputs/qr-code/corner-shapes/package.json new file mode 100644 index 0000000000..ff804856d1 --- /dev/null +++ b/samples/inputs/qr-code/corner-shapes/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-qr-code-corner-shapes", + "description": "This project provides example of QR Code Corner Shapes using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.2", + "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", + "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"] +} diff --git a/samples/inputs/qr-code/corner-shapes/sandbox.config.json b/samples/inputs/qr-code/corner-shapes/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/inputs/qr-code/corner-shapes/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/qr-code/corner-shapes/src/index.css b/samples/inputs/qr-code/corner-shapes/src/index.css new file mode 100644 index 0000000000..689e9ed901 --- /dev/null +++ b/samples/inputs/qr-code/corner-shapes/src/index.css @@ -0,0 +1,29 @@ +.container { + display: flex; + align-items: flex-start; + gap: 3.75rem; + justify-content: center; + flex-direction: row; + overflow-y: auto; + font-family: "Aktiv Grotesk", sans-serif; +} + +.container div { + display: flex; + flex-direction: column; + align-items: center; +} + +span { + margin-block-start: 1rem; + color: var(--ig-gray-600); + font-size: 0.875rem; +} + +@media (width < 850px) { + .container { + flex-direction: column; + align-items: center; + justify-content: flex-start; + } +} diff --git a/samples/inputs/qr-code/corner-shapes/src/index.tsx b/samples/inputs/qr-code/corner-shapes/src/index.tsx new file mode 100644 index 0000000000..ae9a13024e --- /dev/null +++ b/samples/inputs/qr-code/corner-shapes/src/index.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrQrCode } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function QrCodeCornerShapes() { + return ( +
+
+ + + Square style: square + +
+
+ + + Square style: circle + +
+
+ + + Square style: rounded + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/qr-code/corner-shapes/tsconfig.json b/samples/inputs/qr-code/corner-shapes/tsconfig.json new file mode 100644 index 0000000000..36c8880d24 --- /dev/null +++ b/samples/inputs/qr-code/corner-shapes/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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"] +} \ No newline at end of file diff --git a/samples/inputs/qr-code/corner-shapes/vite.config.js b/samples/inputs/qr-code/corner-shapes/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/qr-code/corner-shapes/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/qr-code/dot-shapes/.devcontainer/devcontainer.json b/samples/inputs/qr-code/dot-shapes/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/qr-code/dot-shapes/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/qr-code/dot-shapes/.eslintrc.js b/samples/inputs/qr-code/dot-shapes/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/qr-code/dot-shapes/.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/qr-code/dot-shapes/README.md b/samples/inputs/qr-code/dot-shapes/README.md new file mode 100644 index 0000000000..d1398d2150 --- /dev/null +++ b/samples/inputs/qr-code/dot-shapes/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Dot Shapes feature using [Qr Code](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/qr-code/dot-shapes +``` + +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/qr-code/dot-shapes/index.html b/samples/inputs/qr-code/dot-shapes/index.html new file mode 100644 index 0000000000..43bb8077e1 --- /dev/null +++ b/samples/inputs/qr-code/dot-shapes/index.html @@ -0,0 +1,11 @@ + + + + QrCode Dot Shapes + + + +
+ + + diff --git a/samples/inputs/qr-code/dot-shapes/package.json b/samples/inputs/qr-code/dot-shapes/package.json new file mode 100644 index 0000000000..7dd8f7d0fe --- /dev/null +++ b/samples/inputs/qr-code/dot-shapes/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-qr-code-dot-shapes", + "description": "This project provides example of QR Code Dot Shapes using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.2", + "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", + "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"] +} diff --git a/samples/inputs/qr-code/dot-shapes/sandbox.config.json b/samples/inputs/qr-code/dot-shapes/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/inputs/qr-code/dot-shapes/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/qr-code/dot-shapes/src/index.css b/samples/inputs/qr-code/dot-shapes/src/index.css new file mode 100644 index 0000000000..689e9ed901 --- /dev/null +++ b/samples/inputs/qr-code/dot-shapes/src/index.css @@ -0,0 +1,29 @@ +.container { + display: flex; + align-items: flex-start; + gap: 3.75rem; + justify-content: center; + flex-direction: row; + overflow-y: auto; + font-family: "Aktiv Grotesk", sans-serif; +} + +.container div { + display: flex; + flex-direction: column; + align-items: center; +} + +span { + margin-block-start: 1rem; + color: var(--ig-gray-600); + font-size: 0.875rem; +} + +@media (width < 850px) { + .container { + flex-direction: column; + align-items: center; + justify-content: flex-start; + } +} diff --git a/samples/inputs/qr-code/dot-shapes/src/index.tsx b/samples/inputs/qr-code/dot-shapes/src/index.tsx new file mode 100644 index 0000000000..0165dfa84f --- /dev/null +++ b/samples/inputs/qr-code/dot-shapes/src/index.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrQrCode } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function QrCodeDotShapes() { + return ( +
+
+ + + Dot style: square + +
+
+ + + Dot style: circle + +
+
+ + + Dot style: rounded + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/qr-code/dot-shapes/tsconfig.json b/samples/inputs/qr-code/dot-shapes/tsconfig.json new file mode 100644 index 0000000000..36c8880d24 --- /dev/null +++ b/samples/inputs/qr-code/dot-shapes/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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"] +} \ No newline at end of file diff --git a/samples/inputs/qr-code/dot-shapes/vite.config.js b/samples/inputs/qr-code/dot-shapes/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/qr-code/dot-shapes/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/qr-code/error-correction/.devcontainer/devcontainer.json b/samples/inputs/qr-code/error-correction/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/qr-code/error-correction/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/qr-code/error-correction/.eslintrc.js b/samples/inputs/qr-code/error-correction/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/qr-code/error-correction/.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/qr-code/error-correction/README.md b/samples/inputs/qr-code/error-correction/README.md new file mode 100644 index 0000000000..5af5cd1e72 --- /dev/null +++ b/samples/inputs/qr-code/error-correction/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Error Correction feature using [Qr Code](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/qr-code/error-correction +``` + +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/qr-code/error-correction/index.html b/samples/inputs/qr-code/error-correction/index.html new file mode 100644 index 0000000000..60f8243452 --- /dev/null +++ b/samples/inputs/qr-code/error-correction/index.html @@ -0,0 +1,11 @@ + + + + QrCode Error Correction + + + +
+ + + diff --git a/samples/inputs/qr-code/error-correction/package.json b/samples/inputs/qr-code/error-correction/package.json new file mode 100644 index 0000000000..f5a4080518 --- /dev/null +++ b/samples/inputs/qr-code/error-correction/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-qr-code-error-correction", + "description": "This project provides example of QR Code Error Correction using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.2", + "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", + "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"] +} diff --git a/samples/inputs/qr-code/error-correction/sandbox.config.json b/samples/inputs/qr-code/error-correction/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/inputs/qr-code/error-correction/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/qr-code/error-correction/src/index.css b/samples/inputs/qr-code/error-correction/src/index.css new file mode 100644 index 0000000000..689e9ed901 --- /dev/null +++ b/samples/inputs/qr-code/error-correction/src/index.css @@ -0,0 +1,29 @@ +.container { + display: flex; + align-items: flex-start; + gap: 3.75rem; + justify-content: center; + flex-direction: row; + overflow-y: auto; + font-family: "Aktiv Grotesk", sans-serif; +} + +.container div { + display: flex; + flex-direction: column; + align-items: center; +} + +span { + margin-block-start: 1rem; + color: var(--ig-gray-600); + font-size: 0.875rem; +} + +@media (width < 850px) { + .container { + flex-direction: column; + align-items: center; + justify-content: flex-start; + } +} diff --git a/samples/inputs/qr-code/error-correction/src/index.tsx b/samples/inputs/qr-code/error-correction/src/index.tsx new file mode 100644 index 0000000000..fa398453f8 --- /dev/null +++ b/samples/inputs/qr-code/error-correction/src/index.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrQrCode } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function QrCodeErrorCorrection() { + return ( +
+
+ + + Error level: L + +
+
+ + + Error level: M + +
+
+ + + Error level: Q + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/qr-code/error-correction/tsconfig.json b/samples/inputs/qr-code/error-correction/tsconfig.json new file mode 100644 index 0000000000..36c8880d24 --- /dev/null +++ b/samples/inputs/qr-code/error-correction/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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"] +} \ No newline at end of file diff --git a/samples/inputs/qr-code/error-correction/vite.config.js b/samples/inputs/qr-code/error-correction/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/qr-code/error-correction/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/qr-code/logo/.devcontainer/devcontainer.json b/samples/inputs/qr-code/logo/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/qr-code/logo/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/qr-code/logo/.eslintrc.js b/samples/inputs/qr-code/logo/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/qr-code/logo/.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/qr-code/logo/README.md b/samples/inputs/qr-code/logo/README.md new file mode 100644 index 0000000000..a02c782952 --- /dev/null +++ b/samples/inputs/qr-code/logo/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Logo feature using [Qr Code](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/qr-code/logo +``` + +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/qr-code/logo/index.html b/samples/inputs/qr-code/logo/index.html new file mode 100644 index 0000000000..107b366be4 --- /dev/null +++ b/samples/inputs/qr-code/logo/index.html @@ -0,0 +1,11 @@ + + + + QrCode Logo + + + +
+ + + diff --git a/samples/inputs/qr-code/logo/package.json b/samples/inputs/qr-code/logo/package.json new file mode 100644 index 0000000000..65077dbd18 --- /dev/null +++ b/samples/inputs/qr-code/logo/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-qr-code-logo", + "description": "This project provides example of QR Code Logo using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.2", + "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", + "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"] +} diff --git a/samples/inputs/qr-code/logo/sandbox.config.json b/samples/inputs/qr-code/logo/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/inputs/qr-code/logo/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/qr-code/logo/src/index.css b/samples/inputs/qr-code/logo/src/index.css new file mode 100644 index 0000000000..fc10c63363 --- /dev/null +++ b/samples/inputs/qr-code/logo/src/index.css @@ -0,0 +1,5 @@ +.container { + display: flex; + justify-content: center; + align-items: center; +} diff --git a/samples/inputs/qr-code/logo/src/index.tsx b/samples/inputs/qr-code/logo/src/index.tsx new file mode 100644 index 0000000000..9de581d64a --- /dev/null +++ b/samples/inputs/qr-code/logo/src/index.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrQrCode } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function QrCodeLogo() { + return ( +
+ +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/qr-code/logo/tsconfig.json b/samples/inputs/qr-code/logo/tsconfig.json new file mode 100644 index 0000000000..36c8880d24 --- /dev/null +++ b/samples/inputs/qr-code/logo/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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"] +} \ No newline at end of file diff --git a/samples/inputs/qr-code/logo/vite.config.js b/samples/inputs/qr-code/logo/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/qr-code/logo/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/qr-code/overview/.devcontainer/devcontainer.json b/samples/inputs/qr-code/overview/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/qr-code/overview/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/qr-code/overview/.eslintrc.js b/samples/inputs/qr-code/overview/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/qr-code/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/qr-code/overview/README.md b/samples/inputs/qr-code/overview/README.md new file mode 100644 index 0000000000..ef96d4c4f3 --- /dev/null +++ b/samples/inputs/qr-code/overview/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Overview feature using [Qr Code](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/qr-code/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/qr-code/overview/index.html b/samples/inputs/qr-code/overview/index.html new file mode 100644 index 0000000000..5f67e69850 --- /dev/null +++ b/samples/inputs/qr-code/overview/index.html @@ -0,0 +1,11 @@ + + + + QrCode Overview + + + +
+ + + diff --git a/samples/inputs/qr-code/overview/package.json b/samples/inputs/qr-code/overview/package.json new file mode 100644 index 0000000000..81062c390d --- /dev/null +++ b/samples/inputs/qr-code/overview/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-qr-code-overview", + "description": "This project provides example of QR Code Overview using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.2", + "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", + "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"] +} diff --git a/samples/inputs/qr-code/overview/sandbox.config.json b/samples/inputs/qr-code/overview/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/inputs/qr-code/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/qr-code/overview/src/index.css b/samples/inputs/qr-code/overview/src/index.css new file mode 100644 index 0000000000..b5d86a6a02 --- /dev/null +++ b/samples/inputs/qr-code/overview/src/index.css @@ -0,0 +1,22 @@ +.container { + display: flex; + flex-direction: column; + align-items: center; + gap: 2.5rem; + overflow-y: auto; +} + +.qr-controls { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 2.5rem; +} + +igc-radio-group { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.25rem; +} diff --git a/samples/inputs/qr-code/overview/src/index.tsx b/samples/inputs/qr-code/overview/src/index.tsx new file mode 100644 index 0000000000..c33a146439 --- /dev/null +++ b/samples/inputs/qr-code/overview/src/index.tsx @@ -0,0 +1,104 @@ +import React, { useState } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrQrCode, IgrRadio, IgrRadioGroup, IgrSwitch } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +const logoSrc = + "https://static.infragistics.com/marketing/Website/products/ignite-ui/shared/ignite-ui-logo-light-background-horizontal.svg"; + +type DotShape = "square" | "circle" | "rounded"; + +export default function QrCodeOverview() { + const [shape, setShape] = useState("square"); + const [size, setSize] = useState(120); + const [logoEnabled, setLogoEnabled] = useState(true); + + return ( +
+
+ + e.detail.checked && setShape("square")} + > + Square + + e.detail.checked && setShape("circle")} + > + Circle + + e.detail.checked && setShape("rounded")} + > + Rounded + + + + e.detail.checked && setSize(120)} + > + Small + + e.detail.checked && setSize(180)} + > + Medium + + e.detail.checked && setSize(240)} + > + Large + + e.detail.checked && setSize(300)} + > + Extra large + + + setLogoEnabled(e.detail.checked)} + > + Logo + +
+ +
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/qr-code/overview/tsconfig.json b/samples/inputs/qr-code/overview/tsconfig.json new file mode 100644 index 0000000000..36c8880d24 --- /dev/null +++ b/samples/inputs/qr-code/overview/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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"] +} \ No newline at end of file diff --git a/samples/inputs/qr-code/overview/vite.config.js b/samples/inputs/qr-code/overview/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/qr-code/overview/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/qr-code/size/.devcontainer/devcontainer.json b/samples/inputs/qr-code/size/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/qr-code/size/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/qr-code/size/.eslintrc.js b/samples/inputs/qr-code/size/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/qr-code/size/.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/qr-code/size/README.md b/samples/inputs/qr-code/size/README.md new file mode 100644 index 0000000000..73939bf731 --- /dev/null +++ b/samples/inputs/qr-code/size/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Size feature using [Qr Code](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/qr-code/size +``` + +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/qr-code/size/index.html b/samples/inputs/qr-code/size/index.html new file mode 100644 index 0000000000..2cd2d002eb --- /dev/null +++ b/samples/inputs/qr-code/size/index.html @@ -0,0 +1,11 @@ + + + + QrCode Size + + + +
+ + + diff --git a/samples/inputs/qr-code/size/package.json b/samples/inputs/qr-code/size/package.json new file mode 100644 index 0000000000..e4538a0239 --- /dev/null +++ b/samples/inputs/qr-code/size/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-qr-code-size", + "description": "This project provides example of QR Code Size using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.2", + "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", + "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"] +} diff --git a/samples/inputs/qr-code/size/sandbox.config.json b/samples/inputs/qr-code/size/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/inputs/qr-code/size/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/qr-code/size/src/index.css b/samples/inputs/qr-code/size/src/index.css new file mode 100644 index 0000000000..c19622c5a0 --- /dev/null +++ b/samples/inputs/qr-code/size/src/index.css @@ -0,0 +1,29 @@ +.container { + display: flex; + align-items: baseline; + gap: 3.75rem; + justify-content: center; + flex-direction: row; + overflow-y: auto; + font-family: "Aktiv Grotesk", sans-serif; +} + +.container div { + display: flex; + flex-direction: column; + align-items: center; +} + +span { + margin-block-start: 1rem; + color: var(--ig-gray-600); + font-size: 0.875rem; +} + +@media (width < 850px) { + .container { + flex-direction: column; + align-items: center; + justify-content: flex-start; + } +} diff --git a/samples/inputs/qr-code/size/src/index.tsx b/samples/inputs/qr-code/size/src/index.tsx new file mode 100644 index 0000000000..a0e8d52659 --- /dev/null +++ b/samples/inputs/qr-code/size/src/index.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrQrCode } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function QrCodeSize() { + return ( +
+
+ + + Size: 128px + +
+
+ + + Size: 192px + +
+
+ + + Size: 256px + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/qr-code/size/tsconfig.json b/samples/inputs/qr-code/size/tsconfig.json new file mode 100644 index 0000000000..36c8880d24 --- /dev/null +++ b/samples/inputs/qr-code/size/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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"] +} \ No newline at end of file diff --git a/samples/inputs/qr-code/size/vite.config.js b/samples/inputs/qr-code/size/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/qr-code/size/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/qr-code/styling/.devcontainer/devcontainer.json b/samples/inputs/qr-code/styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/qr-code/styling/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/qr-code/styling/.eslintrc.js b/samples/inputs/qr-code/styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/qr-code/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/qr-code/styling/README.md b/samples/inputs/qr-code/styling/README.md new file mode 100644 index 0000000000..1fb622de7d --- /dev/null +++ b/samples/inputs/qr-code/styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Styling feature using [Qr Code](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/qr-code/styling +``` + +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/qr-code/styling/index.html b/samples/inputs/qr-code/styling/index.html new file mode 100644 index 0000000000..688a4dc859 --- /dev/null +++ b/samples/inputs/qr-code/styling/index.html @@ -0,0 +1,11 @@ + + + + QrCode Styling + + + +
+ + + diff --git a/samples/inputs/qr-code/styling/package.json b/samples/inputs/qr-code/styling/package.json new file mode 100644 index 0000000000..dc708c9cbe --- /dev/null +++ b/samples/inputs/qr-code/styling/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-qr-code-styling", + "description": "This project provides example of QR Code Styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.2", + "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", + "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"] +} diff --git a/samples/inputs/qr-code/styling/sandbox.config.json b/samples/inputs/qr-code/styling/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/inputs/qr-code/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/qr-code/styling/src/index.css b/samples/inputs/qr-code/styling/src/index.css new file mode 100644 index 0000000000..f1e1ad8493 --- /dev/null +++ b/samples/inputs/qr-code/styling/src/index.css @@ -0,0 +1,36 @@ +.container { + display: flex; + align-items: flex-start; + gap: 3.75rem; + justify-content: center; + flex-direction: row; + overflow-y: auto; +} + +.qr-blue { + --ig-qr-code-background: #e3edfb; + --ig-qr-code-dark-color: #1361e0; +} + +.qr-orange { + --ig-qr-code-background: #fbe6e1; + --ig-qr-code-dark-color: #f0562b; +} + +.qr-green { + --ig-qr-code-background: #e5f7e6; + --ig-qr-code-dark-color: #3fa845; +} + +.qr-dark { + --ig-qr-code-background: #0b1b3a; + --ig-qr-code-dark-color: #ffffff; +} + +@media (width < 850px) { + .container { + flex-direction: column; + align-items: center; + justify-content: flex-start; + } +} diff --git a/samples/inputs/qr-code/styling/src/index.tsx b/samples/inputs/qr-code/styling/src/index.tsx new file mode 100644 index 0000000000..88047fbe1a --- /dev/null +++ b/samples/inputs/qr-code/styling/src/index.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrQrCode } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function QrCodeStyling() { + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/qr-code/styling/tsconfig.json b/samples/inputs/qr-code/styling/tsconfig.json new file mode 100644 index 0000000000..36c8880d24 --- /dev/null +++ b/samples/inputs/qr-code/styling/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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"] +} \ No newline at end of file diff --git a/samples/inputs/qr-code/styling/vite.config.js b/samples/inputs/qr-code/styling/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/qr-code/styling/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/qr-code/tailwind-styling/.devcontainer/devcontainer.json b/samples/inputs/qr-code/tailwind-styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/qr-code/tailwind-styling/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/qr-code/tailwind-styling/.eslintrc.js b/samples/inputs/qr-code/tailwind-styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/qr-code/tailwind-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/qr-code/tailwind-styling/README.md b/samples/inputs/qr-code/tailwind-styling/README.md new file mode 100644 index 0000000000..6428d4d031 --- /dev/null +++ b/samples/inputs/qr-code/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Qr Code](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/qr-code/tailwind-styling +``` + +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/qr-code/tailwind-styling/index.html b/samples/inputs/qr-code/tailwind-styling/index.html new file mode 100644 index 0000000000..04c104ff13 --- /dev/null +++ b/samples/inputs/qr-code/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + QrCode Tailwind Styling + + + +
+ + + diff --git a/samples/inputs/qr-code/tailwind-styling/package.json b/samples/inputs/qr-code/tailwind-styling/package.json new file mode 100644 index 0000000000..5c2fef3b7b --- /dev/null +++ b/samples/inputs/qr-code/tailwind-styling/package.json @@ -0,0 +1,39 @@ +{ + "name": "react-qr-code-tailwind-styling", + "description": "This project provides example of QR Code Tailwind Styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.3.2", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.3.3", + "@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", + "tailwindcss": "^4.3.3", + "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"] +} diff --git a/samples/inputs/qr-code/tailwind-styling/sandbox.config.json b/samples/inputs/qr-code/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/inputs/qr-code/tailwind-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/qr-code/tailwind-styling/src/index.css b/samples/inputs/qr-code/tailwind-styling/src/index.css new file mode 100644 index 0000000000..7d9fab58e8 --- /dev/null +++ b/samples/inputs/qr-code/tailwind-styling/src/index.css @@ -0,0 +1,20 @@ +@import "tailwindcss/theme.css"; +@import "tailwindcss/utilities.css"; + +.container { + display: flex; + gap: 1.5rem; + padding: 1rem; + background: #111; + width: fit-content; + height: fit-content; + flex-direction: row; + margin-inline: auto; +} + +@media (width < 800px) { + .container { + flex-direction: column; + overflow-y: auto; + } +} diff --git a/samples/inputs/qr-code/tailwind-styling/src/index.tsx b/samples/inputs/qr-code/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..6927d1c5f6 --- /dev/null +++ b/samples/inputs/qr-code/tailwind-styling/src/index.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrQrCode } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function QrCodeTailwindStyling() { + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/inputs/qr-code/tailwind-styling/tsconfig.json b/samples/inputs/qr-code/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..36c8880d24 --- /dev/null +++ b/samples/inputs/qr-code/tailwind-styling/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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, + "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"] +} \ No newline at end of file diff --git a/samples/inputs/qr-code/tailwind-styling/vite.config.js b/samples/inputs/qr-code/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..a1425de7e5 --- /dev/null +++ b/samples/inputs/qr-code/tailwind-styling/vite.config.js @@ -0,0 +1,9 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + build: { outDir: 'build' }, + server: { open: false }, +}); From beafddf5f7f232640e829fffc1ac142a771bee08 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Wed, 30 Sep 2026 15:24:32 +0300 Subject: [PATCH 10/14] fix(): fix ci error --- browser/package-lock.json | 219 ++++++++++++++++++++------------------ browser/package.json | 6 +- 2 files changed, 117 insertions(+), 108 deletions(-) diff --git a/browser/package-lock.json b/browser/package-lock.json index 60ae214bf2..685144ce6a 100644 --- a/browser/package-lock.json +++ b/browser/package-lock.json @@ -16,7 +16,7 @@ "dompurify": "^3.3.0", "file-saver": "1.3.8", "igniteui-dockmanager": "^1.17.0", - "igniteui-grid-lite": "~0.8.0", + "igniteui-grid-lite": "~0.11.0", "igniteui-i18n-resources": "^1.0.5", "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", @@ -36,7 +36,7 @@ "igniteui-theming": "^25.0.1", "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", - "marked": "^17.0.0", + "marked": "^18.0.0", "marked-shiki": "^1.2.1", "prop-types": "15.7.2", "react": "^19.2.0", @@ -46,7 +46,7 @@ "react-router": "4.3.1", "react-router-dom": "^5.2.0", "react-transition-group": "4.4.2", - "shiki": "^3.13.0", + "shiki": "^4.3.0", "tslib": "^2.4.0" }, "devDependencies": { @@ -1097,28 +1097,28 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.7.5", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz", - "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==", + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz", + "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==", "license": "MIT", "dependencies": { - "@floating-ui/utils": "^0.2.11" + "@floating-ui/utils": "^0.2.12" } }, "node_modules/@floating-ui/dom": { - "version": "1.7.6", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz", - "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==", + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz", + "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==", "license": "MIT", "dependencies": { - "@floating-ui/core": "^1.7.5", - "@floating-ui/utils": "^0.2.11" + "@floating-ui/core": "^1.8.0", + "@floating-ui/utils": "^0.2.12" } }, "node_modules/@floating-ui/utils": { - "version": "0.2.11", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz", - "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==", + "version": "0.2.12", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz", + "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==", "license": "MIT" }, "node_modules/@hono/node-server": { @@ -1282,16 +1282,6 @@ "integrity": "sha512-Aou5UdlSpr5whQe8AA/bZG0jMj96CoJIWbGfZ91qieWu5AWUMKw8VR/pAkQkJYvBNhmCcWnZlyyk5oze8JIqYA==", "license": "BSD-3-Clause" }, - "node_modules/@lit-labs/virtualizer": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@lit-labs/virtualizer/-/virtualizer-2.1.1.tgz", - "integrity": "sha512-JWxMwnlouLdwpw8spLTuax53WMnSP3xt0dCyxAS7GJr5Otda9MGgR/ghAdfwhSY75TmjbE1T2TqChwoGCw3ggw==", - "license": "BSD-3-Clause", - "dependencies": { - "lit": "^3.2.0", - "tslib": "^2.0.3" - } - }, "node_modules/@lit/context": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.6.tgz", @@ -2108,64 +2098,97 @@ ] }, "node_modules/@shikijs/core": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.23.0.tgz", - "integrity": "sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA==", + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-4.4.3.tgz", + "integrity": "sha512-QCR4q2ZO/ILJEuwiBMel4wdcTDb1JGwfjKTxPDF6x8ixOaluPrVqIn06C99AcRPhmYlBR56d/Fb+GN58GzExpg==", "license": "MIT", "dependencies": { - "@shikijs/types": "3.23.0", + "@shikijs/primitive": "4.4.3", + "@shikijs/types": "4.4.3", "@shikijs/vscode-textmate": "^10.0.2", - "@types/hast": "^3.0.4", + "@types/hast": "^3.0.5", "hast-util-to-html": "^9.0.5" + }, + "engines": { + "node": ">=20" } }, "node_modules/@shikijs/engine-javascript": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.23.0.tgz", - "integrity": "sha512-aHt9eiGFobmWR5uqJUViySI1bHMqrAgamWE1TYSUoftkAeCCAiGawPMwM+VCadylQtF4V3VNOZ5LmfItH5f3yA==", + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-4.4.3.tgz", + "integrity": "sha512-FbOjFJp9VLdo1Wevs10BBtVxiTWwNLqZh5Gkhjgda/ioL15YOgeSl9n+6XMa3qRlPQzfhFNe641SrynFHYG0nQ==", "license": "MIT", "dependencies": { - "@shikijs/types": "3.23.0", + "@shikijs/types": "4.4.3", "@shikijs/vscode-textmate": "^10.0.2", - "oniguruma-to-es": "^4.3.4" + "oniguruma-to-es": "^4.3.6" + }, + "engines": { + "node": ">=20" } }, "node_modules/@shikijs/engine-oniguruma": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.23.0.tgz", - "integrity": "sha512-1nWINwKXxKKLqPibT5f4pAFLej9oZzQTsby8942OTlsJzOBZ0MWKiwzMsd+jhzu8YPCHAswGnnN1YtQfirL35g==", + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-4.4.3.tgz", + "integrity": "sha512-EcOQkxdxGQrc1Row/cC2c96/v1dbZqGnEVu1qTuT/MJmp6+cXCvQussowVmCv5Tqr3KuY3c7IbM6HTW3LJ1k9w==", "license": "MIT", "dependencies": { - "@shikijs/types": "3.23.0", + "@shikijs/types": "4.4.3", "@shikijs/vscode-textmate": "^10.0.2" + }, + "engines": { + "node": ">=20" } }, "node_modules/@shikijs/langs": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.23.0.tgz", - "integrity": "sha512-2Ep4W3Re5aB1/62RSYQInK9mM3HsLeB91cHqznAJMuylqjzNVAVCMnNWRHFtcNHXsoNRayP9z1qj4Sq3nMqYXg==", + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-4.4.3.tgz", + "integrity": "sha512-ePic0yfAJGOF83D5wBHK/00EjK65oahBYxFk5epgq33WRv7X9UuxLEV8PtR0szC0z8dl7INIpIodB99JRFlR+A==", "license": "MIT", "dependencies": { - "@shikijs/types": "3.23.0" + "@shikijs/types": "4.4.3" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/primitive": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@shikijs/primitive/-/primitive-4.4.3.tgz", + "integrity": "sha512-m0wBeLDQDeIxRdUmrCPdQqfuUamDwRL5isCfYbguKD6NiaKpVbsv+3J81DyIKgNW5h4WAIIr8T4EkgQrBBxvaQ==", + "license": "MIT", + "dependencies": { + "@shikijs/types": "4.4.3", + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.5" + }, + "engines": { + "node": ">=20" } }, "node_modules/@shikijs/themes": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.23.0.tgz", - "integrity": "sha512-5qySYa1ZgAT18HR/ypENL9cUSGOeI2x+4IvYJu4JgVJdizn6kG4ia5Q1jDEOi7gTbN4RbuYtmHh0W3eccOrjMA==", + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-4.4.3.tgz", + "integrity": "sha512-w8UHjeUnIR965KMWJHUPXOc2mNJUnK3vpVLYLvw5IYU2mnTTJ89E24OrJDBNiJDQ0qzb0tc4l7mrIXx5cFeIyw==", "license": "MIT", "dependencies": { - "@shikijs/types": "3.23.0" + "@shikijs/types": "4.4.3" + }, + "engines": { + "node": ">=20" } }, "node_modules/@shikijs/types": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.23.0.tgz", - "integrity": "sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ==", + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-4.4.3.tgz", + "integrity": "sha512-UEJxmRR++MAGR6hugn0vgVS2W/6lWAts84FFSrnlH9sP0LNol7E5+NQ792pH8liWUhyMyjhTgSUH3k7iD7tc5g==", "license": "MIT", "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", - "@types/hast": "^3.0.4" + "@types/hast": "^3.0.5" + }, + "engines": { + "node": ">=20" } }, "node_modules/@shikijs/vscode-textmate": { @@ -2792,9 +2815,9 @@ } }, "node_modules/@types/hast": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", - "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.5.tgz", + "integrity": "sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g==", "license": "MIT", "dependencies": { "@types/unist": "*" @@ -5973,9 +5996,9 @@ } }, "node_modules/dompurify": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.1.tgz", - "integrity": "sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==", + "version": "3.4.16", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.16.tgz", + "integrity": "sha512-sqo+pNp3qRhCIpbgRi1y8Tgk27Bo2Ry7w0dC1NBeNTdZChWjz9Xb/KOoZbRP/R6pQZ80Qw8YhXw13hWWBbMRnQ==", "license": "(MPL-2.0 OR Apache-2.0)", "optionalDependencies": { "@types/trusted-types": "^2.0.7" @@ -9661,14 +9684,13 @@ } }, "node_modules/igniteui-grid-lite": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/igniteui-grid-lite/-/igniteui-grid-lite-0.8.0.tgz", - "integrity": "sha512-Y+/bj75LR2pDmWIsSyFgSWvtIPJ5d1kVxxUr2MxqYfR/R95tVggXUb6fYlLiP7JBD/Y64p0PkToQMXK7X3GANw==", + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/igniteui-grid-lite/-/igniteui-grid-lite-0.11.0.tgz", + "integrity": "sha512-vFPWIMihTZ+qbSKRjTMeGRgmnnziNhY5zjs8VdyipojmdkuoHrYW2VFBFHCg0Ci1bWfeBQpLrGOF0mmn57CVHA==", "license": "MIT", "dependencies": { - "@lit-labs/virtualizer": "~2.1.0", "@lit/context": "~1.1.5", - "igniteui-webcomponents": "~7.2.0", + "igniteui-webcomponents": "~7.4.1", "lit": "^3.3.0" }, "engines": { @@ -11892,9 +11914,9 @@ } }, "node_modules/marked": { - "version": "17.0.3", - "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.3.tgz", - "integrity": "sha512-jt1v2ObpyOKR8p4XaUJVk3YWRJ5n+i4+rjQopxvV32rSndTJXvIzuUdWWIy/1pFQMkQmvTXawzDNqOH/CUmx6A==", + "version": "18.0.14", + "resolved": "https://registry.npmjs.org/marked/-/marked-18.0.14.tgz", + "integrity": "sha512-mBHK6FBHuBAlhgRe88w9F0O1AbwwXJUcQibUbC/QcdTbVGAD7aWza+xt3N6oT/jCZx3/OMeS+8rnuiHZcQ9s7A==", "license": "MIT", "bin": { "marked": "bin/marked.js" @@ -12294,9 +12316,9 @@ "license": "MIT" }, "node_modules/mdast-util-to-hast/node_modules/micromark-util-types": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz", - "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.3.tgz", + "integrity": "sha512-oxB2Ik03hI0gv+VNn9tnh1t1YEe9MDPptViAEgfdf3YQHsn0pzGTgCdlSCJXcwhqm8phaEuM7zeEu3QQzVBrPg==", "funding": [ { "type": "GitHub Sponsors", @@ -13520,19 +13542,19 @@ } }, "node_modules/oniguruma-parser": { - "version": "0.12.1", - "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.1.tgz", - "integrity": "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==", + "version": "0.12.2", + "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.2.tgz", + "integrity": "sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==", "license": "MIT" }, "node_modules/oniguruma-to-es": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.4.tgz", - "integrity": "sha512-3VhUGN3w2eYxnTzHn+ikMI+fp/96KoRSVK9/kMTcFqj1NRDh2IhQCKvYxDnWePKRXY/AqH+Fuiyb7VHSzBjHfA==", + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.6.tgz", + "integrity": "sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==", "license": "MIT", "dependencies": { - "oniguruma-parser": "^0.12.1", - "regex": "^6.0.1", + "oniguruma-parser": "^0.12.2", + "regex": "^6.1.0", "regex-recursion": "^6.0.2" } }, @@ -14257,9 +14279,9 @@ "license": "MIT" }, "node_modules/property-information": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz", - "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.2.0.tgz", + "integrity": "sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==", "license": "MIT", "funding": { "type": "github", @@ -16568,19 +16590,22 @@ } }, "node_modules/shiki": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.23.0.tgz", - "integrity": "sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA==", + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/shiki/-/shiki-4.4.3.tgz", + "integrity": "sha512-Mb/GvXPHBAXdgGIcnfU5L3ldpn1XcxrGkPHwqgRx17/I2XRfqlFKk2vGkHWINn1kdXvzJZeuO3is6I9KLPFm0g==", "license": "MIT", "dependencies": { - "@shikijs/core": "3.23.0", - "@shikijs/engine-javascript": "3.23.0", - "@shikijs/engine-oniguruma": "3.23.0", - "@shikijs/langs": "3.23.0", - "@shikijs/themes": "3.23.0", - "@shikijs/types": "3.23.0", + "@shikijs/core": "4.4.3", + "@shikijs/engine-javascript": "4.4.3", + "@shikijs/engine-oniguruma": "4.4.3", + "@shikijs/langs": "4.4.3", + "@shikijs/themes": "4.4.3", + "@shikijs/types": "4.4.3", "@shikijs/vscode-textmate": "^10.0.2", - "@types/hast": "^3.0.4" + "@types/hast": "^3.0.5" + }, + "engines": { + "node": ">=20" } }, "node_modules/side-channel": { @@ -19143,22 +19168,6 @@ } } }, - "node_modules/vite-tsconfig-paths/node_modules/typescript": { - "version": "5.9.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", - "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", - "dev": true, - "license": "Apache-2.0", - "optional": true, - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=14.17" - } - }, "node_modules/vite/node_modules/fdir": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", diff --git a/browser/package.json b/browser/package.json index d0742db8fb..e273292c1f 100644 --- a/browser/package.json +++ b/browser/package.json @@ -24,7 +24,7 @@ "dompurify": "^3.3.0", "file-saver": "1.3.8", "igniteui-dockmanager": "^1.17.0", - "igniteui-grid-lite": "~0.8.0", + "igniteui-grid-lite": "~0.11.0", "igniteui-i18n-resources": "^1.0.5", "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", @@ -44,7 +44,7 @@ "igniteui-theming": "^25.0.1", "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", - "marked": "^17.0.0", + "marked": "^18.0.0", "marked-shiki": "^1.2.1", "prop-types": "15.7.2", "react": "^19.2.0", @@ -54,7 +54,7 @@ "react-router": "4.3.1", "react-router-dom": "^5.2.0", "react-transition-group": "4.4.2", - "shiki": "^3.13.0", + "shiki": "^4.3.0", "tslib": "^2.4.0" }, "devDependencies": { From fa2b66305c4ed9fd63d9afdbc33ea1497abcab37 Mon Sep 17 00:00:00 2001 From: Adrian Petrov <99720888+adrianptrv@users.noreply.github.com> Date: Thu, 1 Oct 2026 13:53:51 +0300 Subject: [PATCH 11/14] chore(): bump versions + small qr-code change (#1113) --- browser/tasks/gulp-samples.js | 6 +++--- samples/charts/category-chart/annotations-all/package.json | 4 ++-- .../charts/category-chart/annotations-callouts/package.json | 4 ++-- .../category-chart/annotations-crosshairs/package.json | 4 ++-- .../charts/category-chart/annotations-custom/package.json | 4 ++-- .../category-chart/annotations-final-value/package.json | 4 ++-- .../category-chart/annotations-highlighting/package.json | 4 ++-- .../category-chart/area-chart-multiple-sources/package.json | 4 ++-- .../category-chart/area-chart-single-source/package.json | 4 ++-- .../charts/category-chart/area-chart-styling/package.json | 4 ++-- samples/charts/category-chart/axis-gap/package.json | 4 ++-- samples/charts/category-chart/axis-gridlines/package.json | 4 ++-- samples/charts/category-chart/axis-inverted/package.json | 4 ++-- samples/charts/category-chart/axis-labels/package.json | 4 ++-- samples/charts/category-chart/axis-locations/package.json | 4 ++-- samples/charts/category-chart/axis-options/package.json | 4 ++-- samples/charts/category-chart/axis-overlap/package.json | 4 ++-- samples/charts/category-chart/axis-range/package.json | 4 ++-- samples/charts/category-chart/axis-tickmarks/package.json | 4 ++-- samples/charts/category-chart/axis-titles/package.json | 4 ++-- .../category-chart/chart-highlight-filter/package.json | 4 ++-- .../column-chart-multiple-sources/package.json | 4 ++-- .../category-chart/column-chart-single-source/package.json | 4 ++-- .../charts/category-chart/column-chart-styling/package.json | 4 ++-- .../category-chart/column-chart-with-tooltips/package.json | 4 ++-- samples/charts/category-chart/custom-selection/package.json | 4 ++-- .../charts/category-chart/data-aggregations/package.json | 4 ++-- samples/charts/category-chart/data-filter/package.json | 4 ++-- .../data-legend-formatting-decimals/package.json | 4 ++-- samples/charts/category-chart/data-legend/package.json | 4 ++-- .../data-tooltip-formatting-decimals/package.json | 4 ++-- .../category-chart/data-tooltip-positioning/package.json | 4 ++-- samples/charts/category-chart/data-tooltip/package.json | 4 ++-- .../charts/category-chart/format-specifiers/package.json | 4 ++-- .../category-chart/highlighting-behavior/package.json | 4 ++-- .../charts/category-chart/highlighting-mode/package.json | 4 ++-- .../charts/category-chart/legend-highlighting/package.json | 4 ++-- .../category-chart/line-chart-multiple-sources/package.json | 4 ++-- .../category-chart/line-chart-single-source/package.json | 4 ++-- .../charts/category-chart/line-chart-styling/package.json | 4 ++-- samples/charts/category-chart/marker-options/package.json | 4 ++-- samples/charts/category-chart/overview/package.json | 4 ++-- .../point-chart-multiple-sources/package.json | 4 ++-- .../category-chart/point-chart-single-source/package.json | 4 ++-- .../charts/category-chart/point-chart-styling/package.json | 4 ++-- .../charts/category-chart/selection-matcher/package.json | 4 ++-- samples/charts/category-chart/selection-modes/package.json | 4 ++-- .../category-chart/selection-multiple-modes/package.json | 4 ++-- .../spline-area-multiple-sources/package.json | 4 ++-- .../category-chart/spline-area-single-source/package.json | 4 ++-- .../charts/category-chart/spline-area-styling/package.json | 4 ++-- .../category-chart/spline-multiple-sources/package.json | 4 ++-- .../charts/category-chart/spline-single-source/package.json | 4 ++-- samples/charts/category-chart/spline-styling/package.json | 4 ++-- .../category-chart/step-area-multiple-sources/package.json | 4 ++-- .../category-chart/step-area-single-source/package.json | 4 ++-- .../charts/category-chart/step-area-styling/package.json | 4 ++-- .../category-chart/step-line-multiple-sources/package.json | 4 ++-- .../category-chart/step-line-single-source/package.json | 4 ++-- .../charts/category-chart/step-line-styling/package.json | 4 ++-- samples/charts/category-chart/value-lines/package.json | 4 ++-- samples/charts/dashboard-tile/chart-dashboard/package.json | 4 ++-- .../charts/dashboard-tile/financial-dashboard/package.json | 4 ++-- samples/charts/dashboard-tile/gauge-dashboard/package.json | 4 ++-- .../dashboard-tile/local-data-source-dashboard/package.json | 4 ++-- samples/charts/dashboard-tile/map-dashboard/package.json | 4 ++-- samples/charts/dashboard-tile/pie-dashboard/package.json | 4 ++-- samples/charts/data-chart/annotations-custom/package.json | 4 ++-- .../data-chart/axis-annotations-corner-radius/package.json | 4 ++-- samples/charts/data-chart/axis-label-rotation/package.json | 4 ++-- samples/charts/data-chart/axis-min-max-gap/package.json | 4 ++-- .../data-chart/bar-chart-multiple-sources/package.json | 4 ++-- .../charts/data-chart/bar-chart-overlapping/package.json | 4 ++-- .../charts/data-chart/bar-chart-single-source/package.json | 4 ++-- samples/charts/data-chart/bar-chart-styling/package.json | 4 ++-- .../charts/data-chart/callout-layer-styling/package.json | 4 ++-- .../chart-highlight-filter-datasource/package.json | 4 ++-- .../chart-highlight-filter-multiple-series/package.json | 4 ++-- .../charts/data-chart/chart-highlight-filter/package.json | 4 ++-- .../data-chart/custom-drawing-annotations/package.json | 2 +- samples/charts/data-chart/custom-editing-data/package.json | 2 +- samples/charts/data-chart/dash-array-axes/package.json | 4 ++-- samples/charts/data-chart/dash-array-series/package.json | 4 ++-- samples/charts/data-chart/dash-array-tickmarks/package.json | 4 ++-- samples/charts/data-chart/dash-array-trendline/package.json | 4 ++-- .../data-chart/data-annotation-band-layer/package.json | 4 ++-- .../data-chart/data-annotation-line-layer/package.json | 4 ++-- .../data-annotation-multiple-with-overlay-text/package.json | 4 ++-- .../data-annotation-multiple-with-stocks/package.json | 4 ++-- .../data-chart/data-annotation-rect-layer/package.json | 4 ++-- .../data-chart/data-annotation-slice-layer/package.json | 4 ++-- .../data-chart/data-annotation-strip-layer/package.json | 4 ++-- .../data-legend-grouping-and-highlighting/package.json | 4 ++-- samples/charts/data-chart/data-legend-grouping/package.json | 4 ++-- samples/charts/data-chart/data-legend-styling/package.json | 4 ++-- samples/charts/data-chart/data-legend/package.json | 4 ++-- .../data-tooltip-grouping-and-highlighting/package.json | 4 ++-- .../charts/data-chart/data-tooltip-grouping/package.json | 4 ++-- samples/charts/data-chart/data-tooltip-styling/package.json | 4 ++-- samples/charts/data-chart/data-tooltip/package.json | 4 ++-- .../charts/data-chart/financial-price-series/package.json | 4 ++-- samples/charts/data-chart/format-specifiers/package.json | 4 ++-- samples/charts/data-chart/itemized-bar-chart/package.json | 2 +- .../charts/data-chart/itemized-column-chart/package.json | 2 +- .../data-chart/itemized-stacked-bar-chart/package.json | 2 +- .../data-chart/itemized-stacked-column-chart/package.json | 2 +- .../charts/data-chart/polar-area-chart-styling/package.json | 4 ++-- samples/charts/data-chart/polar-area-chart/package.json | 4 ++-- samples/charts/data-chart/polar-line-chart/package.json | 4 ++-- samples/charts/data-chart/polar-scatter-chart/package.json | 4 ++-- .../charts/data-chart/polar-spline-area-chart/package.json | 4 ++-- samples/charts/data-chart/polar-spline-chart/package.json | 4 ++-- .../data-chart/radial-area-chart-styling/package.json | 4 ++-- samples/charts/data-chart/radial-area-chart/package.json | 4 ++-- .../data-chart/radial-column-chart-selection/package.json | 4 ++-- samples/charts/data-chart/radial-column-chart/package.json | 4 ++-- samples/charts/data-chart/radial-label-mode/package.json | 4 ++-- samples/charts/data-chart/radial-line-chart/package.json | 4 ++-- samples/charts/data-chart/radial-pie-chart/package.json | 4 ++-- .../package.json | 4 ++-- .../radial-proportional-radial-angle-axis/package.json | 4 ++-- samples/charts/data-chart/range-area-chart/package.json | 4 ++-- samples/charts/data-chart/range-bar-chart/package.json | 4 ++-- samples/charts/data-chart/range-column-chart/package.json | 4 ++-- .../data-chart/scatter-bubble-chart-fill-scale/package.json | 4 ++-- .../scatter-bubble-chart-multiple-sources/package.json | 4 ++-- .../scatter-bubble-chart-single-source/package.json | 4 ++-- .../data-chart/scatter-bubble-chart-styling/package.json | 4 ++-- samples/charts/data-chart/scatter-line-chart/package.json | 4 ++-- .../charts/data-chart/scatter-line-threshold/package.json | 2 +- .../charts/data-chart/scatter-marker-options/package.json | 4 ++-- samples/charts/data-chart/scatter-point-chart/package.json | 4 ++-- samples/charts/data-chart/scatter-spline-chart/package.json | 4 ++-- samples/charts/data-chart/selection-matcher/package.json | 4 ++-- .../charts/data-chart/stacked-100-area-chart/package.json | 4 ++-- .../charts/data-chart/stacked-100-bar-chart/package.json | 4 ++-- .../charts/data-chart/stacked-100-column-chart/package.json | 4 ++-- .../charts/data-chart/stacked-100-line-chart/package.json | 4 ++-- .../data-chart/stacked-100-spline-area-chart/package.json | 4 ++-- .../charts/data-chart/stacked-100-spline-chart/package.json | 4 ++-- samples/charts/data-chart/stacked-area-chart/package.json | 4 ++-- samples/charts/data-chart/stacked-bar-chart/package.json | 4 ++-- samples/charts/data-chart/stacked-column-chart/package.json | 4 ++-- samples/charts/data-chart/stacked-line-chart/package.json | 4 ++-- .../data-chart/stacked-spline-area-chart/package.json | 4 ++-- samples/charts/data-chart/stacked-spline-chart/package.json | 4 ++-- samples/charts/data-chart/transition-event/package.json | 4 ++-- samples/charts/data-chart/trendline-layer/package.json | 4 ++-- .../charts/data-chart/user-annotation-layer/package.json | 4 ++-- samples/charts/data-chart/waterfall-chart/package.json | 4 ++-- samples/charts/data-pie-chart/animation-replay/package.json | 4 ++-- samples/charts/data-pie-chart/animation/package.json | 4 ++-- samples/charts/data-pie-chart/highlight-filter/package.json | 4 ++-- samples/charts/data-pie-chart/highlighting/package.json | 4 ++-- samples/charts/data-pie-chart/legend/package.json | 4 ++-- samples/charts/data-pie-chart/others/package.json | 4 ++-- samples/charts/data-pie-chart/overview/package.json | 4 ++-- samples/charts/data-pie-chart/selection/package.json | 4 ++-- samples/charts/doughnut-chart/legend/package.json | 4 ++-- samples/charts/doughnut-chart/overview/package.json | 4 ++-- samples/charts/doughnut-chart/rings/package.json | 4 ++-- .../data-legend-formatting-currency/package.json | 4 ++-- .../financial-chart/data-legend-styling-props/package.json | 4 ++-- samples/charts/financial-chart/data-legend/package.json | 4 ++-- .../data-tooltip-formatting-currency/package.json | 4 ++-- .../financial-chart/data-tooltip-styling-props/package.json | 4 ++-- samples/charts/financial-chart/data-tooltip/package.json | 4 ++-- .../charts/financial-chart/format-specifiers/package.json | 4 ++-- samples/charts/financial-chart/scrollbars/package.json | 4 ++-- samples/charts/pie-chart/legend/package.json | 4 ++-- samples/charts/pie-chart/others/package.json | 4 ++-- samples/charts/pie-chart/overview/package.json | 4 ++-- samples/charts/pie-chart/styling/package.json | 4 ++-- samples/charts/sparkline/display-area/package.json | 4 ++-- samples/charts/sparkline/display-column/package.json | 4 ++-- samples/charts/sparkline/display-lines/package.json | 4 ++-- samples/charts/sparkline/display-winloss/package.json | 4 ++-- samples/charts/sparkline/markers/package.json | 4 ++-- samples/charts/sparkline/normal-range/package.json | 4 ++-- samples/charts/sparkline/trendlines/package.json | 4 ++-- samples/charts/sparkline/unknown-values/package.json | 4 ++-- .../toolbar/actions-built-in-category-chart/package.json | 4 ++-- .../charts/toolbar/actions-built-in-data-chart/package.json | 4 ++-- samples/charts/toolbar/color-editor-support/package.json | 4 ++-- samples/charts/toolbar/custom-tool/package.json | 4 ++-- .../toolbar/layout-actions-for-data-chart/package.json | 4 ++-- .../toolbar/layout-in-vertical-orientation/package.json | 4 ++-- samples/charts/toolbar/theming/package.json | 4 ++-- .../charts/tree-map/highlighting-percent-based/package.json | 4 ++-- samples/charts/tree-map/highlighting/package.json | 4 ++-- samples/charts/tree-map/layout/package.json | 4 ++-- samples/charts/tree-map/overview/package.json | 4 ++-- samples/charts/tree-map/styling/package.json | 4 ++-- samples/grids/data-grid/accessibility/package.json | 2 +- samples/grids/data-grid/binding-data-service/package.json | 2 +- samples/grids/data-grid/binding-live-data/package.json | 4 ++-- samples/grids/data-grid/binding-local-data/package.json | 2 +- samples/grids/data-grid/binding-remote-data/package.json | 2 +- samples/grids/data-grid/cell-activation/package.json | 2 +- samples/grids/data-grid/cell-editing/package.json | 2 +- samples/grids/data-grid/cell-merging/package.json | 2 +- samples/grids/data-grid/cell-selection/package.json | 2 +- samples/grids/data-grid/column-animation/package.json | 2 +- samples/grids/data-grid/column-chooser-picker/package.json | 2 +- samples/grids/data-grid/column-chooser-toolbar/package.json | 2 +- .../grids/data-grid/column-filter-expressions/package.json | 2 +- samples/grids/data-grid/column-filter-operands/package.json | 2 +- samples/grids/data-grid/column-filtering/package.json | 2 +- samples/grids/data-grid/column-moving/package.json | 2 +- samples/grids/data-grid/column-options/package.json | 2 +- samples/grids/data-grid/column-pinning-picker/package.json | 2 +- samples/grids/data-grid/column-pinning-toolbar/package.json | 2 +- samples/grids/data-grid/column-resizing/package.json | 2 +- samples/grids/data-grid/column-scrolling/package.json | 2 +- samples/grids/data-grid/column-sorting/package.json | 2 +- samples/grids/data-grid/column-summaries/package.json | 2 +- samples/grids/data-grid/column-types/package.json | 2 +- samples/grids/data-grid/load-save-layout/package.json | 4 ++-- samples/grids/data-grid/localization/package.json | 2 +- samples/grids/data-grid/overview/package.json | 2 +- samples/grids/data-grid/pager/package.json | 2 +- samples/grids/data-grid/performance/package.json | 2 +- samples/grids/data-grid/row-group-descriptions/package.json | 2 +- samples/grids/data-grid/row-grouping/package.json | 2 +- samples/grids/data-grid/row-highlighting/package.json | 2 +- samples/grids/data-grid/row-paging/package.json | 2 +- samples/grids/data-grid/row-pinning/package.json | 2 +- samples/grids/data-grid/row-selection/package.json | 2 +- samples/grids/data-grid/type-comparison-table/package.json | 2 +- samples/grids/data-grid/type-heatmap-table/package.json | 2 +- samples/grids/data-grid/type-marketing-table/package.json | 2 +- samples/grids/data-grid/type-matrix-table/package.json | 2 +- samples/grids/data-grid/type-periodic-table/package.json | 2 +- samples/grids/grid-lite/column-config-basic/package.json | 6 +++--- samples/grids/grid-lite/column-config-dynamic/package.json | 6 +++--- samples/grids/grid-lite/column-config-headers/package.json | 6 +++--- samples/grids/grid-lite/data-binding/package.json | 6 +++--- .../grids/grid-lite/filtering-config-events/package.json | 6 +++--- .../grids/grid-lite/filtering-config-remote/package.json | 6 +++--- samples/grids/grid-lite/filtering-config/package.json | 6 +++--- samples/grids/grid-lite/overview/package.json | 6 +++--- samples/grids/grid-lite/sort-config-events/package.json | 6 +++--- samples/grids/grid-lite/sort-config-grid/package.json | 6 +++--- samples/grids/grid-lite/sort-config-pipeline/package.json | 6 +++--- samples/grids/grid-lite/sort-config-sample/package.json | 6 +++--- samples/grids/grid-lite/styling-config-themes/package.json | 6 +++--- samples/grids/grid-lite/styling-custom-theme/package.json | 6 +++--- samples/grids/grid/action-strip/package.json | 4 ++-- samples/grids/grid/advanced-filtering-options/package.json | 4 ++-- samples/grids/grid/advanced-filtering-style/package.json | 4 ++-- samples/grids/grid/binding-composite-data/package.json | 4 ++-- samples/grids/grid/binding-crud-data/package.json | 4 ++-- samples/grids/grid/binding-nested-data-1/package.json | 4 ++-- samples/grids/grid/cascading-combo/package.json | 4 ++-- samples/grids/grid/cell-editing-sample/package.json | 4 ++-- samples/grids/grid/cell-editing-styling/package.json | 4 ++-- samples/grids/grid/cell-merge-custom-sample/package.json | 4 ++-- samples/grids/grid/cell-merge/package.json | 4 ++-- samples/grids/grid/cell-selection-mode/package.json | 4 ++-- samples/grids/grid/cell-selection-style/package.json | 4 ++-- samples/grids/grid/change-icons-custom/package.json | 4 ++-- samples/grids/grid/clipboard-operations/package.json | 4 ++-- samples/grids/grid/column-auto-sizing/package.json | 4 ++-- samples/grids/grid/column-collapsible-groups/package.json | 4 ++-- samples/grids/grid/column-data-types/package.json | 4 ++-- samples/grids/grid/column-hiding-options/package.json | 4 ++-- samples/grids/grid/column-hiding-toolbar-style/package.json | 4 ++-- samples/grids/grid/column-hiding-toolbar/package.json | 4 ++-- samples/grids/grid/column-moving-options/package.json | 4 ++-- samples/grids/grid/column-moving-styles/package.json | 4 ++-- samples/grids/grid/column-pinning-both-sides/package.json | 4 ++-- samples/grids/grid/column-pinning-options/package.json | 4 ++-- samples/grids/grid/column-pinning-right-side/package.json | 4 ++-- samples/grids/grid/column-pinning-styles/package.json | 4 ++-- samples/grids/grid/column-pinning/package.json | 4 ++-- samples/grids/grid/column-resize-styling/package.json | 4 ++-- samples/grids/grid/column-resizing/package.json | 4 ++-- samples/grids/grid/column-selection-group/package.json | 4 ++-- samples/grids/grid/column-selection-mode/package.json | 4 ++-- samples/grids/grid/column-selection-styles/package.json | 4 ++-- samples/grids/grid/column-sorting-indicators/package.json | 4 ++-- samples/grids/grid/column-sorting-options/package.json | 4 ++-- samples/grids/grid/column-sorting-style/package.json | 4 ++-- samples/grids/grid/conditional-cell-style-1/package.json | 4 ++-- samples/grids/grid/conditional-cell-style-2/package.json | 4 ++-- samples/grids/grid/conditional-row-selectors/package.json | 4 ++-- samples/grids/grid/custom-context-menu/package.json | 4 ++-- samples/grids/grid/data-batch-editing-actions/package.json | 4 ++-- samples/grids/grid/data-exporting-indicator/package.json | 4 ++-- .../grids/grid/data-performance-virtualization/package.json | 4 ++-- samples/grids/grid/data-searching/package.json | 4 ++-- samples/grids/grid/data-summary-formatter/package.json | 4 ++-- samples/grids/grid/data-summary-options/package.json | 4 ++-- samples/grids/grid/data-summary-template/package.json | 4 ++-- samples/grids/grid/data-validation-style/package.json | 4 ++-- .../grid/data-validator-service-cross-field/package.json | 4 ++-- .../grids/grid/data-validator-service-extended/package.json | 4 ++-- samples/grids/grid/data-validator-service/package.json | 4 ++-- samples/grids/grid/disabled-summaries/package.json | 2 +- samples/grids/grid/editing-columns/package.json | 4 ++-- samples/grids/grid/editing-events/package.json | 4 ++-- samples/grids/grid/editing-excel-style/package.json | 4 ++-- samples/grids/grid/editing-lifecycle/package.json | 4 ++-- samples/grids/grid/excel-exporting/package.json | 4 ++-- .../grids/grid/excel-style-filtering-sample-1/package.json | 4 ++-- .../grids/grid/excel-style-filtering-sample-2/package.json | 4 ++-- .../grids/grid/excel-style-filtering-sample-3/package.json | 4 ++-- samples/grids/grid/excel-style-filtering-style/package.json | 4 ++-- samples/grids/grid/external-advanced-filtering/package.json | 4 ++-- samples/grids/grid/filtering-options/package.json | 4 ++-- samples/grids/grid/filtering-strategy/package.json | 4 ++-- samples/grids/grid/filtering-style/package.json | 4 ++-- samples/grids/grid/finjs/package.json | 4 ++-- samples/grids/grid/groupby-custom/package.json | 4 ++-- samples/grids/grid/groupby-expressions/package.json | 4 ++-- samples/grids/grid/groupby-paging/package.json | 4 ++-- samples/grids/grid/groupby-styling/package.json | 4 ++-- samples/grids/grid/groupby-summary-options/package.json | 4 ++-- samples/grids/grid/groupby-summary-styling/package.json | 4 ++-- samples/grids/grid/infinite-scroll/package.json | 4 ++-- samples/grids/grid/keyboard-custom-navigation/package.json | 4 ++-- samples/grids/grid/keyboard-mrl-navigation/package.json | 4 ++-- samples/grids/grid/layout-display-density/package.json | 4 ++-- samples/grids/grid/localization/package.json | 4 ++-- samples/grids/grid/master-detail/package.json | 4 ++-- samples/grids/grid/multi-cell-selection-mode/package.json | 4 ++-- samples/grids/grid/multi-column-headers-export/package.json | 4 ++-- .../grids/grid/multi-column-headers-overview/package.json | 4 ++-- .../grids/grid/multi-column-headers-styling/package.json | 4 ++-- .../grids/grid/multi-column-headers-template/package.json | 4 ++-- samples/grids/grid/multi-row-layout-options/package.json | 4 ++-- samples/grids/grid/multi-row-layout-style/package.json | 4 ++-- samples/grids/grid/overview/package.json | 4 ++-- samples/grids/grid/paste/package.json | 4 ++-- samples/grids/grid/remote-paging-data/package.json | 4 ++-- samples/grids/grid/remote-paging-grid/package.json | 4 ++-- samples/grids/grid/row-adding/package.json | 4 ++-- samples/grids/grid/row-classes/package.json | 4 ++-- samples/grids/grid/row-drag-base/package.json | 4 ++-- samples/grids/grid/row-editing-options/package.json | 4 ++-- samples/grids/grid/row-editing-style/package.json | 4 ++-- samples/grids/grid/row-paging-basic/package.json | 4 ++-- samples/grids/grid/row-paging-options/package.json | 4 ++-- samples/grids/grid/row-pinning-drag/package.json | 4 ++-- samples/grids/grid/row-pinning-extra-column/package.json | 4 ++-- samples/grids/grid/row-pinning-options/package.json | 4 ++-- samples/grids/grid/row-pinning-style/package.json | 4 ++-- samples/grids/grid/row-reorder/package.json | 4 ++-- samples/grids/grid/row-selection-mode/package.json | 4 ++-- .../grids/grid/row-selection-template-excel/package.json | 4 ++-- .../grids/grid/row-selection-template-numbers/package.json | 4 ++-- samples/grids/grid/row-styles/package.json | 4 ++-- samples/grids/grid/state-persistence-about/package.json | 4 ++-- samples/grids/grid/state-persistence-main/package.json | 4 ++-- samples/grids/grid/styling-custom-CSS/package.json | 4 ++-- samples/grids/grid/toolbar-sample-1/package.json | 4 ++-- samples/grids/grid/toolbar-sample-2/package.json | 4 ++-- samples/grids/grid/toolbar-sample-3/package.json | 4 ++-- samples/grids/grid/toolbar-style/package.json | 4 ++-- samples/grids/hierarchical-grid/action-strip/package.json | 4 ++-- .../advanced-filtering-options/package.json | 4 ++-- .../hierarchical-grid/advanced-filtering-style/package.json | 4 ++-- .../hierarchical-grid/cell-editing-sample/package.json | 4 ++-- .../hierarchical-grid/cell-editing-styling/package.json | 4 ++-- .../hierarchical-grid/cell-merge-custom-sample/package.json | 4 ++-- samples/grids/hierarchical-grid/cell-merge/package.json | 4 ++-- .../hierarchical-grid/cell-selection-mode/package.json | 4 ++-- .../hierarchical-grid/cell-selection-overview/package.json | 4 ++-- .../hierarchical-grid/cell-selection-style/package.json | 4 ++-- .../grids/hierarchical-grid/column-auto-sizing/package.json | 4 ++-- .../column-collapsible-groups/package.json | 4 ++-- .../column-hiding-toolbar-style/package.json | 4 ++-- .../hierarchical-grid/column-hiding-toolbar/package.json | 4 ++-- .../hierarchical-grid/column-moving-options/package.json | 4 ++-- .../hierarchical-grid/column-moving-styles/package.json | 4 ++-- .../column-pinning-both-sides/package.json | 4 ++-- .../hierarchical-grid/column-pinning-options/package.json | 4 ++-- .../column-pinning-right-side/package.json | 4 ++-- .../hierarchical-grid/column-pinning-styles/package.json | 4 ++-- samples/grids/hierarchical-grid/column-pinning/package.json | 4 ++-- .../hierarchical-grid/column-resize-styling/package.json | 4 ++-- .../grids/hierarchical-grid/column-resizing/package.json | 4 ++-- .../hierarchical-grid/column-selection-group/package.json | 4 ++-- .../hierarchical-grid/column-selection-mode/package.json | 4 ++-- .../hierarchical-grid/column-selection-styles/package.json | 4 ++-- .../column-sorting-indicators/package.json | 4 ++-- .../hierarchical-grid/column-sorting-options/package.json | 4 ++-- .../hierarchical-grid/column-sorting-style/package.json | 4 ++-- .../hierarchical-grid/conditional-cell-style-1/package.json | 4 ++-- .../hierarchical-grid/conditional-cell-style-2/package.json | 4 ++-- .../conditional-row-selectors/package.json | 4 ++-- .../grids/hierarchical-grid/custom-filtering/package.json | 4 ++-- .../hierarchical-grid/data-exporting-indicator/package.json | 4 ++-- .../data-performance-virtualization/package.json | 4 ++-- .../hierarchical-grid/data-summary-formatter/package.json | 4 ++-- .../data-summary-options-styling/package.json | 4 ++-- .../hierarchical-grid/data-summary-options/package.json | 4 ++-- .../hierarchical-grid/data-summary-template/package.json | 4 ++-- .../grids/hierarchical-grid/disabled-summaries/package.json | 2 +- .../grids/hierarchical-grid/editing-columns/package.json | 4 ++-- samples/grids/hierarchical-grid/editing-events/package.json | 4 ++-- .../grids/hierarchical-grid/editing-lifecycle/package.json | 4 ++-- .../grids/hierarchical-grid/excel-exporting/package.json | 4 ++-- .../excel-style-filtering-sample-1/package.json | 4 ++-- .../excel-style-filtering-sample-2/package.json | 4 ++-- .../excel-style-filtering-sample-3/package.json | 4 ++-- .../excel-style-filtering-style/package.json | 4 ++-- .../grids/hierarchical-grid/filtering-options/package.json | 4 ++-- .../grids/hierarchical-grid/filtering-style/package.json | 4 ++-- .../hierarchical-grid-options/package.json | 4 ++-- .../hierarchical-grid-paging-style/package.json | 4 ++-- .../hierarchical-grid-styling/package.json | 4 ++-- .../hierarchical-grid/layout-display-density/package.json | 4 ++-- .../multi-column-headers-export/package.json | 4 ++-- .../multi-column-headers-overview/package.json | 4 ++-- .../multi-column-headers-styling/package.json | 4 ++-- .../multi-column-headers-template/package.json | 4 ++-- samples/grids/hierarchical-grid/overview/package.json | 4 ++-- .../hierarchical-grid/remote-paging-hgrid/package.json | 4 ++-- samples/grids/hierarchical-grid/row-adding/package.json | 4 ++-- samples/grids/hierarchical-grid/row-classes/package.json | 4 ++-- samples/grids/hierarchical-grid/row-drag-base/package.json | 4 ++-- .../hierarchical-grid/row-editing-options/package.json | 4 ++-- .../grids/hierarchical-grid/row-editing-style/package.json | 4 ++-- .../hierarchical-grid/row-pinning-extra-column/package.json | 4 ++-- .../hierarchical-grid/row-pinning-options/package.json | 4 ++-- .../grids/hierarchical-grid/row-pinning-style/package.json | 4 ++-- samples/grids/hierarchical-grid/row-reorder/package.json | 4 ++-- .../grids/hierarchical-grid/row-selection-mode/package.json | 4 ++-- .../row-selection-template-numbers/package.json | 4 ++-- samples/grids/hierarchical-grid/row-styles/package.json | 4 ++-- .../hierarchical-grid/state-persistence-about/package.json | 4 ++-- .../hierarchical-grid/state-persistence-main/package.json | 4 ++-- .../grids/hierarchical-grid/toolbar-sample-3/package.json | 4 ++-- .../grids/hierarchical-grid/toolbar-sample-4/package.json | 4 ++-- samples/grids/hierarchical-grid/toolbar-style/package.json | 4 ++-- samples/grids/list/add-list-items/package.json | 2 +- samples/grids/list/list-item-content/package.json | 2 +- samples/grids/list/overview/package.json | 2 +- samples/grids/list/styling/package.json | 2 +- samples/grids/pivot-grid/aggregate-max-sales/package.json | 4 ++-- samples/grids/pivot-grid/aggregate-units-sold/package.json | 4 ++-- samples/grids/pivot-grid/data-selector/package.json | 4 ++-- samples/grids/pivot-grid/features/package.json | 4 ++-- .../grids/pivot-grid/state-persistence-about/package.json | 4 ++-- .../grids/pivot-grid/state-persistence-main/package.json | 4 ++-- samples/grids/pivot-grid/styling/package.json | 4 ++-- samples/grids/tree-grid/action-strip/package.json | 4 ++-- .../grids/tree-grid/advanced-filtering-options/package.json | 4 ++-- .../grids/tree-grid/advanced-filtering-style/package.json | 4 ++-- samples/grids/tree-grid/cell-editing-sample/package.json | 4 ++-- samples/grids/tree-grid/cell-editing-styling/package.json | 4 ++-- .../grids/tree-grid/cell-merge-custom-sample/package.json | 4 ++-- samples/grids/tree-grid/cell-merge/package.json | 4 ++-- samples/grids/tree-grid/cell-selection-mode/package.json | 4 ++-- samples/grids/tree-grid/cell-selection-style/package.json | 4 ++-- samples/grids/tree-grid/clipboard-operations/package.json | 4 ++-- samples/grids/tree-grid/column-auto-sizing/package.json | 4 ++-- .../grids/tree-grid/column-collapsible-groups/package.json | 4 ++-- samples/grids/tree-grid/column-data-types/package.json | 4 ++-- .../tree-grid/column-hiding-toolbar-style/package.json | 4 ++-- samples/grids/tree-grid/column-hiding-toolbar/package.json | 4 ++-- samples/grids/tree-grid/column-moving-options/package.json | 4 ++-- samples/grids/tree-grid/column-moving-styles/package.json | 4 ++-- .../grids/tree-grid/column-pinning-both-sides/package.json | 4 ++-- samples/grids/tree-grid/column-pinning-options/package.json | 4 ++-- .../grids/tree-grid/column-pinning-right-side/package.json | 4 ++-- samples/grids/tree-grid/column-pinning-styles/package.json | 4 ++-- samples/grids/tree-grid/column-pinning-toolbar/package.json | 4 ++-- samples/grids/tree-grid/column-pinning/package.json | 4 ++-- samples/grids/tree-grid/column-resize-styling/package.json | 4 ++-- samples/grids/tree-grid/column-resizing/package.json | 4 ++-- samples/grids/tree-grid/column-selection-group/package.json | 4 ++-- samples/grids/tree-grid/column-selection-mode/package.json | 4 ++-- samples/grids/tree-grid/column-selection-style/package.json | 4 ++-- .../grids/tree-grid/column-selection-styles/package.json | 4 ++-- .../grids/tree-grid/column-sorting-indicators/package.json | 4 ++-- samples/grids/tree-grid/column-sorting-options/package.json | 4 ++-- samples/grids/tree-grid/column-sorting-style/package.json | 4 ++-- .../grids/tree-grid/conditional-cell-style-1/package.json | 4 ++-- .../grids/tree-grid/conditional-cell-style-2/package.json | 4 ++-- .../grids/tree-grid/conditional-row-selectors/package.json | 4 ++-- .../grids/tree-grid/data-exporting-indicator/package.json | 4 ++-- samples/grids/tree-grid/data-searching/package.json | 2 +- samples/grids/tree-grid/data-summary-children/package.json | 4 ++-- samples/grids/tree-grid/data-summary-formatter/package.json | 4 ++-- .../tree-grid/data-summary-options-styling/package.json | 4 ++-- samples/grids/tree-grid/data-summary-options/package.json | 4 ++-- samples/grids/tree-grid/data-summary-template/package.json | 4 ++-- samples/grids/tree-grid/disabled-summaries/package.json | 2 +- samples/grids/tree-grid/editing-columns/package.json | 4 ++-- samples/grids/tree-grid/editing-events/package.json | 4 ++-- samples/grids/tree-grid/editing-lifecycle/package.json | 4 ++-- samples/grids/tree-grid/excel-exporting/package.json | 4 ++-- .../tree-grid/excel-style-filtering-sample-1/package.json | 4 ++-- .../tree-grid/excel-style-filtering-sample-2/package.json | 4 ++-- .../tree-grid/excel-style-filtering-sample-3/package.json | 4 ++-- .../tree-grid/excel-style-filtering-style/package.json | 4 ++-- samples/grids/tree-grid/filtering-options/package.json | 4 ++-- samples/grids/tree-grid/filtering-style/package.json | 4 ++-- .../grids/tree-grid/keyboard-custom-navigation/package.json | 4 ++-- samples/grids/tree-grid/layout-display-density/package.json | 4 ++-- .../grids/tree-grid/multi-cell-selection-mode/package.json | 4 ++-- .../tree-grid/multi-column-headers-export/package.json | 4 ++-- .../tree-grid/multi-column-headers-overview/package.json | 4 ++-- .../tree-grid/multi-column-headers-styling/package.json | 4 ++-- .../tree-grid/multi-column-headers-template/package.json | 4 ++-- samples/grids/tree-grid/overview-styling/package.json | 4 ++-- samples/grids/tree-grid/overview/package.json | 4 ++-- samples/grids/tree-grid/row-adding/package.json | 4 ++-- samples/grids/tree-grid/row-classes/package.json | 4 ++-- samples/grids/tree-grid/row-drag-base/package.json | 4 ++-- samples/grids/tree-grid/row-editing-options/package.json | 4 ++-- samples/grids/tree-grid/row-editing-style/package.json | 4 ++-- samples/grids/tree-grid/row-paging-basic/package.json | 4 ++-- samples/grids/tree-grid/row-paging-options/package.json | 4 ++-- samples/grids/tree-grid/row-paging-style/package.json | 4 ++-- .../grids/tree-grid/row-pinning-extra-column/package.json | 4 ++-- samples/grids/tree-grid/row-pinning-options/package.json | 4 ++-- samples/grids/tree-grid/row-pinning-style/package.json | 4 ++-- samples/grids/tree-grid/row-reorder/package.json | 4 ++-- samples/grids/tree-grid/row-selection-mode/package.json | 4 ++-- .../tree-grid/row-selection-template-excel/package.json | 4 ++-- .../tree-grid/row-selection-template-numbers/package.json | 4 ++-- samples/grids/tree-grid/row-styles/package.json | 4 ++-- .../grids/tree-grid/state-persistence-about/package.json | 4 ++-- samples/grids/tree-grid/state-persistence-main/package.json | 4 ++-- samples/grids/tree-grid/toolbar-sample-1/package.json | 4 ++-- samples/grids/tree-grid/toolbar-sample-2/package.json | 4 ++-- samples/grids/tree-grid/toolbar-sample-3/package.json | 4 ++-- samples/grids/tree-grid/toolbar-sample-4/package.json | 4 ++-- samples/grids/tree-grid/toolbar-style/package.json | 4 ++-- .../grids/tree-grid/using-primary-foreign-keys/package.json | 4 ++-- samples/grids/tree/basic-example/package.json | 2 +- samples/grids/tree/styling/package.json | 2 +- samples/inputs/badge/dot/package.json | 4 ++-- samples/inputs/badge/icon/package.json | 4 ++-- samples/inputs/badge/outlined/package.json | 4 ++-- samples/inputs/badge/overview/package.json | 4 ++-- samples/inputs/badge/shape/package.json | 4 ++-- samples/inputs/badge/size/package.json | 4 ++-- samples/inputs/badge/styling/package.json | 4 ++-- samples/inputs/badge/tailwind-styling/package.json | 4 ++-- samples/inputs/badge/type/package.json | 4 ++-- samples/inputs/badge/variants/package.json | 4 ++-- samples/inputs/button-group/alignment/package.json | 4 ++-- samples/inputs/button-group/interaction-states/package.json | 4 ++-- samples/inputs/button-group/overview/package.json | 4 ++-- samples/inputs/button-group/selection/package.json | 4 ++-- samples/inputs/button-group/size/package.json | 4 ++-- samples/inputs/button-group/states/package.json | 4 ++-- samples/inputs/button-group/styling/package.json | 4 ++-- samples/inputs/button-group/tailwind-styling/package.json | 4 ++-- samples/inputs/button/contained/package.json | 4 ++-- samples/inputs/button/download/package.json | 4 ++-- samples/inputs/button/fab/package.json | 4 ++-- samples/inputs/button/flat/package.json | 4 ++-- samples/inputs/button/interaction-states/package.json | 4 ++-- samples/inputs/button/layout/package.json | 4 ++-- samples/inputs/button/outlined/package.json | 4 ++-- samples/inputs/button/overview/package.json | 4 ++-- samples/inputs/button/size/package.json | 4 ++-- samples/inputs/button/states/package.json | 4 ++-- samples/inputs/button/styling/package.json | 4 ++-- samples/inputs/button/tailwind-styling/package.json | 4 ++-- samples/inputs/checkbox/checking/package.json | 4 ++-- samples/inputs/checkbox/disabled/package.json | 4 ++-- samples/inputs/checkbox/indeterminate/package.json | 4 ++-- samples/inputs/checkbox/label/package.json | 4 ++-- samples/inputs/checkbox/overview/package.json | 4 ++-- samples/inputs/checkbox/styling/package.json | 4 ++-- samples/inputs/chip/multiple/package.json | 4 ++-- samples/inputs/chip/outlined/package.json | 4 ++-- samples/inputs/chip/overview/package.json | 4 ++-- samples/inputs/chip/size/package.json | 4 ++-- samples/inputs/chip/styling/package.json | 4 ++-- samples/inputs/chip/variants/package.json | 4 ++-- .../inputs/circular-progress-indicator/dynamic/package.json | 4 ++-- .../circular-progress-indicator/indeterminate/package.json | 4 ++-- .../inputs/circular-progress-indicator/simple/package.json | 4 ++-- .../inputs/circular-progress-indicator/styling/package.json | 4 ++-- samples/inputs/color-editor/overview/package.json | 4 ++-- samples/inputs/color-picker/alpha/package.json | 2 +- samples/inputs/color-picker/format/package.json | 2 +- samples/inputs/color-picker/input-sizes/package.json | 2 +- samples/inputs/color-picker/input/package.json | 2 +- samples/inputs/color-picker/overview/package.json | 2 +- samples/inputs/color-picker/sizes/package.json | 2 +- samples/inputs/color-picker/states/package.json | 2 +- samples/inputs/color-picker/styling/package.json | 2 +- samples/inputs/color-picker/swatches/package.json | 2 +- samples/inputs/color-picker/tailwind-styling/package.json | 2 +- samples/inputs/color-picker/value/package.json | 2 +- samples/inputs/combo/features/package.json | 4 ++-- samples/inputs/combo/overview/package.json | 4 ++-- samples/inputs/combo/selection/package.json | 4 ++-- samples/inputs/combo/simplified/package.json | 4 ++-- samples/inputs/combo/styling/package.json | 4 ++-- samples/inputs/combo/templates/package.json | 4 ++-- .../input-format-display-format/package.json | 4 ++-- samples/inputs/date-time-input/min-max-value/package.json | 4 ++-- samples/inputs/date-time-input/overview/package.json | 4 ++-- samples/inputs/date-time-input/step-up-down/package.json | 4 ++-- samples/inputs/date-time-input/styling/package.json | 4 ++-- samples/inputs/dropdown/group/package.json | 4 ++-- samples/inputs/dropdown/header/package.json | 4 ++-- samples/inputs/dropdown/item/package.json | 4 ++-- samples/inputs/dropdown/overview/package.json | 4 ++-- samples/inputs/dropdown/position/package.json | 4 ++-- samples/inputs/dropdown/styling/package.json | 4 ++-- samples/inputs/dropdown/target/package.json | 4 ++-- samples/inputs/highlight/helper-text/package.json | 4 ++-- samples/inputs/highlight/overview/package.json | 4 ++-- samples/inputs/highlight/search/package.json | 4 ++-- samples/inputs/highlight/styling/package.json | 4 ++-- samples/inputs/icon-button/size/package.json | 4 ++-- samples/inputs/icon-button/styling/package.json | 4 ++-- samples/inputs/icon-button/variant/package.json | 4 ++-- samples/inputs/input/helper-text/package.json | 4 ++-- samples/inputs/input/overview/package.json | 4 ++-- samples/inputs/input/prefix-suffix/package.json | 4 ++-- samples/inputs/input/size/package.json | 4 ++-- samples/inputs/input/styling/package.json | 4 ++-- .../inputs/linear-progress-indicator/dynamic/package.json | 4 ++-- .../inputs/linear-progress-indicator/simple/package.json | 4 ++-- .../inputs/linear-progress-indicator/striped/package.json | 4 ++-- .../inputs/linear-progress-indicator/styling/package.json | 4 ++-- samples/inputs/linear-progress-indicator/types/package.json | 4 ++-- samples/inputs/mask-input/applying-mask/package.json | 4 ++-- samples/inputs/mask-input/overview/package.json | 4 ++-- samples/inputs/mask-input/value-modes/package.json | 4 ++-- samples/inputs/qr-code/corner-shapes/package.json | 2 +- samples/inputs/qr-code/dot-shapes/package.json | 2 +- samples/inputs/qr-code/error-correction/package.json | 2 +- samples/inputs/qr-code/logo/package.json | 2 +- samples/inputs/qr-code/overview/package.json | 2 +- samples/inputs/qr-code/overview/src/index.tsx | 2 +- samples/inputs/qr-code/size/package.json | 2 +- samples/inputs/qr-code/styling/package.json | 2 +- samples/inputs/qr-code/tailwind-styling/package.json | 2 +- samples/inputs/radio/alignment/package.json | 4 ++-- samples/inputs/radio/disabled/package.json | 4 ++-- samples/inputs/radio/group/package.json | 4 ++-- samples/inputs/radio/invalid/package.json | 4 ++-- samples/inputs/radio/label/package.json | 4 ++-- samples/inputs/radio/styling/package.json | 4 ++-- samples/inputs/rating/basic/package.json | 4 ++-- samples/inputs/rating/custom/package.json | 4 ++-- samples/inputs/rating/empty/package.json | 4 ++-- samples/inputs/rating/single-selection/package.json | 4 ++-- samples/inputs/rating/styling/package.json | 4 ++-- samples/inputs/ripple/button/package.json | 4 ++-- samples/inputs/ripple/color/package.json | 4 ++-- samples/inputs/select/group/package.json | 4 ++-- samples/inputs/select/header/package.json | 4 ++-- samples/inputs/select/item/package.json | 4 ++-- samples/inputs/select/overview/package.json | 4 ++-- samples/inputs/select/styling/package.json | 4 ++-- samples/inputs/slider/constraints/package.json | 4 ++-- samples/inputs/slider/disabled/package.json | 4 ++-- samples/inputs/slider/discrete/package.json | 4 ++-- samples/inputs/slider/labels/package.json | 4 ++-- samples/inputs/slider/overview/package.json | 4 ++-- samples/inputs/slider/styling/package.json | 4 ++-- samples/inputs/slider/tick-labels/package.json | 4 ++-- samples/inputs/slider/ticks/package.json | 4 ++-- samples/inputs/slider/value-format/package.json | 4 ++-- samples/inputs/slider/value/package.json | 4 ++-- samples/inputs/switches/disabled/package.json | 4 ++-- samples/inputs/switches/enabled/package.json | 4 ++-- samples/inputs/switches/layout/package.json | 4 ++-- samples/inputs/switches/overview/package.json | 4 ++-- samples/inputs/switches/selected/package.json | 4 ++-- samples/inputs/switches/styling/package.json | 4 ++-- samples/inputs/switches/tailwind-styling/package.json | 4 ++-- samples/inputs/textarea/form-integration/package.json | 4 ++-- samples/inputs/textarea/overview/package.json | 4 ++-- samples/inputs/textarea/resize/package.json | 4 ++-- samples/inputs/textarea/slots/package.json | 4 ++-- samples/inputs/textarea/styling/package.json | 4 ++-- samples/inputs/tooltip/advanced/package.json | 4 ++-- samples/inputs/tooltip/overview/package.json | 4 ++-- samples/inputs/tooltip/placement/package.json | 4 ++-- samples/inputs/tooltip/rich/package.json | 4 ++-- samples/inputs/tooltip/styling/package.json | 4 ++-- samples/inputs/tooltip/triggers/package.json | 4 ++-- samples/interactions/chat/features/package.json | 4 ++-- samples/interactions/chat/overview/package.json | 4 ++-- samples/interactions/chat/styling/package.json | 4 ++-- samples/interactions/query-builder/overview/package.json | 2 +- samples/interactions/query-builder/template/package.json | 2 +- samples/layouts/accordion/customization/package.json | 4 ++-- samples/layouts/accordion/nested-scenario/package.json | 4 ++-- samples/layouts/accordion/overview/package.json | 4 ++-- .../layouts/accordion/programmatic-expansion/package.json | 4 ++-- samples/layouts/accordion/styling/package.json | 4 ++-- samples/layouts/accordion/tailwind-styling/package.json | 4 ++-- samples/layouts/avatar/image/package.json | 4 ++-- samples/layouts/avatar/overview/package.json | 4 ++-- samples/layouts/avatar/shape/package.json | 4 ++-- samples/layouts/avatar/size/package.json | 4 ++-- samples/layouts/avatar/styling/package.json | 4 ++-- samples/layouts/avatar/tailwind-styling/package.json | 4 ++-- samples/layouts/avatar/variants/package.json | 4 ++-- samples/layouts/breadcrumbs/custom-separator/package.json | 2 +- samples/layouts/breadcrumbs/overview/package.json | 2 +- samples/layouts/breadcrumbs/prefix-suffix/package.json | 2 +- samples/layouts/breadcrumbs/sizes/package.json | 2 +- samples/layouts/breadcrumbs/states/package.json | 2 +- samples/layouts/breadcrumbs/styling/package.json | 2 +- samples/layouts/breadcrumbs/tailwind-styling/package.json | 2 +- samples/layouts/breadcrumbs/wrapping/package.json | 2 +- samples/layouts/card/horizontal/package.json | 4 ++-- samples/layouts/card/overview/package.json | 4 ++-- samples/layouts/card/semi-horizontal/package.json | 4 ++-- samples/layouts/card/styling/package.json | 4 ++-- samples/layouts/carousel/animations/package.json | 4 ++-- samples/layouts/carousel/components/package.json | 4 ++-- samples/layouts/carousel/overview/package.json | 4 ++-- samples/layouts/carousel/thumbnail/package.json | 4 ++-- samples/layouts/divider/dashed/package.json | 4 ++-- samples/layouts/divider/middle/package.json | 4 ++-- samples/layouts/divider/overview/package.json | 4 ++-- samples/layouts/divider/select/package.json | 4 ++-- samples/layouts/divider/vertical/package.json | 4 ++-- samples/layouts/dock-manager/styling/package.json | 2 +- .../expansion-panel/component-customization/package.json | 4 ++-- .../expansion-panel/properties-and-events/package.json | 4 ++-- samples/layouts/expansion-panel/styling/package.json | 4 ++-- samples/layouts/expansion-panel/usage/package.json | 4 ++-- samples/layouts/icon/sizing/package.json | 4 ++-- samples/layouts/icon/styling/package.json | 4 ++-- samples/layouts/splitter/base/package.json | 4 ++-- samples/layouts/splitter/nested/package.json | 4 ++-- samples/layouts/splitter/styling/package.json | 4 ++-- samples/layouts/stepper/animations/package.json | 4 ++-- samples/layouts/stepper/linear/package.json | 4 ++-- samples/layouts/stepper/orientation/package.json | 4 ++-- samples/layouts/stepper/step-height/package.json | 4 ++-- samples/layouts/stepper/steptypes/package.json | 4 ++-- samples/layouts/stepper/styling/package.json | 4 ++-- samples/layouts/tabs/alignment/package.json | 4 ++-- samples/layouts/tabs/overview/package.json | 4 ++-- samples/layouts/tabs/prefix-suffix/package.json | 4 ++-- samples/layouts/tabs/scrolling/package.json | 4 ++-- samples/layouts/tabs/styling/package.json | 4 ++-- samples/layouts/tile-manager/actions/package.json | 4 ++-- samples/layouts/tile-manager/columngap/package.json | 4 ++-- samples/layouts/tile-manager/dragndrop/package.json | 4 ++-- samples/layouts/tile-manager/layout/package.json | 4 ++-- samples/layouts/tile-manager/overview/package.json | 4 ++-- samples/layouts/tile-manager/resize/package.json | 4 ++-- samples/layouts/tile-manager/styling/package.json | 4 ++-- samples/maps/geo-map/display-all-imagery/package.json | 2 +- samples/maps/geo-map/display-azure-imagery/package.json | 2 +- samples/maps/geo-map/display-bing-imagery/package.json | 2 +- samples/menus/nav-bar/overview/package.json | 4 ++-- samples/menus/nav-bar/styling/package.json | 4 ++-- samples/menus/nav-drawer/add-drawer-items/package.json | 4 ++-- samples/menus/nav-drawer/add-mini/package.json | 4 ++-- samples/menus/nav-drawer/add-positions-navbar/package.json | 4 ++-- samples/menus/nav-drawer/styling/package.json | 4 ++-- .../banner/banner-advanced-sample/package.json | 4 ++-- samples/notifications/banner/banner-sample-1/package.json | 4 ++-- samples/notifications/banner/banner-sample-2/package.json | 4 ++-- samples/notifications/banner/banner-styling/package.json | 4 ++-- .../notifications/dialog/closing-variations/package.json | 4 ++-- samples/notifications/dialog/form/package.json | 4 ++-- samples/notifications/dialog/overview/package.json | 4 ++-- samples/notifications/dialog/styling/package.json | 4 ++-- samples/notifications/snackbar/action-text/package.json | 4 ++-- samples/notifications/snackbar/display-time/package.json | 4 ++-- samples/notifications/snackbar/overview/package.json | 4 ++-- samples/notifications/snackbar/styling/package.json | 4 ++-- samples/notifications/toast/overview/package.json | 4 ++-- samples/notifications/toast/properties/package.json | 4 ++-- samples/notifications/toast/styling/package.json | 4 ++-- samples/scheduling/calendar/disabled-dates/package.json | 4 ++-- samples/scheduling/calendar/formatting/package.json | 4 ++-- samples/scheduling/calendar/header/package.json | 4 ++-- samples/scheduling/calendar/multiple-months/package.json | 4 ++-- samples/scheduling/calendar/multiple-selection/package.json | 4 ++-- samples/scheduling/calendar/overview/package.json | 4 ++-- samples/scheduling/calendar/range-selection/package.json | 4 ++-- samples/scheduling/calendar/size/package.json | 4 ++-- samples/scheduling/calendar/special-dates/package.json | 4 ++-- samples/scheduling/calendar/styling/package.json | 4 ++-- samples/scheduling/calendar/week-numbers/package.json | 4 ++-- samples/scheduling/date-picker/dialog-mode/package.json | 4 ++-- samples/scheduling/date-picker/form/package.json | 4 ++-- samples/scheduling/date-picker/format/package.json | 4 ++-- samples/scheduling/date-picker/overview/package.json | 4 ++-- samples/scheduling/date-picker/styling/package.json | 4 ++-- .../scheduling/date-range-picker/custom-ranges/package.json | 4 ++-- samples/scheduling/date-range-picker/form/package.json | 4 ++-- samples/scheduling/date-range-picker/overview/package.json | 4 ++-- samples/scheduling/date-range-picker/slots/package.json | 4 ++-- samples/scheduling/date-range-picker/styling/package.json | 4 ++-- 798 files changed, 1522 insertions(+), 1522 deletions(-) diff --git a/browser/tasks/gulp-samples.js b/browser/tasks/gulp-samples.js index 40eeea4a52..2f6b11de12 100644 --- a/browser/tasks/gulp-samples.js +++ b/browser/tasks/gulp-samples.js @@ -876,11 +876,11 @@ function updateIG(cb) { { version: "19.6.0", name: "igniteui-react-datasources" }, { version: "19.6.0", name: "igniteui-react-dashboards" }, { version: "^1.0.5", name: "igniteui-i18n-resources" }, - { version: "19.7.0", name: "igniteui-react" }, + { version: "19.9.0", name: "igniteui-react" }, // these IG packages are sometimes updated: - { version: "^7.2.1", name: "igniteui-webcomponents" }, + { version: "^7.4.1", name: "igniteui-webcomponents" }, { version: "19.7.0", name: "igniteui-react-dockmanager" }, - { version: "~0.8.0", name: "igniteui-grid-lite" }, + { version: "~0.11.0", name: "igniteui-grid-lite" }, // main react packages { version: "^19.2.0", name: "react" }, { version: "^19.2.0", name: "react-dom" }, diff --git a/samples/charts/category-chart/annotations-all/package.json b/samples/charts/category-chart/annotations-all/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/annotations-all/package.json +++ b/samples/charts/category-chart/annotations-all/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/annotations-callouts/package.json b/samples/charts/category-chart/annotations-callouts/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/annotations-callouts/package.json +++ b/samples/charts/category-chart/annotations-callouts/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/annotations-crosshairs/package.json b/samples/charts/category-chart/annotations-crosshairs/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/annotations-crosshairs/package.json +++ b/samples/charts/category-chart/annotations-crosshairs/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/annotations-custom/package.json b/samples/charts/category-chart/annotations-custom/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/annotations-custom/package.json +++ b/samples/charts/category-chart/annotations-custom/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/annotations-final-value/package.json b/samples/charts/category-chart/annotations-final-value/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/annotations-final-value/package.json +++ b/samples/charts/category-chart/annotations-final-value/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/annotations-highlighting/package.json b/samples/charts/category-chart/annotations-highlighting/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/annotations-highlighting/package.json +++ b/samples/charts/category-chart/annotations-highlighting/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/area-chart-multiple-sources/package.json b/samples/charts/category-chart/area-chart-multiple-sources/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/area-chart-multiple-sources/package.json +++ b/samples/charts/category-chart/area-chart-multiple-sources/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/area-chart-single-source/package.json b/samples/charts/category-chart/area-chart-single-source/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/area-chart-single-source/package.json +++ b/samples/charts/category-chart/area-chart-single-source/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/area-chart-styling/package.json b/samples/charts/category-chart/area-chart-styling/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/area-chart-styling/package.json +++ b/samples/charts/category-chart/area-chart-styling/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/axis-gap/package.json b/samples/charts/category-chart/axis-gap/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/axis-gap/package.json +++ b/samples/charts/category-chart/axis-gap/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/axis-gridlines/package.json b/samples/charts/category-chart/axis-gridlines/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/axis-gridlines/package.json +++ b/samples/charts/category-chart/axis-gridlines/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/axis-inverted/package.json b/samples/charts/category-chart/axis-inverted/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/axis-inverted/package.json +++ b/samples/charts/category-chart/axis-inverted/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/axis-labels/package.json b/samples/charts/category-chart/axis-labels/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/axis-labels/package.json +++ b/samples/charts/category-chart/axis-labels/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/axis-locations/package.json b/samples/charts/category-chart/axis-locations/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/axis-locations/package.json +++ b/samples/charts/category-chart/axis-locations/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/axis-options/package.json b/samples/charts/category-chart/axis-options/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/axis-options/package.json +++ b/samples/charts/category-chart/axis-options/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/axis-overlap/package.json b/samples/charts/category-chart/axis-overlap/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/axis-overlap/package.json +++ b/samples/charts/category-chart/axis-overlap/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/axis-range/package.json b/samples/charts/category-chart/axis-range/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/axis-range/package.json +++ b/samples/charts/category-chart/axis-range/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/axis-tickmarks/package.json b/samples/charts/category-chart/axis-tickmarks/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/axis-tickmarks/package.json +++ b/samples/charts/category-chart/axis-tickmarks/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/axis-titles/package.json b/samples/charts/category-chart/axis-titles/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/axis-titles/package.json +++ b/samples/charts/category-chart/axis-titles/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/chart-highlight-filter/package.json b/samples/charts/category-chart/chart-highlight-filter/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/chart-highlight-filter/package.json +++ b/samples/charts/category-chart/chart-highlight-filter/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/column-chart-multiple-sources/package.json b/samples/charts/category-chart/column-chart-multiple-sources/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/column-chart-multiple-sources/package.json +++ b/samples/charts/category-chart/column-chart-multiple-sources/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/column-chart-single-source/package.json b/samples/charts/category-chart/column-chart-single-source/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/column-chart-single-source/package.json +++ b/samples/charts/category-chart/column-chart-single-source/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/column-chart-styling/package.json b/samples/charts/category-chart/column-chart-styling/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/column-chart-styling/package.json +++ b/samples/charts/category-chart/column-chart-styling/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/column-chart-with-tooltips/package.json b/samples/charts/category-chart/column-chart-with-tooltips/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/column-chart-with-tooltips/package.json +++ b/samples/charts/category-chart/column-chart-with-tooltips/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/custom-selection/package.json b/samples/charts/category-chart/custom-selection/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/custom-selection/package.json +++ b/samples/charts/category-chart/custom-selection/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/data-aggregations/package.json b/samples/charts/category-chart/data-aggregations/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/data-aggregations/package.json +++ b/samples/charts/category-chart/data-aggregations/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/data-filter/package.json b/samples/charts/category-chart/data-filter/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/data-filter/package.json +++ b/samples/charts/category-chart/data-filter/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/data-legend-formatting-decimals/package.json b/samples/charts/category-chart/data-legend-formatting-decimals/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/data-legend-formatting-decimals/package.json +++ b/samples/charts/category-chart/data-legend-formatting-decimals/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/data-legend/package.json b/samples/charts/category-chart/data-legend/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/data-legend/package.json +++ b/samples/charts/category-chart/data-legend/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/data-tooltip-formatting-decimals/package.json b/samples/charts/category-chart/data-tooltip-formatting-decimals/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/data-tooltip-formatting-decimals/package.json +++ b/samples/charts/category-chart/data-tooltip-formatting-decimals/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/data-tooltip-positioning/package.json b/samples/charts/category-chart/data-tooltip-positioning/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/data-tooltip-positioning/package.json +++ b/samples/charts/category-chart/data-tooltip-positioning/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/data-tooltip/package.json b/samples/charts/category-chart/data-tooltip/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/data-tooltip/package.json +++ b/samples/charts/category-chart/data-tooltip/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/format-specifiers/package.json b/samples/charts/category-chart/format-specifiers/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/format-specifiers/package.json +++ b/samples/charts/category-chart/format-specifiers/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/highlighting-behavior/package.json b/samples/charts/category-chart/highlighting-behavior/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/highlighting-behavior/package.json +++ b/samples/charts/category-chart/highlighting-behavior/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/highlighting-mode/package.json b/samples/charts/category-chart/highlighting-mode/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/highlighting-mode/package.json +++ b/samples/charts/category-chart/highlighting-mode/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/legend-highlighting/package.json b/samples/charts/category-chart/legend-highlighting/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/legend-highlighting/package.json +++ b/samples/charts/category-chart/legend-highlighting/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/line-chart-multiple-sources/package.json b/samples/charts/category-chart/line-chart-multiple-sources/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/line-chart-multiple-sources/package.json +++ b/samples/charts/category-chart/line-chart-multiple-sources/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/line-chart-single-source/package.json b/samples/charts/category-chart/line-chart-single-source/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/line-chart-single-source/package.json +++ b/samples/charts/category-chart/line-chart-single-source/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/line-chart-styling/package.json b/samples/charts/category-chart/line-chart-styling/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/line-chart-styling/package.json +++ b/samples/charts/category-chart/line-chart-styling/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/marker-options/package.json b/samples/charts/category-chart/marker-options/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/marker-options/package.json +++ b/samples/charts/category-chart/marker-options/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/overview/package.json b/samples/charts/category-chart/overview/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/overview/package.json +++ b/samples/charts/category-chart/overview/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/point-chart-multiple-sources/package.json b/samples/charts/category-chart/point-chart-multiple-sources/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/point-chart-multiple-sources/package.json +++ b/samples/charts/category-chart/point-chart-multiple-sources/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/point-chart-single-source/package.json b/samples/charts/category-chart/point-chart-single-source/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/point-chart-single-source/package.json +++ b/samples/charts/category-chart/point-chart-single-source/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/point-chart-styling/package.json b/samples/charts/category-chart/point-chart-styling/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/point-chart-styling/package.json +++ b/samples/charts/category-chart/point-chart-styling/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/selection-matcher/package.json b/samples/charts/category-chart/selection-matcher/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/selection-matcher/package.json +++ b/samples/charts/category-chart/selection-matcher/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/selection-modes/package.json b/samples/charts/category-chart/selection-modes/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/selection-modes/package.json +++ b/samples/charts/category-chart/selection-modes/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/selection-multiple-modes/package.json b/samples/charts/category-chart/selection-multiple-modes/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/selection-multiple-modes/package.json +++ b/samples/charts/category-chart/selection-multiple-modes/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/spline-area-multiple-sources/package.json b/samples/charts/category-chart/spline-area-multiple-sources/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/spline-area-multiple-sources/package.json +++ b/samples/charts/category-chart/spline-area-multiple-sources/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/spline-area-single-source/package.json b/samples/charts/category-chart/spline-area-single-source/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/spline-area-single-source/package.json +++ b/samples/charts/category-chart/spline-area-single-source/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/spline-area-styling/package.json b/samples/charts/category-chart/spline-area-styling/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/spline-area-styling/package.json +++ b/samples/charts/category-chart/spline-area-styling/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/spline-multiple-sources/package.json b/samples/charts/category-chart/spline-multiple-sources/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/spline-multiple-sources/package.json +++ b/samples/charts/category-chart/spline-multiple-sources/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/spline-single-source/package.json b/samples/charts/category-chart/spline-single-source/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/spline-single-source/package.json +++ b/samples/charts/category-chart/spline-single-source/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/spline-styling/package.json b/samples/charts/category-chart/spline-styling/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/spline-styling/package.json +++ b/samples/charts/category-chart/spline-styling/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/step-area-multiple-sources/package.json b/samples/charts/category-chart/step-area-multiple-sources/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/step-area-multiple-sources/package.json +++ b/samples/charts/category-chart/step-area-multiple-sources/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/step-area-single-source/package.json b/samples/charts/category-chart/step-area-single-source/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/step-area-single-source/package.json +++ b/samples/charts/category-chart/step-area-single-source/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/step-area-styling/package.json b/samples/charts/category-chart/step-area-styling/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/step-area-styling/package.json +++ b/samples/charts/category-chart/step-area-styling/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/step-line-multiple-sources/package.json b/samples/charts/category-chart/step-line-multiple-sources/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/step-line-multiple-sources/package.json +++ b/samples/charts/category-chart/step-line-multiple-sources/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/step-line-single-source/package.json b/samples/charts/category-chart/step-line-single-source/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/step-line-single-source/package.json +++ b/samples/charts/category-chart/step-line-single-source/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/step-line-styling/package.json b/samples/charts/category-chart/step-line-styling/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/category-chart/step-line-styling/package.json +++ b/samples/charts/category-chart/step-line-styling/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/category-chart/value-lines/package.json b/samples/charts/category-chart/value-lines/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/category-chart/value-lines/package.json +++ b/samples/charts/category-chart/value-lines/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/dashboard-tile/chart-dashboard/package.json b/samples/charts/dashboard-tile/chart-dashboard/package.json index bbfed3ef86..d40ca46b23 100644 --- a/samples/charts/dashboard-tile/chart-dashboard/package.json +++ b/samples/charts/dashboard-tile/chart-dashboard/package.json @@ -14,7 +14,7 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-dashboards": "19.6.0", @@ -24,7 +24,7 @@ "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", "igniteui-react-maps": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/dashboard-tile/financial-dashboard/package.json b/samples/charts/dashboard-tile/financial-dashboard/package.json index 2aa7734773..d252390229 100644 --- a/samples/charts/dashboard-tile/financial-dashboard/package.json +++ b/samples/charts/dashboard-tile/financial-dashboard/package.json @@ -14,7 +14,7 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-dashboards": "19.6.0", @@ -24,7 +24,7 @@ "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", "igniteui-react-maps": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/dashboard-tile/gauge-dashboard/package.json b/samples/charts/dashboard-tile/gauge-dashboard/package.json index 2aa7734773..d252390229 100644 --- a/samples/charts/dashboard-tile/gauge-dashboard/package.json +++ b/samples/charts/dashboard-tile/gauge-dashboard/package.json @@ -14,7 +14,7 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-dashboards": "19.6.0", @@ -24,7 +24,7 @@ "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", "igniteui-react-maps": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/dashboard-tile/local-data-source-dashboard/package.json b/samples/charts/dashboard-tile/local-data-source-dashboard/package.json index 2aa7734773..d252390229 100644 --- a/samples/charts/dashboard-tile/local-data-source-dashboard/package.json +++ b/samples/charts/dashboard-tile/local-data-source-dashboard/package.json @@ -14,7 +14,7 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-dashboards": "19.6.0", @@ -24,7 +24,7 @@ "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", "igniteui-react-maps": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/dashboard-tile/map-dashboard/package.json b/samples/charts/dashboard-tile/map-dashboard/package.json index 2aa7734773..d252390229 100644 --- a/samples/charts/dashboard-tile/map-dashboard/package.json +++ b/samples/charts/dashboard-tile/map-dashboard/package.json @@ -14,7 +14,7 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-dashboards": "19.6.0", @@ -24,7 +24,7 @@ "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", "igniteui-react-maps": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/dashboard-tile/pie-dashboard/package.json b/samples/charts/dashboard-tile/pie-dashboard/package.json index 2aa7734773..d252390229 100644 --- a/samples/charts/dashboard-tile/pie-dashboard/package.json +++ b/samples/charts/dashboard-tile/pie-dashboard/package.json @@ -14,7 +14,7 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-dashboards": "19.6.0", @@ -24,7 +24,7 @@ "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", "igniteui-react-maps": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/annotations-custom/package.json b/samples/charts/data-chart/annotations-custom/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/annotations-custom/package.json +++ b/samples/charts/data-chart/annotations-custom/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/axis-annotations-corner-radius/package.json b/samples/charts/data-chart/axis-annotations-corner-radius/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/axis-annotations-corner-radius/package.json +++ b/samples/charts/data-chart/axis-annotations-corner-radius/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/axis-label-rotation/package.json b/samples/charts/data-chart/axis-label-rotation/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-chart/axis-label-rotation/package.json +++ b/samples/charts/data-chart/axis-label-rotation/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/axis-min-max-gap/package.json b/samples/charts/data-chart/axis-min-max-gap/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/axis-min-max-gap/package.json +++ b/samples/charts/data-chart/axis-min-max-gap/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/bar-chart-multiple-sources/package.json b/samples/charts/data-chart/bar-chart-multiple-sources/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/bar-chart-multiple-sources/package.json +++ b/samples/charts/data-chart/bar-chart-multiple-sources/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/bar-chart-overlapping/package.json b/samples/charts/data-chart/bar-chart-overlapping/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/bar-chart-overlapping/package.json +++ b/samples/charts/data-chart/bar-chart-overlapping/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/bar-chart-single-source/package.json b/samples/charts/data-chart/bar-chart-single-source/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/bar-chart-single-source/package.json +++ b/samples/charts/data-chart/bar-chart-single-source/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/bar-chart-styling/package.json b/samples/charts/data-chart/bar-chart-styling/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/bar-chart-styling/package.json +++ b/samples/charts/data-chart/bar-chart-styling/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/callout-layer-styling/package.json b/samples/charts/data-chart/callout-layer-styling/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/callout-layer-styling/package.json +++ b/samples/charts/data-chart/callout-layer-styling/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/chart-highlight-filter-datasource/package.json b/samples/charts/data-chart/chart-highlight-filter-datasource/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-chart/chart-highlight-filter-datasource/package.json +++ b/samples/charts/data-chart/chart-highlight-filter-datasource/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/chart-highlight-filter-multiple-series/package.json b/samples/charts/data-chart/chart-highlight-filter-multiple-series/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-chart/chart-highlight-filter-multiple-series/package.json +++ b/samples/charts/data-chart/chart-highlight-filter-multiple-series/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/chart-highlight-filter/package.json b/samples/charts/data-chart/chart-highlight-filter/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-chart/chart-highlight-filter/package.json +++ b/samples/charts/data-chart/chart-highlight-filter/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/custom-drawing-annotations/package.json b/samples/charts/data-chart/custom-drawing-annotations/package.json index 6e67380f10..4ba36a141a 100644 --- a/samples/charts/data-chart/custom-drawing-annotations/package.json +++ b/samples/charts/data-chart/custom-drawing-annotations/package.json @@ -12,7 +12,7 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", diff --git a/samples/charts/data-chart/custom-editing-data/package.json b/samples/charts/data-chart/custom-editing-data/package.json index f2134afa71..ea5ad1ba13 100644 --- a/samples/charts/data-chart/custom-editing-data/package.json +++ b/samples/charts/data-chart/custom-editing-data/package.json @@ -12,7 +12,7 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "react": "^19.2.0", diff --git a/samples/charts/data-chart/dash-array-axes/package.json b/samples/charts/data-chart/dash-array-axes/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/dash-array-axes/package.json +++ b/samples/charts/data-chart/dash-array-axes/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/dash-array-series/package.json b/samples/charts/data-chart/dash-array-series/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/dash-array-series/package.json +++ b/samples/charts/data-chart/dash-array-series/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/dash-array-tickmarks/package.json b/samples/charts/data-chart/dash-array-tickmarks/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/dash-array-tickmarks/package.json +++ b/samples/charts/data-chart/dash-array-tickmarks/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/dash-array-trendline/package.json b/samples/charts/data-chart/dash-array-trendline/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/dash-array-trendline/package.json +++ b/samples/charts/data-chart/dash-array-trendline/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/data-annotation-band-layer/package.json b/samples/charts/data-chart/data-annotation-band-layer/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/data-annotation-band-layer/package.json +++ b/samples/charts/data-chart/data-annotation-band-layer/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/data-annotation-line-layer/package.json b/samples/charts/data-chart/data-annotation-line-layer/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/data-annotation-line-layer/package.json +++ b/samples/charts/data-chart/data-annotation-line-layer/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/data-annotation-multiple-with-overlay-text/package.json b/samples/charts/data-chart/data-annotation-multiple-with-overlay-text/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/data-annotation-multiple-with-overlay-text/package.json +++ b/samples/charts/data-chart/data-annotation-multiple-with-overlay-text/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/data-annotation-multiple-with-stocks/package.json b/samples/charts/data-chart/data-annotation-multiple-with-stocks/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/data-annotation-multiple-with-stocks/package.json +++ b/samples/charts/data-chart/data-annotation-multiple-with-stocks/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/data-annotation-rect-layer/package.json b/samples/charts/data-chart/data-annotation-rect-layer/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/data-annotation-rect-layer/package.json +++ b/samples/charts/data-chart/data-annotation-rect-layer/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/data-annotation-slice-layer/package.json b/samples/charts/data-chart/data-annotation-slice-layer/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/data-annotation-slice-layer/package.json +++ b/samples/charts/data-chart/data-annotation-slice-layer/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/data-annotation-strip-layer/package.json b/samples/charts/data-chart/data-annotation-strip-layer/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/data-annotation-strip-layer/package.json +++ b/samples/charts/data-chart/data-annotation-strip-layer/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", 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 index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/data-legend-grouping-and-highlighting/package.json +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/data-legend-grouping/package.json b/samples/charts/data-chart/data-legend-grouping/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/data-legend-grouping/package.json +++ b/samples/charts/data-chart/data-legend-grouping/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/data-legend-styling/package.json b/samples/charts/data-chart/data-legend-styling/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/data-legend-styling/package.json +++ b/samples/charts/data-chart/data-legend-styling/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/data-legend/package.json b/samples/charts/data-chart/data-legend/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/data-legend/package.json +++ b/samples/charts/data-chart/data-legend/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", 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 index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/data-tooltip-grouping/package.json b/samples/charts/data-chart/data-tooltip-grouping/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-chart/data-tooltip-grouping/package.json +++ b/samples/charts/data-chart/data-tooltip-grouping/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/data-tooltip-styling/package.json b/samples/charts/data-chart/data-tooltip-styling/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-chart/data-tooltip-styling/package.json +++ b/samples/charts/data-chart/data-tooltip-styling/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/data-tooltip/package.json b/samples/charts/data-chart/data-tooltip/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/data-tooltip/package.json +++ b/samples/charts/data-chart/data-tooltip/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/financial-price-series/package.json b/samples/charts/data-chart/financial-price-series/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/financial-price-series/package.json +++ b/samples/charts/data-chart/financial-price-series/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/format-specifiers/package.json b/samples/charts/data-chart/format-specifiers/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/format-specifiers/package.json +++ b/samples/charts/data-chart/format-specifiers/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/itemized-bar-chart/package.json b/samples/charts/data-chart/itemized-bar-chart/package.json index 5bb566821d..a9eb3008b5 100644 --- a/samples/charts/data-chart/itemized-bar-chart/package.json +++ b/samples/charts/data-chart/itemized-bar-chart/package.json @@ -16,7 +16,7 @@ "dependencies": { "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/itemized-column-chart/package.json b/samples/charts/data-chart/itemized-column-chart/package.json index 5bb566821d..a9eb3008b5 100644 --- a/samples/charts/data-chart/itemized-column-chart/package.json +++ b/samples/charts/data-chart/itemized-column-chart/package.json @@ -16,7 +16,7 @@ "dependencies": { "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/itemized-stacked-bar-chart/package.json b/samples/charts/data-chart/itemized-stacked-bar-chart/package.json index 5bb566821d..a9eb3008b5 100644 --- a/samples/charts/data-chart/itemized-stacked-bar-chart/package.json +++ b/samples/charts/data-chart/itemized-stacked-bar-chart/package.json @@ -16,7 +16,7 @@ "dependencies": { "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/itemized-stacked-column-chart/package.json b/samples/charts/data-chart/itemized-stacked-column-chart/package.json index 5bb566821d..a9eb3008b5 100644 --- a/samples/charts/data-chart/itemized-stacked-column-chart/package.json +++ b/samples/charts/data-chart/itemized-stacked-column-chart/package.json @@ -16,7 +16,7 @@ "dependencies": { "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/polar-area-chart-styling/package.json b/samples/charts/data-chart/polar-area-chart-styling/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/polar-area-chart-styling/package.json +++ b/samples/charts/data-chart/polar-area-chart-styling/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/polar-area-chart/package.json b/samples/charts/data-chart/polar-area-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/polar-area-chart/package.json +++ b/samples/charts/data-chart/polar-area-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/polar-line-chart/package.json b/samples/charts/data-chart/polar-line-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/polar-line-chart/package.json +++ b/samples/charts/data-chart/polar-line-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/polar-scatter-chart/package.json b/samples/charts/data-chart/polar-scatter-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/polar-scatter-chart/package.json +++ b/samples/charts/data-chart/polar-scatter-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/polar-spline-area-chart/package.json b/samples/charts/data-chart/polar-spline-area-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/polar-spline-area-chart/package.json +++ b/samples/charts/data-chart/polar-spline-area-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/polar-spline-chart/package.json b/samples/charts/data-chart/polar-spline-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/polar-spline-chart/package.json +++ b/samples/charts/data-chart/polar-spline-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/radial-area-chart-styling/package.json b/samples/charts/data-chart/radial-area-chart-styling/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/radial-area-chart-styling/package.json +++ b/samples/charts/data-chart/radial-area-chart-styling/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/radial-area-chart/package.json b/samples/charts/data-chart/radial-area-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/radial-area-chart/package.json +++ b/samples/charts/data-chart/radial-area-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/radial-column-chart-selection/package.json b/samples/charts/data-chart/radial-column-chart-selection/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/radial-column-chart-selection/package.json +++ b/samples/charts/data-chart/radial-column-chart-selection/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/radial-column-chart/package.json b/samples/charts/data-chart/radial-column-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/radial-column-chart/package.json +++ b/samples/charts/data-chart/radial-column-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/radial-label-mode/package.json b/samples/charts/data-chart/radial-label-mode/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-chart/radial-label-mode/package.json +++ b/samples/charts/data-chart/radial-label-mode/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/radial-line-chart/package.json b/samples/charts/data-chart/radial-line-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/radial-line-chart/package.json +++ b/samples/charts/data-chart/radial-line-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/radial-pie-chart/package.json b/samples/charts/data-chart/radial-pie-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/radial-pie-chart/package.json +++ b/samples/charts/data-chart/radial-pie-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/package.json b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/package.json +++ b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/radial-proportional-radial-angle-axis/package.json b/samples/charts/data-chart/radial-proportional-radial-angle-axis/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/radial-proportional-radial-angle-axis/package.json +++ b/samples/charts/data-chart/radial-proportional-radial-angle-axis/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/range-area-chart/package.json b/samples/charts/data-chart/range-area-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/range-area-chart/package.json +++ b/samples/charts/data-chart/range-area-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/range-bar-chart/package.json b/samples/charts/data-chart/range-bar-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/range-bar-chart/package.json +++ b/samples/charts/data-chart/range-bar-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/range-column-chart/package.json b/samples/charts/data-chart/range-column-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/range-column-chart/package.json +++ b/samples/charts/data-chart/range-column-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/package.json b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/package.json +++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/package.json b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/package.json +++ b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/scatter-bubble-chart-single-source/package.json b/samples/charts/data-chart/scatter-bubble-chart-single-source/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/scatter-bubble-chart-single-source/package.json +++ b/samples/charts/data-chart/scatter-bubble-chart-single-source/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/scatter-bubble-chart-styling/package.json b/samples/charts/data-chart/scatter-bubble-chart-styling/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/scatter-bubble-chart-styling/package.json +++ b/samples/charts/data-chart/scatter-bubble-chart-styling/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/scatter-line-chart/package.json b/samples/charts/data-chart/scatter-line-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/scatter-line-chart/package.json +++ b/samples/charts/data-chart/scatter-line-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/scatter-line-threshold/package.json b/samples/charts/data-chart/scatter-line-threshold/package.json index 5bb566821d..a9eb3008b5 100644 --- a/samples/charts/data-chart/scatter-line-threshold/package.json +++ b/samples/charts/data-chart/scatter-line-threshold/package.json @@ -16,7 +16,7 @@ "dependencies": { "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/scatter-marker-options/package.json b/samples/charts/data-chart/scatter-marker-options/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-chart/scatter-marker-options/package.json +++ b/samples/charts/data-chart/scatter-marker-options/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/scatter-point-chart/package.json b/samples/charts/data-chart/scatter-point-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/scatter-point-chart/package.json +++ b/samples/charts/data-chart/scatter-point-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/scatter-spline-chart/package.json b/samples/charts/data-chart/scatter-spline-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/scatter-spline-chart/package.json +++ b/samples/charts/data-chart/scatter-spline-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/selection-matcher/package.json b/samples/charts/data-chart/selection-matcher/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/selection-matcher/package.json +++ b/samples/charts/data-chart/selection-matcher/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/stacked-100-area-chart/package.json b/samples/charts/data-chart/stacked-100-area-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/stacked-100-area-chart/package.json +++ b/samples/charts/data-chart/stacked-100-area-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/stacked-100-bar-chart/package.json b/samples/charts/data-chart/stacked-100-bar-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/stacked-100-bar-chart/package.json +++ b/samples/charts/data-chart/stacked-100-bar-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/stacked-100-column-chart/package.json b/samples/charts/data-chart/stacked-100-column-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/stacked-100-column-chart/package.json +++ b/samples/charts/data-chart/stacked-100-column-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/stacked-100-line-chart/package.json b/samples/charts/data-chart/stacked-100-line-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/stacked-100-line-chart/package.json +++ b/samples/charts/data-chart/stacked-100-line-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/stacked-100-spline-area-chart/package.json b/samples/charts/data-chart/stacked-100-spline-area-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/stacked-100-spline-area-chart/package.json +++ b/samples/charts/data-chart/stacked-100-spline-area-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/stacked-100-spline-chart/package.json b/samples/charts/data-chart/stacked-100-spline-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/stacked-100-spline-chart/package.json +++ b/samples/charts/data-chart/stacked-100-spline-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/stacked-area-chart/package.json b/samples/charts/data-chart/stacked-area-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/stacked-area-chart/package.json +++ b/samples/charts/data-chart/stacked-area-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/stacked-bar-chart/package.json b/samples/charts/data-chart/stacked-bar-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/stacked-bar-chart/package.json +++ b/samples/charts/data-chart/stacked-bar-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/stacked-column-chart/package.json b/samples/charts/data-chart/stacked-column-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/stacked-column-chart/package.json +++ b/samples/charts/data-chart/stacked-column-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/stacked-line-chart/package.json b/samples/charts/data-chart/stacked-line-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/stacked-line-chart/package.json +++ b/samples/charts/data-chart/stacked-line-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/stacked-spline-area-chart/package.json b/samples/charts/data-chart/stacked-spline-area-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/stacked-spline-area-chart/package.json +++ b/samples/charts/data-chart/stacked-spline-area-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/stacked-spline-chart/package.json b/samples/charts/data-chart/stacked-spline-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/stacked-spline-chart/package.json +++ b/samples/charts/data-chart/stacked-spline-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/transition-event/package.json b/samples/charts/data-chart/transition-event/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-chart/transition-event/package.json +++ b/samples/charts/data-chart/transition-event/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/trendline-layer/package.json b/samples/charts/data-chart/trendline-layer/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/trendline-layer/package.json +++ b/samples/charts/data-chart/trendline-layer/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/user-annotation-layer/package.json b/samples/charts/data-chart/user-annotation-layer/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-chart/user-annotation-layer/package.json +++ b/samples/charts/data-chart/user-annotation-layer/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-chart/waterfall-chart/package.json b/samples/charts/data-chart/waterfall-chart/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-chart/waterfall-chart/package.json +++ b/samples/charts/data-chart/waterfall-chart/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-pie-chart/animation-replay/package.json b/samples/charts/data-pie-chart/animation-replay/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-pie-chart/animation-replay/package.json +++ b/samples/charts/data-pie-chart/animation-replay/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-pie-chart/animation/package.json b/samples/charts/data-pie-chart/animation/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-pie-chart/animation/package.json +++ b/samples/charts/data-pie-chart/animation/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-pie-chart/highlight-filter/package.json b/samples/charts/data-pie-chart/highlight-filter/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-pie-chart/highlight-filter/package.json +++ b/samples/charts/data-pie-chart/highlight-filter/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-pie-chart/highlighting/package.json b/samples/charts/data-pie-chart/highlighting/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-pie-chart/highlighting/package.json +++ b/samples/charts/data-pie-chart/highlighting/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-pie-chart/legend/package.json b/samples/charts/data-pie-chart/legend/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-pie-chart/legend/package.json +++ b/samples/charts/data-pie-chart/legend/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-pie-chart/others/package.json b/samples/charts/data-pie-chart/others/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-pie-chart/others/package.json +++ b/samples/charts/data-pie-chart/others/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-pie-chart/overview/package.json b/samples/charts/data-pie-chart/overview/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/data-pie-chart/overview/package.json +++ b/samples/charts/data-pie-chart/overview/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/data-pie-chart/selection/package.json b/samples/charts/data-pie-chart/selection/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/data-pie-chart/selection/package.json +++ b/samples/charts/data-pie-chart/selection/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/doughnut-chart/legend/package.json b/samples/charts/doughnut-chart/legend/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/doughnut-chart/legend/package.json +++ b/samples/charts/doughnut-chart/legend/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/doughnut-chart/overview/package.json b/samples/charts/doughnut-chart/overview/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/doughnut-chart/overview/package.json +++ b/samples/charts/doughnut-chart/overview/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/doughnut-chart/rings/package.json b/samples/charts/doughnut-chart/rings/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/doughnut-chart/rings/package.json +++ b/samples/charts/doughnut-chart/rings/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/financial-chart/data-legend-formatting-currency/package.json b/samples/charts/financial-chart/data-legend-formatting-currency/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/financial-chart/data-legend-formatting-currency/package.json +++ b/samples/charts/financial-chart/data-legend-formatting-currency/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/financial-chart/data-legend-styling-props/package.json b/samples/charts/financial-chart/data-legend-styling-props/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/financial-chart/data-legend-styling-props/package.json +++ b/samples/charts/financial-chart/data-legend-styling-props/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/financial-chart/data-legend/package.json b/samples/charts/financial-chart/data-legend/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/financial-chart/data-legend/package.json +++ b/samples/charts/financial-chart/data-legend/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/financial-chart/data-tooltip-formatting-currency/package.json b/samples/charts/financial-chart/data-tooltip-formatting-currency/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/financial-chart/data-tooltip-formatting-currency/package.json +++ b/samples/charts/financial-chart/data-tooltip-formatting-currency/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/financial-chart/data-tooltip-styling-props/package.json b/samples/charts/financial-chart/data-tooltip-styling-props/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/financial-chart/data-tooltip-styling-props/package.json +++ b/samples/charts/financial-chart/data-tooltip-styling-props/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/financial-chart/data-tooltip/package.json b/samples/charts/financial-chart/data-tooltip/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/financial-chart/data-tooltip/package.json +++ b/samples/charts/financial-chart/data-tooltip/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/financial-chart/format-specifiers/package.json b/samples/charts/financial-chart/format-specifiers/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/financial-chart/format-specifiers/package.json +++ b/samples/charts/financial-chart/format-specifiers/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/financial-chart/scrollbars/package.json b/samples/charts/financial-chart/scrollbars/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/financial-chart/scrollbars/package.json +++ b/samples/charts/financial-chart/scrollbars/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/pie-chart/legend/package.json b/samples/charts/pie-chart/legend/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/pie-chart/legend/package.json +++ b/samples/charts/pie-chart/legend/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/pie-chart/others/package.json b/samples/charts/pie-chart/others/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/pie-chart/others/package.json +++ b/samples/charts/pie-chart/others/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/pie-chart/overview/package.json b/samples/charts/pie-chart/overview/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/pie-chart/overview/package.json +++ b/samples/charts/pie-chart/overview/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/pie-chart/styling/package.json b/samples/charts/pie-chart/styling/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/pie-chart/styling/package.json +++ b/samples/charts/pie-chart/styling/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/sparkline/display-area/package.json b/samples/charts/sparkline/display-area/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/sparkline/display-area/package.json +++ b/samples/charts/sparkline/display-area/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/sparkline/display-column/package.json b/samples/charts/sparkline/display-column/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/sparkline/display-column/package.json +++ b/samples/charts/sparkline/display-column/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/sparkline/display-lines/package.json b/samples/charts/sparkline/display-lines/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/sparkline/display-lines/package.json +++ b/samples/charts/sparkline/display-lines/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/sparkline/display-winloss/package.json b/samples/charts/sparkline/display-winloss/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/sparkline/display-winloss/package.json +++ b/samples/charts/sparkline/display-winloss/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/sparkline/markers/package.json b/samples/charts/sparkline/markers/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/sparkline/markers/package.json +++ b/samples/charts/sparkline/markers/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/sparkline/normal-range/package.json b/samples/charts/sparkline/normal-range/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/sparkline/normal-range/package.json +++ b/samples/charts/sparkline/normal-range/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/sparkline/trendlines/package.json b/samples/charts/sparkline/trendlines/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/sparkline/trendlines/package.json +++ b/samples/charts/sparkline/trendlines/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/sparkline/unknown-values/package.json b/samples/charts/sparkline/unknown-values/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/sparkline/unknown-values/package.json +++ b/samples/charts/sparkline/unknown-values/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/toolbar/actions-built-in-category-chart/package.json b/samples/charts/toolbar/actions-built-in-category-chart/package.json index d38c106eb7..beef343a40 100644 --- a/samples/charts/toolbar/actions-built-in-category-chart/package.json +++ b/samples/charts/toolbar/actions-built-in-category-chart/package.json @@ -14,13 +14,13 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/toolbar/actions-built-in-data-chart/package.json b/samples/charts/toolbar/actions-built-in-data-chart/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/toolbar/actions-built-in-data-chart/package.json +++ b/samples/charts/toolbar/actions-built-in-data-chart/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/toolbar/color-editor-support/package.json b/samples/charts/toolbar/color-editor-support/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/toolbar/color-editor-support/package.json +++ b/samples/charts/toolbar/color-editor-support/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/toolbar/custom-tool/package.json b/samples/charts/toolbar/custom-tool/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/toolbar/custom-tool/package.json +++ b/samples/charts/toolbar/custom-tool/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/toolbar/layout-actions-for-data-chart/package.json b/samples/charts/toolbar/layout-actions-for-data-chart/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/toolbar/layout-actions-for-data-chart/package.json +++ b/samples/charts/toolbar/layout-actions-for-data-chart/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/toolbar/layout-in-vertical-orientation/package.json b/samples/charts/toolbar/layout-in-vertical-orientation/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/toolbar/layout-in-vertical-orientation/package.json +++ b/samples/charts/toolbar/layout-in-vertical-orientation/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/toolbar/theming/package.json b/samples/charts/toolbar/theming/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/toolbar/theming/package.json +++ b/samples/charts/toolbar/theming/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/tree-map/highlighting-percent-based/package.json b/samples/charts/tree-map/highlighting-percent-based/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/tree-map/highlighting-percent-based/package.json +++ b/samples/charts/tree-map/highlighting-percent-based/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/tree-map/highlighting/package.json b/samples/charts/tree-map/highlighting/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/tree-map/highlighting/package.json +++ b/samples/charts/tree-map/highlighting/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/tree-map/layout/package.json b/samples/charts/tree-map/layout/package.json index 1d25861c4a..8fee5d470e 100644 --- a/samples/charts/tree-map/layout/package.json +++ b/samples/charts/tree-map/layout/package.json @@ -14,12 +14,12 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/tree-map/overview/package.json b/samples/charts/tree-map/overview/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/tree-map/overview/package.json +++ b/samples/charts/tree-map/overview/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/charts/tree-map/styling/package.json b/samples/charts/tree-map/styling/package.json index 30d54efef7..7042a74d10 100644 --- a/samples/charts/tree-map/styling/package.json +++ b/samples/charts/tree-map/styling/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/data-grid/accessibility/package.json b/samples/grids/data-grid/accessibility/package.json index 5ecf124493..53a5d227e8 100644 --- a/samples/grids/data-grid/accessibility/package.json +++ b/samples/grids/data-grid/accessibility/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/binding-data-service/package.json b/samples/grids/data-grid/binding-data-service/package.json index 04c4f0bb35..f86bb3cb96 100644 --- a/samples/grids/data-grid/binding-data-service/package.json +++ b/samples/grids/data-grid/binding-data-service/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/binding-live-data/package.json b/samples/grids/data-grid/binding-live-data/package.json index 6151b0777c..9dbe965e48 100644 --- a/samples/grids/data-grid/binding-live-data/package.json +++ b/samples/grids/data-grid/binding-live-data/package.json @@ -13,13 +13,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/binding-local-data/package.json b/samples/grids/data-grid/binding-local-data/package.json index 3954bb43f6..34852a77ee 100644 --- a/samples/grids/data-grid/binding-local-data/package.json +++ b/samples/grids/data-grid/binding-local-data/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/binding-remote-data/package.json b/samples/grids/data-grid/binding-remote-data/package.json index 867b21818a..723e58add9 100644 --- a/samples/grids/data-grid/binding-remote-data/package.json +++ b/samples/grids/data-grid/binding-remote-data/package.json @@ -17,7 +17,7 @@ "igniteui-react-datasources": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/cell-activation/package.json b/samples/grids/data-grid/cell-activation/package.json index aae2ab0c86..427054e967 100644 --- a/samples/grids/data-grid/cell-activation/package.json +++ b/samples/grids/data-grid/cell-activation/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/cell-editing/package.json b/samples/grids/data-grid/cell-editing/package.json index 55c023f43b..4d00158176 100644 --- a/samples/grids/data-grid/cell-editing/package.json +++ b/samples/grids/data-grid/cell-editing/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/cell-merging/package.json b/samples/grids/data-grid/cell-merging/package.json index 3a7be65d0e..d6629314fb 100644 --- a/samples/grids/data-grid/cell-merging/package.json +++ b/samples/grids/data-grid/cell-merging/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/cell-selection/package.json b/samples/grids/data-grid/cell-selection/package.json index a35b17e764..246725c4ef 100644 --- a/samples/grids/data-grid/cell-selection/package.json +++ b/samples/grids/data-grid/cell-selection/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/column-animation/package.json b/samples/grids/data-grid/column-animation/package.json index ae47377342..db8bde7169 100644 --- a/samples/grids/data-grid/column-animation/package.json +++ b/samples/grids/data-grid/column-animation/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/column-chooser-picker/package.json b/samples/grids/data-grid/column-chooser-picker/package.json index 2430941457..2713b793ab 100644 --- a/samples/grids/data-grid/column-chooser-picker/package.json +++ b/samples/grids/data-grid/column-chooser-picker/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/column-chooser-toolbar/package.json b/samples/grids/data-grid/column-chooser-toolbar/package.json index 743afa93af..cd7022dac4 100644 --- a/samples/grids/data-grid/column-chooser-toolbar/package.json +++ b/samples/grids/data-grid/column-chooser-toolbar/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/column-filter-expressions/package.json b/samples/grids/data-grid/column-filter-expressions/package.json index 17a7f989cc..c157bbb784 100644 --- a/samples/grids/data-grid/column-filter-expressions/package.json +++ b/samples/grids/data-grid/column-filter-expressions/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/column-filter-operands/package.json b/samples/grids/data-grid/column-filter-operands/package.json index 804edc0f2b..41bc8df5e9 100644 --- a/samples/grids/data-grid/column-filter-operands/package.json +++ b/samples/grids/data-grid/column-filter-operands/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/column-filtering/package.json b/samples/grids/data-grid/column-filtering/package.json index d016165c75..bf85747401 100644 --- a/samples/grids/data-grid/column-filtering/package.json +++ b/samples/grids/data-grid/column-filtering/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/column-moving/package.json b/samples/grids/data-grid/column-moving/package.json index 6fb5841be5..a8b6b30e49 100644 --- a/samples/grids/data-grid/column-moving/package.json +++ b/samples/grids/data-grid/column-moving/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/column-options/package.json b/samples/grids/data-grid/column-options/package.json index c1c54708c4..37586f9460 100644 --- a/samples/grids/data-grid/column-options/package.json +++ b/samples/grids/data-grid/column-options/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/column-pinning-picker/package.json b/samples/grids/data-grid/column-pinning-picker/package.json index e69536d89f..c8eba1ee05 100644 --- a/samples/grids/data-grid/column-pinning-picker/package.json +++ b/samples/grids/data-grid/column-pinning-picker/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/column-pinning-toolbar/package.json b/samples/grids/data-grid/column-pinning-toolbar/package.json index 56eaf73166..1d4dc468d1 100644 --- a/samples/grids/data-grid/column-pinning-toolbar/package.json +++ b/samples/grids/data-grid/column-pinning-toolbar/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/column-resizing/package.json b/samples/grids/data-grid/column-resizing/package.json index f7f9590d70..1e05668d87 100644 --- a/samples/grids/data-grid/column-resizing/package.json +++ b/samples/grids/data-grid/column-resizing/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/column-scrolling/package.json b/samples/grids/data-grid/column-scrolling/package.json index 8ca4e156e9..d7f35e2c5d 100644 --- a/samples/grids/data-grid/column-scrolling/package.json +++ b/samples/grids/data-grid/column-scrolling/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/column-sorting/package.json b/samples/grids/data-grid/column-sorting/package.json index 6a39969082..11c1826916 100644 --- a/samples/grids/data-grid/column-sorting/package.json +++ b/samples/grids/data-grid/column-sorting/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/column-summaries/package.json b/samples/grids/data-grid/column-summaries/package.json index 4a5255b8f0..0c99cd691c 100644 --- a/samples/grids/data-grid/column-summaries/package.json +++ b/samples/grids/data-grid/column-summaries/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/column-types/package.json b/samples/grids/data-grid/column-types/package.json index 95c735228b..3c777450ee 100644 --- a/samples/grids/data-grid/column-types/package.json +++ b/samples/grids/data-grid/column-types/package.json @@ -17,7 +17,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/load-save-layout/package.json b/samples/grids/data-grid/load-save-layout/package.json index 4cecf115aa..5983a4395c 100644 --- a/samples/grids/data-grid/load-save-layout/package.json +++ b/samples/grids/data-grid/load-save-layout/package.json @@ -13,13 +13,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/localization/package.json b/samples/grids/data-grid/localization/package.json index 75a6a772e1..159d26298f 100644 --- a/samples/grids/data-grid/localization/package.json +++ b/samples/grids/data-grid/localization/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/overview/package.json b/samples/grids/data-grid/overview/package.json index f7f5ddbd48..18efecd9ca 100644 --- a/samples/grids/data-grid/overview/package.json +++ b/samples/grids/data-grid/overview/package.json @@ -17,7 +17,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/pager/package.json b/samples/grids/data-grid/pager/package.json index 9c2a97b507..90ecdd9175 100644 --- a/samples/grids/data-grid/pager/package.json +++ b/samples/grids/data-grid/pager/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/performance/package.json b/samples/grids/data-grid/performance/package.json index e2405af8eb..1840b70585 100644 --- a/samples/grids/data-grid/performance/package.json +++ b/samples/grids/data-grid/performance/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/row-group-descriptions/package.json b/samples/grids/data-grid/row-group-descriptions/package.json index 3f02eca65c..4c2db9ba17 100644 --- a/samples/grids/data-grid/row-group-descriptions/package.json +++ b/samples/grids/data-grid/row-group-descriptions/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/row-grouping/package.json b/samples/grids/data-grid/row-grouping/package.json index 3f02eca65c..4c2db9ba17 100644 --- a/samples/grids/data-grid/row-grouping/package.json +++ b/samples/grids/data-grid/row-grouping/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/row-highlighting/package.json b/samples/grids/data-grid/row-highlighting/package.json index 258303670a..32c35bf3d1 100644 --- a/samples/grids/data-grid/row-highlighting/package.json +++ b/samples/grids/data-grid/row-highlighting/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/row-paging/package.json b/samples/grids/data-grid/row-paging/package.json index dd46ec36a0..30a0cef63b 100644 --- a/samples/grids/data-grid/row-paging/package.json +++ b/samples/grids/data-grid/row-paging/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/row-pinning/package.json b/samples/grids/data-grid/row-pinning/package.json index 6770024baf..cfb37f22f9 100644 --- a/samples/grids/data-grid/row-pinning/package.json +++ b/samples/grids/data-grid/row-pinning/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/row-selection/package.json b/samples/grids/data-grid/row-selection/package.json index f6ff695b0d..6742afc1dd 100644 --- a/samples/grids/data-grid/row-selection/package.json +++ b/samples/grids/data-grid/row-selection/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/type-comparison-table/package.json b/samples/grids/data-grid/type-comparison-table/package.json index 41320259c3..d217fc0add 100644 --- a/samples/grids/data-grid/type-comparison-table/package.json +++ b/samples/grids/data-grid/type-comparison-table/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/type-heatmap-table/package.json b/samples/grids/data-grid/type-heatmap-table/package.json index 06c047caf8..97120480eb 100644 --- a/samples/grids/data-grid/type-heatmap-table/package.json +++ b/samples/grids/data-grid/type-heatmap-table/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/type-marketing-table/package.json b/samples/grids/data-grid/type-marketing-table/package.json index 9483f729af..677f2e1258 100644 --- a/samples/grids/data-grid/type-marketing-table/package.json +++ b/samples/grids/data-grid/type-marketing-table/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/type-matrix-table/package.json b/samples/grids/data-grid/type-matrix-table/package.json index ef410564dc..b9ff23c04f 100644 --- a/samples/grids/data-grid/type-matrix-table/package.json +++ b/samples/grids/data-grid/type-matrix-table/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/data-grid/type-periodic-table/package.json b/samples/grids/data-grid/type-periodic-table/package.json index 6ff7bc47d7..c75a3a6ca6 100644 --- a/samples/grids/data-grid/type-periodic-table/package.json +++ b/samples/grids/data-grid/type-periodic-table/package.json @@ -16,7 +16,7 @@ "igniteui-react-data-grids": "19.6.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/grids/grid-lite/column-config-basic/package.json b/samples/grids/grid-lite/column-config-basic/package.json index 9f4ee05506..f9ada35396 100644 --- a/samples/grids/grid-lite/column-config-basic/package.json +++ b/samples/grids/grid-lite/column-config-basic/package.json @@ -14,9 +14,9 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-grid-lite": "~0.8.0", - "igniteui-react": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-grid-lite": "~0.11.0", + "igniteui-react": "19.9.0", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid-lite/column-config-dynamic/package.json b/samples/grids/grid-lite/column-config-dynamic/package.json index 9f4ee05506..f9ada35396 100644 --- a/samples/grids/grid-lite/column-config-dynamic/package.json +++ b/samples/grids/grid-lite/column-config-dynamic/package.json @@ -14,9 +14,9 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-grid-lite": "~0.8.0", - "igniteui-react": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-grid-lite": "~0.11.0", + "igniteui-react": "19.9.0", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid-lite/column-config-headers/package.json b/samples/grids/grid-lite/column-config-headers/package.json index 9f4ee05506..f9ada35396 100644 --- a/samples/grids/grid-lite/column-config-headers/package.json +++ b/samples/grids/grid-lite/column-config-headers/package.json @@ -14,9 +14,9 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-grid-lite": "~0.8.0", - "igniteui-react": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-grid-lite": "~0.11.0", + "igniteui-react": "19.9.0", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid-lite/data-binding/package.json b/samples/grids/grid-lite/data-binding/package.json index 9f4ee05506..f9ada35396 100644 --- a/samples/grids/grid-lite/data-binding/package.json +++ b/samples/grids/grid-lite/data-binding/package.json @@ -14,9 +14,9 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-grid-lite": "~0.8.0", - "igniteui-react": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-grid-lite": "~0.11.0", + "igniteui-react": "19.9.0", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid-lite/filtering-config-events/package.json b/samples/grids/grid-lite/filtering-config-events/package.json index 9f4ee05506..f9ada35396 100644 --- a/samples/grids/grid-lite/filtering-config-events/package.json +++ b/samples/grids/grid-lite/filtering-config-events/package.json @@ -14,9 +14,9 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-grid-lite": "~0.8.0", - "igniteui-react": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-grid-lite": "~0.11.0", + "igniteui-react": "19.9.0", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid-lite/filtering-config-remote/package.json b/samples/grids/grid-lite/filtering-config-remote/package.json index 9f4ee05506..f9ada35396 100644 --- a/samples/grids/grid-lite/filtering-config-remote/package.json +++ b/samples/grids/grid-lite/filtering-config-remote/package.json @@ -14,9 +14,9 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-grid-lite": "~0.8.0", - "igniteui-react": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-grid-lite": "~0.11.0", + "igniteui-react": "19.9.0", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid-lite/filtering-config/package.json b/samples/grids/grid-lite/filtering-config/package.json index 9f4ee05506..f9ada35396 100644 --- a/samples/grids/grid-lite/filtering-config/package.json +++ b/samples/grids/grid-lite/filtering-config/package.json @@ -14,9 +14,9 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-grid-lite": "~0.8.0", - "igniteui-react": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-grid-lite": "~0.11.0", + "igniteui-react": "19.9.0", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid-lite/overview/package.json b/samples/grids/grid-lite/overview/package.json index 9f4ee05506..f9ada35396 100644 --- a/samples/grids/grid-lite/overview/package.json +++ b/samples/grids/grid-lite/overview/package.json @@ -14,9 +14,9 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-grid-lite": "~0.8.0", - "igniteui-react": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-grid-lite": "~0.11.0", + "igniteui-react": "19.9.0", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid-lite/sort-config-events/package.json b/samples/grids/grid-lite/sort-config-events/package.json index 9f4ee05506..f9ada35396 100644 --- a/samples/grids/grid-lite/sort-config-events/package.json +++ b/samples/grids/grid-lite/sort-config-events/package.json @@ -14,9 +14,9 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-grid-lite": "~0.8.0", - "igniteui-react": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-grid-lite": "~0.11.0", + "igniteui-react": "19.9.0", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid-lite/sort-config-grid/package.json b/samples/grids/grid-lite/sort-config-grid/package.json index 9f4ee05506..f9ada35396 100644 --- a/samples/grids/grid-lite/sort-config-grid/package.json +++ b/samples/grids/grid-lite/sort-config-grid/package.json @@ -14,9 +14,9 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-grid-lite": "~0.8.0", - "igniteui-react": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-grid-lite": "~0.11.0", + "igniteui-react": "19.9.0", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid-lite/sort-config-pipeline/package.json b/samples/grids/grid-lite/sort-config-pipeline/package.json index 9f4ee05506..f9ada35396 100644 --- a/samples/grids/grid-lite/sort-config-pipeline/package.json +++ b/samples/grids/grid-lite/sort-config-pipeline/package.json @@ -14,9 +14,9 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-grid-lite": "~0.8.0", - "igniteui-react": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-grid-lite": "~0.11.0", + "igniteui-react": "19.9.0", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid-lite/sort-config-sample/package.json b/samples/grids/grid-lite/sort-config-sample/package.json index 9f4ee05506..f9ada35396 100644 --- a/samples/grids/grid-lite/sort-config-sample/package.json +++ b/samples/grids/grid-lite/sort-config-sample/package.json @@ -14,9 +14,9 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-grid-lite": "~0.8.0", - "igniteui-react": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-grid-lite": "~0.11.0", + "igniteui-react": "19.9.0", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid-lite/styling-config-themes/package.json b/samples/grids/grid-lite/styling-config-themes/package.json index 0a2800e909..47fd749fe0 100644 --- a/samples/grids/grid-lite/styling-config-themes/package.json +++ b/samples/grids/grid-lite/styling-config-themes/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-grid-lite": "~0.8.0", - "igniteui-react": "19.7.0", + "igniteui-grid-lite": "~0.11.0", + "igniteui-react": "19.9.0", "igniteui-theming": "^25.0.1", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid-lite/styling-custom-theme/package.json b/samples/grids/grid-lite/styling-custom-theme/package.json index b2d6f09700..b5268de9d3 100644 --- a/samples/grids/grid-lite/styling-custom-theme/package.json +++ b/samples/grids/grid-lite/styling-custom-theme/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-grid-lite": "~0.8.0", - "igniteui-react": "19.7.0", + "igniteui-grid-lite": "~0.11.0", + "igniteui-react": "19.9.0", "igniteui-theming": "^25.0.1", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/action-strip/package.json b/samples/grids/grid/action-strip/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/action-strip/package.json +++ b/samples/grids/grid/action-strip/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/advanced-filtering-options/package.json b/samples/grids/grid/advanced-filtering-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/advanced-filtering-options/package.json +++ b/samples/grids/grid/advanced-filtering-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/advanced-filtering-style/package.json b/samples/grids/grid/advanced-filtering-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/advanced-filtering-style/package.json +++ b/samples/grids/grid/advanced-filtering-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/binding-composite-data/package.json b/samples/grids/grid/binding-composite-data/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/binding-composite-data/package.json +++ b/samples/grids/grid/binding-composite-data/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/binding-crud-data/package.json b/samples/grids/grid/binding-crud-data/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/binding-crud-data/package.json +++ b/samples/grids/grid/binding-crud-data/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/binding-nested-data-1/package.json b/samples/grids/grid/binding-nested-data-1/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/binding-nested-data-1/package.json +++ b/samples/grids/grid/binding-nested-data-1/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/cascading-combo/package.json b/samples/grids/grid/cascading-combo/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/cascading-combo/package.json +++ b/samples/grids/grid/cascading-combo/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/cell-editing-sample/package.json b/samples/grids/grid/cell-editing-sample/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/cell-editing-sample/package.json +++ b/samples/grids/grid/cell-editing-sample/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/cell-editing-styling/package.json b/samples/grids/grid/cell-editing-styling/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/cell-editing-styling/package.json +++ b/samples/grids/grid/cell-editing-styling/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/cell-merge-custom-sample/package.json b/samples/grids/grid/cell-merge-custom-sample/package.json index 6a0f4b6e10..ff9e92eb27 100644 --- a/samples/grids/grid/cell-merge-custom-sample/package.json +++ b/samples/grids/grid/cell-merge-custom-sample/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/cell-merge/package.json b/samples/grids/grid/cell-merge/package.json index 6a0f4b6e10..ff9e92eb27 100644 --- a/samples/grids/grid/cell-merge/package.json +++ b/samples/grids/grid/cell-merge/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/cell-selection-mode/package.json b/samples/grids/grid/cell-selection-mode/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/cell-selection-mode/package.json +++ b/samples/grids/grid/cell-selection-mode/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/cell-selection-style/package.json b/samples/grids/grid/cell-selection-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/cell-selection-style/package.json +++ b/samples/grids/grid/cell-selection-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/change-icons-custom/package.json b/samples/grids/grid/change-icons-custom/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/grid/change-icons-custom/package.json +++ b/samples/grids/grid/change-icons-custom/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/clipboard-operations/package.json b/samples/grids/grid/clipboard-operations/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/grid/clipboard-operations/package.json +++ b/samples/grids/grid/clipboard-operations/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-auto-sizing/package.json b/samples/grids/grid/column-auto-sizing/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-auto-sizing/package.json +++ b/samples/grids/grid/column-auto-sizing/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-collapsible-groups/package.json b/samples/grids/grid/column-collapsible-groups/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-collapsible-groups/package.json +++ b/samples/grids/grid/column-collapsible-groups/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-data-types/package.json b/samples/grids/grid/column-data-types/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-data-types/package.json +++ b/samples/grids/grid/column-data-types/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-hiding-options/package.json b/samples/grids/grid/column-hiding-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-hiding-options/package.json +++ b/samples/grids/grid/column-hiding-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-hiding-toolbar-style/package.json b/samples/grids/grid/column-hiding-toolbar-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-hiding-toolbar-style/package.json +++ b/samples/grids/grid/column-hiding-toolbar-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-hiding-toolbar/package.json b/samples/grids/grid/column-hiding-toolbar/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-hiding-toolbar/package.json +++ b/samples/grids/grid/column-hiding-toolbar/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-moving-options/package.json b/samples/grids/grid/column-moving-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-moving-options/package.json +++ b/samples/grids/grid/column-moving-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-moving-styles/package.json b/samples/grids/grid/column-moving-styles/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-moving-styles/package.json +++ b/samples/grids/grid/column-moving-styles/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-pinning-both-sides/package.json b/samples/grids/grid/column-pinning-both-sides/package.json index 6a0f4b6e10..ff9e92eb27 100644 --- a/samples/grids/grid/column-pinning-both-sides/package.json +++ b/samples/grids/grid/column-pinning-both-sides/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-pinning-options/package.json b/samples/grids/grid/column-pinning-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-pinning-options/package.json +++ b/samples/grids/grid/column-pinning-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-pinning-right-side/package.json b/samples/grids/grid/column-pinning-right-side/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-pinning-right-side/package.json +++ b/samples/grids/grid/column-pinning-right-side/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-pinning-styles/package.json b/samples/grids/grid/column-pinning-styles/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-pinning-styles/package.json +++ b/samples/grids/grid/column-pinning-styles/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-pinning/package.json b/samples/grids/grid/column-pinning/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-pinning/package.json +++ b/samples/grids/grid/column-pinning/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-resize-styling/package.json b/samples/grids/grid/column-resize-styling/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-resize-styling/package.json +++ b/samples/grids/grid/column-resize-styling/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-resizing/package.json b/samples/grids/grid/column-resizing/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-resizing/package.json +++ b/samples/grids/grid/column-resizing/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-selection-group/package.json b/samples/grids/grid/column-selection-group/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-selection-group/package.json +++ b/samples/grids/grid/column-selection-group/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-selection-mode/package.json b/samples/grids/grid/column-selection-mode/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/column-selection-mode/package.json +++ b/samples/grids/grid/column-selection-mode/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-selection-styles/package.json b/samples/grids/grid/column-selection-styles/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-selection-styles/package.json +++ b/samples/grids/grid/column-selection-styles/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-sorting-indicators/package.json b/samples/grids/grid/column-sorting-indicators/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-sorting-indicators/package.json +++ b/samples/grids/grid/column-sorting-indicators/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-sorting-options/package.json b/samples/grids/grid/column-sorting-options/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/column-sorting-options/package.json +++ b/samples/grids/grid/column-sorting-options/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/column-sorting-style/package.json b/samples/grids/grid/column-sorting-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/column-sorting-style/package.json +++ b/samples/grids/grid/column-sorting-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/conditional-cell-style-1/package.json b/samples/grids/grid/conditional-cell-style-1/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/conditional-cell-style-1/package.json +++ b/samples/grids/grid/conditional-cell-style-1/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/conditional-cell-style-2/package.json b/samples/grids/grid/conditional-cell-style-2/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/conditional-cell-style-2/package.json +++ b/samples/grids/grid/conditional-cell-style-2/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/conditional-row-selectors/package.json b/samples/grids/grid/conditional-row-selectors/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/conditional-row-selectors/package.json +++ b/samples/grids/grid/conditional-row-selectors/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/custom-context-menu/package.json b/samples/grids/grid/custom-context-menu/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/grid/custom-context-menu/package.json +++ b/samples/grids/grid/custom-context-menu/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/data-batch-editing-actions/package.json b/samples/grids/grid/data-batch-editing-actions/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/data-batch-editing-actions/package.json +++ b/samples/grids/grid/data-batch-editing-actions/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/data-exporting-indicator/package.json b/samples/grids/grid/data-exporting-indicator/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/grid/data-exporting-indicator/package.json +++ b/samples/grids/grid/data-exporting-indicator/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/data-performance-virtualization/package.json b/samples/grids/grid/data-performance-virtualization/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/data-performance-virtualization/package.json +++ b/samples/grids/grid/data-performance-virtualization/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/data-searching/package.json b/samples/grids/grid/data-searching/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/grid/data-searching/package.json +++ b/samples/grids/grid/data-searching/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/data-summary-formatter/package.json b/samples/grids/grid/data-summary-formatter/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/data-summary-formatter/package.json +++ b/samples/grids/grid/data-summary-formatter/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/data-summary-options/package.json b/samples/grids/grid/data-summary-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/data-summary-options/package.json +++ b/samples/grids/grid/data-summary-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/data-summary-template/package.json b/samples/grids/grid/data-summary-template/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/data-summary-template/package.json +++ b/samples/grids/grid/data-summary-template/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/data-validation-style/package.json b/samples/grids/grid/data-validation-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/data-validation-style/package.json +++ b/samples/grids/grid/data-validation-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/data-validator-service-cross-field/package.json b/samples/grids/grid/data-validator-service-cross-field/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/data-validator-service-cross-field/package.json +++ b/samples/grids/grid/data-validator-service-cross-field/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/data-validator-service-extended/package.json b/samples/grids/grid/data-validator-service-extended/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/data-validator-service-extended/package.json +++ b/samples/grids/grid/data-validator-service-extended/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/data-validator-service/package.json b/samples/grids/grid/data-validator-service/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/data-validator-service/package.json +++ b/samples/grids/grid/data-validator-service/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/disabled-summaries/package.json b/samples/grids/grid/disabled-summaries/package.json index 5ff90ce951..85fcb929bc 100644 --- a/samples/grids/grid/disabled-summaries/package.json +++ b/samples/grids/grid/disabled-summaries/package.json @@ -9,7 +9,7 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", diff --git a/samples/grids/grid/editing-columns/package.json b/samples/grids/grid/editing-columns/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/editing-columns/package.json +++ b/samples/grids/grid/editing-columns/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/editing-events/package.json b/samples/grids/grid/editing-events/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/editing-events/package.json +++ b/samples/grids/grid/editing-events/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/editing-excel-style/package.json b/samples/grids/grid/editing-excel-style/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/grid/editing-excel-style/package.json +++ b/samples/grids/grid/editing-excel-style/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/editing-lifecycle/package.json b/samples/grids/grid/editing-lifecycle/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/editing-lifecycle/package.json +++ b/samples/grids/grid/editing-lifecycle/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/excel-exporting/package.json b/samples/grids/grid/excel-exporting/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/excel-exporting/package.json +++ b/samples/grids/grid/excel-exporting/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/excel-style-filtering-sample-1/package.json b/samples/grids/grid/excel-style-filtering-sample-1/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/excel-style-filtering-sample-1/package.json +++ b/samples/grids/grid/excel-style-filtering-sample-1/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/excel-style-filtering-sample-2/package.json b/samples/grids/grid/excel-style-filtering-sample-2/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/excel-style-filtering-sample-2/package.json +++ b/samples/grids/grid/excel-style-filtering-sample-2/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/excel-style-filtering-sample-3/package.json b/samples/grids/grid/excel-style-filtering-sample-3/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/excel-style-filtering-sample-3/package.json +++ b/samples/grids/grid/excel-style-filtering-sample-3/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/excel-style-filtering-style/package.json b/samples/grids/grid/excel-style-filtering-style/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/excel-style-filtering-style/package.json +++ b/samples/grids/grid/excel-style-filtering-style/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/external-advanced-filtering/package.json b/samples/grids/grid/external-advanced-filtering/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/external-advanced-filtering/package.json +++ b/samples/grids/grid/external-advanced-filtering/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/filtering-options/package.json b/samples/grids/grid/filtering-options/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/filtering-options/package.json +++ b/samples/grids/grid/filtering-options/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/filtering-strategy/package.json b/samples/grids/grid/filtering-strategy/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/filtering-strategy/package.json +++ b/samples/grids/grid/filtering-strategy/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/filtering-style/package.json b/samples/grids/grid/filtering-style/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/filtering-style/package.json +++ b/samples/grids/grid/filtering-style/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/finjs/package.json b/samples/grids/grid/finjs/package.json index 4d8fd849e8..5675c69ca4 100644 --- a/samples/grids/grid/finjs/package.json +++ b/samples/grids/grid/finjs/package.json @@ -15,14 +15,14 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/groupby-custom/package.json b/samples/grids/grid/groupby-custom/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/grid/groupby-custom/package.json +++ b/samples/grids/grid/groupby-custom/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/groupby-expressions/package.json b/samples/grids/grid/groupby-expressions/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/groupby-expressions/package.json +++ b/samples/grids/grid/groupby-expressions/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/groupby-paging/package.json b/samples/grids/grid/groupby-paging/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/groupby-paging/package.json +++ b/samples/grids/grid/groupby-paging/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/groupby-styling/package.json b/samples/grids/grid/groupby-styling/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/groupby-styling/package.json +++ b/samples/grids/grid/groupby-styling/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/groupby-summary-options/package.json b/samples/grids/grid/groupby-summary-options/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/groupby-summary-options/package.json +++ b/samples/grids/grid/groupby-summary-options/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/groupby-summary-styling/package.json b/samples/grids/grid/groupby-summary-styling/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/groupby-summary-styling/package.json +++ b/samples/grids/grid/groupby-summary-styling/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/infinite-scroll/package.json b/samples/grids/grid/infinite-scroll/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/grid/infinite-scroll/package.json +++ b/samples/grids/grid/infinite-scroll/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/keyboard-custom-navigation/package.json b/samples/grids/grid/keyboard-custom-navigation/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/keyboard-custom-navigation/package.json +++ b/samples/grids/grid/keyboard-custom-navigation/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/keyboard-mrl-navigation/package.json b/samples/grids/grid/keyboard-mrl-navigation/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/keyboard-mrl-navigation/package.json +++ b/samples/grids/grid/keyboard-mrl-navigation/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/layout-display-density/package.json b/samples/grids/grid/layout-display-density/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/layout-display-density/package.json +++ b/samples/grids/grid/layout-display-density/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/localization/package.json b/samples/grids/grid/localization/package.json index 8f9c7cd294..d666af1804 100644 --- a/samples/grids/grid/localization/package.json +++ b/samples/grids/grid/localization/package.json @@ -16,12 +16,12 @@ "dependencies": { "igniteui-dockmanager": "^1.17.0", "igniteui-i18n-resources": "^1.0.5", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/master-detail/package.json b/samples/grids/grid/master-detail/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/master-detail/package.json +++ b/samples/grids/grid/master-detail/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/multi-cell-selection-mode/package.json b/samples/grids/grid/multi-cell-selection-mode/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/grid/multi-cell-selection-mode/package.json +++ b/samples/grids/grid/multi-cell-selection-mode/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/multi-column-headers-export/package.json b/samples/grids/grid/multi-column-headers-export/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/multi-column-headers-export/package.json +++ b/samples/grids/grid/multi-column-headers-export/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/multi-column-headers-overview/package.json b/samples/grids/grid/multi-column-headers-overview/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/multi-column-headers-overview/package.json +++ b/samples/grids/grid/multi-column-headers-overview/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/multi-column-headers-styling/package.json b/samples/grids/grid/multi-column-headers-styling/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/multi-column-headers-styling/package.json +++ b/samples/grids/grid/multi-column-headers-styling/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/multi-column-headers-template/package.json b/samples/grids/grid/multi-column-headers-template/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/multi-column-headers-template/package.json +++ b/samples/grids/grid/multi-column-headers-template/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/multi-row-layout-options/package.json b/samples/grids/grid/multi-row-layout-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/multi-row-layout-options/package.json +++ b/samples/grids/grid/multi-row-layout-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/multi-row-layout-style/package.json b/samples/grids/grid/multi-row-layout-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/multi-row-layout-style/package.json +++ b/samples/grids/grid/multi-row-layout-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/overview/package.json b/samples/grids/grid/overview/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/overview/package.json +++ b/samples/grids/grid/overview/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/paste/package.json b/samples/grids/grid/paste/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/paste/package.json +++ b/samples/grids/grid/paste/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/remote-paging-data/package.json b/samples/grids/grid/remote-paging-data/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/remote-paging-data/package.json +++ b/samples/grids/grid/remote-paging-data/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/remote-paging-grid/package.json b/samples/grids/grid/remote-paging-grid/package.json index e3b03b976a..8f8845e6ed 100644 --- a/samples/grids/grid/remote-paging-grid/package.json +++ b/samples/grids/grid/remote-paging-grid/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/row-adding/package.json b/samples/grids/grid/row-adding/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/row-adding/package.json +++ b/samples/grids/grid/row-adding/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/row-classes/package.json b/samples/grids/grid/row-classes/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/row-classes/package.json +++ b/samples/grids/grid/row-classes/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/row-drag-base/package.json b/samples/grids/grid/row-drag-base/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/grid/row-drag-base/package.json +++ b/samples/grids/grid/row-drag-base/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/row-editing-options/package.json b/samples/grids/grid/row-editing-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/row-editing-options/package.json +++ b/samples/grids/grid/row-editing-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/row-editing-style/package.json b/samples/grids/grid/row-editing-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/row-editing-style/package.json +++ b/samples/grids/grid/row-editing-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/row-paging-basic/package.json b/samples/grids/grid/row-paging-basic/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/row-paging-basic/package.json +++ b/samples/grids/grid/row-paging-basic/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/row-paging-options/package.json b/samples/grids/grid/row-paging-options/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/row-paging-options/package.json +++ b/samples/grids/grid/row-paging-options/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/row-pinning-drag/package.json b/samples/grids/grid/row-pinning-drag/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/row-pinning-drag/package.json +++ b/samples/grids/grid/row-pinning-drag/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/row-pinning-extra-column/package.json b/samples/grids/grid/row-pinning-extra-column/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/row-pinning-extra-column/package.json +++ b/samples/grids/grid/row-pinning-extra-column/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/row-pinning-options/package.json b/samples/grids/grid/row-pinning-options/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/row-pinning-options/package.json +++ b/samples/grids/grid/row-pinning-options/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/row-pinning-style/package.json b/samples/grids/grid/row-pinning-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/row-pinning-style/package.json +++ b/samples/grids/grid/row-pinning-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/row-reorder/package.json b/samples/grids/grid/row-reorder/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/row-reorder/package.json +++ b/samples/grids/grid/row-reorder/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/row-selection-mode/package.json b/samples/grids/grid/row-selection-mode/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/row-selection-mode/package.json +++ b/samples/grids/grid/row-selection-mode/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/row-selection-template-excel/package.json b/samples/grids/grid/row-selection-template-excel/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/grid/row-selection-template-excel/package.json +++ b/samples/grids/grid/row-selection-template-excel/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/row-selection-template-numbers/package.json b/samples/grids/grid/row-selection-template-numbers/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/row-selection-template-numbers/package.json +++ b/samples/grids/grid/row-selection-template-numbers/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/row-styles/package.json b/samples/grids/grid/row-styles/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/row-styles/package.json +++ b/samples/grids/grid/row-styles/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/state-persistence-about/package.json b/samples/grids/grid/state-persistence-about/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/grid/state-persistence-about/package.json +++ b/samples/grids/grid/state-persistence-about/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/state-persistence-main/package.json b/samples/grids/grid/state-persistence-main/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/grid/state-persistence-main/package.json +++ b/samples/grids/grid/state-persistence-main/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/styling-custom-CSS/package.json b/samples/grids/grid/styling-custom-CSS/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/styling-custom-CSS/package.json +++ b/samples/grids/grid/styling-custom-CSS/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/toolbar-sample-1/package.json b/samples/grids/grid/toolbar-sample-1/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/toolbar-sample-1/package.json +++ b/samples/grids/grid/toolbar-sample-1/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/toolbar-sample-2/package.json b/samples/grids/grid/toolbar-sample-2/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/toolbar-sample-2/package.json +++ b/samples/grids/grid/toolbar-sample-2/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/toolbar-sample-3/package.json b/samples/grids/grid/toolbar-sample-3/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/toolbar-sample-3/package.json +++ b/samples/grids/grid/toolbar-sample-3/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/grid/toolbar-style/package.json b/samples/grids/grid/toolbar-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/grid/toolbar-style/package.json +++ b/samples/grids/grid/toolbar-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/action-strip/package.json b/samples/grids/hierarchical-grid/action-strip/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/action-strip/package.json +++ b/samples/grids/hierarchical-grid/action-strip/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/advanced-filtering-options/package.json b/samples/grids/hierarchical-grid/advanced-filtering-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/advanced-filtering-options/package.json +++ b/samples/grids/hierarchical-grid/advanced-filtering-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/advanced-filtering-style/package.json b/samples/grids/hierarchical-grid/advanced-filtering-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/advanced-filtering-style/package.json +++ b/samples/grids/hierarchical-grid/advanced-filtering-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/cell-editing-sample/package.json b/samples/grids/hierarchical-grid/cell-editing-sample/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/cell-editing-sample/package.json +++ b/samples/grids/hierarchical-grid/cell-editing-sample/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/cell-editing-styling/package.json b/samples/grids/hierarchical-grid/cell-editing-styling/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/cell-editing-styling/package.json +++ b/samples/grids/hierarchical-grid/cell-editing-styling/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/cell-merge-custom-sample/package.json b/samples/grids/hierarchical-grid/cell-merge-custom-sample/package.json index 6a0f4b6e10..ff9e92eb27 100644 --- a/samples/grids/hierarchical-grid/cell-merge-custom-sample/package.json +++ b/samples/grids/hierarchical-grid/cell-merge-custom-sample/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/cell-merge/package.json b/samples/grids/hierarchical-grid/cell-merge/package.json index 6a0f4b6e10..ff9e92eb27 100644 --- a/samples/grids/hierarchical-grid/cell-merge/package.json +++ b/samples/grids/hierarchical-grid/cell-merge/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/cell-selection-mode/package.json b/samples/grids/hierarchical-grid/cell-selection-mode/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/hierarchical-grid/cell-selection-mode/package.json +++ b/samples/grids/hierarchical-grid/cell-selection-mode/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/cell-selection-overview/package.json b/samples/grids/hierarchical-grid/cell-selection-overview/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/hierarchical-grid/cell-selection-overview/package.json +++ b/samples/grids/hierarchical-grid/cell-selection-overview/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/cell-selection-style/package.json b/samples/grids/hierarchical-grid/cell-selection-style/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/hierarchical-grid/cell-selection-style/package.json +++ b/samples/grids/hierarchical-grid/cell-selection-style/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-auto-sizing/package.json b/samples/grids/hierarchical-grid/column-auto-sizing/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/hierarchical-grid/column-auto-sizing/package.json +++ b/samples/grids/hierarchical-grid/column-auto-sizing/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-collapsible-groups/package.json b/samples/grids/hierarchical-grid/column-collapsible-groups/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/column-collapsible-groups/package.json +++ b/samples/grids/hierarchical-grid/column-collapsible-groups/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/package.json b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/column-hiding-toolbar-style/package.json +++ b/samples/grids/hierarchical-grid/column-hiding-toolbar-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-hiding-toolbar/package.json b/samples/grids/hierarchical-grid/column-hiding-toolbar/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/column-hiding-toolbar/package.json +++ b/samples/grids/hierarchical-grid/column-hiding-toolbar/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-moving-options/package.json b/samples/grids/hierarchical-grid/column-moving-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/column-moving-options/package.json +++ b/samples/grids/hierarchical-grid/column-moving-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-moving-styles/package.json b/samples/grids/hierarchical-grid/column-moving-styles/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/column-moving-styles/package.json +++ b/samples/grids/hierarchical-grid/column-moving-styles/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-pinning-both-sides/package.json b/samples/grids/hierarchical-grid/column-pinning-both-sides/package.json index 6a0f4b6e10..ff9e92eb27 100644 --- a/samples/grids/hierarchical-grid/column-pinning-both-sides/package.json +++ b/samples/grids/hierarchical-grid/column-pinning-both-sides/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-pinning-options/package.json b/samples/grids/hierarchical-grid/column-pinning-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/column-pinning-options/package.json +++ b/samples/grids/hierarchical-grid/column-pinning-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-pinning-right-side/package.json b/samples/grids/hierarchical-grid/column-pinning-right-side/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/column-pinning-right-side/package.json +++ b/samples/grids/hierarchical-grid/column-pinning-right-side/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-pinning-styles/package.json b/samples/grids/hierarchical-grid/column-pinning-styles/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/column-pinning-styles/package.json +++ b/samples/grids/hierarchical-grid/column-pinning-styles/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-pinning/package.json b/samples/grids/hierarchical-grid/column-pinning/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/column-pinning/package.json +++ b/samples/grids/hierarchical-grid/column-pinning/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-resize-styling/package.json b/samples/grids/hierarchical-grid/column-resize-styling/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/column-resize-styling/package.json +++ b/samples/grids/hierarchical-grid/column-resize-styling/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-resizing/package.json b/samples/grids/hierarchical-grid/column-resizing/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/column-resizing/package.json +++ b/samples/grids/hierarchical-grid/column-resizing/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-selection-group/package.json b/samples/grids/hierarchical-grid/column-selection-group/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/column-selection-group/package.json +++ b/samples/grids/hierarchical-grid/column-selection-group/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-selection-mode/package.json b/samples/grids/hierarchical-grid/column-selection-mode/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/hierarchical-grid/column-selection-mode/package.json +++ b/samples/grids/hierarchical-grid/column-selection-mode/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-selection-styles/package.json b/samples/grids/hierarchical-grid/column-selection-styles/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/column-selection-styles/package.json +++ b/samples/grids/hierarchical-grid/column-selection-styles/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-sorting-indicators/package.json b/samples/grids/hierarchical-grid/column-sorting-indicators/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/column-sorting-indicators/package.json +++ b/samples/grids/hierarchical-grid/column-sorting-indicators/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-sorting-options/package.json b/samples/grids/hierarchical-grid/column-sorting-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/column-sorting-options/package.json +++ b/samples/grids/hierarchical-grid/column-sorting-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/column-sorting-style/package.json b/samples/grids/hierarchical-grid/column-sorting-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/column-sorting-style/package.json +++ b/samples/grids/hierarchical-grid/column-sorting-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-1/package.json b/samples/grids/hierarchical-grid/conditional-cell-style-1/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/conditional-cell-style-1/package.json +++ b/samples/grids/hierarchical-grid/conditional-cell-style-1/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/conditional-cell-style-2/package.json b/samples/grids/hierarchical-grid/conditional-cell-style-2/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/conditional-cell-style-2/package.json +++ b/samples/grids/hierarchical-grid/conditional-cell-style-2/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/conditional-row-selectors/package.json b/samples/grids/hierarchical-grid/conditional-row-selectors/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/conditional-row-selectors/package.json +++ b/samples/grids/hierarchical-grid/conditional-row-selectors/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/custom-filtering/package.json b/samples/grids/hierarchical-grid/custom-filtering/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/custom-filtering/package.json +++ b/samples/grids/hierarchical-grid/custom-filtering/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/data-exporting-indicator/package.json b/samples/grids/hierarchical-grid/data-exporting-indicator/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/hierarchical-grid/data-exporting-indicator/package.json +++ b/samples/grids/hierarchical-grid/data-exporting-indicator/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/data-performance-virtualization/package.json b/samples/grids/hierarchical-grid/data-performance-virtualization/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/hierarchical-grid/data-performance-virtualization/package.json +++ b/samples/grids/hierarchical-grid/data-performance-virtualization/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/data-summary-formatter/package.json b/samples/grids/hierarchical-grid/data-summary-formatter/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/data-summary-formatter/package.json +++ b/samples/grids/hierarchical-grid/data-summary-formatter/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/data-summary-options-styling/package.json b/samples/grids/hierarchical-grid/data-summary-options-styling/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/data-summary-options-styling/package.json +++ b/samples/grids/hierarchical-grid/data-summary-options-styling/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/data-summary-options/package.json b/samples/grids/hierarchical-grid/data-summary-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/data-summary-options/package.json +++ b/samples/grids/hierarchical-grid/data-summary-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/data-summary-template/package.json b/samples/grids/hierarchical-grid/data-summary-template/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/hierarchical-grid/data-summary-template/package.json +++ b/samples/grids/hierarchical-grid/data-summary-template/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/disabled-summaries/package.json b/samples/grids/hierarchical-grid/disabled-summaries/package.json index 5ff90ce951..85fcb929bc 100644 --- a/samples/grids/hierarchical-grid/disabled-summaries/package.json +++ b/samples/grids/hierarchical-grid/disabled-summaries/package.json @@ -9,7 +9,7 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", diff --git a/samples/grids/hierarchical-grid/editing-columns/package.json b/samples/grids/hierarchical-grid/editing-columns/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/editing-columns/package.json +++ b/samples/grids/hierarchical-grid/editing-columns/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/editing-events/package.json b/samples/grids/hierarchical-grid/editing-events/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/editing-events/package.json +++ b/samples/grids/hierarchical-grid/editing-events/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/editing-lifecycle/package.json b/samples/grids/hierarchical-grid/editing-lifecycle/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/editing-lifecycle/package.json +++ b/samples/grids/hierarchical-grid/editing-lifecycle/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/excel-exporting/package.json b/samples/grids/hierarchical-grid/excel-exporting/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/excel-exporting/package.json +++ b/samples/grids/hierarchical-grid/excel-exporting/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/package.json b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/package.json +++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-1/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/package.json b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/package.json +++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-2/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/package.json b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/package.json +++ b/samples/grids/hierarchical-grid/excel-style-filtering-sample-3/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/excel-style-filtering-style/package.json b/samples/grids/hierarchical-grid/excel-style-filtering-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/excel-style-filtering-style/package.json +++ b/samples/grids/hierarchical-grid/excel-style-filtering-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/filtering-options/package.json b/samples/grids/hierarchical-grid/filtering-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/filtering-options/package.json +++ b/samples/grids/hierarchical-grid/filtering-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/filtering-style/package.json b/samples/grids/hierarchical-grid/filtering-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/filtering-style/package.json +++ b/samples/grids/hierarchical-grid/filtering-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-options/package.json b/samples/grids/hierarchical-grid/hierarchical-grid-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/hierarchical-grid-options/package.json +++ b/samples/grids/hierarchical-grid/hierarchical-grid-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/package.json b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/package.json +++ b/samples/grids/hierarchical-grid/hierarchical-grid-paging-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/hierarchical-grid-styling/package.json b/samples/grids/hierarchical-grid/hierarchical-grid-styling/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/hierarchical-grid-styling/package.json +++ b/samples/grids/hierarchical-grid/hierarchical-grid-styling/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/layout-display-density/package.json b/samples/grids/hierarchical-grid/layout-display-density/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/hierarchical-grid/layout-display-density/package.json +++ b/samples/grids/hierarchical-grid/layout-display-density/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/multi-column-headers-export/package.json b/samples/grids/hierarchical-grid/multi-column-headers-export/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/multi-column-headers-export/package.json +++ b/samples/grids/hierarchical-grid/multi-column-headers-export/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/multi-column-headers-overview/package.json b/samples/grids/hierarchical-grid/multi-column-headers-overview/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/hierarchical-grid/multi-column-headers-overview/package.json +++ b/samples/grids/hierarchical-grid/multi-column-headers-overview/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/multi-column-headers-styling/package.json b/samples/grids/hierarchical-grid/multi-column-headers-styling/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/multi-column-headers-styling/package.json +++ b/samples/grids/hierarchical-grid/multi-column-headers-styling/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/multi-column-headers-template/package.json b/samples/grids/hierarchical-grid/multi-column-headers-template/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/multi-column-headers-template/package.json +++ b/samples/grids/hierarchical-grid/multi-column-headers-template/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/overview/package.json b/samples/grids/hierarchical-grid/overview/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/overview/package.json +++ b/samples/grids/hierarchical-grid/overview/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/remote-paging-hgrid/package.json b/samples/grids/hierarchical-grid/remote-paging-hgrid/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/hierarchical-grid/remote-paging-hgrid/package.json +++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/row-adding/package.json b/samples/grids/hierarchical-grid/row-adding/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/row-adding/package.json +++ b/samples/grids/hierarchical-grid/row-adding/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/row-classes/package.json b/samples/grids/hierarchical-grid/row-classes/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/row-classes/package.json +++ b/samples/grids/hierarchical-grid/row-classes/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/row-drag-base/package.json b/samples/grids/hierarchical-grid/row-drag-base/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/hierarchical-grid/row-drag-base/package.json +++ b/samples/grids/hierarchical-grid/row-drag-base/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/row-editing-options/package.json b/samples/grids/hierarchical-grid/row-editing-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/row-editing-options/package.json +++ b/samples/grids/hierarchical-grid/row-editing-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/row-editing-style/package.json b/samples/grids/hierarchical-grid/row-editing-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/row-editing-style/package.json +++ b/samples/grids/hierarchical-grid/row-editing-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/row-pinning-extra-column/package.json b/samples/grids/hierarchical-grid/row-pinning-extra-column/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/hierarchical-grid/row-pinning-extra-column/package.json +++ b/samples/grids/hierarchical-grid/row-pinning-extra-column/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/row-pinning-options/package.json b/samples/grids/hierarchical-grid/row-pinning-options/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/hierarchical-grid/row-pinning-options/package.json +++ b/samples/grids/hierarchical-grid/row-pinning-options/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/row-pinning-style/package.json b/samples/grids/hierarchical-grid/row-pinning-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/row-pinning-style/package.json +++ b/samples/grids/hierarchical-grid/row-pinning-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/row-reorder/package.json b/samples/grids/hierarchical-grid/row-reorder/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/row-reorder/package.json +++ b/samples/grids/hierarchical-grid/row-reorder/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/row-selection-mode/package.json b/samples/grids/hierarchical-grid/row-selection-mode/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/hierarchical-grid/row-selection-mode/package.json +++ b/samples/grids/hierarchical-grid/row-selection-mode/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/row-selection-template-numbers/package.json b/samples/grids/hierarchical-grid/row-selection-template-numbers/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/row-selection-template-numbers/package.json +++ b/samples/grids/hierarchical-grid/row-selection-template-numbers/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/row-styles/package.json b/samples/grids/hierarchical-grid/row-styles/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/row-styles/package.json +++ b/samples/grids/hierarchical-grid/row-styles/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/state-persistence-about/package.json b/samples/grids/hierarchical-grid/state-persistence-about/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/hierarchical-grid/state-persistence-about/package.json +++ b/samples/grids/hierarchical-grid/state-persistence-about/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/state-persistence-main/package.json b/samples/grids/hierarchical-grid/state-persistence-main/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/hierarchical-grid/state-persistence-main/package.json +++ b/samples/grids/hierarchical-grid/state-persistence-main/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/toolbar-sample-3/package.json b/samples/grids/hierarchical-grid/toolbar-sample-3/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/toolbar-sample-3/package.json +++ b/samples/grids/hierarchical-grid/toolbar-sample-3/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/toolbar-sample-4/package.json b/samples/grids/hierarchical-grid/toolbar-sample-4/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/hierarchical-grid/toolbar-sample-4/package.json +++ b/samples/grids/hierarchical-grid/toolbar-sample-4/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/hierarchical-grid/toolbar-style/package.json b/samples/grids/hierarchical-grid/toolbar-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/hierarchical-grid/toolbar-style/package.json +++ b/samples/grids/hierarchical-grid/toolbar-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/list/add-list-items/package.json b/samples/grids/list/add-list-items/package.json index 0e1c1109ba..3fc2661fc5 100644 --- a/samples/grids/list/add-list-items/package.json +++ b/samples/grids/list/add-list-items/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/list/list-item-content/package.json b/samples/grids/list/list-item-content/package.json index 5a01b07629..03d25ea887 100644 --- a/samples/grids/list/list-item-content/package.json +++ b/samples/grids/list/list-item-content/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/list/overview/package.json b/samples/grids/list/overview/package.json index 9f52a1a293..86a4747a80 100644 --- a/samples/grids/list/overview/package.json +++ b/samples/grids/list/overview/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/list/styling/package.json b/samples/grids/list/styling/package.json index a8782b9067..24dd217a31 100644 --- a/samples/grids/list/styling/package.json +++ b/samples/grids/list/styling/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/pivot-grid/aggregate-max-sales/package.json b/samples/grids/pivot-grid/aggregate-max-sales/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/pivot-grid/aggregate-max-sales/package.json +++ b/samples/grids/pivot-grid/aggregate-max-sales/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/pivot-grid/aggregate-units-sold/package.json b/samples/grids/pivot-grid/aggregate-units-sold/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/pivot-grid/aggregate-units-sold/package.json +++ b/samples/grids/pivot-grid/aggregate-units-sold/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/pivot-grid/data-selector/package.json b/samples/grids/pivot-grid/data-selector/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/pivot-grid/data-selector/package.json +++ b/samples/grids/pivot-grid/data-selector/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/pivot-grid/features/package.json b/samples/grids/pivot-grid/features/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/pivot-grid/features/package.json +++ b/samples/grids/pivot-grid/features/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/pivot-grid/state-persistence-about/package.json b/samples/grids/pivot-grid/state-persistence-about/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/pivot-grid/state-persistence-about/package.json +++ b/samples/grids/pivot-grid/state-persistence-about/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/pivot-grid/state-persistence-main/package.json b/samples/grids/pivot-grid/state-persistence-main/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/pivot-grid/state-persistence-main/package.json +++ b/samples/grids/pivot-grid/state-persistence-main/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/pivot-grid/styling/package.json b/samples/grids/pivot-grid/styling/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/pivot-grid/styling/package.json +++ b/samples/grids/pivot-grid/styling/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/action-strip/package.json b/samples/grids/tree-grid/action-strip/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/action-strip/package.json +++ b/samples/grids/tree-grid/action-strip/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/advanced-filtering-options/package.json b/samples/grids/tree-grid/advanced-filtering-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/advanced-filtering-options/package.json +++ b/samples/grids/tree-grid/advanced-filtering-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/advanced-filtering-style/package.json b/samples/grids/tree-grid/advanced-filtering-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/advanced-filtering-style/package.json +++ b/samples/grids/tree-grid/advanced-filtering-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/cell-editing-sample/package.json b/samples/grids/tree-grid/cell-editing-sample/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/cell-editing-sample/package.json +++ b/samples/grids/tree-grid/cell-editing-sample/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/cell-editing-styling/package.json b/samples/grids/tree-grid/cell-editing-styling/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/cell-editing-styling/package.json +++ b/samples/grids/tree-grid/cell-editing-styling/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/cell-merge-custom-sample/package.json b/samples/grids/tree-grid/cell-merge-custom-sample/package.json index 6a0f4b6e10..ff9e92eb27 100644 --- a/samples/grids/tree-grid/cell-merge-custom-sample/package.json +++ b/samples/grids/tree-grid/cell-merge-custom-sample/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/cell-merge/package.json b/samples/grids/tree-grid/cell-merge/package.json index 6a0f4b6e10..ff9e92eb27 100644 --- a/samples/grids/tree-grid/cell-merge/package.json +++ b/samples/grids/tree-grid/cell-merge/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/cell-selection-mode/package.json b/samples/grids/tree-grid/cell-selection-mode/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/tree-grid/cell-selection-mode/package.json +++ b/samples/grids/tree-grid/cell-selection-mode/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/cell-selection-style/package.json b/samples/grids/tree-grid/cell-selection-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/cell-selection-style/package.json +++ b/samples/grids/tree-grid/cell-selection-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/clipboard-operations/package.json b/samples/grids/tree-grid/clipboard-operations/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/tree-grid/clipboard-operations/package.json +++ b/samples/grids/tree-grid/clipboard-operations/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-auto-sizing/package.json b/samples/grids/tree-grid/column-auto-sizing/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/column-auto-sizing/package.json +++ b/samples/grids/tree-grid/column-auto-sizing/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-collapsible-groups/package.json b/samples/grids/tree-grid/column-collapsible-groups/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/column-collapsible-groups/package.json +++ b/samples/grids/tree-grid/column-collapsible-groups/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-data-types/package.json b/samples/grids/tree-grid/column-data-types/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/tree-grid/column-data-types/package.json +++ b/samples/grids/tree-grid/column-data-types/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-hiding-toolbar-style/package.json b/samples/grids/tree-grid/column-hiding-toolbar-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/column-hiding-toolbar-style/package.json +++ b/samples/grids/tree-grid/column-hiding-toolbar-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-hiding-toolbar/package.json b/samples/grids/tree-grid/column-hiding-toolbar/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/column-hiding-toolbar/package.json +++ b/samples/grids/tree-grid/column-hiding-toolbar/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-moving-options/package.json b/samples/grids/tree-grid/column-moving-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/column-moving-options/package.json +++ b/samples/grids/tree-grid/column-moving-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-moving-styles/package.json b/samples/grids/tree-grid/column-moving-styles/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/column-moving-styles/package.json +++ b/samples/grids/tree-grid/column-moving-styles/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-pinning-both-sides/package.json b/samples/grids/tree-grid/column-pinning-both-sides/package.json index 6a0f4b6e10..ff9e92eb27 100644 --- a/samples/grids/tree-grid/column-pinning-both-sides/package.json +++ b/samples/grids/tree-grid/column-pinning-both-sides/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-pinning-options/package.json b/samples/grids/tree-grid/column-pinning-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/column-pinning-options/package.json +++ b/samples/grids/tree-grid/column-pinning-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-pinning-right-side/package.json b/samples/grids/tree-grid/column-pinning-right-side/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/column-pinning-right-side/package.json +++ b/samples/grids/tree-grid/column-pinning-right-side/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-pinning-styles/package.json b/samples/grids/tree-grid/column-pinning-styles/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/column-pinning-styles/package.json +++ b/samples/grids/tree-grid/column-pinning-styles/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-pinning-toolbar/package.json b/samples/grids/tree-grid/column-pinning-toolbar/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/column-pinning-toolbar/package.json +++ b/samples/grids/tree-grid/column-pinning-toolbar/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-pinning/package.json b/samples/grids/tree-grid/column-pinning/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/column-pinning/package.json +++ b/samples/grids/tree-grid/column-pinning/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-resize-styling/package.json b/samples/grids/tree-grid/column-resize-styling/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/column-resize-styling/package.json +++ b/samples/grids/tree-grid/column-resize-styling/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-resizing/package.json b/samples/grids/tree-grid/column-resizing/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/column-resizing/package.json +++ b/samples/grids/tree-grid/column-resizing/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-selection-group/package.json b/samples/grids/tree-grid/column-selection-group/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/column-selection-group/package.json +++ b/samples/grids/tree-grid/column-selection-group/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-selection-mode/package.json b/samples/grids/tree-grid/column-selection-mode/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/tree-grid/column-selection-mode/package.json +++ b/samples/grids/tree-grid/column-selection-mode/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-selection-style/package.json b/samples/grids/tree-grid/column-selection-style/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/tree-grid/column-selection-style/package.json +++ b/samples/grids/tree-grid/column-selection-style/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-selection-styles/package.json b/samples/grids/tree-grid/column-selection-styles/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/column-selection-styles/package.json +++ b/samples/grids/tree-grid/column-selection-styles/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-sorting-indicators/package.json b/samples/grids/tree-grid/column-sorting-indicators/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/column-sorting-indicators/package.json +++ b/samples/grids/tree-grid/column-sorting-indicators/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-sorting-options/package.json b/samples/grids/tree-grid/column-sorting-options/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/tree-grid/column-sorting-options/package.json +++ b/samples/grids/tree-grid/column-sorting-options/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/column-sorting-style/package.json b/samples/grids/tree-grid/column-sorting-style/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/tree-grid/column-sorting-style/package.json +++ b/samples/grids/tree-grid/column-sorting-style/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/conditional-cell-style-1/package.json b/samples/grids/tree-grid/conditional-cell-style-1/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/conditional-cell-style-1/package.json +++ b/samples/grids/tree-grid/conditional-cell-style-1/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/conditional-cell-style-2/package.json b/samples/grids/tree-grid/conditional-cell-style-2/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/conditional-cell-style-2/package.json +++ b/samples/grids/tree-grid/conditional-cell-style-2/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/conditional-row-selectors/package.json b/samples/grids/tree-grid/conditional-row-selectors/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/conditional-row-selectors/package.json +++ b/samples/grids/tree-grid/conditional-row-selectors/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/data-exporting-indicator/package.json b/samples/grids/tree-grid/data-exporting-indicator/package.json index 43ae315005..7a4362fa38 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.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/data-searching/package.json b/samples/grids/tree-grid/data-searching/package.json index e20854c52a..9309f63649 100644 --- a/samples/grids/tree-grid/data-searching/package.json +++ b/samples/grids/tree-grid/data-searching/package.json @@ -14,7 +14,7 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-grids": "19.7.0", "lit-html": "^2.2.0", "react": "^19.2.0", diff --git a/samples/grids/tree-grid/data-summary-children/package.json b/samples/grids/tree-grid/data-summary-children/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/tree-grid/data-summary-children/package.json +++ b/samples/grids/tree-grid/data-summary-children/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/data-summary-formatter/package.json b/samples/grids/tree-grid/data-summary-formatter/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/data-summary-formatter/package.json +++ b/samples/grids/tree-grid/data-summary-formatter/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/data-summary-options-styling/package.json b/samples/grids/tree-grid/data-summary-options-styling/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/data-summary-options-styling/package.json +++ b/samples/grids/tree-grid/data-summary-options-styling/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/data-summary-options/package.json b/samples/grids/tree-grid/data-summary-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/data-summary-options/package.json +++ b/samples/grids/tree-grid/data-summary-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/data-summary-template/package.json b/samples/grids/tree-grid/data-summary-template/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/tree-grid/data-summary-template/package.json +++ b/samples/grids/tree-grid/data-summary-template/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/disabled-summaries/package.json b/samples/grids/tree-grid/disabled-summaries/package.json index 5ff90ce951..85fcb929bc 100644 --- a/samples/grids/tree-grid/disabled-summaries/package.json +++ b/samples/grids/tree-grid/disabled-summaries/package.json @@ -9,7 +9,7 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", diff --git a/samples/grids/tree-grid/editing-columns/package.json b/samples/grids/tree-grid/editing-columns/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/editing-columns/package.json +++ b/samples/grids/tree-grid/editing-columns/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/editing-events/package.json b/samples/grids/tree-grid/editing-events/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/editing-events/package.json +++ b/samples/grids/tree-grid/editing-events/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/editing-lifecycle/package.json b/samples/grids/tree-grid/editing-lifecycle/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/editing-lifecycle/package.json +++ b/samples/grids/tree-grid/editing-lifecycle/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/excel-exporting/package.json b/samples/grids/tree-grid/excel-exporting/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/excel-exporting/package.json +++ b/samples/grids/tree-grid/excel-exporting/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-1/package.json b/samples/grids/tree-grid/excel-style-filtering-sample-1/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/tree-grid/excel-style-filtering-sample-1/package.json +++ b/samples/grids/tree-grid/excel-style-filtering-sample-1/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-2/package.json b/samples/grids/tree-grid/excel-style-filtering-sample-2/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/excel-style-filtering-sample-2/package.json +++ b/samples/grids/tree-grid/excel-style-filtering-sample-2/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/excel-style-filtering-sample-3/package.json b/samples/grids/tree-grid/excel-style-filtering-sample-3/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/excel-style-filtering-sample-3/package.json +++ b/samples/grids/tree-grid/excel-style-filtering-sample-3/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/excel-style-filtering-style/package.json b/samples/grids/tree-grid/excel-style-filtering-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/excel-style-filtering-style/package.json +++ b/samples/grids/tree-grid/excel-style-filtering-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/filtering-options/package.json b/samples/grids/tree-grid/filtering-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/filtering-options/package.json +++ b/samples/grids/tree-grid/filtering-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/filtering-style/package.json b/samples/grids/tree-grid/filtering-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/filtering-style/package.json +++ b/samples/grids/tree-grid/filtering-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/keyboard-custom-navigation/package.json b/samples/grids/tree-grid/keyboard-custom-navigation/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/tree-grid/keyboard-custom-navigation/package.json +++ b/samples/grids/tree-grid/keyboard-custom-navigation/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/layout-display-density/package.json b/samples/grids/tree-grid/layout-display-density/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/tree-grid/layout-display-density/package.json +++ b/samples/grids/tree-grid/layout-display-density/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/multi-cell-selection-mode/package.json b/samples/grids/tree-grid/multi-cell-selection-mode/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/tree-grid/multi-cell-selection-mode/package.json +++ b/samples/grids/tree-grid/multi-cell-selection-mode/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/multi-column-headers-export/package.json b/samples/grids/tree-grid/multi-column-headers-export/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/multi-column-headers-export/package.json +++ b/samples/grids/tree-grid/multi-column-headers-export/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/multi-column-headers-overview/package.json b/samples/grids/tree-grid/multi-column-headers-overview/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/tree-grid/multi-column-headers-overview/package.json +++ b/samples/grids/tree-grid/multi-column-headers-overview/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/multi-column-headers-styling/package.json b/samples/grids/tree-grid/multi-column-headers-styling/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/multi-column-headers-styling/package.json +++ b/samples/grids/tree-grid/multi-column-headers-styling/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/multi-column-headers-template/package.json b/samples/grids/tree-grid/multi-column-headers-template/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/multi-column-headers-template/package.json +++ b/samples/grids/tree-grid/multi-column-headers-template/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/overview-styling/package.json b/samples/grids/tree-grid/overview-styling/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/overview-styling/package.json +++ b/samples/grids/tree-grid/overview-styling/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/overview/package.json b/samples/grids/tree-grid/overview/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/tree-grid/overview/package.json +++ b/samples/grids/tree-grid/overview/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/row-adding/package.json b/samples/grids/tree-grid/row-adding/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/row-adding/package.json +++ b/samples/grids/tree-grid/row-adding/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/row-classes/package.json b/samples/grids/tree-grid/row-classes/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/row-classes/package.json +++ b/samples/grids/tree-grid/row-classes/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/row-drag-base/package.json b/samples/grids/tree-grid/row-drag-base/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/tree-grid/row-drag-base/package.json +++ b/samples/grids/tree-grid/row-drag-base/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/row-editing-options/package.json b/samples/grids/tree-grid/row-editing-options/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/row-editing-options/package.json +++ b/samples/grids/tree-grid/row-editing-options/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/row-editing-style/package.json b/samples/grids/tree-grid/row-editing-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/row-editing-style/package.json +++ b/samples/grids/tree-grid/row-editing-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/row-paging-basic/package.json b/samples/grids/tree-grid/row-paging-basic/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/row-paging-basic/package.json +++ b/samples/grids/tree-grid/row-paging-basic/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/row-paging-options/package.json b/samples/grids/tree-grid/row-paging-options/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/tree-grid/row-paging-options/package.json +++ b/samples/grids/tree-grid/row-paging-options/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/row-paging-style/package.json b/samples/grids/tree-grid/row-paging-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/row-paging-style/package.json +++ b/samples/grids/tree-grid/row-paging-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/row-pinning-extra-column/package.json b/samples/grids/tree-grid/row-pinning-extra-column/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/row-pinning-extra-column/package.json +++ b/samples/grids/tree-grid/row-pinning-extra-column/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/row-pinning-options/package.json b/samples/grids/tree-grid/row-pinning-options/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/tree-grid/row-pinning-options/package.json +++ b/samples/grids/tree-grid/row-pinning-options/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/row-pinning-style/package.json b/samples/grids/tree-grid/row-pinning-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/row-pinning-style/package.json +++ b/samples/grids/tree-grid/row-pinning-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/row-reorder/package.json b/samples/grids/tree-grid/row-reorder/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/row-reorder/package.json +++ b/samples/grids/tree-grid/row-reorder/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/row-selection-mode/package.json b/samples/grids/tree-grid/row-selection-mode/package.json index 0aea397993..71f5d2c861 100644 --- a/samples/grids/tree-grid/row-selection-mode/package.json +++ b/samples/grids/tree-grid/row-selection-mode/package.json @@ -15,12 +15,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/row-selection-template-excel/package.json b/samples/grids/tree-grid/row-selection-template-excel/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/row-selection-template-excel/package.json +++ b/samples/grids/tree-grid/row-selection-template-excel/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/row-selection-template-numbers/package.json b/samples/grids/tree-grid/row-selection-template-numbers/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/row-selection-template-numbers/package.json +++ b/samples/grids/tree-grid/row-selection-template-numbers/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/row-styles/package.json b/samples/grids/tree-grid/row-styles/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/row-styles/package.json +++ b/samples/grids/tree-grid/row-styles/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/state-persistence-about/package.json b/samples/grids/tree-grid/state-persistence-about/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/tree-grid/state-persistence-about/package.json +++ b/samples/grids/tree-grid/state-persistence-about/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/state-persistence-main/package.json b/samples/grids/tree-grid/state-persistence-main/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/tree-grid/state-persistence-main/package.json +++ b/samples/grids/tree-grid/state-persistence-main/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/toolbar-sample-1/package.json b/samples/grids/tree-grid/toolbar-sample-1/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/toolbar-sample-1/package.json +++ b/samples/grids/tree-grid/toolbar-sample-1/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/toolbar-sample-2/package.json b/samples/grids/tree-grid/toolbar-sample-2/package.json index 43ae315005..7a4362fa38 100644 --- a/samples/grids/tree-grid/toolbar-sample-2/package.json +++ b/samples/grids/tree-grid/toolbar-sample-2/package.json @@ -15,13 +15,13 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/toolbar-sample-3/package.json b/samples/grids/tree-grid/toolbar-sample-3/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/toolbar-sample-3/package.json +++ b/samples/grids/tree-grid/toolbar-sample-3/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/toolbar-sample-4/package.json b/samples/grids/tree-grid/toolbar-sample-4/package.json index 43ae315005..7a4362fa38 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.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-datasources": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/toolbar-style/package.json b/samples/grids/tree-grid/toolbar-style/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/toolbar-style/package.json +++ b/samples/grids/tree-grid/toolbar-style/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree-grid/using-primary-foreign-keys/package.json b/samples/grids/tree-grid/using-primary-foreign-keys/package.json index 9f9b1d879b..6120f7615b 100644 --- a/samples/grids/tree-grid/using-primary-foreign-keys/package.json +++ b/samples/grids/tree-grid/using-primary-foreign-keys/package.json @@ -15,10 +15,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree/basic-example/package.json b/samples/grids/tree/basic-example/package.json index 4f838fc8fe..cdf93be750 100644 --- a/samples/grids/tree/basic-example/package.json +++ b/samples/grids/tree/basic-example/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/grids/tree/styling/package.json b/samples/grids/tree/styling/package.json index 4f838fc8fe..cdf93be750 100644 --- a/samples/grids/tree/styling/package.json +++ b/samples/grids/tree/styling/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/inputs/badge/dot/package.json b/samples/inputs/badge/dot/package.json index 2846cb4238..85e321c5fe 100644 --- a/samples/inputs/badge/dot/package.json +++ b/samples/inputs/badge/dot/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/badge/icon/package.json b/samples/inputs/badge/icon/package.json index 11098b7706..1689e09015 100644 --- a/samples/inputs/badge/icon/package.json +++ b/samples/inputs/badge/icon/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/badge/outlined/package.json b/samples/inputs/badge/outlined/package.json index 71f8941f4a..06c1aa9bf9 100644 --- a/samples/inputs/badge/outlined/package.json +++ b/samples/inputs/badge/outlined/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/badge/overview/package.json b/samples/inputs/badge/overview/package.json index 980934d407..90ab76208e 100644 --- a/samples/inputs/badge/overview/package.json +++ b/samples/inputs/badge/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/badge/shape/package.json b/samples/inputs/badge/shape/package.json index d6aafe19cb..35c3ff96ce 100644 --- a/samples/inputs/badge/shape/package.json +++ b/samples/inputs/badge/shape/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/badge/size/package.json b/samples/inputs/badge/size/package.json index 3a1ccaa183..fc97fb8300 100644 --- a/samples/inputs/badge/size/package.json +++ b/samples/inputs/badge/size/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/badge/styling/package.json b/samples/inputs/badge/styling/package.json index d6aafe19cb..35c3ff96ce 100644 --- a/samples/inputs/badge/styling/package.json +++ b/samples/inputs/badge/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/badge/tailwind-styling/package.json b/samples/inputs/badge/tailwind-styling/package.json index e1d7f6b876..64a6a3ddc2 100644 --- a/samples/inputs/badge/tailwind-styling/package.json +++ b/samples/inputs/badge/tailwind-styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/badge/type/package.json b/samples/inputs/badge/type/package.json index 15f063ec29..b6dbfecdb8 100644 --- a/samples/inputs/badge/type/package.json +++ b/samples/inputs/badge/type/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/badge/variants/package.json b/samples/inputs/badge/variants/package.json index 26f8fa5ed9..59f5a93871 100644 --- a/samples/inputs/badge/variants/package.json +++ b/samples/inputs/badge/variants/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button-group/alignment/package.json b/samples/inputs/button-group/alignment/package.json index 9121ae09cb..3f8587f449 100644 --- a/samples/inputs/button-group/alignment/package.json +++ b/samples/inputs/button-group/alignment/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button-group/interaction-states/package.json b/samples/inputs/button-group/interaction-states/package.json index c5fb9bdd3b..a50934ed57 100644 --- a/samples/inputs/button-group/interaction-states/package.json +++ b/samples/inputs/button-group/interaction-states/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button-group/overview/package.json b/samples/inputs/button-group/overview/package.json index 7cd1dae8a3..a8dd508ae4 100644 --- a/samples/inputs/button-group/overview/package.json +++ b/samples/inputs/button-group/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button-group/selection/package.json b/samples/inputs/button-group/selection/package.json index 7cbfcebe00..751b070082 100644 --- a/samples/inputs/button-group/selection/package.json +++ b/samples/inputs/button-group/selection/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button-group/size/package.json b/samples/inputs/button-group/size/package.json index 75ac5ca36a..840f93134d 100644 --- a/samples/inputs/button-group/size/package.json +++ b/samples/inputs/button-group/size/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button-group/states/package.json b/samples/inputs/button-group/states/package.json index 003410711d..afb35d1024 100644 --- a/samples/inputs/button-group/states/package.json +++ b/samples/inputs/button-group/states/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button-group/styling/package.json b/samples/inputs/button-group/styling/package.json index 78a6cad023..a5193d65f1 100644 --- a/samples/inputs/button-group/styling/package.json +++ b/samples/inputs/button-group/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button-group/tailwind-styling/package.json b/samples/inputs/button-group/tailwind-styling/package.json index 29a89fe1ae..3c6d4dd8f5 100644 --- a/samples/inputs/button-group/tailwind-styling/package.json +++ b/samples/inputs/button-group/tailwind-styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button/contained/package.json b/samples/inputs/button/contained/package.json index 9ab2b1a210..262cf601c4 100644 --- a/samples/inputs/button/contained/package.json +++ b/samples/inputs/button/contained/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button/download/package.json b/samples/inputs/button/download/package.json index c845ef72de..4db34196eb 100644 --- a/samples/inputs/button/download/package.json +++ b/samples/inputs/button/download/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button/fab/package.json b/samples/inputs/button/fab/package.json index 19cc71ab77..284d65e66d 100644 --- a/samples/inputs/button/fab/package.json +++ b/samples/inputs/button/fab/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button/flat/package.json b/samples/inputs/button/flat/package.json index e205b694a6..a1040e031f 100644 --- a/samples/inputs/button/flat/package.json +++ b/samples/inputs/button/flat/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button/interaction-states/package.json b/samples/inputs/button/interaction-states/package.json index ae5ee19153..5a8307a289 100644 --- a/samples/inputs/button/interaction-states/package.json +++ b/samples/inputs/button/interaction-states/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button/layout/package.json b/samples/inputs/button/layout/package.json index 0ea36e0a51..241f3e7c09 100644 --- a/samples/inputs/button/layout/package.json +++ b/samples/inputs/button/layout/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button/outlined/package.json b/samples/inputs/button/outlined/package.json index d3a84a352b..3d82af83c9 100644 --- a/samples/inputs/button/outlined/package.json +++ b/samples/inputs/button/outlined/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button/overview/package.json b/samples/inputs/button/overview/package.json index 6ff7eff818..795695786c 100644 --- a/samples/inputs/button/overview/package.json +++ b/samples/inputs/button/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button/size/package.json b/samples/inputs/button/size/package.json index 43ad02041d..79373f5d2d 100644 --- a/samples/inputs/button/size/package.json +++ b/samples/inputs/button/size/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button/states/package.json b/samples/inputs/button/states/package.json index 63d1867b4a..ec0c33cbdf 100644 --- a/samples/inputs/button/states/package.json +++ b/samples/inputs/button/states/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button/styling/package.json b/samples/inputs/button/styling/package.json index f7a53a64ab..cf40ddec07 100644 --- a/samples/inputs/button/styling/package.json +++ b/samples/inputs/button/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/button/tailwind-styling/package.json b/samples/inputs/button/tailwind-styling/package.json index 4db0e74b0e..29f7000b35 100644 --- a/samples/inputs/button/tailwind-styling/package.json +++ b/samples/inputs/button/tailwind-styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/checkbox/checking/package.json b/samples/inputs/checkbox/checking/package.json index 3c6f5bd68b..7239ba9175 100644 --- a/samples/inputs/checkbox/checking/package.json +++ b/samples/inputs/checkbox/checking/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/checkbox/disabled/package.json b/samples/inputs/checkbox/disabled/package.json index 762f30cb2b..82369bc538 100644 --- a/samples/inputs/checkbox/disabled/package.json +++ b/samples/inputs/checkbox/disabled/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/checkbox/indeterminate/package.json b/samples/inputs/checkbox/indeterminate/package.json index 250e3bf096..5a1e417ce1 100644 --- a/samples/inputs/checkbox/indeterminate/package.json +++ b/samples/inputs/checkbox/indeterminate/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/checkbox/label/package.json b/samples/inputs/checkbox/label/package.json index 7291ea8f45..714e23a2b1 100644 --- a/samples/inputs/checkbox/label/package.json +++ b/samples/inputs/checkbox/label/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/checkbox/overview/package.json b/samples/inputs/checkbox/overview/package.json index d9e6f3d6bf..287e5b7f5a 100644 --- a/samples/inputs/checkbox/overview/package.json +++ b/samples/inputs/checkbox/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/checkbox/styling/package.json b/samples/inputs/checkbox/styling/package.json index d9e6f3d6bf..287e5b7f5a 100644 --- a/samples/inputs/checkbox/styling/package.json +++ b/samples/inputs/checkbox/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/chip/multiple/package.json b/samples/inputs/chip/multiple/package.json index d5cde38af2..9c389a08c1 100644 --- a/samples/inputs/chip/multiple/package.json +++ b/samples/inputs/chip/multiple/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/chip/outlined/package.json b/samples/inputs/chip/outlined/package.json index 96c974cec7..32812c7833 100644 --- a/samples/inputs/chip/outlined/package.json +++ b/samples/inputs/chip/outlined/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/chip/overview/package.json b/samples/inputs/chip/overview/package.json index 2c578ab533..23bbad5776 100644 --- a/samples/inputs/chip/overview/package.json +++ b/samples/inputs/chip/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/chip/size/package.json b/samples/inputs/chip/size/package.json index 6af04e9219..b9c9e54afe 100644 --- a/samples/inputs/chip/size/package.json +++ b/samples/inputs/chip/size/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/chip/styling/package.json b/samples/inputs/chip/styling/package.json index 062d5ab04b..0fdd5275be 100644 --- a/samples/inputs/chip/styling/package.json +++ b/samples/inputs/chip/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/chip/variants/package.json b/samples/inputs/chip/variants/package.json index fb3da7eeaa..f714f3d6e8 100644 --- a/samples/inputs/chip/variants/package.json +++ b/samples/inputs/chip/variants/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/circular-progress-indicator/dynamic/package.json b/samples/inputs/circular-progress-indicator/dynamic/package.json index 88de5fb14c..53b8f11c83 100644 --- a/samples/inputs/circular-progress-indicator/dynamic/package.json +++ b/samples/inputs/circular-progress-indicator/dynamic/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/circular-progress-indicator/indeterminate/package.json b/samples/inputs/circular-progress-indicator/indeterminate/package.json index 55a0a3424c..41a7f92e92 100644 --- a/samples/inputs/circular-progress-indicator/indeterminate/package.json +++ b/samples/inputs/circular-progress-indicator/indeterminate/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/circular-progress-indicator/simple/package.json b/samples/inputs/circular-progress-indicator/simple/package.json index 53ddd99c67..fc5fdfe987 100644 --- a/samples/inputs/circular-progress-indicator/simple/package.json +++ b/samples/inputs/circular-progress-indicator/simple/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/circular-progress-indicator/styling/package.json b/samples/inputs/circular-progress-indicator/styling/package.json index e81df78fa9..bb2d686065 100644 --- a/samples/inputs/circular-progress-indicator/styling/package.json +++ b/samples/inputs/circular-progress-indicator/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/color-editor/overview/package.json b/samples/inputs/color-editor/overview/package.json index 6ba09a74af..92a6e2ba89 100644 --- a/samples/inputs/color-editor/overview/package.json +++ b/samples/inputs/color-editor/overview/package.json @@ -14,10 +14,10 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-inputs": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/inputs/color-picker/alpha/package.json b/samples/inputs/color-picker/alpha/package.json index a9b50717c2..2becf36359 100644 --- a/samples/inputs/color-picker/alpha/package.json +++ b/samples/inputs/color-picker/alpha/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/color-picker/format/package.json b/samples/inputs/color-picker/format/package.json index dd4bcd09c7..84d7b7f96c 100644 --- a/samples/inputs/color-picker/format/package.json +++ b/samples/inputs/color-picker/format/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/color-picker/input-sizes/package.json b/samples/inputs/color-picker/input-sizes/package.json index 391e35c529..273f0f8a23 100644 --- a/samples/inputs/color-picker/input-sizes/package.json +++ b/samples/inputs/color-picker/input-sizes/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/color-picker/input/package.json b/samples/inputs/color-picker/input/package.json index 978c03adce..2e5ec1af6a 100644 --- a/samples/inputs/color-picker/input/package.json +++ b/samples/inputs/color-picker/input/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/color-picker/overview/package.json b/samples/inputs/color-picker/overview/package.json index a2dbac235d..f66a535dd6 100644 --- a/samples/inputs/color-picker/overview/package.json +++ b/samples/inputs/color-picker/overview/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/color-picker/sizes/package.json b/samples/inputs/color-picker/sizes/package.json index c180c7ff18..30417d840e 100644 --- a/samples/inputs/color-picker/sizes/package.json +++ b/samples/inputs/color-picker/sizes/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/color-picker/states/package.json b/samples/inputs/color-picker/states/package.json index a7c3649ba2..ca4d3881de 100644 --- a/samples/inputs/color-picker/states/package.json +++ b/samples/inputs/color-picker/states/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/color-picker/styling/package.json b/samples/inputs/color-picker/styling/package.json index 46d82361a9..6c46522b61 100644 --- a/samples/inputs/color-picker/styling/package.json +++ b/samples/inputs/color-picker/styling/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/color-picker/swatches/package.json b/samples/inputs/color-picker/swatches/package.json index 542e194a1a..44f3bcba72 100644 --- a/samples/inputs/color-picker/swatches/package.json +++ b/samples/inputs/color-picker/swatches/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/color-picker/tailwind-styling/package.json b/samples/inputs/color-picker/tailwind-styling/package.json index 6c1356b481..7940ebb838 100644 --- a/samples/inputs/color-picker/tailwind-styling/package.json +++ b/samples/inputs/color-picker/tailwind-styling/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/color-picker/value/package.json b/samples/inputs/color-picker/value/package.json index 8baf3a498e..ed1546b19a 100644 --- a/samples/inputs/color-picker/value/package.json +++ b/samples/inputs/color-picker/value/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/combo/features/package.json b/samples/inputs/combo/features/package.json index 73e8cc528a..2fb3eb5d74 100644 --- a/samples/inputs/combo/features/package.json +++ b/samples/inputs/combo/features/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/combo/overview/package.json b/samples/inputs/combo/overview/package.json index b1daa7674b..487a40756e 100644 --- a/samples/inputs/combo/overview/package.json +++ b/samples/inputs/combo/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/combo/selection/package.json b/samples/inputs/combo/selection/package.json index da8634cac2..f5fc1416f5 100644 --- a/samples/inputs/combo/selection/package.json +++ b/samples/inputs/combo/selection/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/combo/simplified/package.json b/samples/inputs/combo/simplified/package.json index 895905e4ec..cb247b6c6d 100644 --- a/samples/inputs/combo/simplified/package.json +++ b/samples/inputs/combo/simplified/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/combo/styling/package.json b/samples/inputs/combo/styling/package.json index c4b13b4569..42b1826a3d 100644 --- a/samples/inputs/combo/styling/package.json +++ b/samples/inputs/combo/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/combo/templates/package.json b/samples/inputs/combo/templates/package.json index 3d79206226..9cbc61b383 100644 --- a/samples/inputs/combo/templates/package.json +++ b/samples/inputs/combo/templates/package.json @@ -13,12 +13,12 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "igniteui-react-inputs": "19.6.0", "igniteui-react-layouts": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "lit-html": "^3.2.0", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/samples/inputs/date-time-input/input-format-display-format/package.json b/samples/inputs/date-time-input/input-format-display-format/package.json index f433fb0d84..817b05b620 100644 --- a/samples/inputs/date-time-input/input-format-display-format/package.json +++ b/samples/inputs/date-time-input/input-format-display-format/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/date-time-input/min-max-value/package.json b/samples/inputs/date-time-input/min-max-value/package.json index 126e7ad650..c88fb34798 100644 --- a/samples/inputs/date-time-input/min-max-value/package.json +++ b/samples/inputs/date-time-input/min-max-value/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/date-time-input/overview/package.json b/samples/inputs/date-time-input/overview/package.json index f694965500..ebaa3a62e2 100644 --- a/samples/inputs/date-time-input/overview/package.json +++ b/samples/inputs/date-time-input/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/date-time-input/step-up-down/package.json b/samples/inputs/date-time-input/step-up-down/package.json index 4c07656c4c..15c48a9f84 100644 --- a/samples/inputs/date-time-input/step-up-down/package.json +++ b/samples/inputs/date-time-input/step-up-down/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/date-time-input/styling/package.json b/samples/inputs/date-time-input/styling/package.json index f694965500..ebaa3a62e2 100644 --- a/samples/inputs/date-time-input/styling/package.json +++ b/samples/inputs/date-time-input/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/dropdown/group/package.json b/samples/inputs/dropdown/group/package.json index 84b97090ff..0cb500f69e 100644 --- a/samples/inputs/dropdown/group/package.json +++ b/samples/inputs/dropdown/group/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/dropdown/header/package.json b/samples/inputs/dropdown/header/package.json index b15836faee..555321cb7f 100644 --- a/samples/inputs/dropdown/header/package.json +++ b/samples/inputs/dropdown/header/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/dropdown/item/package.json b/samples/inputs/dropdown/item/package.json index 6f62180d5a..d0951433e1 100644 --- a/samples/inputs/dropdown/item/package.json +++ b/samples/inputs/dropdown/item/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/dropdown/overview/package.json b/samples/inputs/dropdown/overview/package.json index 821ee2e6f2..3b1cf68d86 100644 --- a/samples/inputs/dropdown/overview/package.json +++ b/samples/inputs/dropdown/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/dropdown/position/package.json b/samples/inputs/dropdown/position/package.json index 2370fe80db..8ff7112249 100644 --- a/samples/inputs/dropdown/position/package.json +++ b/samples/inputs/dropdown/position/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/dropdown/styling/package.json b/samples/inputs/dropdown/styling/package.json index 767dd29c8b..95643fbb73 100644 --- a/samples/inputs/dropdown/styling/package.json +++ b/samples/inputs/dropdown/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/dropdown/target/package.json b/samples/inputs/dropdown/target/package.json index 8b789eb4bf..fb90aed640 100644 --- a/samples/inputs/dropdown/target/package.json +++ b/samples/inputs/dropdown/target/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/highlight/helper-text/package.json b/samples/inputs/highlight/helper-text/package.json index c1ea425c4b..d70269b7d5 100644 --- a/samples/inputs/highlight/helper-text/package.json +++ b/samples/inputs/highlight/helper-text/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/highlight/overview/package.json b/samples/inputs/highlight/overview/package.json index 80bd0271e0..28bf34f91f 100644 --- a/samples/inputs/highlight/overview/package.json +++ b/samples/inputs/highlight/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/highlight/search/package.json b/samples/inputs/highlight/search/package.json index 5bf1a38c6d..198a7ec9ad 100644 --- a/samples/inputs/highlight/search/package.json +++ b/samples/inputs/highlight/search/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/highlight/styling/package.json b/samples/inputs/highlight/styling/package.json index 656187ef8f..ee1d70521a 100644 --- a/samples/inputs/highlight/styling/package.json +++ b/samples/inputs/highlight/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/icon-button/size/package.json b/samples/inputs/icon-button/size/package.json index 74fe40b1d0..49c9e88223 100644 --- a/samples/inputs/icon-button/size/package.json +++ b/samples/inputs/icon-button/size/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/icon-button/styling/package.json b/samples/inputs/icon-button/styling/package.json index 8fce689af0..f29fdb25b7 100644 --- a/samples/inputs/icon-button/styling/package.json +++ b/samples/inputs/icon-button/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/icon-button/variant/package.json b/samples/inputs/icon-button/variant/package.json index 846c86fc59..78762ce27b 100644 --- a/samples/inputs/icon-button/variant/package.json +++ b/samples/inputs/icon-button/variant/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/input/helper-text/package.json b/samples/inputs/input/helper-text/package.json index dcaa2a4da1..17ff06ff33 100644 --- a/samples/inputs/input/helper-text/package.json +++ b/samples/inputs/input/helper-text/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/input/overview/package.json b/samples/inputs/input/overview/package.json index 50734da336..97c33868a0 100644 --- a/samples/inputs/input/overview/package.json +++ b/samples/inputs/input/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/input/prefix-suffix/package.json b/samples/inputs/input/prefix-suffix/package.json index a8fa0f4e70..4fa77374cc 100644 --- a/samples/inputs/input/prefix-suffix/package.json +++ b/samples/inputs/input/prefix-suffix/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/input/size/package.json b/samples/inputs/input/size/package.json index 84626ef289..38dc22a6bb 100644 --- a/samples/inputs/input/size/package.json +++ b/samples/inputs/input/size/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/input/styling/package.json b/samples/inputs/input/styling/package.json index a0feef7f67..e6b3756025 100644 --- a/samples/inputs/input/styling/package.json +++ b/samples/inputs/input/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/linear-progress-indicator/dynamic/package.json b/samples/inputs/linear-progress-indicator/dynamic/package.json index 372f939d13..cb2005916f 100644 --- a/samples/inputs/linear-progress-indicator/dynamic/package.json +++ b/samples/inputs/linear-progress-indicator/dynamic/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/linear-progress-indicator/simple/package.json b/samples/inputs/linear-progress-indicator/simple/package.json index 53d0381ba4..11c2779671 100644 --- a/samples/inputs/linear-progress-indicator/simple/package.json +++ b/samples/inputs/linear-progress-indicator/simple/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/linear-progress-indicator/striped/package.json b/samples/inputs/linear-progress-indicator/striped/package.json index f32600ba8f..42d56612c8 100644 --- a/samples/inputs/linear-progress-indicator/striped/package.json +++ b/samples/inputs/linear-progress-indicator/striped/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/linear-progress-indicator/styling/package.json b/samples/inputs/linear-progress-indicator/styling/package.json index a286db6960..831b275713 100644 --- a/samples/inputs/linear-progress-indicator/styling/package.json +++ b/samples/inputs/linear-progress-indicator/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/linear-progress-indicator/types/package.json b/samples/inputs/linear-progress-indicator/types/package.json index 2878c691aa..1dbcd65528 100644 --- a/samples/inputs/linear-progress-indicator/types/package.json +++ b/samples/inputs/linear-progress-indicator/types/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/mask-input/applying-mask/package.json b/samples/inputs/mask-input/applying-mask/package.json index c9bb5c779f..09deccb055 100644 --- a/samples/inputs/mask-input/applying-mask/package.json +++ b/samples/inputs/mask-input/applying-mask/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/mask-input/overview/package.json b/samples/inputs/mask-input/overview/package.json index 3258204468..ca7e19925c 100644 --- a/samples/inputs/mask-input/overview/package.json +++ b/samples/inputs/mask-input/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/mask-input/value-modes/package.json b/samples/inputs/mask-input/value-modes/package.json index 21d839f202..e06b22a364 100644 --- a/samples/inputs/mask-input/value-modes/package.json +++ b/samples/inputs/mask-input/value-modes/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/qr-code/corner-shapes/package.json b/samples/inputs/qr-code/corner-shapes/package.json index ff804856d1..284ff6980f 100644 --- a/samples/inputs/qr-code/corner-shapes/package.json +++ b/samples/inputs/qr-code/corner-shapes/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.2", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/qr-code/dot-shapes/package.json b/samples/inputs/qr-code/dot-shapes/package.json index 7dd8f7d0fe..51ecf156a5 100644 --- a/samples/inputs/qr-code/dot-shapes/package.json +++ b/samples/inputs/qr-code/dot-shapes/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.2", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/qr-code/error-correction/package.json b/samples/inputs/qr-code/error-correction/package.json index f5a4080518..d689cc6f2a 100644 --- a/samples/inputs/qr-code/error-correction/package.json +++ b/samples/inputs/qr-code/error-correction/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.2", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/qr-code/logo/package.json b/samples/inputs/qr-code/logo/package.json index 65077dbd18..e09ab6c1dd 100644 --- a/samples/inputs/qr-code/logo/package.json +++ b/samples/inputs/qr-code/logo/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.2", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/qr-code/overview/package.json b/samples/inputs/qr-code/overview/package.json index 81062c390d..cc87a9875e 100644 --- a/samples/inputs/qr-code/overview/package.json +++ b/samples/inputs/qr-code/overview/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.2", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/qr-code/overview/src/index.tsx b/samples/inputs/qr-code/overview/src/index.tsx index c33a146439..b510fc7535 100644 --- a/samples/inputs/qr-code/overview/src/index.tsx +++ b/samples/inputs/qr-code/overview/src/index.tsx @@ -11,7 +11,7 @@ type DotShape = "square" | "circle" | "rounded"; export default function QrCodeOverview() { const [shape, setShape] = useState("square"); - const [size, setSize] = useState(120); + const [size, setSize] = useState(300); const [logoEnabled, setLogoEnabled] = useState(true); return ( diff --git a/samples/inputs/qr-code/size/package.json b/samples/inputs/qr-code/size/package.json index e4538a0239..9230bf459b 100644 --- a/samples/inputs/qr-code/size/package.json +++ b/samples/inputs/qr-code/size/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.2", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/qr-code/styling/package.json b/samples/inputs/qr-code/styling/package.json index dc708c9cbe..f696f758e4 100644 --- a/samples/inputs/qr-code/styling/package.json +++ b/samples/inputs/qr-code/styling/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.2", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/qr-code/tailwind-styling/package.json b/samples/inputs/qr-code/tailwind-styling/package.json index 5c2fef3b7b..f06cfc06db 100644 --- a/samples/inputs/qr-code/tailwind-styling/package.json +++ b/samples/inputs/qr-code/tailwind-styling/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.3.2", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/radio/alignment/package.json b/samples/inputs/radio/alignment/package.json index c601d61ff0..f4220b7e4b 100644 --- a/samples/inputs/radio/alignment/package.json +++ b/samples/inputs/radio/alignment/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/radio/disabled/package.json b/samples/inputs/radio/disabled/package.json index 9b31563396..6c1653a4f2 100644 --- a/samples/inputs/radio/disabled/package.json +++ b/samples/inputs/radio/disabled/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/radio/group/package.json b/samples/inputs/radio/group/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/inputs/radio/group/package.json +++ b/samples/inputs/radio/group/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/radio/invalid/package.json b/samples/inputs/radio/invalid/package.json index e7b268c21d..53a80ec25f 100644 --- a/samples/inputs/radio/invalid/package.json +++ b/samples/inputs/radio/invalid/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/radio/label/package.json b/samples/inputs/radio/label/package.json index 52b46e745c..dadcb97b08 100644 --- a/samples/inputs/radio/label/package.json +++ b/samples/inputs/radio/label/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/radio/styling/package.json b/samples/inputs/radio/styling/package.json index 38cb34f6bb..2796e7134d 100644 --- a/samples/inputs/radio/styling/package.json +++ b/samples/inputs/radio/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/rating/basic/package.json b/samples/inputs/rating/basic/package.json index 6ff7eff818..795695786c 100644 --- a/samples/inputs/rating/basic/package.json +++ b/samples/inputs/rating/basic/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/rating/custom/package.json b/samples/inputs/rating/custom/package.json index 6ff7eff818..795695786c 100644 --- a/samples/inputs/rating/custom/package.json +++ b/samples/inputs/rating/custom/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/rating/empty/package.json b/samples/inputs/rating/empty/package.json index 6ff7eff818..795695786c 100644 --- a/samples/inputs/rating/empty/package.json +++ b/samples/inputs/rating/empty/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/rating/single-selection/package.json b/samples/inputs/rating/single-selection/package.json index 6ff7eff818..795695786c 100644 --- a/samples/inputs/rating/single-selection/package.json +++ b/samples/inputs/rating/single-selection/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/rating/styling/package.json b/samples/inputs/rating/styling/package.json index 6ff7eff818..795695786c 100644 --- a/samples/inputs/rating/styling/package.json +++ b/samples/inputs/rating/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/ripple/button/package.json b/samples/inputs/ripple/button/package.json index dd33c704b2..e6e91fd782 100644 --- a/samples/inputs/ripple/button/package.json +++ b/samples/inputs/ripple/button/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/ripple/color/package.json b/samples/inputs/ripple/color/package.json index 9a856c0c37..4b3129b09f 100644 --- a/samples/inputs/ripple/color/package.json +++ b/samples/inputs/ripple/color/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/select/group/package.json b/samples/inputs/select/group/package.json index 8e64593eb0..1bb8de7dda 100644 --- a/samples/inputs/select/group/package.json +++ b/samples/inputs/select/group/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/select/header/package.json b/samples/inputs/select/header/package.json index 836509a1d7..ea2dfe76d6 100644 --- a/samples/inputs/select/header/package.json +++ b/samples/inputs/select/header/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/select/item/package.json b/samples/inputs/select/item/package.json index 609be5bfc8..38c95c59fc 100644 --- a/samples/inputs/select/item/package.json +++ b/samples/inputs/select/item/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/select/overview/package.json b/samples/inputs/select/overview/package.json index 11d0079557..f877795325 100644 --- a/samples/inputs/select/overview/package.json +++ b/samples/inputs/select/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/select/styling/package.json b/samples/inputs/select/styling/package.json index ee85fe9f72..69b875bdc6 100644 --- a/samples/inputs/select/styling/package.json +++ b/samples/inputs/select/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/slider/constraints/package.json b/samples/inputs/slider/constraints/package.json index f2febf0ba9..ebbc280b55 100644 --- a/samples/inputs/slider/constraints/package.json +++ b/samples/inputs/slider/constraints/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/slider/disabled/package.json b/samples/inputs/slider/disabled/package.json index 1348686432..eec571e9c7 100644 --- a/samples/inputs/slider/disabled/package.json +++ b/samples/inputs/slider/disabled/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/slider/discrete/package.json b/samples/inputs/slider/discrete/package.json index a4d9d4ea79..0321bcef15 100644 --- a/samples/inputs/slider/discrete/package.json +++ b/samples/inputs/slider/discrete/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/slider/labels/package.json b/samples/inputs/slider/labels/package.json index 6ea6214250..44d7a2c6bc 100644 --- a/samples/inputs/slider/labels/package.json +++ b/samples/inputs/slider/labels/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/slider/overview/package.json b/samples/inputs/slider/overview/package.json index 82c5cbbfca..f61469b1c9 100644 --- a/samples/inputs/slider/overview/package.json +++ b/samples/inputs/slider/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/slider/styling/package.json b/samples/inputs/slider/styling/package.json index 5388c2a041..642e795340 100644 --- a/samples/inputs/slider/styling/package.json +++ b/samples/inputs/slider/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/slider/tick-labels/package.json b/samples/inputs/slider/tick-labels/package.json index 1b23014185..3d26cd48f3 100644 --- a/samples/inputs/slider/tick-labels/package.json +++ b/samples/inputs/slider/tick-labels/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/slider/ticks/package.json b/samples/inputs/slider/ticks/package.json index c32934f7c9..165eb43560 100644 --- a/samples/inputs/slider/ticks/package.json +++ b/samples/inputs/slider/ticks/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/slider/value-format/package.json b/samples/inputs/slider/value-format/package.json index 5e30b13afc..260b1bfd05 100644 --- a/samples/inputs/slider/value-format/package.json +++ b/samples/inputs/slider/value-format/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/slider/value/package.json b/samples/inputs/slider/value/package.json index 25225a67c0..dbfa632ef6 100644 --- a/samples/inputs/slider/value/package.json +++ b/samples/inputs/slider/value/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/switches/disabled/package.json b/samples/inputs/switches/disabled/package.json index f1c9f806c5..4c0bb3023c 100644 --- a/samples/inputs/switches/disabled/package.json +++ b/samples/inputs/switches/disabled/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/switches/enabled/package.json b/samples/inputs/switches/enabled/package.json index 0ee6989e41..5a616e7df2 100644 --- a/samples/inputs/switches/enabled/package.json +++ b/samples/inputs/switches/enabled/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/switches/layout/package.json b/samples/inputs/switches/layout/package.json index 41ccf6d2c2..9ea1c5290c 100644 --- a/samples/inputs/switches/layout/package.json +++ b/samples/inputs/switches/layout/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/switches/overview/package.json b/samples/inputs/switches/overview/package.json index e2b77a2c5b..474c9ad4dd 100644 --- a/samples/inputs/switches/overview/package.json +++ b/samples/inputs/switches/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/switches/selected/package.json b/samples/inputs/switches/selected/package.json index e697c1bedf..51ae07f0e7 100644 --- a/samples/inputs/switches/selected/package.json +++ b/samples/inputs/switches/selected/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/switches/styling/package.json b/samples/inputs/switches/styling/package.json index 035625c19a..0add410c17 100644 --- a/samples/inputs/switches/styling/package.json +++ b/samples/inputs/switches/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/switches/tailwind-styling/package.json b/samples/inputs/switches/tailwind-styling/package.json index f5c00e039d..d1d20aa10d 100644 --- a/samples/inputs/switches/tailwind-styling/package.json +++ b/samples/inputs/switches/tailwind-styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/textarea/form-integration/package.json b/samples/inputs/textarea/form-integration/package.json index 039e066bea..7a861f3344 100644 --- a/samples/inputs/textarea/form-integration/package.json +++ b/samples/inputs/textarea/form-integration/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/textarea/overview/package.json b/samples/inputs/textarea/overview/package.json index 7439265740..9789c684ea 100644 --- a/samples/inputs/textarea/overview/package.json +++ b/samples/inputs/textarea/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/textarea/resize/package.json b/samples/inputs/textarea/resize/package.json index d82b13c78b..b12e64bec8 100644 --- a/samples/inputs/textarea/resize/package.json +++ b/samples/inputs/textarea/resize/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/textarea/slots/package.json b/samples/inputs/textarea/slots/package.json index bcff9ec762..c7779050bb 100644 --- a/samples/inputs/textarea/slots/package.json +++ b/samples/inputs/textarea/slots/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/textarea/styling/package.json b/samples/inputs/textarea/styling/package.json index 35377f0d28..37824f1376 100644 --- a/samples/inputs/textarea/styling/package.json +++ b/samples/inputs/textarea/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/tooltip/advanced/package.json b/samples/inputs/tooltip/advanced/package.json index 8b6117a6fb..40a7550d06 100644 --- a/samples/inputs/tooltip/advanced/package.json +++ b/samples/inputs/tooltip/advanced/package.json @@ -13,10 +13,10 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/tooltip/overview/package.json b/samples/inputs/tooltip/overview/package.json index 6ff7eff818..795695786c 100644 --- a/samples/inputs/tooltip/overview/package.json +++ b/samples/inputs/tooltip/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/tooltip/placement/package.json b/samples/inputs/tooltip/placement/package.json index 6ff7eff818..795695786c 100644 --- a/samples/inputs/tooltip/placement/package.json +++ b/samples/inputs/tooltip/placement/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/tooltip/rich/package.json b/samples/inputs/tooltip/rich/package.json index 6ff7eff818..795695786c 100644 --- a/samples/inputs/tooltip/rich/package.json +++ b/samples/inputs/tooltip/rich/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/tooltip/styling/package.json b/samples/inputs/tooltip/styling/package.json index 6ff7eff818..795695786c 100644 --- a/samples/inputs/tooltip/styling/package.json +++ b/samples/inputs/tooltip/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/inputs/tooltip/triggers/package.json b/samples/inputs/tooltip/triggers/package.json index 6ff7eff818..795695786c 100644 --- a/samples/inputs/tooltip/triggers/package.json +++ b/samples/inputs/tooltip/triggers/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/interactions/chat/features/package.json b/samples/interactions/chat/features/package.json index 38618c696f..088f1de60d 100644 --- a/samples/interactions/chat/features/package.json +++ b/samples/interactions/chat/features/package.json @@ -14,9 +14,9 @@ "dependencies": { "dompurify": "^3.3.0", "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "marked": "^16.4.1", "marked-shiki": "^1.2.1", "react": "^19.2.0", diff --git a/samples/interactions/chat/overview/package.json b/samples/interactions/chat/overview/package.json index c75cdf4f92..f207dc8c0c 100644 --- a/samples/interactions/chat/overview/package.json +++ b/samples/interactions/chat/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/interactions/chat/styling/package.json b/samples/interactions/chat/styling/package.json index 56e7964b3e..b4a5b607f8 100644 --- a/samples/interactions/chat/styling/package.json +++ b/samples/interactions/chat/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/interactions/query-builder/overview/package.json b/samples/interactions/query-builder/overview/package.json index 941c47e88f..928fea992f 100644 --- a/samples/interactions/query-builder/overview/package.json +++ b/samples/interactions/query-builder/overview/package.json @@ -14,7 +14,7 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "lit-html": "^3.2.0", diff --git a/samples/interactions/query-builder/template/package.json b/samples/interactions/query-builder/template/package.json index 3091e003e6..5b6729c967 100644 --- a/samples/interactions/query-builder/template/package.json +++ b/samples/interactions/query-builder/template/package.json @@ -14,7 +14,7 @@ "lint": "eslint ./src/**/*.{ts,tsx}" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-grids": "19.7.0", "lit-html": "^3.2.0", diff --git a/samples/layouts/accordion/customization/package.json b/samples/layouts/accordion/customization/package.json index 358705249d..81f84d96c8 100644 --- a/samples/layouts/accordion/customization/package.json +++ b/samples/layouts/accordion/customization/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/accordion/nested-scenario/package.json b/samples/layouts/accordion/nested-scenario/package.json index fcf6719c6b..2cf55c09b0 100644 --- a/samples/layouts/accordion/nested-scenario/package.json +++ b/samples/layouts/accordion/nested-scenario/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/accordion/overview/package.json b/samples/layouts/accordion/overview/package.json index d01e0359af..2cd59211d6 100644 --- a/samples/layouts/accordion/overview/package.json +++ b/samples/layouts/accordion/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/accordion/programmatic-expansion/package.json b/samples/layouts/accordion/programmatic-expansion/package.json index de10646370..72a152ab9a 100644 --- a/samples/layouts/accordion/programmatic-expansion/package.json +++ b/samples/layouts/accordion/programmatic-expansion/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/accordion/styling/package.json b/samples/layouts/accordion/styling/package.json index ebf67487ca..147cf97c2d 100644 --- a/samples/layouts/accordion/styling/package.json +++ b/samples/layouts/accordion/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/accordion/tailwind-styling/package.json b/samples/layouts/accordion/tailwind-styling/package.json index 24d204ed97..98578376df 100644 --- a/samples/layouts/accordion/tailwind-styling/package.json +++ b/samples/layouts/accordion/tailwind-styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/avatar/image/package.json b/samples/layouts/avatar/image/package.json index e3fce6a82c..372eeead51 100644 --- a/samples/layouts/avatar/image/package.json +++ b/samples/layouts/avatar/image/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/avatar/overview/package.json b/samples/layouts/avatar/overview/package.json index 9be32ebca8..3ea5825694 100644 --- a/samples/layouts/avatar/overview/package.json +++ b/samples/layouts/avatar/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/avatar/shape/package.json b/samples/layouts/avatar/shape/package.json index 359aa5c319..75ce1c1c6c 100644 --- a/samples/layouts/avatar/shape/package.json +++ b/samples/layouts/avatar/shape/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/avatar/size/package.json b/samples/layouts/avatar/size/package.json index 8777a03310..91e2511a9d 100644 --- a/samples/layouts/avatar/size/package.json +++ b/samples/layouts/avatar/size/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/avatar/styling/package.json b/samples/layouts/avatar/styling/package.json index f72fc0a12d..2b9af35b6d 100644 --- a/samples/layouts/avatar/styling/package.json +++ b/samples/layouts/avatar/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/avatar/tailwind-styling/package.json b/samples/layouts/avatar/tailwind-styling/package.json index 771b99ef8d..cc8b80c305 100644 --- a/samples/layouts/avatar/tailwind-styling/package.json +++ b/samples/layouts/avatar/tailwind-styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/avatar/variants/package.json b/samples/layouts/avatar/variants/package.json index 2edc46b8a0..806c6923d2 100644 --- a/samples/layouts/avatar/variants/package.json +++ b/samples/layouts/avatar/variants/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/breadcrumbs/custom-separator/package.json b/samples/layouts/breadcrumbs/custom-separator/package.json index f041473b3c..abb059435c 100644 --- a/samples/layouts/breadcrumbs/custom-separator/package.json +++ b/samples/layouts/breadcrumbs/custom-separator/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.4.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/breadcrumbs/overview/package.json b/samples/layouts/breadcrumbs/overview/package.json index 829e83893b..2b684a9a4e 100644 --- a/samples/layouts/breadcrumbs/overview/package.json +++ b/samples/layouts/breadcrumbs/overview/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.4.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/breadcrumbs/prefix-suffix/package.json b/samples/layouts/breadcrumbs/prefix-suffix/package.json index 9e616a9753..3412cdafc1 100644 --- a/samples/layouts/breadcrumbs/prefix-suffix/package.json +++ b/samples/layouts/breadcrumbs/prefix-suffix/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.4.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/breadcrumbs/sizes/package.json b/samples/layouts/breadcrumbs/sizes/package.json index d9cf89e508..dead666af9 100644 --- a/samples/layouts/breadcrumbs/sizes/package.json +++ b/samples/layouts/breadcrumbs/sizes/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.4.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/breadcrumbs/states/package.json b/samples/layouts/breadcrumbs/states/package.json index 85e989e03a..a690493e67 100644 --- a/samples/layouts/breadcrumbs/states/package.json +++ b/samples/layouts/breadcrumbs/states/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.4.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/breadcrumbs/styling/package.json b/samples/layouts/breadcrumbs/styling/package.json index 514299322b..c103427e34 100644 --- a/samples/layouts/breadcrumbs/styling/package.json +++ b/samples/layouts/breadcrumbs/styling/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.4.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/breadcrumbs/tailwind-styling/package.json b/samples/layouts/breadcrumbs/tailwind-styling/package.json index 4154b519c4..9fff0cb539 100644 --- a/samples/layouts/breadcrumbs/tailwind-styling/package.json +++ b/samples/layouts/breadcrumbs/tailwind-styling/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.4.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/breadcrumbs/wrapping/package.json b/samples/layouts/breadcrumbs/wrapping/package.json index d64a76ed6b..20d456c42d 100644 --- a/samples/layouts/breadcrumbs/wrapping/package.json +++ b/samples/layouts/breadcrumbs/wrapping/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.4.0", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/card/horizontal/package.json b/samples/layouts/card/horizontal/package.json index 1f7b5210c5..07bc2b9e73 100644 --- a/samples/layouts/card/horizontal/package.json +++ b/samples/layouts/card/horizontal/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/card/overview/package.json b/samples/layouts/card/overview/package.json index b5eeebc2b1..25260785fb 100644 --- a/samples/layouts/card/overview/package.json +++ b/samples/layouts/card/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/card/semi-horizontal/package.json b/samples/layouts/card/semi-horizontal/package.json index 5b9de9656c..308ae336df 100644 --- a/samples/layouts/card/semi-horizontal/package.json +++ b/samples/layouts/card/semi-horizontal/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/card/styling/package.json b/samples/layouts/card/styling/package.json index d7c8380a1f..b91c8a5e0c 100644 --- a/samples/layouts/card/styling/package.json +++ b/samples/layouts/card/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/carousel/animations/package.json b/samples/layouts/carousel/animations/package.json index d41ca3e100..777ead03f7 100644 --- a/samples/layouts/carousel/animations/package.json +++ b/samples/layouts/carousel/animations/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/carousel/components/package.json b/samples/layouts/carousel/components/package.json index 6ec303b8a6..9f98bf5f37 100644 --- a/samples/layouts/carousel/components/package.json +++ b/samples/layouts/carousel/components/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/carousel/overview/package.json b/samples/layouts/carousel/overview/package.json index 026c2047a7..dd2287540c 100644 --- a/samples/layouts/carousel/overview/package.json +++ b/samples/layouts/carousel/overview/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/carousel/thumbnail/package.json b/samples/layouts/carousel/thumbnail/package.json index 05f3db282c..fc270427fd 100644 --- a/samples/layouts/carousel/thumbnail/package.json +++ b/samples/layouts/carousel/thumbnail/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/divider/dashed/package.json b/samples/layouts/divider/dashed/package.json index 388946038c..d396a2bb6a 100644 --- a/samples/layouts/divider/dashed/package.json +++ b/samples/layouts/divider/dashed/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/divider/middle/package.json b/samples/layouts/divider/middle/package.json index 388946038c..d396a2bb6a 100644 --- a/samples/layouts/divider/middle/package.json +++ b/samples/layouts/divider/middle/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/divider/overview/package.json b/samples/layouts/divider/overview/package.json index 388946038c..d396a2bb6a 100644 --- a/samples/layouts/divider/overview/package.json +++ b/samples/layouts/divider/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/divider/select/package.json b/samples/layouts/divider/select/package.json index 388946038c..d396a2bb6a 100644 --- a/samples/layouts/divider/select/package.json +++ b/samples/layouts/divider/select/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/divider/vertical/package.json b/samples/layouts/divider/vertical/package.json index 388946038c..d396a2bb6a 100644 --- a/samples/layouts/divider/vertical/package.json +++ b/samples/layouts/divider/vertical/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/dock-manager/styling/package.json b/samples/layouts/dock-manager/styling/package.json index 7d0a47231f..4488f23bda 100644 --- a/samples/layouts/dock-manager/styling/package.json +++ b/samples/layouts/dock-manager/styling/package.json @@ -12,7 +12,7 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", "igniteui-react-dockmanager": "19.7.0", "react": "^19.2.0", diff --git a/samples/layouts/expansion-panel/component-customization/package.json b/samples/layouts/expansion-panel/component-customization/package.json index 09aabfbd83..21f1dada24 100644 --- a/samples/layouts/expansion-panel/component-customization/package.json +++ b/samples/layouts/expansion-panel/component-customization/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/expansion-panel/properties-and-events/package.json b/samples/layouts/expansion-panel/properties-and-events/package.json index fd634f8ca6..481b184404 100644 --- a/samples/layouts/expansion-panel/properties-and-events/package.json +++ b/samples/layouts/expansion-panel/properties-and-events/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/expansion-panel/styling/package.json b/samples/layouts/expansion-panel/styling/package.json index bc1fc9ad9f..17665bc4e9 100644 --- a/samples/layouts/expansion-panel/styling/package.json +++ b/samples/layouts/expansion-panel/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/expansion-panel/usage/package.json b/samples/layouts/expansion-panel/usage/package.json index 14c58b8e50..01f8c937b3 100644 --- a/samples/layouts/expansion-panel/usage/package.json +++ b/samples/layouts/expansion-panel/usage/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/icon/sizing/package.json b/samples/layouts/icon/sizing/package.json index d3d35066d3..f08bf4a29f 100644 --- a/samples/layouts/icon/sizing/package.json +++ b/samples/layouts/icon/sizing/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/icon/styling/package.json b/samples/layouts/icon/styling/package.json index 729ba6b184..70ab83d937 100644 --- a/samples/layouts/icon/styling/package.json +++ b/samples/layouts/icon/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/splitter/base/package.json b/samples/layouts/splitter/base/package.json index 841b642ccd..497ced19da 100644 --- a/samples/layouts/splitter/base/package.json +++ b/samples/layouts/splitter/base/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/splitter/nested/package.json b/samples/layouts/splitter/nested/package.json index be7d025833..bd9a164206 100644 --- a/samples/layouts/splitter/nested/package.json +++ b/samples/layouts/splitter/nested/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/splitter/styling/package.json b/samples/layouts/splitter/styling/package.json index a61bdb5336..d1e6204666 100644 --- a/samples/layouts/splitter/styling/package.json +++ b/samples/layouts/splitter/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/stepper/animations/package.json b/samples/layouts/stepper/animations/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/layouts/stepper/animations/package.json +++ b/samples/layouts/stepper/animations/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/stepper/linear/package.json b/samples/layouts/stepper/linear/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/layouts/stepper/linear/package.json +++ b/samples/layouts/stepper/linear/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/stepper/orientation/package.json b/samples/layouts/stepper/orientation/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/layouts/stepper/orientation/package.json +++ b/samples/layouts/stepper/orientation/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/stepper/step-height/package.json b/samples/layouts/stepper/step-height/package.json index 81bf091f1d..c4b3aab72c 100644 --- a/samples/layouts/stepper/step-height/package.json +++ b/samples/layouts/stepper/step-height/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/stepper/steptypes/package.json b/samples/layouts/stepper/steptypes/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/layouts/stepper/steptypes/package.json +++ b/samples/layouts/stepper/steptypes/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/stepper/styling/package.json b/samples/layouts/stepper/styling/package.json index 941bae3fe8..9a3ae50f72 100644 --- a/samples/layouts/stepper/styling/package.json +++ b/samples/layouts/stepper/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/tabs/alignment/package.json b/samples/layouts/tabs/alignment/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/layouts/tabs/alignment/package.json +++ b/samples/layouts/tabs/alignment/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/tabs/overview/package.json b/samples/layouts/tabs/overview/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/layouts/tabs/overview/package.json +++ b/samples/layouts/tabs/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/tabs/prefix-suffix/package.json b/samples/layouts/tabs/prefix-suffix/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/layouts/tabs/prefix-suffix/package.json +++ b/samples/layouts/tabs/prefix-suffix/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/tabs/scrolling/package.json b/samples/layouts/tabs/scrolling/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/layouts/tabs/scrolling/package.json +++ b/samples/layouts/tabs/scrolling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/tabs/styling/package.json b/samples/layouts/tabs/styling/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/layouts/tabs/styling/package.json +++ b/samples/layouts/tabs/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/tile-manager/actions/package.json b/samples/layouts/tile-manager/actions/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/layouts/tile-manager/actions/package.json +++ b/samples/layouts/tile-manager/actions/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/tile-manager/columngap/package.json b/samples/layouts/tile-manager/columngap/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/layouts/tile-manager/columngap/package.json +++ b/samples/layouts/tile-manager/columngap/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/tile-manager/dragndrop/package.json b/samples/layouts/tile-manager/dragndrop/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/layouts/tile-manager/dragndrop/package.json +++ b/samples/layouts/tile-manager/dragndrop/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/tile-manager/layout/package.json b/samples/layouts/tile-manager/layout/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/layouts/tile-manager/layout/package.json +++ b/samples/layouts/tile-manager/layout/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/tile-manager/overview/package.json b/samples/layouts/tile-manager/overview/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/layouts/tile-manager/overview/package.json +++ b/samples/layouts/tile-manager/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/tile-manager/resize/package.json b/samples/layouts/tile-manager/resize/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/layouts/tile-manager/resize/package.json +++ b/samples/layouts/tile-manager/resize/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/tile-manager/styling/package.json b/samples/layouts/tile-manager/styling/package.json index 92c1ea60f5..6d511528ed 100644 --- a/samples/layouts/tile-manager/styling/package.json +++ b/samples/layouts/tile-manager/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/maps/geo-map/display-all-imagery/package.json b/samples/maps/geo-map/display-all-imagery/package.json index 5fefa5700f..5e4f294b90 100644 --- a/samples/maps/geo-map/display-all-imagery/package.json +++ b/samples/maps/geo-map/display-all-imagery/package.json @@ -12,7 +12,7 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-maps": "19.6.0", diff --git a/samples/maps/geo-map/display-azure-imagery/package.json b/samples/maps/geo-map/display-azure-imagery/package.json index b49a014254..bb8058557a 100644 --- a/samples/maps/geo-map/display-azure-imagery/package.json +++ b/samples/maps/geo-map/display-azure-imagery/package.json @@ -12,7 +12,7 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-maps": "19.6.0", diff --git a/samples/maps/geo-map/display-bing-imagery/package.json b/samples/maps/geo-map/display-bing-imagery/package.json index 25109d40db..49e31a9873 100644 --- a/samples/maps/geo-map/display-bing-imagery/package.json +++ b/samples/maps/geo-map/display-bing-imagery/package.json @@ -12,7 +12,7 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-charts": "19.6.0", "igniteui-react-core": "19.6.0", "igniteui-react-maps": "19.6.0", diff --git a/samples/menus/nav-bar/overview/package.json b/samples/menus/nav-bar/overview/package.json index e35407c05a..02780581f0 100644 --- a/samples/menus/nav-bar/overview/package.json +++ b/samples/menus/nav-bar/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/menus/nav-bar/styling/package.json b/samples/menus/nav-bar/styling/package.json index 3184bc289d..eb36c39642 100644 --- a/samples/menus/nav-bar/styling/package.json +++ b/samples/menus/nav-bar/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/menus/nav-drawer/add-drawer-items/package.json b/samples/menus/nav-drawer/add-drawer-items/package.json index a16609ee9a..7b2a00f2be 100644 --- a/samples/menus/nav-drawer/add-drawer-items/package.json +++ b/samples/menus/nav-drawer/add-drawer-items/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/menus/nav-drawer/add-mini/package.json b/samples/menus/nav-drawer/add-mini/package.json index e2feec2818..54634719c7 100644 --- a/samples/menus/nav-drawer/add-mini/package.json +++ b/samples/menus/nav-drawer/add-mini/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/menus/nav-drawer/add-positions-navbar/package.json b/samples/menus/nav-drawer/add-positions-navbar/package.json index 1c64e12eb9..9138bf9a2f 100644 --- a/samples/menus/nav-drawer/add-positions-navbar/package.json +++ b/samples/menus/nav-drawer/add-positions-navbar/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/menus/nav-drawer/styling/package.json b/samples/menus/nav-drawer/styling/package.json index 8d3893365e..2795a9e268 100644 --- a/samples/menus/nav-drawer/styling/package.json +++ b/samples/menus/nav-drawer/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/notifications/banner/banner-advanced-sample/package.json b/samples/notifications/banner/banner-advanced-sample/package.json index e024a172f2..c5d3e1286c 100644 --- a/samples/notifications/banner/banner-advanced-sample/package.json +++ b/samples/notifications/banner/banner-advanced-sample/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/notifications/banner/banner-sample-1/package.json b/samples/notifications/banner/banner-sample-1/package.json index d1680222b8..5d7d68aac0 100644 --- a/samples/notifications/banner/banner-sample-1/package.json +++ b/samples/notifications/banner/banner-sample-1/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/notifications/banner/banner-sample-2/package.json b/samples/notifications/banner/banner-sample-2/package.json index b86eacd79d..1cb0b6f133 100644 --- a/samples/notifications/banner/banner-sample-2/package.json +++ b/samples/notifications/banner/banner-sample-2/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/notifications/banner/banner-styling/package.json b/samples/notifications/banner/banner-styling/package.json index 88f84fb33c..90b320f16e 100644 --- a/samples/notifications/banner/banner-styling/package.json +++ b/samples/notifications/banner/banner-styling/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/notifications/dialog/closing-variations/package.json b/samples/notifications/dialog/closing-variations/package.json index 9ea60e6f56..41e5d1efb5 100644 --- a/samples/notifications/dialog/closing-variations/package.json +++ b/samples/notifications/dialog/closing-variations/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/notifications/dialog/form/package.json b/samples/notifications/dialog/form/package.json index 2f84ef0c06..6c67dd512b 100644 --- a/samples/notifications/dialog/form/package.json +++ b/samples/notifications/dialog/form/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/notifications/dialog/overview/package.json b/samples/notifications/dialog/overview/package.json index 309d235566..4b0e38b8ae 100644 --- a/samples/notifications/dialog/overview/package.json +++ b/samples/notifications/dialog/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/notifications/dialog/styling/package.json b/samples/notifications/dialog/styling/package.json index 9bccedd661..e20f163574 100644 --- a/samples/notifications/dialog/styling/package.json +++ b/samples/notifications/dialog/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/notifications/snackbar/action-text/package.json b/samples/notifications/snackbar/action-text/package.json index a32e284341..67427ab5df 100644 --- a/samples/notifications/snackbar/action-text/package.json +++ b/samples/notifications/snackbar/action-text/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/notifications/snackbar/display-time/package.json b/samples/notifications/snackbar/display-time/package.json index 9ffd615c60..6b0e483881 100644 --- a/samples/notifications/snackbar/display-time/package.json +++ b/samples/notifications/snackbar/display-time/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/notifications/snackbar/overview/package.json b/samples/notifications/snackbar/overview/package.json index e3f10c71f5..508fb4cad1 100644 --- a/samples/notifications/snackbar/overview/package.json +++ b/samples/notifications/snackbar/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/notifications/snackbar/styling/package.json b/samples/notifications/snackbar/styling/package.json index e55bac64fa..168f31e6cf 100644 --- a/samples/notifications/snackbar/styling/package.json +++ b/samples/notifications/snackbar/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/notifications/toast/overview/package.json b/samples/notifications/toast/overview/package.json index 112b62a8b5..adae5d021b 100644 --- a/samples/notifications/toast/overview/package.json +++ b/samples/notifications/toast/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/notifications/toast/properties/package.json b/samples/notifications/toast/properties/package.json index 7116794899..ad9deb874f 100644 --- a/samples/notifications/toast/properties/package.json +++ b/samples/notifications/toast/properties/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/notifications/toast/styling/package.json b/samples/notifications/toast/styling/package.json index 527a254c32..18271e5c9a 100644 --- a/samples/notifications/toast/styling/package.json +++ b/samples/notifications/toast/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/calendar/disabled-dates/package.json b/samples/scheduling/calendar/disabled-dates/package.json index aa00c5ae14..40efe760fb 100644 --- a/samples/scheduling/calendar/disabled-dates/package.json +++ b/samples/scheduling/calendar/disabled-dates/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/calendar/formatting/package.json b/samples/scheduling/calendar/formatting/package.json index 18466804bf..a8232e9a3c 100644 --- a/samples/scheduling/calendar/formatting/package.json +++ b/samples/scheduling/calendar/formatting/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/calendar/header/package.json b/samples/scheduling/calendar/header/package.json index d6cc1c3de0..730e5c43d3 100644 --- a/samples/scheduling/calendar/header/package.json +++ b/samples/scheduling/calendar/header/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/calendar/multiple-months/package.json b/samples/scheduling/calendar/multiple-months/package.json index 098ef69dc5..e4b1ee04fe 100644 --- a/samples/scheduling/calendar/multiple-months/package.json +++ b/samples/scheduling/calendar/multiple-months/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/calendar/multiple-selection/package.json b/samples/scheduling/calendar/multiple-selection/package.json index 9ada55ae74..4dd9ce556f 100644 --- a/samples/scheduling/calendar/multiple-selection/package.json +++ b/samples/scheduling/calendar/multiple-selection/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/calendar/overview/package.json b/samples/scheduling/calendar/overview/package.json index 3155ba6f96..26968f3d7d 100644 --- a/samples/scheduling/calendar/overview/package.json +++ b/samples/scheduling/calendar/overview/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/calendar/range-selection/package.json b/samples/scheduling/calendar/range-selection/package.json index 863334ece0..d1dbcfcff5 100644 --- a/samples/scheduling/calendar/range-selection/package.json +++ b/samples/scheduling/calendar/range-selection/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/calendar/size/package.json b/samples/scheduling/calendar/size/package.json index ad35b79e10..f3893eb248 100644 --- a/samples/scheduling/calendar/size/package.json +++ b/samples/scheduling/calendar/size/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/calendar/special-dates/package.json b/samples/scheduling/calendar/special-dates/package.json index 730ead6efb..b3e65673e9 100644 --- a/samples/scheduling/calendar/special-dates/package.json +++ b/samples/scheduling/calendar/special-dates/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/calendar/styling/package.json b/samples/scheduling/calendar/styling/package.json index 564c30272b..077066ab35 100644 --- a/samples/scheduling/calendar/styling/package.json +++ b/samples/scheduling/calendar/styling/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/calendar/week-numbers/package.json b/samples/scheduling/calendar/week-numbers/package.json index 35a6f09f4d..a106858f28 100644 --- a/samples/scheduling/calendar/week-numbers/package.json +++ b/samples/scheduling/calendar/week-numbers/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/date-picker/dialog-mode/package.json b/samples/scheduling/date-picker/dialog-mode/package.json index da66dce959..a848dc21f2 100644 --- a/samples/scheduling/date-picker/dialog-mode/package.json +++ b/samples/scheduling/date-picker/dialog-mode/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/date-picker/form/package.json b/samples/scheduling/date-picker/form/package.json index da66dce959..a848dc21f2 100644 --- a/samples/scheduling/date-picker/form/package.json +++ b/samples/scheduling/date-picker/form/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/date-picker/format/package.json b/samples/scheduling/date-picker/format/package.json index da66dce959..a848dc21f2 100644 --- a/samples/scheduling/date-picker/format/package.json +++ b/samples/scheduling/date-picker/format/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/date-picker/overview/package.json b/samples/scheduling/date-picker/overview/package.json index da66dce959..a848dc21f2 100644 --- a/samples/scheduling/date-picker/overview/package.json +++ b/samples/scheduling/date-picker/overview/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/date-picker/styling/package.json b/samples/scheduling/date-picker/styling/package.json index da66dce959..a848dc21f2 100644 --- a/samples/scheduling/date-picker/styling/package.json +++ b/samples/scheduling/date-picker/styling/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/date-range-picker/custom-ranges/package.json b/samples/scheduling/date-range-picker/custom-ranges/package.json index 6c07033897..047a2383d8 100644 --- a/samples/scheduling/date-range-picker/custom-ranges/package.json +++ b/samples/scheduling/date-range-picker/custom-ranges/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/date-range-picker/form/package.json b/samples/scheduling/date-range-picker/form/package.json index c53f96f8c3..488adc2aa0 100644 --- a/samples/scheduling/date-range-picker/form/package.json +++ b/samples/scheduling/date-range-picker/form/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/date-range-picker/overview/package.json b/samples/scheduling/date-range-picker/overview/package.json index b9d5e9c5ce..1c4bab1b70 100644 --- a/samples/scheduling/date-range-picker/overview/package.json +++ b/samples/scheduling/date-range-picker/overview/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/date-range-picker/slots/package.json b/samples/scheduling/date-range-picker/slots/package.json index c69db65846..ee98e565d8 100644 --- a/samples/scheduling/date-range-picker/slots/package.json +++ b/samples/scheduling/date-range-picker/slots/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/scheduling/date-range-picker/styling/package.json b/samples/scheduling/date-range-picker/styling/package.json index 94c3c5e46e..49e550df5a 100644 --- a/samples/scheduling/date-range-picker/styling/package.json +++ b/samples/scheduling/date-range-picker/styling/package.json @@ -12,9 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-react": "19.7.0", + "igniteui-react": "19.9.0", "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.2.1", + "igniteui-webcomponents": "^7.4.1", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" From 0b426d182f1e57025a1461774bc8ea6d8099e617 Mon Sep 17 00:00:00 2001 From: Viktor Kombov <75325639+viktorkombov@users.noreply.github.com> Date: Thu, 1 Oct 2026 14:11:56 +0300 Subject: [PATCH 12/14] feat(*): add virtual scroll samples (#1109) Co-authored-by: Stamen Stoychev --- browser/package-lock.json | 40 ++++++ .../.devcontainer/devcontainer.json | 4 + .../virtual-scroll/horizontal/.eslintrc.js | 75 ++++++++++ .../virtual-scroll/horizontal/README.md | 56 ++++++++ .../virtual-scroll/horizontal/index.html | 11 ++ .../virtual-scroll/horizontal/package.json | 42 ++++++ .../horizontal/sandbox.config.json | 5 + .../horizontal/src/EmployeeData.ts | 46 ++++++ .../virtual-scroll/horizontal/src/index.css | 23 +++ .../virtual-scroll/horizontal/src/index.tsx | 61 ++++++++ .../virtual-scroll/horizontal/tsconfig.json | 44 ++++++ .../virtual-scroll/horizontal/vite.config.js | 12 ++ .../.devcontainer/devcontainer.json | 4 + .../infinite-scroll/.eslintrc.js | 75 ++++++++++ .../virtual-scroll/infinite-scroll/README.md | 56 ++++++++ .../virtual-scroll/infinite-scroll/index.html | 11 ++ .../infinite-scroll/package.json | 42 ++++++ .../infinite-scroll/sandbox.config.json | 5 + .../infinite-scroll/src/EmployeeData.ts | 46 ++++++ .../infinite-scroll/src/index.css | 16 +++ .../infinite-scroll/src/index.tsx | 97 +++++++++++++ .../infinite-scroll/tsconfig.json | 44 ++++++ .../infinite-scroll/vite.config.js | 12 ++ .../overview/.devcontainer/devcontainer.json | 4 + .../virtual-scroll/overview/.eslintrc.js | 75 ++++++++++ .../layouts/virtual-scroll/overview/README.md | 56 ++++++++ .../virtual-scroll/overview/index.html | 11 ++ .../virtual-scroll/overview/package.json | 42 ++++++ .../overview/sandbox.config.json | 5 + .../overview/src/EmployeeData.ts | 46 ++++++ .../virtual-scroll/overview/src/index.css | 6 + .../virtual-scroll/overview/src/index.tsx | 48 +++++++ .../virtual-scroll/overview/tsconfig.json | 44 ++++++ .../virtual-scroll/overview/vite.config.js | 12 ++ .../.devcontainer/devcontainer.json | 4 + .../scroll-to-index/.eslintrc.js | 75 ++++++++++ .../virtual-scroll/scroll-to-index/README.md | 56 ++++++++ .../virtual-scroll/scroll-to-index/index.html | 11 ++ .../scroll-to-index/package.json | 42 ++++++ .../scroll-to-index/sandbox.config.json | 5 + .../scroll-to-index/src/EmployeeData.ts | 46 ++++++ .../scroll-to-index/src/index.css | 38 +++++ .../scroll-to-index/src/index.tsx | 134 ++++++++++++++++++ .../scroll-to-index/tsconfig.json | 44 ++++++ .../scroll-to-index/vite.config.js | 12 ++ .../.devcontainer/devcontainer.json | 4 + .../virtual-scroll/variable-size/.eslintrc.js | 75 ++++++++++ .../virtual-scroll/variable-size/README.md | 56 ++++++++ .../virtual-scroll/variable-size/index.html | 11 ++ .../virtual-scroll/variable-size/package.json | 42 ++++++ .../variable-size/sandbox.config.json | 5 + .../variable-size/src/EmployeeData.ts | 46 ++++++ .../variable-size/src/index.css | 13 ++ .../variable-size/src/index.tsx | 50 +++++++ .../variable-size/tsconfig.json | 44 ++++++ .../variable-size/vite.config.js | 12 ++ 56 files changed, 2001 insertions(+) create mode 100644 samples/layouts/virtual-scroll/horizontal/.devcontainer/devcontainer.json create mode 100644 samples/layouts/virtual-scroll/horizontal/.eslintrc.js create mode 100644 samples/layouts/virtual-scroll/horizontal/README.md create mode 100644 samples/layouts/virtual-scroll/horizontal/index.html create mode 100644 samples/layouts/virtual-scroll/horizontal/package.json create mode 100644 samples/layouts/virtual-scroll/horizontal/sandbox.config.json create mode 100644 samples/layouts/virtual-scroll/horizontal/src/EmployeeData.ts create mode 100644 samples/layouts/virtual-scroll/horizontal/src/index.css create mode 100644 samples/layouts/virtual-scroll/horizontal/src/index.tsx create mode 100644 samples/layouts/virtual-scroll/horizontal/tsconfig.json create mode 100644 samples/layouts/virtual-scroll/horizontal/vite.config.js create mode 100644 samples/layouts/virtual-scroll/infinite-scroll/.devcontainer/devcontainer.json create mode 100644 samples/layouts/virtual-scroll/infinite-scroll/.eslintrc.js create mode 100644 samples/layouts/virtual-scroll/infinite-scroll/README.md create mode 100644 samples/layouts/virtual-scroll/infinite-scroll/index.html create mode 100644 samples/layouts/virtual-scroll/infinite-scroll/package.json create mode 100644 samples/layouts/virtual-scroll/infinite-scroll/sandbox.config.json create mode 100644 samples/layouts/virtual-scroll/infinite-scroll/src/EmployeeData.ts create mode 100644 samples/layouts/virtual-scroll/infinite-scroll/src/index.css create mode 100644 samples/layouts/virtual-scroll/infinite-scroll/src/index.tsx create mode 100644 samples/layouts/virtual-scroll/infinite-scroll/tsconfig.json create mode 100644 samples/layouts/virtual-scroll/infinite-scroll/vite.config.js create mode 100644 samples/layouts/virtual-scroll/overview/.devcontainer/devcontainer.json create mode 100644 samples/layouts/virtual-scroll/overview/.eslintrc.js create mode 100644 samples/layouts/virtual-scroll/overview/README.md create mode 100644 samples/layouts/virtual-scroll/overview/index.html create mode 100644 samples/layouts/virtual-scroll/overview/package.json create mode 100644 samples/layouts/virtual-scroll/overview/sandbox.config.json create mode 100644 samples/layouts/virtual-scroll/overview/src/EmployeeData.ts create mode 100644 samples/layouts/virtual-scroll/overview/src/index.css create mode 100644 samples/layouts/virtual-scroll/overview/src/index.tsx create mode 100644 samples/layouts/virtual-scroll/overview/tsconfig.json create mode 100644 samples/layouts/virtual-scroll/overview/vite.config.js create mode 100644 samples/layouts/virtual-scroll/scroll-to-index/.devcontainer/devcontainer.json create mode 100644 samples/layouts/virtual-scroll/scroll-to-index/.eslintrc.js create mode 100644 samples/layouts/virtual-scroll/scroll-to-index/README.md create mode 100644 samples/layouts/virtual-scroll/scroll-to-index/index.html create mode 100644 samples/layouts/virtual-scroll/scroll-to-index/package.json create mode 100644 samples/layouts/virtual-scroll/scroll-to-index/sandbox.config.json create mode 100644 samples/layouts/virtual-scroll/scroll-to-index/src/EmployeeData.ts create mode 100644 samples/layouts/virtual-scroll/scroll-to-index/src/index.css create mode 100644 samples/layouts/virtual-scroll/scroll-to-index/src/index.tsx create mode 100644 samples/layouts/virtual-scroll/scroll-to-index/tsconfig.json create mode 100644 samples/layouts/virtual-scroll/scroll-to-index/vite.config.js create mode 100644 samples/layouts/virtual-scroll/variable-size/.devcontainer/devcontainer.json create mode 100644 samples/layouts/virtual-scroll/variable-size/.eslintrc.js create mode 100644 samples/layouts/virtual-scroll/variable-size/README.md create mode 100644 samples/layouts/virtual-scroll/variable-size/index.html create mode 100644 samples/layouts/virtual-scroll/variable-size/package.json create mode 100644 samples/layouts/virtual-scroll/variable-size/sandbox.config.json create mode 100644 samples/layouts/virtual-scroll/variable-size/src/EmployeeData.ts create mode 100644 samples/layouts/virtual-scroll/variable-size/src/index.css create mode 100644 samples/layouts/virtual-scroll/variable-size/src/index.tsx create mode 100644 samples/layouts/virtual-scroll/variable-size/tsconfig.json create mode 100644 samples/layouts/virtual-scroll/variable-size/vite.config.js diff --git a/browser/package-lock.json b/browser/package-lock.json index 685144ce6a..96c36c7ed3 100644 --- a/browser/package-lock.json +++ b/browser/package-lock.json @@ -9697,6 +9697,46 @@ "node": ">=22" } }, + "node_modules/igniteui-grid-lite/node_modules/igniteui-webcomponents": { + "version": "7.2.4", + "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-7.2.4.tgz", + "integrity": "sha512-h5hrroBn0kSYCYpj5OH4sKXkFZvdOeqpYnNTKMB5PsqsWexhQICkH5xKjDDj3VPbd135OvzWX5XQN0Nclj2qAQ==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.7.0", + "@lit-labs/virtualizer": "^2.1.0", + "@lit/context": "^1.1.0", + "igniteui-i18n-core": "^1.0.5", + "lit": "^3.3.0" + }, + "engines": { + "node": ">=22" + }, + "peerDependencies": { + "dompurify": "^3.3.0", + "igniteui-i18n-resources": "^1.0.5", + "marked": "^17.0.0", + "marked-shiki": "^1.2.0", + "shiki": "^3.20.0" + }, + "peerDependenciesMeta": { + "dompurify": { + "optional": true + }, + "igniteui-i18n-resources": { + "optional": true + }, + "marked": { + "optional": true + }, + "marked-shiki": { + "optional": true + }, + "shiki": { + "optional": true + } + } + }, "node_modules/igniteui-i18n-core": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/igniteui-i18n-core/-/igniteui-i18n-core-1.0.5.tgz", diff --git a/samples/layouts/virtual-scroll/horizontal/.devcontainer/devcontainer.json b/samples/layouts/virtual-scroll/horizontal/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/virtual-scroll/horizontal/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/horizontal/.eslintrc.js b/samples/layouts/virtual-scroll/horizontal/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/virtual-scroll/horizontal/.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/layouts/virtual-scroll/horizontal/README.md b/samples/layouts/virtual-scroll/horizontal/README.md new file mode 100644 index 0000000000..b5a5754eef --- /dev/null +++ b/samples/layouts/virtual-scroll/horizontal/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Horizontal feature using [Virtual Scroll](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/virtual-scroll/horizontal +``` + +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/layouts/virtual-scroll/horizontal/index.html b/samples/layouts/virtual-scroll/horizontal/index.html new file mode 100644 index 0000000000..03972d37d0 --- /dev/null +++ b/samples/layouts/virtual-scroll/horizontal/index.html @@ -0,0 +1,11 @@ + + + + VirtualScrollHorizontal + + + +
+ + + \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/horizontal/package.json b/samples/layouts/virtual-scroll/horizontal/package.json new file mode 100644 index 0000000000..c4c8ae1cb0 --- /dev/null +++ b/samples/layouts/virtual-scroll/horizontal/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-virtual-scroll-horizontal", + "description": "This project provides example of Horizontal Orientation feature using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.1", + "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", + "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" + ] +} diff --git a/samples/layouts/virtual-scroll/horizontal/sandbox.config.json b/samples/layouts/virtual-scroll/horizontal/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/virtual-scroll/horizontal/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/horizontal/src/EmployeeData.ts b/samples/layouts/virtual-scroll/horizontal/src/EmployeeData.ts new file mode 100644 index 0000000000..cc0f0ea228 --- /dev/null +++ b/samples/layouts/virtual-scroll/horizontal/src/EmployeeData.ts @@ -0,0 +1,46 @@ +export type DepartmentVariant = "primary" | "info" | "success" | "warning" | "danger"; + +export interface Employee { + id: number; + name: string; + initials: string; + email: string; + department: string; + variant: DepartmentVariant; + bio: string | null; +} + +const DEPARTMENTS = ["Engineering", "Design", "Marketing", "Sales", "HR", "Finance", "Legal", "Operations"]; +const VARIANTS: DepartmentVariant[] = ["primary", "info", "success", "warning", "danger"]; + +const FIRST_NAMES = ["Alice", "Bob", "Carol", "David", "Eve", "Frank", "Grace", "Henry", "Iris", "Jack", "Karen", "Leo", "Mia", "Noah", "Olivia", "Paul"]; + +const LAST_NAMES = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Wilson", "Moore", "Taylor", "Anderson", "Thomas", "Jackson"]; + +const BIOS = [ + "Leads a cross-functional team across three time zones and owns the quarterly delivery plan.", + "Specializes in scalable service architecture.", + "Passionate about accessible, pixel-perfect user interfaces and design systems that scale across products.", + "Drives product strategy and stakeholder alignment.", + "Champions data-driven decision making, runs the weekly metrics review and mentors new analysts." +]; + +export function createEmployee(index: number): Employee { + const first = FIRST_NAMES[index % FIRST_NAMES.length]; + const last = LAST_NAMES[Math.floor(index / FIRST_NAMES.length) % LAST_NAMES.length]; + const departmentIndex = index % DEPARTMENTS.length; + + return { + id: index + 1, + name: `${first} ${last}`, + initials: `${first[0]}${last[0]}`, + email: `${first.toLowerCase()}.${last.toLowerCase()}${index + 1}@example.com`, + department: DEPARTMENTS[departmentIndex], + variant: VARIANTS[departmentIndex % VARIANTS.length], + bio: index % 3 === 0 ? BIOS[index % BIOS.length] : null + }; +} + +export function generateEmployees(count: number, startIndex = 0): Employee[] { + return Array.from({ length: count }, (_, i) => createEmployee(startIndex + i)); +} diff --git a/samples/layouts/virtual-scroll/horizontal/src/index.css b/samples/layouts/virtual-scroll/horizontal/src/index.css new file mode 100644 index 0000000000..748ffa5655 --- /dev/null +++ b/samples/layouts/virtual-scroll/horizontal/src/index.css @@ -0,0 +1,23 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.cards { + block-size: 200px; +} + +/* Items are measured by their border box, so the spacing between cards is + padding on the item wrapper rather than a margin. */ +.cards__item { + box-sizing: border-box; + inline-size: 220px; + block-size: 100%; + padding: 8px; + + & igc-card { + block-size: 100%; + } +} + +.cards__item--wide { + inline-size: 320px; +} diff --git a/samples/layouts/virtual-scroll/horizontal/src/index.tsx b/samples/layouts/virtual-scroll/horizontal/src/index.tsx new file mode 100644 index 0000000000..d11aa0d692 --- /dev/null +++ b/samples/layouts/virtual-scroll/horizontal/src/index.tsx @@ -0,0 +1,61 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import { + IgrAvatar, + IgrCard, + IgrCardContent, + IgrCardHeader, + IgrChip, + IgrVirtualScroll, +} from "igniteui-react"; +import type { VirtualScrollItemContext } from "igniteui-webcomponents"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import { Employee, generateEmployees } from "./EmployeeData"; +import "./index.css"; + +const employees: Employee[] = generateEmployees(10_000); + +export default function VirtualScrollHorizontal() { + // With a horizontal orientation the items are measured by their width. + const renderItem = (ctx: VirtualScrollItemContext) => ( +
+ + + +

{ctx.value.name}

+
+ {ctx.value.bio ? ctx.value.email : `#${ctx.value.id}`} +
+ + + {ctx.value.department} + + +
+ ); + + return ( +
+ +
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/virtual-scroll/horizontal/tsconfig.json b/samples/layouts/virtual-scroll/horizontal/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/layouts/virtual-scroll/horizontal/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/virtual-scroll/horizontal/vite.config.js b/samples/layouts/virtual-scroll/horizontal/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/virtual-scroll/horizontal/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/infinite-scroll/.devcontainer/devcontainer.json b/samples/layouts/virtual-scroll/infinite-scroll/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/virtual-scroll/infinite-scroll/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/infinite-scroll/.eslintrc.js b/samples/layouts/virtual-scroll/infinite-scroll/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/virtual-scroll/infinite-scroll/.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/layouts/virtual-scroll/infinite-scroll/README.md b/samples/layouts/virtual-scroll/infinite-scroll/README.md new file mode 100644 index 0000000000..c93f36c851 --- /dev/null +++ b/samples/layouts/virtual-scroll/infinite-scroll/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Infinite Scroll feature using [Virtual Scroll](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/virtual-scroll/infinite-scroll +``` + +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/layouts/virtual-scroll/infinite-scroll/index.html b/samples/layouts/virtual-scroll/infinite-scroll/index.html new file mode 100644 index 0000000000..e3713fddbc --- /dev/null +++ b/samples/layouts/virtual-scroll/infinite-scroll/index.html @@ -0,0 +1,11 @@ + + + + VirtualScrollInfiniteScroll + + + +
+ + + \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/infinite-scroll/package.json b/samples/layouts/virtual-scroll/infinite-scroll/package.json new file mode 100644 index 0000000000..ae32619f11 --- /dev/null +++ b/samples/layouts/virtual-scroll/infinite-scroll/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-virtual-scroll-infinite-scroll", + "description": "This project provides example of Infinite Scroll feature using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.1", + "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", + "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" + ] +} diff --git a/samples/layouts/virtual-scroll/infinite-scroll/sandbox.config.json b/samples/layouts/virtual-scroll/infinite-scroll/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/virtual-scroll/infinite-scroll/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/infinite-scroll/src/EmployeeData.ts b/samples/layouts/virtual-scroll/infinite-scroll/src/EmployeeData.ts new file mode 100644 index 0000000000..cc0f0ea228 --- /dev/null +++ b/samples/layouts/virtual-scroll/infinite-scroll/src/EmployeeData.ts @@ -0,0 +1,46 @@ +export type DepartmentVariant = "primary" | "info" | "success" | "warning" | "danger"; + +export interface Employee { + id: number; + name: string; + initials: string; + email: string; + department: string; + variant: DepartmentVariant; + bio: string | null; +} + +const DEPARTMENTS = ["Engineering", "Design", "Marketing", "Sales", "HR", "Finance", "Legal", "Operations"]; +const VARIANTS: DepartmentVariant[] = ["primary", "info", "success", "warning", "danger"]; + +const FIRST_NAMES = ["Alice", "Bob", "Carol", "David", "Eve", "Frank", "Grace", "Henry", "Iris", "Jack", "Karen", "Leo", "Mia", "Noah", "Olivia", "Paul"]; + +const LAST_NAMES = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Wilson", "Moore", "Taylor", "Anderson", "Thomas", "Jackson"]; + +const BIOS = [ + "Leads a cross-functional team across three time zones and owns the quarterly delivery plan.", + "Specializes in scalable service architecture.", + "Passionate about accessible, pixel-perfect user interfaces and design systems that scale across products.", + "Drives product strategy and stakeholder alignment.", + "Champions data-driven decision making, runs the weekly metrics review and mentors new analysts." +]; + +export function createEmployee(index: number): Employee { + const first = FIRST_NAMES[index % FIRST_NAMES.length]; + const last = LAST_NAMES[Math.floor(index / FIRST_NAMES.length) % LAST_NAMES.length]; + const departmentIndex = index % DEPARTMENTS.length; + + return { + id: index + 1, + name: `${first} ${last}`, + initials: `${first[0]}${last[0]}`, + email: `${first.toLowerCase()}.${last.toLowerCase()}${index + 1}@example.com`, + department: DEPARTMENTS[departmentIndex], + variant: VARIANTS[departmentIndex % VARIANTS.length], + bio: index % 3 === 0 ? BIOS[index % BIOS.length] : null + }; +} + +export function generateEmployees(count: number, startIndex = 0): Employee[] { + return Array.from({ length: count }, (_, i) => createEmployee(startIndex + i)); +} diff --git a/samples/layouts/virtual-scroll/infinite-scroll/src/index.css b/samples/layouts/virtual-scroll/infinite-scroll/src/index.css new file mode 100644 index 0000000000..962eb1b7d3 --- /dev/null +++ b/samples/layouts/virtual-scroll/infinite-scroll/src/index.css @@ -0,0 +1,16 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.employees__viewport { + block-size: 440px; +} + +/* Reserve the space for the progress bar so the list does not shift or overflow while loading. */ +.employees__status { + block-size: 4px; + overflow: hidden; +} + +.employees__status igc-linear-progress { + --ig-linear-bar-track-height: 4px; +} diff --git a/samples/layouts/virtual-scroll/infinite-scroll/src/index.tsx b/samples/layouts/virtual-scroll/infinite-scroll/src/index.tsx new file mode 100644 index 0000000000..7dc72b4737 --- /dev/null +++ b/samples/layouts/virtual-scroll/infinite-scroll/src/index.tsx @@ -0,0 +1,97 @@ +import React, { useRef, useState } from "react"; +import ReactDOM from "react-dom/client"; +import { + IgrAvatar, + IgrChip, + IgrLinearProgress, + IgrList, + IgrListHeader, + IgrListItem, + IgrVirtualScroll, +} from "igniteui-react"; +import type { + VirtualScrollDataRequest, + VirtualScrollItemContext, +} from "igniteui-webcomponents"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import { Employee, generateEmployees } from "./EmployeeData"; +import "./index.css"; + +/** The size of the whole remote collection. */ +const TOTAL_COUNT = 1_000; +const PAGE_SIZE = 50; + +export default function VirtualScrollInfiniteScroll() { + // Load the first page up front: an empty list has no rendered window to run + // out of, so it does not request data. + const [employees, setEmployees] = useState(() => + generateEmployees(PAGE_SIZE) + ); + const [loading, setLoading] = useState(false); + const pending = useRef(false); + + const renderItem = (ctx: VirtualScrollItemContext) => ( + + + + #{ctx.value.id} {ctx.value.name} + + {ctx.value.email} + + {ctx.value.department} + + + ); + + /** + * `igcDataRequest` is emitted when the rendered window nears the end of `data`. + * Only one request is emitted at a time: the next one follows the next `data` change. + */ + const loadMore = (request: VirtualScrollDataRequest) => { + if (pending.current || request.startIndex >= TOTAL_COUNT) { + return; + } + + pending.current = true; + setLoading(true); + const count = Math.min( + Math.max(request.count, PAGE_SIZE), + TOTAL_COUNT - request.startIndex + ); + + // Simulates a request to a remote service. + setTimeout(() => { + // Assign a new array: `data` is compared by reference. + setEmployees((current) => [ + ...current, + ...generateEmployees(count, request.startIndex), + ]); + pending.current = false; + setLoading(false); + }, 800); + }; + + return ( +
+ + + Loaded {employees.length} of {TOTAL_COUNT} employees + + loadMore(event.detail)} + /> +
+ {loading && } +
+ +
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/virtual-scroll/infinite-scroll/tsconfig.json b/samples/layouts/virtual-scroll/infinite-scroll/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/layouts/virtual-scroll/infinite-scroll/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/virtual-scroll/infinite-scroll/vite.config.js b/samples/layouts/virtual-scroll/infinite-scroll/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/virtual-scroll/infinite-scroll/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/overview/.devcontainer/devcontainer.json b/samples/layouts/virtual-scroll/overview/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/virtual-scroll/overview/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/overview/.eslintrc.js b/samples/layouts/virtual-scroll/overview/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/virtual-scroll/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/layouts/virtual-scroll/overview/README.md b/samples/layouts/virtual-scroll/overview/README.md new file mode 100644 index 0000000000..79ee1611e5 --- /dev/null +++ b/samples/layouts/virtual-scroll/overview/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Overview feature using [Virtual Scroll](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/virtual-scroll/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/layouts/virtual-scroll/overview/index.html b/samples/layouts/virtual-scroll/overview/index.html new file mode 100644 index 0000000000..38018e6cea --- /dev/null +++ b/samples/layouts/virtual-scroll/overview/index.html @@ -0,0 +1,11 @@ + + + + VirtualScrollOverview + + + +
+ + + \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/overview/package.json b/samples/layouts/virtual-scroll/overview/package.json new file mode 100644 index 0000000000..0820a218ba --- /dev/null +++ b/samples/layouts/virtual-scroll/overview/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-virtual-scroll-overview", + "description": "This project provides example of Overview feature using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.1", + "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", + "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" + ] +} diff --git a/samples/layouts/virtual-scroll/overview/sandbox.config.json b/samples/layouts/virtual-scroll/overview/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/virtual-scroll/overview/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/overview/src/EmployeeData.ts b/samples/layouts/virtual-scroll/overview/src/EmployeeData.ts new file mode 100644 index 0000000000..cc0f0ea228 --- /dev/null +++ b/samples/layouts/virtual-scroll/overview/src/EmployeeData.ts @@ -0,0 +1,46 @@ +export type DepartmentVariant = "primary" | "info" | "success" | "warning" | "danger"; + +export interface Employee { + id: number; + name: string; + initials: string; + email: string; + department: string; + variant: DepartmentVariant; + bio: string | null; +} + +const DEPARTMENTS = ["Engineering", "Design", "Marketing", "Sales", "HR", "Finance", "Legal", "Operations"]; +const VARIANTS: DepartmentVariant[] = ["primary", "info", "success", "warning", "danger"]; + +const FIRST_NAMES = ["Alice", "Bob", "Carol", "David", "Eve", "Frank", "Grace", "Henry", "Iris", "Jack", "Karen", "Leo", "Mia", "Noah", "Olivia", "Paul"]; + +const LAST_NAMES = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Wilson", "Moore", "Taylor", "Anderson", "Thomas", "Jackson"]; + +const BIOS = [ + "Leads a cross-functional team across three time zones and owns the quarterly delivery plan.", + "Specializes in scalable service architecture.", + "Passionate about accessible, pixel-perfect user interfaces and design systems that scale across products.", + "Drives product strategy and stakeholder alignment.", + "Champions data-driven decision making, runs the weekly metrics review and mentors new analysts." +]; + +export function createEmployee(index: number): Employee { + const first = FIRST_NAMES[index % FIRST_NAMES.length]; + const last = LAST_NAMES[Math.floor(index / FIRST_NAMES.length) % LAST_NAMES.length]; + const departmentIndex = index % DEPARTMENTS.length; + + return { + id: index + 1, + name: `${first} ${last}`, + initials: `${first[0]}${last[0]}`, + email: `${first.toLowerCase()}.${last.toLowerCase()}${index + 1}@example.com`, + department: DEPARTMENTS[departmentIndex], + variant: VARIANTS[departmentIndex % VARIANTS.length], + bio: index % 3 === 0 ? BIOS[index % BIOS.length] : null + }; +} + +export function generateEmployees(count: number, startIndex = 0): Employee[] { + return Array.from({ length: count }, (_, i) => createEmployee(startIndex + i)); +} diff --git a/samples/layouts/virtual-scroll/overview/src/index.css b/samples/layouts/virtual-scroll/overview/src/index.css new file mode 100644 index 0000000000..cdf32b3741 --- /dev/null +++ b/samples/layouts/virtual-scroll/overview/src/index.css @@ -0,0 +1,6 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.employees__viewport { + block-size: 480px; +} diff --git a/samples/layouts/virtual-scroll/overview/src/index.tsx b/samples/layouts/virtual-scroll/overview/src/index.tsx new file mode 100644 index 0000000000..a403fa6822 --- /dev/null +++ b/samples/layouts/virtual-scroll/overview/src/index.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import { + IgrAvatar, + IgrChip, + IgrList, + IgrListHeader, + IgrListItem, + IgrVirtualScroll, +} from "igniteui-react"; +import type { VirtualScrollItemContext } from "igniteui-webcomponents"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import { Employee, generateEmployees } from "./EmployeeData"; +import "./index.css"; + +const employees: Employee[] = generateEmployees(100_000); + +export default function VirtualScrollOverview() { + // Only the items in the viewport, plus a small buffer, are rendered. + const renderItem = (ctx: VirtualScrollItemContext) => ( + + + {ctx.value.name} + {ctx.value.email} + + {ctx.value.department} + + + ); + + return ( +
+ + Employees ({employees.length}) + + +
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/virtual-scroll/overview/tsconfig.json b/samples/layouts/virtual-scroll/overview/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/layouts/virtual-scroll/overview/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/virtual-scroll/overview/vite.config.js b/samples/layouts/virtual-scroll/overview/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/virtual-scroll/overview/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/scroll-to-index/.devcontainer/devcontainer.json b/samples/layouts/virtual-scroll/scroll-to-index/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/virtual-scroll/scroll-to-index/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/scroll-to-index/.eslintrc.js b/samples/layouts/virtual-scroll/scroll-to-index/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/virtual-scroll/scroll-to-index/.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/layouts/virtual-scroll/scroll-to-index/README.md b/samples/layouts/virtual-scroll/scroll-to-index/README.md new file mode 100644 index 0000000000..9e77cc9d8a --- /dev/null +++ b/samples/layouts/virtual-scroll/scroll-to-index/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Scroll To Index feature using [Virtual Scroll](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/virtual-scroll/scroll-to-index +``` + +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/layouts/virtual-scroll/scroll-to-index/index.html b/samples/layouts/virtual-scroll/scroll-to-index/index.html new file mode 100644 index 0000000000..3d857c41b0 --- /dev/null +++ b/samples/layouts/virtual-scroll/scroll-to-index/index.html @@ -0,0 +1,11 @@ + + + + VirtualScrollScrollToIndex + + + +
+ + + \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/scroll-to-index/package.json b/samples/layouts/virtual-scroll/scroll-to-index/package.json new file mode 100644 index 0000000000..ab3ec7d11a --- /dev/null +++ b/samples/layouts/virtual-scroll/scroll-to-index/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-virtual-scroll-scroll-to-index", + "description": "This project provides example of Scroll To Index feature using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.1", + "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", + "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" + ] +} diff --git a/samples/layouts/virtual-scroll/scroll-to-index/sandbox.config.json b/samples/layouts/virtual-scroll/scroll-to-index/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/virtual-scroll/scroll-to-index/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/scroll-to-index/src/EmployeeData.ts b/samples/layouts/virtual-scroll/scroll-to-index/src/EmployeeData.ts new file mode 100644 index 0000000000..cc0f0ea228 --- /dev/null +++ b/samples/layouts/virtual-scroll/scroll-to-index/src/EmployeeData.ts @@ -0,0 +1,46 @@ +export type DepartmentVariant = "primary" | "info" | "success" | "warning" | "danger"; + +export interface Employee { + id: number; + name: string; + initials: string; + email: string; + department: string; + variant: DepartmentVariant; + bio: string | null; +} + +const DEPARTMENTS = ["Engineering", "Design", "Marketing", "Sales", "HR", "Finance", "Legal", "Operations"]; +const VARIANTS: DepartmentVariant[] = ["primary", "info", "success", "warning", "danger"]; + +const FIRST_NAMES = ["Alice", "Bob", "Carol", "David", "Eve", "Frank", "Grace", "Henry", "Iris", "Jack", "Karen", "Leo", "Mia", "Noah", "Olivia", "Paul"]; + +const LAST_NAMES = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Wilson", "Moore", "Taylor", "Anderson", "Thomas", "Jackson"]; + +const BIOS = [ + "Leads a cross-functional team across three time zones and owns the quarterly delivery plan.", + "Specializes in scalable service architecture.", + "Passionate about accessible, pixel-perfect user interfaces and design systems that scale across products.", + "Drives product strategy and stakeholder alignment.", + "Champions data-driven decision making, runs the weekly metrics review and mentors new analysts." +]; + +export function createEmployee(index: number): Employee { + const first = FIRST_NAMES[index % FIRST_NAMES.length]; + const last = LAST_NAMES[Math.floor(index / FIRST_NAMES.length) % LAST_NAMES.length]; + const departmentIndex = index % DEPARTMENTS.length; + + return { + id: index + 1, + name: `${first} ${last}`, + initials: `${first[0]}${last[0]}`, + email: `${first.toLowerCase()}.${last.toLowerCase()}${index + 1}@example.com`, + department: DEPARTMENTS[departmentIndex], + variant: VARIANTS[departmentIndex % VARIANTS.length], + bio: index % 3 === 0 ? BIOS[index % BIOS.length] : null + }; +} + +export function generateEmployees(count: number, startIndex = 0): Employee[] { + return Array.from({ length: count }, (_, i) => createEmployee(startIndex + i)); +} diff --git a/samples/layouts/virtual-scroll/scroll-to-index/src/index.css b/samples/layouts/virtual-scroll/scroll-to-index/src/index.css new file mode 100644 index 0000000000..857d878e48 --- /dev/null +++ b/samples/layouts/virtual-scroll/scroll-to-index/src/index.css @@ -0,0 +1,38 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.employees__viewport { + block-size: 400px; +} + +.toolbar { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 16px; + margin-block-end: 16px; +} + +.toolbar__index { + inline-size: 140px; +} + +.toolbar__actions { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.employees__item--highlighted { + animation: highlight 1.5s ease-out; +} + +@keyframes highlight { + from { + box-shadow: inset 0 0 0 3px var(--ig-warn-500); + } + + to { + box-shadow: inset 0 0 0 3px transparent; + } +} diff --git a/samples/layouts/virtual-scroll/scroll-to-index/src/index.tsx b/samples/layouts/virtual-scroll/scroll-to-index/src/index.tsx new file mode 100644 index 0000000000..6a195a6a10 --- /dev/null +++ b/samples/layouts/virtual-scroll/scroll-to-index/src/index.tsx @@ -0,0 +1,134 @@ +import React, { useRef, useState } from "react"; +import ReactDOM from "react-dom/client"; +import { + IgrAvatar, + IgrButton, + IgrChip, + IgrInput, + IgrList, + IgrListHeader, + IgrListItem, + IgrRadio, + IgrRadioGroup, + IgrVirtualScroll, +} from "igniteui-react"; +import type { VirtualScrollItemContext } from "igniteui-webcomponents"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import { Employee, generateEmployees } from "./EmployeeData"; +import "./index.css"; + +const employees: Employee[] = generateEmployees(100_000); +const LAST_INDEX = employees.length - 1; + +export default function VirtualScrollScrollToIndex() { + const virtualScroll = useRef(null); + const [targetIndex, setTargetIndex] = useState("50000"); + const [alignment, setAlignment] = useState("start"); + + const renderItem = (ctx: VirtualScrollItemContext) => ( + + + + #{ctx.index} {ctx.value.name} + + {ctx.value.email} + + {ctx.value.department} + + + ); + + const goTo = async (index: number) => { + const target = Math.min(Math.max(Math.trunc(index) || 0, 0), LAST_INDEX); + setTargetIndex(String(target)); + + // Items that have not been rendered only have an estimated size, so the + // first jump lands near the target. The promise resolves once the + // component has measured the landing area and corrected the offset. + await virtualScroll.current?.scrollToIndex(target, { block: alignment }); + highlight(target); + }; + + const highlight = (index: number) => { + const item = virtualScroll.current?.querySelector( + `[data-vs-index="${index}"]` + ); + if (!item) { + return; + } + + // Restart the animation when the same item is highlighted again. + item.classList.remove("employees__item--highlighted"); + void item.offsetWidth; + item.classList.add("employees__item--highlighted"); + }; + + return ( +
+
+ setTargetIndex(event.detail)} + /> + + setAlignment((event.target as IgrRadio).value as ScrollLogicalPosition) + } + > + + start + + + center + + + end + + + nearest + + +
+ goTo(Number(targetIndex))}> + Go + + goTo(0)}> + First + + goTo(LAST_INDEX / 2)}> + Middle + + goTo(LAST_INDEX)}> + Last + + goTo(Math.random() * LAST_INDEX)} + > + Random + +
+
+ + Employees ({employees.length}) + + +
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/virtual-scroll/scroll-to-index/tsconfig.json b/samples/layouts/virtual-scroll/scroll-to-index/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/layouts/virtual-scroll/scroll-to-index/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/virtual-scroll/scroll-to-index/vite.config.js b/samples/layouts/virtual-scroll/scroll-to-index/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/virtual-scroll/scroll-to-index/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/variable-size/.devcontainer/devcontainer.json b/samples/layouts/virtual-scroll/variable-size/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/virtual-scroll/variable-size/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/variable-size/.eslintrc.js b/samples/layouts/virtual-scroll/variable-size/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/virtual-scroll/variable-size/.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/layouts/virtual-scroll/variable-size/README.md b/samples/layouts/virtual-scroll/variable-size/README.md new file mode 100644 index 0000000000..7773a91f6f --- /dev/null +++ b/samples/layouts/virtual-scroll/variable-size/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Variable Size feature using [Virtual Scroll](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/virtual-scroll/variable-size +``` + +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/layouts/virtual-scroll/variable-size/index.html b/samples/layouts/virtual-scroll/variable-size/index.html new file mode 100644 index 0000000000..5a361d4638 --- /dev/null +++ b/samples/layouts/virtual-scroll/variable-size/index.html @@ -0,0 +1,11 @@ + + + + VirtualScrollVariableSize + + + +
+ + + \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/variable-size/package.json b/samples/layouts/virtual-scroll/variable-size/package.json new file mode 100644 index 0000000000..e2879dce64 --- /dev/null +++ b/samples/layouts/virtual-scroll/variable-size/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-virtual-scroll-variable-size", + "description": "This project provides example of Variable Item Size feature using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.1", + "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", + "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" + ] +} diff --git a/samples/layouts/virtual-scroll/variable-size/sandbox.config.json b/samples/layouts/virtual-scroll/variable-size/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/virtual-scroll/variable-size/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/virtual-scroll/variable-size/src/EmployeeData.ts b/samples/layouts/virtual-scroll/variable-size/src/EmployeeData.ts new file mode 100644 index 0000000000..cc0f0ea228 --- /dev/null +++ b/samples/layouts/virtual-scroll/variable-size/src/EmployeeData.ts @@ -0,0 +1,46 @@ +export type DepartmentVariant = "primary" | "info" | "success" | "warning" | "danger"; + +export interface Employee { + id: number; + name: string; + initials: string; + email: string; + department: string; + variant: DepartmentVariant; + bio: string | null; +} + +const DEPARTMENTS = ["Engineering", "Design", "Marketing", "Sales", "HR", "Finance", "Legal", "Operations"]; +const VARIANTS: DepartmentVariant[] = ["primary", "info", "success", "warning", "danger"]; + +const FIRST_NAMES = ["Alice", "Bob", "Carol", "David", "Eve", "Frank", "Grace", "Henry", "Iris", "Jack", "Karen", "Leo", "Mia", "Noah", "Olivia", "Paul"]; + +const LAST_NAMES = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Wilson", "Moore", "Taylor", "Anderson", "Thomas", "Jackson"]; + +const BIOS = [ + "Leads a cross-functional team across three time zones and owns the quarterly delivery plan.", + "Specializes in scalable service architecture.", + "Passionate about accessible, pixel-perfect user interfaces and design systems that scale across products.", + "Drives product strategy and stakeholder alignment.", + "Champions data-driven decision making, runs the weekly metrics review and mentors new analysts." +]; + +export function createEmployee(index: number): Employee { + const first = FIRST_NAMES[index % FIRST_NAMES.length]; + const last = LAST_NAMES[Math.floor(index / FIRST_NAMES.length) % LAST_NAMES.length]; + const departmentIndex = index % DEPARTMENTS.length; + + return { + id: index + 1, + name: `${first} ${last}`, + initials: `${first[0]}${last[0]}`, + email: `${first.toLowerCase()}.${last.toLowerCase()}${index + 1}@example.com`, + department: DEPARTMENTS[departmentIndex], + variant: VARIANTS[departmentIndex % VARIANTS.length], + bio: index % 3 === 0 ? BIOS[index % BIOS.length] : null + }; +} + +export function generateEmployees(count: number, startIndex = 0): Employee[] { + return Array.from({ length: count }, (_, i) => createEmployee(startIndex + i)); +} diff --git a/samples/layouts/virtual-scroll/variable-size/src/index.css b/samples/layouts/virtual-scroll/variable-size/src/index.css new file mode 100644 index 0000000000..cdd1fc0eb6 --- /dev/null +++ b/samples/layouts/virtual-scroll/variable-size/src/index.css @@ -0,0 +1,13 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.employees__viewport { + block-size: 480px; +} + +.employees__bio { + display: block; + padding-block-start: 4px; + white-space: normal; + color: var(--ig-gray-700); +} diff --git a/samples/layouts/virtual-scroll/variable-size/src/index.tsx b/samples/layouts/virtual-scroll/variable-size/src/index.tsx new file mode 100644 index 0000000000..ec67ab7d7d --- /dev/null +++ b/samples/layouts/virtual-scroll/variable-size/src/index.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import { + IgrAvatar, + IgrChip, + IgrList, + IgrListHeader, + IgrListItem, + IgrVirtualScroll, +} from "igniteui-react"; +import type { VirtualScrollItemContext } from "igniteui-webcomponents"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import { Employee, generateEmployees } from "./EmployeeData"; +import "./index.css"; + +const employees: Employee[] = generateEmployees(10_000); + +export default function VirtualScrollVariableSize() { + // Every third employee has a bio, so the items have different heights. + // Each rendered item is measured and its size replaces the estimate. + const renderItem = (ctx: VirtualScrollItemContext) => ( + + + {ctx.value.name} + {ctx.value.email} + {ctx.value.bio && {ctx.value.bio}} + + {ctx.value.department} + + + ); + + return ( +
+ + Team directory ({employees.length}) + + +
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/virtual-scroll/variable-size/tsconfig.json b/samples/layouts/virtual-scroll/variable-size/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/layouts/virtual-scroll/variable-size/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/virtual-scroll/variable-size/vite.config.js b/samples/layouts/virtual-scroll/variable-size/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/virtual-scroll/variable-size/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file From 338b49362cfa2a1e8ccc564f42e7aab29feacc17 Mon Sep 17 00:00:00 2001 From: Ivan Minchev <61944284+IMinchev64@users.noreply.github.com> Date: Thu, 1 Oct 2026 14:20:35 +0300 Subject: [PATCH 13/14] feat(carousel): update carousel samples for new documentation (#1098) --- .../animations/src/CarouselAnimations.css | 46 --- .../layouts/carousel/animations/src/index.css | 196 +++++++++- .../layouts/carousel/animations/src/index.tsx | 211 +++++------ .../components/src/CarouselComponents.css | 25 -- .../layouts/carousel/components/src/index.css | 340 +++++++++++++++++- .../layouts/carousel/components/src/index.tsx | 112 ++++-- .../.devcontainer/devcontainer.json | 4 + .../carousel/configuration/.eslintrc.js | 75 ++++ .../layouts/carousel/configuration/README.md | 56 +++ .../layouts/carousel/configuration/index.html | 11 + .../carousel/configuration/package.json | 41 +++ .../configuration/sandbox.config.json | 5 + .../carousel/configuration/src/index.css | 90 +++++ .../carousel/configuration/src/index.tsx | 80 +++++ .../carousel/configuration/tsconfig.json | 44 +++ .../carousel/configuration/vite.config.js | 12 + .../overview/src/CarouselOverview.css | 1 + samples/layouts/carousel/styling/README.md | 56 +++ samples/layouts/carousel/styling/index.html | 11 + samples/layouts/carousel/styling/package.json | 41 +++ .../carousel/styling/sandbox.config.json | 5 + .../layouts/carousel/styling/src/index.css | 106 ++++++ .../layouts/carousel/styling/src/index.tsx | 82 +++++ .../layouts/carousel/styling/tsconfig.json | 44 +++ .../layouts/carousel/styling/vite.config.js | 12 + .../carousel/tailwind-styling/README.md | 56 +++ .../carousel/tailwind-styling/index.html | 11 + .../carousel/tailwind-styling/package.json | 43 +++ .../tailwind-styling/sandbox.config.json | 5 + .../carousel/tailwind-styling/src/index.css | 31 ++ .../carousel/tailwind-styling/src/index.tsx | 111 ++++++ .../carousel/tailwind-styling/tsconfig.json | 44 +++ .../carousel/tailwind-styling/vite.config.js | 13 + .../thumbnail/src/CarouselThumbnail.css | 13 - .../layouts/carousel/thumbnail/src/index.css | 22 +- .../layouts/carousel/thumbnail/src/index.tsx | 1 - 36 files changed, 1821 insertions(+), 235 deletions(-) delete mode 100644 samples/layouts/carousel/animations/src/CarouselAnimations.css delete mode 100644 samples/layouts/carousel/components/src/CarouselComponents.css create mode 100644 samples/layouts/carousel/configuration/.devcontainer/devcontainer.json create mode 100644 samples/layouts/carousel/configuration/.eslintrc.js create mode 100644 samples/layouts/carousel/configuration/README.md create mode 100644 samples/layouts/carousel/configuration/index.html create mode 100644 samples/layouts/carousel/configuration/package.json create mode 100644 samples/layouts/carousel/configuration/sandbox.config.json create mode 100644 samples/layouts/carousel/configuration/src/index.css create mode 100644 samples/layouts/carousel/configuration/src/index.tsx create mode 100644 samples/layouts/carousel/configuration/tsconfig.json create mode 100644 samples/layouts/carousel/configuration/vite.config.js create mode 100644 samples/layouts/carousel/styling/README.md create mode 100644 samples/layouts/carousel/styling/index.html create mode 100644 samples/layouts/carousel/styling/package.json create mode 100644 samples/layouts/carousel/styling/sandbox.config.json create mode 100644 samples/layouts/carousel/styling/src/index.css create mode 100644 samples/layouts/carousel/styling/src/index.tsx create mode 100644 samples/layouts/carousel/styling/tsconfig.json create mode 100644 samples/layouts/carousel/styling/vite.config.js create mode 100644 samples/layouts/carousel/tailwind-styling/README.md create mode 100644 samples/layouts/carousel/tailwind-styling/index.html create mode 100644 samples/layouts/carousel/tailwind-styling/package.json create mode 100644 samples/layouts/carousel/tailwind-styling/sandbox.config.json create mode 100644 samples/layouts/carousel/tailwind-styling/src/index.css create mode 100644 samples/layouts/carousel/tailwind-styling/src/index.tsx create mode 100644 samples/layouts/carousel/tailwind-styling/tsconfig.json create mode 100644 samples/layouts/carousel/tailwind-styling/vite.config.js delete mode 100644 samples/layouts/carousel/thumbnail/src/CarouselThumbnail.css diff --git a/samples/layouts/carousel/animations/src/CarouselAnimations.css b/samples/layouts/carousel/animations/src/CarouselAnimations.css deleted file mode 100644 index 8ed16e11e6..0000000000 --- a/samples/layouts/carousel/animations/src/CarouselAnimations.css +++ /dev/null @@ -1,46 +0,0 @@ -.carousel-wrapper { - height: 600px; - width: 90%; - margin: 20px auto; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.action-wrapper { - height: 40px; - width: 500px; - display: flex; - justify-content: space-between; - margin-bottom: 10px; -} - -.action { - display: flex; - align-items: center; -} - -.slide-wrapper { - display: flex; - align-items: center; - justify-content: center; - padding: 10px; -} - -igc-carousel { - border: 0.5px solid #dde0e4; -} - -igc-select { - width: 150px; - margin-left: 10px; - --ig-size: var(--ig-size-small); -} - -igc-card { - border: none; -} - -igc-card-header { - padding: 8px 16px; -} \ No newline at end of file diff --git a/samples/layouts/carousel/animations/src/index.css b/samples/layouts/carousel/animations/src/index.css index 1f53b8aa05..64e5d2de62 100644 --- a/samples/layouts/carousel/animations/src/index.css +++ b/samples/layouts/carousel/animations/src/index.css @@ -1,2 +1,196 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +.carousel-wrapper { + display: flex; + width: min(860px, calc(100% - 32px)); + flex-direction: column; + gap: 16px; + margin: 16px auto 0; +} + +.action-wrapper { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 24px; +} + +.action { + display: flex; + align-items: center; + gap: 8px; +} + +.action-label { + color: var(--ig-gray-700); +} + +igc-select { + width: 150px; + --ig-size: var(--ig-size-small); +} + +igc-switch { + --ig-size: var(--ig-size-small); +} + +igc-carousel { + height: 360px; + overflow: hidden; + border: 1px solid var(--ig-gray-300); + border-radius: 8px; + background: var(--ig-surface-500); +} + +igc-carousel::part(previous), +igc-carousel::part(next) { + width: 40px; + height: 40px; + transition: opacity 120ms ease-in-out; +} + +igc-carousel.is-orientation-changing::part(previous), +igc-carousel.is-orientation-changing::part(next) { + opacity: 0; + pointer-events: none; +} + +igc-carousel::part(previous) { + left: 16px; +} + +igc-carousel::part(next) { + right: 16px; +} + +igc-carousel[vertical]::part(previous), +igc-carousel[vertical]::part(next) { + left: auto; + right: 16px; + transform: none; +} + +.slide-wrapper { + position: relative; + display: grid; + box-sizing: border-box; + place-items: center; + width: 100%; + height: 100%; + margin: 0; + padding: 56px 84px; + overflow: hidden; + background: + linear-gradient(135deg, color-mix(in srgb, var(--ig-primary-500) 8%, transparent), transparent 46%), + linear-gradient(315deg, color-mix(in srgb, var(--ig-secondary-500) 10%, transparent), transparent 42%), + var(--ig-gray-100); +} + +.slide-content { + position: relative; + z-index: 1; + width: min(460px, calc(100% - 128px)); + max-width: 460px; + color: var(--ig-gray-900); +} + +.slide-label { + display: block; + margin-bottom: 12px; + color: var(--ig-primary-500); + font-size: 12px; + font-weight: 700; +} + +.slide-content h3 { + margin: 0; + font-size: 32px; + line-height: 1.15; +} + +.slide-content p { + margin: 12px 0 0; + color: var(--ig-gray-700); + font-size: 18px; + line-height: 1.45; +} + +.slide-details { + display: inline-flex; + align-items: center; + gap: 16px; + margin-top: 28px; + padding: 10px 14px; + border: 1px solid var(--ig-gray-300); + border-radius: 999px; + background: color-mix(in srgb, var(--ig-surface-500) 72%, transparent); +} + +.slide-details span { + color: var(--ig-gray-700); +} + +.slide-details strong { + color: var(--ig-gray-900); +} + +.slide-preview { + position: absolute; + z-index: 0; + right: 84px; + top: 50%; + display: grid; + width: 120px; + height: 220px; + grid-template-columns: repeat(3, 1fr); + align-items: center; + gap: 14px; + transform: translateY(-50%); +} + +.slide-preview span { + display: block; + border-radius: 8px; + background: color-mix(in srgb, var(--ig-primary-500) 20%, transparent); + box-shadow: 0 10px 24px rgb(0 0 0 / 0.12); +} + +.slide-preview span:nth-child(1) { + height: 120px; + opacity: 0.55; +} + +.slide-preview span:nth-child(2) { + height: 180px; + background: var(--ig-primary-300); +} + +.slide-preview span:nth-child(3) { + height: 92px; + opacity: 0.75; +} + +@media (max-width: 640px) { + .action-wrapper { + align-items: flex-start; + flex-direction: column; + gap: 12px; + } + + .slide-wrapper { + grid-template-columns: 1fr; + gap: 28px; + padding: 32px 64px; + } + + .slide-preview { + position: static; + width: 100%; + height: 120px; + transform: none; + } + + .slide-content h3 { + font-size: 28px; + } +} diff --git a/samples/layouts/carousel/animations/src/index.tsx b/samples/layouts/carousel/animations/src/index.tsx index dff7e50a07..bd8a0a3146 100644 --- a/samples/layouts/carousel/animations/src/index.tsx +++ b/samples/layouts/carousel/animations/src/index.tsx @@ -1,13 +1,7 @@ -import React, { useRef, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import ReactDOM from "react-dom/client"; import { HorizontalTransitionAnimation, - IgrButton, - IgrCard, - IgrCardActions, - IgrCardContent, - IgrCardHeader, - IgrCardMedia, IgrCarousel, IgrCarouselSlide, IgrCheckboxChangeEventArgs, @@ -16,13 +10,49 @@ import { IgrSwitch, } from "igniteui-react"; import "igniteui-webcomponents/themes/light/bootstrap.css"; -import "./CarouselAnimations.css"; import "./index.css"; -export default function CarouselComponents() { +const animationTypes: Array<{ value: HorizontalTransitionAnimation; label: string }> = [ + { value: "slide", label: "Slide" }, + { value: "fade", label: "Fade" }, + { value: "none", label: "None" }, +]; +const slides = [ + { + title: "Slide transition", + subtitle: "Moves content horizontally or vertically to preserve directional context.", + label: "01", + detail: "Best for sequential browsing", + metric: "320ms", + }, + { + title: "Fade transition", + subtitle: "Cross-fades between slides when the relationship between items is looser.", + label: "02", + detail: "Best for featured content", + metric: "240ms", + }, + { + title: "No transition", + subtitle: "Updates the active slide immediately for reduced motion or dense workflows.", + label: "03", + detail: "Best for direct state changes", + metric: "0ms", + }, +]; + +export default function CarouselAnimations() { const [animationType, setAnimationType] = useState('slide'); const [isCarouselVertical, setIsCarouselVertical] = useState(false); + const [isOrientationChanging, setIsOrientationChanging] = useState(false); + const orientationTimer = useRef(undefined); + + useEffect(() => () => { + if (orientationTimer.current !== undefined) { + window.clearTimeout(orientationTimer.current); + } + }, []); const onSelectChange = (e: CustomEvent) => { const value = e.detail.value as HorizontalTransitionAnimation; @@ -30,24 +60,35 @@ export default function CarouselComponents() { } const onSwitchChange = (e: IgrCheckboxChangeEventArgs) => { - setIsCarouselVertical(e.detail.checked); + const isVertical = e.detail.checked; + + if (orientationTimer.current !== undefined) { + window.clearTimeout(orientationTimer.current); + } + + setIsOrientationChanging(true); + + orientationTimer.current = window.setTimeout(() => { + setIsCarouselVertical(isVertical); + window.requestAnimationFrame(() => setIsOrientationChanging(false)); + }, 120); } return (
- Animation type + Animation - - Slide - - - Fade - - - None - + {animationTypes.map((animation) => ( + + {animation.label} + + ))}
@@ -55,110 +96,36 @@ export default function CarouselComponents() { onChange={onSwitchChange} labelPosition="before" > - Vertical alignment + Vertical
- - -
- - - - Ignite UI for Angular - - - -

- 30+ Material-based Angular components to code speedy web apps - faster. -

- - - - - - - Visit Page - - - -
- - -
- - - - Ignite UI for Javascript - - - -

- A complete JavaScript UI library empowering you to build - data-rich responsive web apps. -

- - - - - - - Visit Page - - - -
- - -
- - - - Ultimate UI for ASP.NET - - - -

- Build full-featured business apps with the most versatile set - of ASP.NET AJAX UI controls. -

- - - - - - - Visit Page - - - -
- + + {slides.map((slide) => ( + +
+
+ {slide.label} +

{slide.title}

+

{slide.subtitle}

+
+ {slide.detail} + {slide.metric} +
+
+ +
+ + ))}
); @@ -166,4 +133,4 @@ export default function CarouselComponents() { // rendering above component to the React DOM const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); +root.render(); diff --git a/samples/layouts/carousel/components/src/CarouselComponents.css b/samples/layouts/carousel/components/src/CarouselComponents.css deleted file mode 100644 index 26b7c61a11..0000000000 --- a/samples/layouts/carousel/components/src/CarouselComponents.css +++ /dev/null @@ -1,25 +0,0 @@ -.carousel-container { - padding: 16px; -} - -igc-carousel { - margin-inline: auto; - max-width: 75%; - height: 500px; -} - -igc-carousel-slide { - display: flex; - justify-content: center; - align-items: center; -} - -igc-carousel-slide div { - text-align: center; - max-width: 40%; - margin-inline: auto; -} - -igc-carousel-slide div * { - margin-block: 8px; -} diff --git a/samples/layouts/carousel/components/src/index.css b/samples/layouts/carousel/components/src/index.css index 1f53b8aa05..085a361ded 100644 --- a/samples/layouts/carousel/components/src/index.css +++ b/samples/layouts/carousel/components/src/index.css @@ -1,2 +1,340 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +.carousel-container { + width: min(760px, 100%); + margin: 16px auto 0; +} + +igc-carousel { + height: 440px; + overflow: hidden; + border: 1px solid var(--ig-gray-300); + border-radius: 8px; + background: var(--ig-surface-500); +} + +igc-carousel::part(previous), +igc-carousel::part(next) { + width: 40px; + height: 40px; +} + +igc-carousel::part(previous) { + left: 16px; +} + +igc-carousel::part(next) { + right: 16px; +} + +igc-carousel::part(indicators) { + background: transparent; +} + +igc-carousel-slide { + display: grid; + box-sizing: border-box; + height: 100%; + padding-bottom: 48px; + place-items: center; +} + +igc-carousel-slide.slide-frame { + background: var(--ig-gray-100); +} + +.slide-shell { + display: grid; + grid-template-columns: minmax(0, 390px) 120px; + width: fit-content; + height: auto; + align-items: center; + justify-content: center; + gap: 28px; + margin: 0 auto; + padding: 24px 0; +} + +igc-carousel-slide.slide-coast { + background: + linear-gradient(135deg, color-mix(in srgb, var(--ig-primary-500) 12%, transparent), transparent 45%), + var(--ig-gray-100); +} + +igc-carousel-slide.slide-city { + background: + linear-gradient(135deg, color-mix(in srgb, var(--ig-secondary-500) 12%, transparent), transparent 45%), + var(--ig-gray-100); +} + +igc-carousel-slide.slide-resort { + padding-bottom: 76px; + background: + linear-gradient(135deg, color-mix(in srgb, var(--ig-success-500) 12%, transparent), transparent 45%), + var(--ig-gray-100); +} + +.feature-card { + display: grid; + gap: 14px; + padding: 22px 24px; + border: 1px solid var(--ig-gray-300); + border-radius: 8px; + background: color-mix(in srgb, var(--ig-surface-500) 86%, transparent); + box-shadow: 0 14px 34px rgb(0 0 0 / 0.14); +} + +.slide-label { + color: var(--ig-primary-500); + font-size: 12px; + font-weight: 700; +} + +.feature-copy { + display: grid; + gap: 8px; +} + +.feature-copy h3 { + margin: 0; + color: var(--ig-gray-900); + font-size: 24px; + line-height: 1.2; +} + +.feature-copy p { + margin: 0 0 8px; + color: var(--ig-gray-700); + line-height: 1.45; +} + +.feature-card igc-button { + justify-self: start; +} + +.chip-row { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.chip-row span { + padding: 6px 10px; + border: 1px solid var(--ig-gray-300); + border-radius: 999px; + color: var(--ig-gray-700); + background: var(--ig-surface-500); + font-size: 14px; +} + +.route-visual { + display: grid; + width: 120px; + height: 180px; + grid-template-columns: repeat(3, 1fr); + align-items: end; + gap: 8px; +} + +.route-visual span { + display: block; + border-radius: 8px; + background: color-mix(in srgb, var(--ig-surface-500) 72%, transparent); + box-shadow: 0 10px 24px rgb(0 0 0 / 0.12); +} + +.route-visual span:nth-child(1) { + height: 46%; + opacity: 0.75; +} + +.route-visual span:nth-child(2) { + height: 82%; +} + +.route-visual span:nth-child(3) { + height: 62%; + opacity: 0.9; +} + +.event-card { + gap: 10px; + padding: 18px 22px; +} + +.event-summary { + display: flex; + align-items: center; + gap: 12px; + padding: 10px 12px; + border: 1px solid var(--ig-gray-300); + border-radius: 8px; + background: var(--ig-surface-500); +} + +.event-date { + display: grid; + width: 46px; + padding: 4px 0; + place-items: center; + border-radius: 6px; + color: var(--ig-primary-500); + background: color-mix(in srgb, var(--ig-primary-500) 16%, transparent); + font-size: 10px; + font-weight: 700; + line-height: 1.1; +} + +.event-date strong { + color: var(--ig-gray-900); + font-size: 22px; +} + +.event-details { + display: grid; + gap: 3px; + color: var(--ig-gray-700); + font-size: 14px; +} + +.event-details strong { + color: var(--ig-gray-900); + font-size: 15px; +} + +.event-visual { + position: relative; + width: 120px; + height: 180px; +} + +.ticket-stack { + position: absolute; + top: 10px; + left: 20px; + width: 96px; + height: 144px; +} + +.ticket { + position: absolute; + display: grid; + width: 96px; + height: 144px; + border-radius: 10px; + background: color-mix(in srgb, var(--ig-surface-500) 74%, transparent); + box-shadow: 0 10px 24px rgb(0 0 0 / 0.12); +} + +.ticket--back { + top: 12px; + left: -20px; + opacity: 0.56; + transform: rotate(-8deg); +} + +.ticket--front { + inset: 0; + grid-template-rows: 1fr auto 1fr; + padding: 18px; + transform: rotate(5deg); +} + +.ticket--front span { + display: block; + height: 8px; + border-radius: 999px; + background: var(--ig-primary-300); +} + +.ticket--front span:nth-child(2) { + width: 72%; + background: var(--ig-primary-500); +} + +.ticket--front span:nth-child(3) { + align-self: end; + width: 54%; + background: var(--ig-gray-300); +} + +.offer-summary { + display: grid; + gap: 4px; + color: var(--ig-gray-700); + font-size: 14px; +} + +.offer-card { + gap: 8px; + padding: 16px 22px; +} + +.offer-summary > div { + display: flex; + align-items: baseline; + justify-content: space-between; +} + +.offer-summary strong { + color: var(--ig-gray-900); + font-size: 24px; +} + +.addon-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 9px 12px; + border-radius: 8px; + color: var(--ig-gray-700); + background: var(--ig-gray-100); + font-size: 14px; +} + +.addon-row strong { + color: var(--ig-gray-900); +} + +.amenity-visual { + display: grid; + width: 120px; + height: 180px; + align-content: center; + gap: 12px; +} + +.amenity-visual span { + display: block; + height: 44px; + border-radius: 12px; + background: color-mix(in srgb, var(--ig-surface-500) 74%, transparent); + box-shadow: 0 10px 24px rgb(0 0 0 / 0.12); +} + +.amenity-visual span:nth-child(1) { + width: 78%; +} + +.amenity-visual span:nth-child(2) { + width: 100%; + background: color-mix(in srgb, var(--ig-surface-500) 90%, transparent); +} + +.amenity-visual span:nth-child(3) { + width: 62%; + justify-self: end; +} + +@media (max-width: 720px) { + .slide-shell { + grid-template-columns: 1fr; + padding: 32px 64px; + } + + .feature-visual, + .event-visual, + .amenity-visual { + display: none; + } +} diff --git a/samples/layouts/carousel/components/src/index.tsx b/samples/layouts/carousel/components/src/index.tsx index 3a82cfa469..48a323b986 100644 --- a/samples/layouts/carousel/components/src/index.tsx +++ b/samples/layouts/carousel/components/src/index.tsx @@ -4,20 +4,15 @@ import { IgrButton, IgrCarousel, IgrCarouselSlide, + IgrCheckbox, IgrIcon, IgrInput, registerIconFromText, } from "igniteui-react"; import "igniteui-webcomponents/themes/light/bootstrap.css"; -import "./CarouselComponents.css"; import "./index.css"; const icons = [ - { - name: "person", - iconText: - '', - }, { name: "password", iconText: @@ -40,34 +35,101 @@ export default function CarouselComponents() { return (
- -
- -
- - - - - + +
+ +
+ Featured route +

Coastal weekend

+

Browse curated travel ideas and search directly from the active slide.

+
+ + +
+ 3 stops + Sea view + Weekend +
- Sign In + Explore -
+ + - -
- -
- - + +
+
+
+ City guide +

Museum night pass

+

Reserve a late gallery visit and keep the event details visible in the active slide.

+
+
+ +
+ 6:30 PM - 10:00 PM + North wing galleries +
+
+ Send event reminder + + Notify Me + +
+ +
+ + +
+ +
+ Seasonal offer +

Resort day access

+

Build a compact offer configuration that lets users review inclusions before applying a code.

+
+
+
+ Day pass + $89 +
+ Pool access and spa credit included +
+
+ Lunch add-on + +$18 +
+ + - Search + Apply Code -
+ +
diff --git a/samples/layouts/carousel/configuration/.devcontainer/devcontainer.json b/samples/layouts/carousel/configuration/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/layouts/carousel/configuration/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/layouts/carousel/configuration/.eslintrc.js b/samples/layouts/carousel/configuration/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/carousel/configuration/.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/layouts/carousel/configuration/README.md b/samples/layouts/carousel/configuration/README.md new file mode 100644 index 0000000000..510d93ba01 --- /dev/null +++ b/samples/layouts/carousel/configuration/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Configuration feature using [Carousel](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/carousel/configuration +``` + +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/layouts/carousel/configuration/index.html b/samples/layouts/carousel/configuration/index.html new file mode 100644 index 0000000000..19c587c609 --- /dev/null +++ b/samples/layouts/carousel/configuration/index.html @@ -0,0 +1,11 @@ + + + + Carousel Configuration + + + +
+ + + diff --git a/samples/layouts/carousel/configuration/package.json b/samples/layouts/carousel/configuration/package.json new file mode 100644 index 0000000000..7d47971ea5 --- /dev/null +++ b/samples/layouts/carousel/configuration/package.json @@ -0,0 +1,41 @@ +{ + "name": "react-carousel-configuration", + "description": "This project provides example of Carousel configuration using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "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", + "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" + ] +} diff --git a/samples/layouts/carousel/configuration/sandbox.config.json b/samples/layouts/carousel/configuration/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/carousel/configuration/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/carousel/configuration/src/index.css b/samples/layouts/carousel/configuration/src/index.css new file mode 100644 index 0000000000..61cc70dac2 --- /dev/null +++ b/samples/layouts/carousel/configuration/src/index.css @@ -0,0 +1,90 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +.configuration-sample { + display: grid; + width: min(860px, calc(100% - 32px)); + gap: 16px; + margin: 16px auto 0; +} + +.configuration-controls { + display: grid; + grid-template-columns: repeat(3, max-content); + align-items: center; + justify-content: end; + gap: 16px; +} + +igc-switch { + --ig-size: var(--ig-size-small); +} + +igc-carousel { + height: 340px; + overflow: hidden; + border: 1px solid var(--ig-gray-300); + border-radius: 8px; + background: var(--ig-surface-500); +} + +igc-carousel::part(previous), +igc-carousel::part(next) { + width: 40px; + height: 40px; +} + +igc-carousel::part(previous) { + left: 16px; +} + +igc-carousel::part(next) { + right: 16px; +} + +igc-carousel-slide { + display: grid; + height: 100%; + place-items: center; + background: + linear-gradient(135deg, color-mix(in srgb, var(--ig-primary-500) 12%, transparent), transparent 42%), + linear-gradient(315deg, color-mix(in srgb, var(--ig-secondary-500) 12%, transparent), transparent 42%), + var(--ig-gray-100); +} + +.slide-card { + display: grid; + width: min(420px, 100%); + gap: 10px; + margin: 0; + padding: 28px; + border: 1px solid var(--ig-gray-300); + border-radius: 8px; + color: var(--ig-gray-900); + background: color-mix(in srgb, var(--ig-surface-500) 88%, transparent); + box-shadow: 0 14px 34px rgb(0 0 0 / 0.14); +} + +.slide-card span { + color: var(--ig-primary-500); + font-size: 12px; + font-weight: 700; +} + +.slide-card h3 { + margin: 0; + font-size: 28px; + line-height: 1.2; +} + +.slide-card p { + margin: 0; + color: var(--ig-gray-700); + line-height: 1.45; +} + +@media (max-width: 760px) { + .configuration-controls { + grid-template-columns: repeat(2, minmax(0, 1fr)); + justify-content: stretch; + } +} diff --git a/samples/layouts/carousel/configuration/src/index.tsx b/samples/layouts/carousel/configuration/src/index.tsx new file mode 100644 index 0000000000..bddc36b78f --- /dev/null +++ b/samples/layouts/carousel/configuration/src/index.tsx @@ -0,0 +1,80 @@ +import React, { useState } from "react"; +import ReactDOM from "react-dom/client"; +import { + IgrCarousel, + IgrCarouselSlide, + IgrCheckboxChangeEventArgs, + IgrSwitch, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import "./index.css"; + +const slides = [ + { + title: "Coastal route", + subtitle: "A compact visual slide for checking navigation and indicators.", + label: "01", + }, + { + title: "City guide", + subtitle: "A second slide makes loop behavior easy to verify.", + label: "02", + }, + { + title: "Resort access", + subtitle: "Use the controls to compare the Carousel configuration states.", + label: "03", + }, +]; + +export default function CarouselConfiguration() { + const [hideNavigation, setHideNavigation] = useState(false); + const [hideIndicators, setHideIndicators] = useState(false); + const [disableLoop, setDisableLoop] = useState(false); + + const onHideNavigationChange = (e: IgrCheckboxChangeEventArgs) => { + setHideNavigation(e.detail.checked); + }; + + const onHideIndicatorsChange = (e: IgrCheckboxChangeEventArgs) => { + setHideIndicators(e.detail.checked); + }; + + const onDisableLoopChange = (e: IgrCheckboxChangeEventArgs) => { + setDisableLoop(e.detail.checked); + }; + + return ( +
+
+ + Hide navigation + + + Hide indicators + + + Disable loop + +
+ + {slides.map((slide) => ( + +
+ {slide.label} +

{slide.title}

+

{slide.subtitle}

+
+ + ))} + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/carousel/configuration/tsconfig.json b/samples/layouts/carousel/configuration/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/layouts/carousel/configuration/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/carousel/configuration/vite.config.js b/samples/layouts/carousel/configuration/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/carousel/configuration/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/layouts/carousel/overview/src/CarouselOverview.css b/samples/layouts/carousel/overview/src/CarouselOverview.css index dd9da65b00..7d4cc2781b 100644 --- a/samples/layouts/carousel/overview/src/CarouselOverview.css +++ b/samples/layouts/carousel/overview/src/CarouselOverview.css @@ -4,6 +4,7 @@ .image-container { display: flex; + height: 100%; align-items: center; justify-content: center; } diff --git a/samples/layouts/carousel/styling/README.md b/samples/layouts/carousel/styling/README.md new file mode 100644 index 0000000000..a98f566cc8 --- /dev/null +++ b/samples/layouts/carousel/styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Styling feature using [Carousel](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/carousel/styling +``` + +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/layouts/carousel/styling/index.html b/samples/layouts/carousel/styling/index.html new file mode 100644 index 0000000000..409467944f --- /dev/null +++ b/samples/layouts/carousel/styling/index.html @@ -0,0 +1,11 @@ + + + + Carousel Styling + + + +
+ + + diff --git a/samples/layouts/carousel/styling/package.json b/samples/layouts/carousel/styling/package.json new file mode 100644 index 0000000000..9d14d32eae --- /dev/null +++ b/samples/layouts/carousel/styling/package.json @@ -0,0 +1,41 @@ +{ + "name": "react-carousel-styling", + "description": "This project provides example of Carousel styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "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", + "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" + ] +} diff --git a/samples/layouts/carousel/styling/sandbox.config.json b/samples/layouts/carousel/styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/carousel/styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/carousel/styling/src/index.css b/samples/layouts/carousel/styling/src/index.css new file mode 100644 index 0000000000..d6592a6f5a --- /dev/null +++ b/samples/layouts/carousel/styling/src/index.css @@ -0,0 +1,106 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +.styled-carousel { + width: min(860px, 100%); + height: 430px; + margin: 16px auto 0; + border: 1px solid var(--ig-gray-300); + border-radius: 8px; + overflow: hidden; + background: var(--ig-surface-500); +} + +.styled-carousel::part(indicators) { + gap: 8px; + padding: 6px 10px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.82); + box-shadow: 0 6px 16px rgba(11, 31, 53, 0.16); +} + +.styled-carousel::part(previous), +.styled-carousel::part(next) { + display: grid; + width: 40px; + height: 40px; + place-items: center; + border-radius: 50%; + color: var(--ig-gray-800); + background: rgba(255, 255, 255, 0.88); + box-shadow: 0 6px 16px rgba(11, 31, 53, 0.22); +} + +.carousel-navigation-button { + display: inline-grid; + width: 20px; + height: 20px; + place-items: center; + line-height: 1; +} + +.carousel-navigation-button igc-icon { + width: 20px; + height: 20px; + color: inherit; +} + +.carousel-indicator { + display: block; + width: 9px; + height: 9px; + border: 2px solid var(--ig-gray-600); + border-radius: 50%; + background: transparent; +} + +.carousel-indicator-active { + border-color: var(--ig-primary-500); + background: var(--ig-primary-500); +} + +.slide-card { + position: relative; + display: grid; + width: 100%; + height: 100%; + margin: 0; + overflow: hidden; +} + +.slide-image { + width: 100%; + height: 100%; + object-fit: cover; +} + +.slide-content { + position: absolute; + inset: auto 56px 44px 56px; + max-width: 380px; + padding: 20px 24px; + border-radius: 8px; + color: var(--ig-gray-900); + background: rgba(255, 255, 255, 0.88); + box-shadow: 0 14px 34px rgba(11, 31, 53, 0.18); +} + +.slide-label { + display: block; + margin-bottom: 8px; + color: var(--ig-primary-600); + font-size: 12px; + font-weight: 700; + letter-spacing: 0; +} + +.slide-content h3 { + margin: 0; + font-size: 24px; + line-height: 1.2; +} + +.slide-content p { + margin: 8px 0 0; + color: var(--ig-gray-700); + line-height: 1.45; +} diff --git a/samples/layouts/carousel/styling/src/index.tsx b/samples/layouts/carousel/styling/src/index.tsx new file mode 100644 index 0000000000..57cce06660 --- /dev/null +++ b/samples/layouts/carousel/styling/src/index.tsx @@ -0,0 +1,82 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import { + IgrCarousel, + IgrCarouselIndicator, + IgrCarouselSlide, + IgrIcon, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import "./index.css"; + +const chevronLeft = + ''; +const chevronRight = + ''; + +const slides = [ + { + title: "Coastal retreat", + subtitle: "A quiet route along cliffs, beach towns, and open water.", + image: "https://dl.infragistics.com/x/img/carousel/WonderfulCoast.png", + alt: "Wonderful coast", + label: "01", + }, + { + title: "Cultural district", + subtitle: "Museums, galleries, and historic streets in one walkable plan.", + image: "https://dl.infragistics.com/x/img/carousel/CulturalDip.png", + alt: "Cultural district", + label: "02", + }, + { + title: "Golden beaches", + subtitle: "A sunny itinerary built around swimming, dining, and sunsets.", + image: "https://dl.infragistics.com/x/img/carousel/GoldenBeaches.png", + alt: "Golden beaches", + label: "03", + }, +]; + +export default function CarouselStyling() { + React.useEffect(() => { + registerIconFromText("chevron-left", chevronLeft); + registerIconFromText("chevron-right", chevronRight); + }, []); + + return ( +
+ + + + + + + + + {slides.map((slide) => ( + + +
+ {slide.alt} +
+ {slide.label} +

{slide.title}

+

{slide.subtitle}

+
+
+ + + + + + + ))} + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/carousel/styling/tsconfig.json b/samples/layouts/carousel/styling/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/layouts/carousel/styling/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/carousel/styling/vite.config.js b/samples/layouts/carousel/styling/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/carousel/styling/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/layouts/carousel/tailwind-styling/README.md b/samples/layouts/carousel/tailwind-styling/README.md new file mode 100644 index 0000000000..9f663fd281 --- /dev/null +++ b/samples/layouts/carousel/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Carousel](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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/layouts/carousel/tailwind-styling +``` + +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/layouts/carousel/tailwind-styling/index.html b/samples/layouts/carousel/tailwind-styling/index.html new file mode 100644 index 0000000000..c291074743 --- /dev/null +++ b/samples/layouts/carousel/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + Carousel Tailwind Styling + + + +
+ + + diff --git a/samples/layouts/carousel/tailwind-styling/package.json b/samples/layouts/carousel/tailwind-styling/package.json new file mode 100644 index 0000000000..eec40021ee --- /dev/null +++ b/samples/layouts/carousel/tailwind-styling/package.json @@ -0,0 +1,43 @@ +{ + "name": "react-carousel-tailwind-styling", + "description": "This project provides example of Carousel Tailwind styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.3.3", + "@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", + "tailwindcss": "^4.3.3", + "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" + ] +} diff --git a/samples/layouts/carousel/tailwind-styling/sandbox.config.json b/samples/layouts/carousel/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/carousel/tailwind-styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/carousel/tailwind-styling/src/index.css b/samples/layouts/carousel/tailwind-styling/src/index.css new file mode 100644 index 0000000000..7da3c138b5 --- /dev/null +++ b/samples/layouts/carousel/tailwind-styling/src/index.css @@ -0,0 +1,31 @@ +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); +@source "./index.tsx"; + +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +.styled-carousel::part(indicators) { + gap: 8px; + padding: 6px 10px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.82); + box-shadow: 0 6px 16px rgba(11, 31, 53, 0.16); +} + +.styled-carousel::part(previous), +.styled-carousel::part(next) { + display: grid; + width: 40px; + height: 40px; + place-items: center; + border-radius: 50%; + color: var(--ig-gray-800); + background: rgba(255, 255, 255, 0.88); + box-shadow: 0 6px 16px rgba(11, 31, 53, 0.22); +} + +.carousel-navigation-button igc-icon { + width: 20px; + height: 20px; + color: inherit; +} diff --git a/samples/layouts/carousel/tailwind-styling/src/index.tsx b/samples/layouts/carousel/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..29a71c4242 --- /dev/null +++ b/samples/layouts/carousel/tailwind-styling/src/index.tsx @@ -0,0 +1,111 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrButton, + IgrCarousel, + IgrCarouselIndicator, + IgrCarouselSlide, + IgrIcon, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +const chevronLeft = + ''; +const chevronRight = + ''; + +const slides = [ + { + title: "Scenic getaway", + subtitle: "A flexible travel plan built around memorable views and time to explore.", + image: "https://dl.infragistics.com/x/img/carousel/AdobeStock_1937350575-s.png", + alt: "Scenic travel destination", + label: "01", + details: ["3 days", "8 stops", "Flexible dates"], + tags: ["Scenic route", "Flexible pace"], + }, + { + title: "Mountain trail ride", + subtitle: "A high-energy route through rugged terrain, with technical descents and open trail views.", + image: "https://dl.infragistics.com/x/img/carousel/AdobeStock_215535179-s.png", + alt: "Mountain trail ride", + label: "02", + details: ["1 day", "12 km", "Advanced"], + tags: ["Mountain bike", "Trail ride"], + }, + { + title: "Weekend escape", + subtitle: "A short break with unhurried moments, fresh perspectives, and room to recharge.", + image: "https://dl.infragistics.com/x/img/carousel/AdobeStock_637533323-s.png", + alt: "Weekend escape", + label: "03", + details: ["Weekend", "5 highlights", "Year round"], + tags: ["Unwind", "Go at your pace"], + }, +]; + +export default function CarouselTailwindStyling() { + React.useEffect(() => { + registerIconFromText("chevron-left", chevronLeft); + registerIconFromText("chevron-right", chevronRight); + }, []); + + return ( +
+ + + + + + + + + {slides.map((slide) => ( + + +
+ {slide.alt} +
+
+ {slide.label} / ITINERARY +

{slide.title}

+

{slide.subtitle}

+
+
+ {slide.details.map((detail) => ( + + {detail} + + ))} +
+
+ {slide.tags.map((tag) => ( + + {tag} + + ))} +
+ + View itinerary + +
+
+ + + + + + + ))} + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/carousel/tailwind-styling/tsconfig.json b/samples/layouts/carousel/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/layouts/carousel/tailwind-styling/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/layouts/carousel/tailwind-styling/vite.config.js b/samples/layouts/carousel/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..c1fff0c83c --- /dev/null +++ b/samples/layouts/carousel/tailwind-styling/vite.config.js @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); diff --git a/samples/layouts/carousel/thumbnail/src/CarouselThumbnail.css b/samples/layouts/carousel/thumbnail/src/CarouselThumbnail.css deleted file mode 100644 index c317a85c62..0000000000 --- a/samples/layouts/carousel/thumbnail/src/CarouselThumbnail.css +++ /dev/null @@ -1,13 +0,0 @@ -igc-carousel { - margin-inline: auto; - max-width: 75%; -} - -igc-carousel::part(indicators) { - border-radius: 2px; -} - -.blurred { - filter: blur(2px); - opacity: 0.5; -} \ No newline at end of file diff --git a/samples/layouts/carousel/thumbnail/src/index.css b/samples/layouts/carousel/thumbnail/src/index.css index 1f53b8aa05..56d777920a 100644 --- a/samples/layouts/carousel/thumbnail/src/index.css +++ b/samples/layouts/carousel/thumbnail/src/index.css @@ -1,2 +1,22 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +igc-carousel { + height: 420px; + margin: 16px auto 0; + max-width: 75%; +} + +igc-carousel::part(indicators) { + border-radius: 2px; +} + +igc-carousel-slide img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.blurred { + filter: blur(2px); + opacity: 0.5; +} diff --git a/samples/layouts/carousel/thumbnail/src/index.tsx b/samples/layouts/carousel/thumbnail/src/index.tsx index 1da1df7ba3..b04e346c1f 100644 --- a/samples/layouts/carousel/thumbnail/src/index.tsx +++ b/samples/layouts/carousel/thumbnail/src/index.tsx @@ -6,7 +6,6 @@ import { IgrCarouselSlide, } from "igniteui-react"; import "igniteui-webcomponents/themes/light/bootstrap.css"; -import "./CarouselThumbnail.css"; import "./index.css"; From 6cf6a5d66a923491218ce60bac77ab38940359d7 Mon Sep 17 00:00:00 2001 From: Hristo Hristov <57346540+Hristo313@users.noreply.github.com> Date: Fri, 2 Oct 2026 10:53:05 +0300 Subject: [PATCH 14/14] feat(checkbox): update samples content (#1104) --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/checkbox/checking/index.html | 11 -- samples/inputs/checkbox/checking/package.json | 42 ----- .../inputs/checkbox/checking/src/index.css | 2 - .../inputs/checkbox/checking/src/index.tsx | 26 --- samples/inputs/checkbox/disabled/README.md | 56 ------- samples/inputs/checkbox/disabled/package.json | 42 ----- .../checkbox/disabled/sandbox.config.json | 5 - .../inputs/checkbox/disabled/src/index.css | 2 - .../inputs/checkbox/disabled/src/index.tsx | 26 --- .../.devcontainer/devcontainer.json | 4 - .../checkbox/indeterminate/.eslintrc.js | 75 --------- .../inputs/checkbox/indeterminate/README.md | 56 ------- .../inputs/checkbox/indeterminate/index.html | 11 -- .../indeterminate/sandbox.config.json | 5 - .../checkbox/indeterminate/src/index.css | 2 - .../checkbox/indeterminate/src/index.tsx | 26 --- .../checkbox/indeterminate/tsconfig.json | 44 ----- .../checkbox/indeterminate/vite.config.js | 12 -- .../label/.devcontainer/devcontainer.json | 4 - samples/inputs/checkbox/label/.eslintrc.js | 75 --------- .../inputs/checkbox/label/sandbox.config.json | 5 - .../label/src/CheckboxLabelStyles.css | 5 - samples/inputs/checkbox/label/src/index.css | 2 - samples/inputs/checkbox/label/src/index.tsx | 29 ---- samples/inputs/checkbox/label/tsconfig.json | 44 ----- samples/inputs/checkbox/label/vite.config.js | 12 -- .../inputs/checkbox/overview/src/index.css | 99 ++++++++++- .../inputs/checkbox/overview/src/index.tsx | 100 +++++++++-- .../.devcontainer/devcontainer.json | 0 .../{checking => states}/.eslintrc.js | 0 .../checkbox/{label => states}/README.md | 8 +- .../checkbox/{label => states}/index.html | 2 +- .../checkbox/{label => states}/package.json | 4 +- .../{checking => states}/sandbox.config.json | 0 samples/inputs/checkbox/states/src/index.css | 33 ++++ samples/inputs/checkbox/states/src/index.tsx | 50 ++++++ .../{checking => states}/tsconfig.json | 0 .../{checking => states}/vite.config.js | 0 samples/inputs/checkbox/styling/src/index.css | 155 +++++++++++++++++- samples/inputs/checkbox/styling/src/index.tsx | 78 +++++++-- .../.devcontainer/devcontainer.json | 2 +- .../.eslintrc.js | 2 +- .../{checking => tailwind-styling}/README.md | 8 +- .../{disabled => tailwind-styling}/index.html | 4 +- .../package.json | 6 +- .../tailwind-styling/sandbox.config.json | 5 + .../checkbox/tailwind-styling/src/index.css | 39 +++++ .../checkbox/tailwind-styling/src/index.tsx | 103 ++++++++++++ .../tsconfig.json | 0 .../vite.config.js | 9 +- 52 files changed, 654 insertions(+), 680 deletions(-) delete mode 100644 samples/inputs/checkbox/checking/index.html delete mode 100644 samples/inputs/checkbox/checking/package.json delete mode 100644 samples/inputs/checkbox/checking/src/index.css delete mode 100644 samples/inputs/checkbox/checking/src/index.tsx delete mode 100644 samples/inputs/checkbox/disabled/README.md delete mode 100644 samples/inputs/checkbox/disabled/package.json delete mode 100644 samples/inputs/checkbox/disabled/sandbox.config.json delete mode 100644 samples/inputs/checkbox/disabled/src/index.css delete mode 100644 samples/inputs/checkbox/disabled/src/index.tsx delete mode 100644 samples/inputs/checkbox/indeterminate/.devcontainer/devcontainer.json delete mode 100644 samples/inputs/checkbox/indeterminate/.eslintrc.js delete mode 100644 samples/inputs/checkbox/indeterminate/README.md delete mode 100644 samples/inputs/checkbox/indeterminate/index.html delete mode 100644 samples/inputs/checkbox/indeterminate/sandbox.config.json delete mode 100644 samples/inputs/checkbox/indeterminate/src/index.css delete mode 100644 samples/inputs/checkbox/indeterminate/src/index.tsx delete mode 100644 samples/inputs/checkbox/indeterminate/tsconfig.json delete mode 100644 samples/inputs/checkbox/indeterminate/vite.config.js delete mode 100644 samples/inputs/checkbox/label/.devcontainer/devcontainer.json delete mode 100644 samples/inputs/checkbox/label/.eslintrc.js delete mode 100644 samples/inputs/checkbox/label/sandbox.config.json delete mode 100644 samples/inputs/checkbox/label/src/CheckboxLabelStyles.css delete mode 100644 samples/inputs/checkbox/label/src/index.css delete mode 100644 samples/inputs/checkbox/label/src/index.tsx delete mode 100644 samples/inputs/checkbox/label/tsconfig.json delete mode 100644 samples/inputs/checkbox/label/vite.config.js rename samples/inputs/checkbox/{checking => states}/.devcontainer/devcontainer.json (100%) rename samples/inputs/checkbox/{checking => states}/.eslintrc.js (100%) rename samples/inputs/checkbox/{label => states}/README.md (86%) rename samples/inputs/checkbox/{label => states}/index.html (87%) rename samples/inputs/checkbox/{label => states}/package.json (87%) rename samples/inputs/checkbox/{checking => states}/sandbox.config.json (100%) create mode 100644 samples/inputs/checkbox/states/src/index.css create mode 100644 samples/inputs/checkbox/states/src/index.tsx rename samples/inputs/checkbox/{checking => states}/tsconfig.json (100%) rename samples/inputs/checkbox/{checking => states}/vite.config.js (100%) rename samples/inputs/checkbox/{disabled => tailwind-styling}/.devcontainer/devcontainer.json (97%) rename samples/inputs/checkbox/{disabled => tailwind-styling}/.eslintrc.js (99%) rename samples/inputs/checkbox/{checking => tailwind-styling}/README.md (85%) rename samples/inputs/checkbox/{disabled => tailwind-styling}/index.html (82%) rename samples/inputs/checkbox/{indeterminate => tailwind-styling}/package.json (81%) create mode 100644 samples/inputs/checkbox/tailwind-styling/sandbox.config.json create mode 100644 samples/inputs/checkbox/tailwind-styling/src/index.css create mode 100644 samples/inputs/checkbox/tailwind-styling/src/index.tsx rename samples/inputs/checkbox/{disabled => tailwind-styling}/tsconfig.json (100%) rename samples/inputs/checkbox/{disabled => tailwind-styling}/vite.config.js (53%) diff --git a/browser/public/meta.json b/browser/public/meta.json index 37b29dffdd..abc53cbbe5 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-18 18:23:12","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-28 13:50:58","note":"this file is auto-generated"} diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index 37b29dffdd..abc53cbbe5 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-18 18:23:12","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-09-28 13:50:58","note":"this file is auto-generated"} diff --git a/samples/inputs/checkbox/checking/index.html b/samples/inputs/checkbox/checking/index.html deleted file mode 100644 index ab52da5ca7..0000000000 --- a/samples/inputs/checkbox/checking/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - CheckboxChecking - - - -
- - - \ No newline at end of file diff --git a/samples/inputs/checkbox/checking/package.json b/samples/inputs/checkbox/checking/package.json deleted file mode 100644 index 7239ba9175..0000000000 --- a/samples/inputs/checkbox/checking/package.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "name": "react-checkbox-checking", - "description": "This project provides example of Checkbox Checking using Infragistics React components", - "author": "Infragistics", - "homepage": ".", - "version": "1.4.0", - "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" - }, - "dependencies": { - "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.9.0", - "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.4.1", - "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", - "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" - ] -} diff --git a/samples/inputs/checkbox/checking/src/index.css b/samples/inputs/checkbox/checking/src/index.css deleted file mode 100644 index 1f53b8aa05..0000000000 --- a/samples/inputs/checkbox/checking/src/index.css +++ /dev/null @@ -1,2 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/inputs/checkbox/checking/src/index.tsx b/samples/inputs/checkbox/checking/src/index.tsx deleted file mode 100644 index 76cdf7abb6..0000000000 --- a/samples/inputs/checkbox/checking/src/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrCheckbox } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -export default class CheckboxChecked extends React.Component { - - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
- - Label - -
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/inputs/checkbox/disabled/README.md b/samples/inputs/checkbox/disabled/README.md deleted file mode 100644 index 2d3952da22..0000000000 --- a/samples/inputs/checkbox/disabled/README.md +++ /dev/null @@ -1,56 +0,0 @@ - - - -This folder contains implementation of React application with example of Disabled feature using [Checkbox](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. - - - - - - View Docs - - - View Code - - - Run Sample - - - Run Sample - - - - -## 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/checkbox/disabled -``` - -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/checkbox/disabled/package.json b/samples/inputs/checkbox/disabled/package.json deleted file mode 100644 index 82369bc538..0000000000 --- a/samples/inputs/checkbox/disabled/package.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "name": "react-checkbox-disabled", - "description": "This project provides example of Checkbox Disabled using Infragistics React components", - "author": "Infragistics", - "homepage": ".", - "version": "1.4.0", - "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" - }, - "dependencies": { - "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "19.9.0", - "igniteui-react-core": "19.6.0", - "igniteui-webcomponents": "^7.4.1", - "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", - "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" - ] -} diff --git a/samples/inputs/checkbox/disabled/sandbox.config.json b/samples/inputs/checkbox/disabled/sandbox.config.json deleted file mode 100644 index 00acba0c10..0000000000 --- a/samples/inputs/checkbox/disabled/sandbox.config.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "infiniteLoopProtection": false, - "hardReloadOnChange": false, - "view": "browser" -} \ No newline at end of file diff --git a/samples/inputs/checkbox/disabled/src/index.css b/samples/inputs/checkbox/disabled/src/index.css deleted file mode 100644 index 1f53b8aa05..0000000000 --- a/samples/inputs/checkbox/disabled/src/index.css +++ /dev/null @@ -1,2 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/inputs/checkbox/disabled/src/index.tsx b/samples/inputs/checkbox/disabled/src/index.tsx deleted file mode 100644 index bee5314a60..0000000000 --- a/samples/inputs/checkbox/disabled/src/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrCheckbox } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -export default class CheckboxDisabled extends React.Component { - - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
- - Label - -
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/inputs/checkbox/indeterminate/.devcontainer/devcontainer.json b/samples/inputs/checkbox/indeterminate/.devcontainer/devcontainer.json deleted file mode 100644 index e0b8e9c925..0000000000 --- a/samples/inputs/checkbox/indeterminate/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:22" -} \ No newline at end of file diff --git a/samples/inputs/checkbox/indeterminate/.eslintrc.js b/samples/inputs/checkbox/indeterminate/.eslintrc.js deleted file mode 100644 index b45160a9ee..0000000000 --- a/samples/inputs/checkbox/indeterminate/.eslintrc.js +++ /dev/null @@ -1,75 +0,0 @@ -// 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/checkbox/indeterminate/README.md b/samples/inputs/checkbox/indeterminate/README.md deleted file mode 100644 index ad1522f565..0000000000 --- a/samples/inputs/checkbox/indeterminate/README.md +++ /dev/null @@ -1,56 +0,0 @@ - - - -This folder contains implementation of React application with example of Indeterminate feature using [Checkbox](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. - - - - - - View Docs - - - View Code - - - Run Sample - - - Run Sample - - - - -## 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/checkbox/indeterminate -``` - -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/checkbox/indeterminate/index.html b/samples/inputs/checkbox/indeterminate/index.html deleted file mode 100644 index 6ebed15856..0000000000 --- a/samples/inputs/checkbox/indeterminate/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - CheckboIndeterminate - - - -
- - - \ No newline at end of file diff --git a/samples/inputs/checkbox/indeterminate/sandbox.config.json b/samples/inputs/checkbox/indeterminate/sandbox.config.json deleted file mode 100644 index 00acba0c10..0000000000 --- a/samples/inputs/checkbox/indeterminate/sandbox.config.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "infiniteLoopProtection": false, - "hardReloadOnChange": false, - "view": "browser" -} \ No newline at end of file diff --git a/samples/inputs/checkbox/indeterminate/src/index.css b/samples/inputs/checkbox/indeterminate/src/index.css deleted file mode 100644 index 1f53b8aa05..0000000000 --- a/samples/inputs/checkbox/indeterminate/src/index.css +++ /dev/null @@ -1,2 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/inputs/checkbox/indeterminate/src/index.tsx b/samples/inputs/checkbox/indeterminate/src/index.tsx deleted file mode 100644 index 990fdd25d6..0000000000 --- a/samples/inputs/checkbox/indeterminate/src/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrCheckbox, IgrCheckboxModule } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -export default class CheckboxIndeterminate extends React.Component { - - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
- - Label - -
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/inputs/checkbox/indeterminate/tsconfig.json b/samples/inputs/checkbox/indeterminate/tsconfig.json deleted file mode 100644 index e7db8a94f5..0000000000 --- a/samples/inputs/checkbox/indeterminate/tsconfig.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "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, - "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/checkbox/indeterminate/vite.config.js b/samples/inputs/checkbox/indeterminate/vite.config.js deleted file mode 100644 index 1744dbc719..0000000000 --- a/samples/inputs/checkbox/indeterminate/vite.config.js +++ /dev/null @@ -1,12 +0,0 @@ -import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; - -export default defineConfig({ - plugins: [react()], - build: { - outDir: 'build' - }, - server: { - open: false - }, -}); \ No newline at end of file diff --git a/samples/inputs/checkbox/label/.devcontainer/devcontainer.json b/samples/inputs/checkbox/label/.devcontainer/devcontainer.json deleted file mode 100644 index e0b8e9c925..0000000000 --- a/samples/inputs/checkbox/label/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:22" -} \ No newline at end of file diff --git a/samples/inputs/checkbox/label/.eslintrc.js b/samples/inputs/checkbox/label/.eslintrc.js deleted file mode 100644 index b45160a9ee..0000000000 --- a/samples/inputs/checkbox/label/.eslintrc.js +++ /dev/null @@ -1,75 +0,0 @@ -// 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/checkbox/label/sandbox.config.json b/samples/inputs/checkbox/label/sandbox.config.json deleted file mode 100644 index 00acba0c10..0000000000 --- a/samples/inputs/checkbox/label/sandbox.config.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "infiniteLoopProtection": false, - "hardReloadOnChange": false, - "view": "browser" -} \ No newline at end of file diff --git a/samples/inputs/checkbox/label/src/CheckboxLabelStyles.css b/samples/inputs/checkbox/label/src/CheckboxLabelStyles.css deleted file mode 100644 index 21bf881ab2..0000000000 --- a/samples/inputs/checkbox/label/src/CheckboxLabelStyles.css +++ /dev/null @@ -1,5 +0,0 @@ -.wrapper { - display: flex; - align-items: center; - gap: 0.5rem; -} \ No newline at end of file diff --git a/samples/inputs/checkbox/label/src/index.css b/samples/inputs/checkbox/label/src/index.css deleted file mode 100644 index 1f53b8aa05..0000000000 --- a/samples/inputs/checkbox/label/src/index.css +++ /dev/null @@ -1,2 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/inputs/checkbox/label/src/index.tsx b/samples/inputs/checkbox/label/src/index.tsx deleted file mode 100644 index bb155f3d0b..0000000000 --- a/samples/inputs/checkbox/label/src/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import './CheckboxLabelStyles.css' -import { IgrCheckbox } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -export default class CheckboxLabel extends React.Component { - - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
- Label -
- Label - -
-
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/inputs/checkbox/label/tsconfig.json b/samples/inputs/checkbox/label/tsconfig.json deleted file mode 100644 index e7db8a94f5..0000000000 --- a/samples/inputs/checkbox/label/tsconfig.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "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, - "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/checkbox/label/vite.config.js b/samples/inputs/checkbox/label/vite.config.js deleted file mode 100644 index 1744dbc719..0000000000 --- a/samples/inputs/checkbox/label/vite.config.js +++ /dev/null @@ -1,12 +0,0 @@ -import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; - -export default defineConfig({ - plugins: [react()], - build: { - outDir: 'build' - }, - server: { - open: false - }, -}); \ No newline at end of file diff --git a/samples/inputs/checkbox/overview/src/index.css b/samples/inputs/checkbox/overview/src/index.css index 1f53b8aa05..ae6dd7e38d 100644 --- a/samples/inputs/checkbox/overview/src/index.css +++ b/samples/inputs/checkbox/overview/src/index.css @@ -1,2 +1,99 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.shopping-list { + position: relative; + display: flex; + flex-direction: column; + box-sizing: border-box; + gap: 1rem; + width: 22.5rem; + height: 24.3125rem; + padding: 1rem 0; + border-radius: 0.25rem; + background: var(--ig-surface-100); + box-shadow: 0 0.0625rem 0.25rem rgb(0 0 0 / 16%); +} + +.list { + background: transparent; + border: none; + gap: 0.25rem; +} + +.group-header { + padding: 0 1rem; + background: transparent; + font-family: var(--ig-font-family); + font-size: var(--ig-overline-font-size); + font-weight: var(--ig-overline-font-weight); + line-height: var(--ig-overline-line-height); + letter-spacing: var(--ig-overline-letter-spacing); + text-transform: var(--ig-overline-text-transform); +} + +.shopping-item + .group-header { + margin-top: 0.75rem; +} + +.group-title { + color: var(--ig-secondary-500); +} + +.shopping-item { + padding: 0 1rem; + gap: 0.5rem; + background: transparent; + border-bottom: none; + --border-color: transparent; + --border-width: 0; +} + +.shopping-item:hover, +.shopping-item:focus-within { + background: transparent; +} + +.shopping-item::part(content) { + display: none; +} + +.shopping-item::part(start) { + margin-inline-start: 0.125rem; +} + +.shopping-item::part(end) { + margin-inline-start: auto; +} + +.shopping-item igc-checkbox::part(base) { + gap: 1.125rem; +} + +.shopping-item-checked, +.shopping-item-checked:hover, +.shopping-item-checked:focus-within { + background: var(--ig-gray-100); +} + +.item-menu::part(base) { + color: var(--ig-gray-700); +} + +.add-item { + position: absolute; + right: 1rem; + bottom: 1rem; +} + +.add-item::part(base) { + border-radius: 50%; +} diff --git a/samples/inputs/checkbox/overview/src/index.tsx b/samples/inputs/checkbox/overview/src/index.tsx index 1cfec221ac..13cbc89e43 100644 --- a/samples/inputs/checkbox/overview/src/index.tsx +++ b/samples/inputs/checkbox/overview/src/index.tsx @@ -1,24 +1,96 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrCheckbox } from 'igniteui-react'; +import { IgrButton, IgrCheckbox, IgrIcon, IgrIconButton, IgrList, IgrListHeader, IgrListItem, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class CheckboxOverview extends React.Component { +const icons = [ + { name: 'more_vert', text: '' }, + { name: 'add', text: '' }, +]; - constructor(props: any) { - super(props); - } +interface ShoppingItem { + label: string; + checked: boolean; +} - public render(): JSX.Element { - return ( -
- - Checkbox - -
+interface ShoppingGroup { + title: string; + items: ShoppingItem[]; +} + +const initialGroups: ShoppingGroup[] = [ + { + title: 'Grocery store', + items: [ + { label: 'Bread', checked: false }, + { label: 'Milk 4l', checked: false }, + { label: 'Eggs 1 pack', checked: true }, + ], + }, + { + title: 'Fruit and vegetable shop', + items: [ + { label: 'Strawberries', checked: false }, + { label: 'Lemons', checked: false }, + { label: 'Single Line Item', checked: true }, + ], + }, +]; + +export default function CheckboxOverview(): JSX.Element { + const [groups, setGroups] = useState(initialGroups); + + useEffect(() => { + icons.forEach((icon) => registerIconFromText(icon.name, icon.text, 'material')); + }, []); + + const toggleItem = (groupIndex: number, itemIndex: number, checked: boolean) => { + setGroups((current) => + current.map((group, gi) => + gi !== groupIndex + ? group + : { + ...group, + items: group.items.map((item, ii) => (ii === itemIndex ? { ...item, checked } : item)), + } + ) ); - } + }; + + return ( +
+
+ + {groups.map((group, groupIndex) => [ + + {group.title} + , + ...group.items.map((item, itemIndex) => ( + + toggleItem(groupIndex, itemIndex, e.detail.checked)} + > + {item.label} + + + + + + )), + ])} + + + + +
+
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/checkbox/checking/.devcontainer/devcontainer.json b/samples/inputs/checkbox/states/.devcontainer/devcontainer.json similarity index 100% rename from samples/inputs/checkbox/checking/.devcontainer/devcontainer.json rename to samples/inputs/checkbox/states/.devcontainer/devcontainer.json diff --git a/samples/inputs/checkbox/checking/.eslintrc.js b/samples/inputs/checkbox/states/.eslintrc.js similarity index 100% rename from samples/inputs/checkbox/checking/.eslintrc.js rename to samples/inputs/checkbox/states/.eslintrc.js diff --git a/samples/inputs/checkbox/label/README.md b/samples/inputs/checkbox/states/README.md similarity index 86% rename from samples/inputs/checkbox/label/README.md rename to samples/inputs/checkbox/states/README.md index e285c4fd54..dfaa1a464f 100644 --- a/samples/inputs/checkbox/label/README.md +++ b/samples/inputs/checkbox/states/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Label feature using [Checkbox](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of States feature using [Checkbox](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Label f View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ 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/checkbox/label +cd ./samples/inputs/checkbox/states ``` open above folder in VS Code or type: diff --git a/samples/inputs/checkbox/label/index.html b/samples/inputs/checkbox/states/index.html similarity index 87% rename from samples/inputs/checkbox/label/index.html rename to samples/inputs/checkbox/states/index.html index 4cb798b3ad..63366f3d9c 100644 --- a/samples/inputs/checkbox/label/index.html +++ b/samples/inputs/checkbox/states/index.html @@ -1,7 +1,7 @@ - Checkbox Label + Checkbox States diff --git a/samples/inputs/checkbox/label/package.json b/samples/inputs/checkbox/states/package.json similarity index 87% rename from samples/inputs/checkbox/label/package.json rename to samples/inputs/checkbox/states/package.json index 714e23a2b1..c7a41e6463 100644 --- a/samples/inputs/checkbox/label/package.json +++ b/samples/inputs/checkbox/states/package.json @@ -1,6 +1,6 @@ { - "name": "react-checkbox-label", - "description": "This project provides example of Checkbox Label using Infragistics React components", + "name": "react-checkbox-states", + "description": "This project provides an example of Checkbox states using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/checkbox/checking/sandbox.config.json b/samples/inputs/checkbox/states/sandbox.config.json similarity index 100% rename from samples/inputs/checkbox/checking/sandbox.config.json rename to samples/inputs/checkbox/states/sandbox.config.json diff --git a/samples/inputs/checkbox/states/src/index.css b/samples/inputs/checkbox/states/src/index.css new file mode 100644 index 0000000000..a815232e2b --- /dev/null +++ b/samples/inputs/checkbox/states/src/index.css @@ -0,0 +1,33 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.states { + display: flex; + align-items: flex-end; + gap: 4.5rem; +} + +.state { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; +} + +.state igc-checkbox::part(base) { + cursor: default; +} + +.state-label { + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); +} \ No newline at end of file diff --git a/samples/inputs/checkbox/states/src/index.tsx b/samples/inputs/checkbox/states/src/index.tsx new file mode 100644 index 0000000000..48a93b9e96 --- /dev/null +++ b/samples/inputs/checkbox/states/src/index.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrCheckbox } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default class CheckboxStates extends React.Component { + + // the checkboxes are display-only, so user interaction is blocked + public preventToggle(e: React.SyntheticEvent): void { + e.preventDefault(); + } + + public render(): JSX.Element { + return ( +
+
+
+ Indeterminate + +
+
+ On + +
+
+ Off + +
+
+ Disabled + +
+
+ Invalid + +
+
+ Required + +
+
+
+ ); + } +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/checkbox/checking/tsconfig.json b/samples/inputs/checkbox/states/tsconfig.json similarity index 100% rename from samples/inputs/checkbox/checking/tsconfig.json rename to samples/inputs/checkbox/states/tsconfig.json diff --git a/samples/inputs/checkbox/checking/vite.config.js b/samples/inputs/checkbox/states/vite.config.js similarity index 100% rename from samples/inputs/checkbox/checking/vite.config.js rename to samples/inputs/checkbox/states/vite.config.js diff --git a/samples/inputs/checkbox/styling/src/index.css b/samples/inputs/checkbox/styling/src/index.css index 4ab6ad20e1..1148269f5d 100644 --- a/samples/inputs/checkbox/styling/src/index.css +++ b/samples/inputs/checkbox/styling/src/index.css @@ -1,10 +1,153 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-checkbox::part(indicator) { - --tick-color: var(--ig-secondary-500-contrast); /* check icon color */ +@import url("https://use.typekit.net/bng2zgw.css"); + +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.team-card { + /* The design's own palette and typeface. They are set here instead of + coming from the theme, so the sample keeps its custom look in every theme. */ + --team-surface: #fff; + --team-primary: #0176ff; + --team-gray-100: #f3f6fa; + --team-gray-200: #e5ebf3; + --team-gray-400: #a9b8cc; + --team-gray-500: #7d91ab; + --team-gray-600: #556c86; + --team-gray-700: #344b65; + --team-gray-900: #00142b; + /* aktiv-grotesk is the kit's family name. */ + --ig-font-family: aktiv-grotesk, sans-serif; + + --ig-checkbox-empty-color: var(--team-gray-400); + --ig-checkbox-empty-color-hover: var(--team-gray-400); + --ig-checkbox-fill-color: var(--team-primary); + --ig-checkbox-fill-color-hover: var(--team-primary); + --ig-checkbox-tick-color: #fff; + --ig-checkbox-tick-color-hover: #fff; + + display: flex; + flex-direction: column; + box-sizing: border-box; + width: 26.3125rem; + padding: 0.5rem 0; + border: 1px solid var(--team-gray-200); + border-radius: 0.75rem; + background: var(--team-surface); + font-family: var(--ig-font-family); +} + +.team-title { + display: flex; + align-items: center; + height: 2rem; + margin: 0; + padding: 0 1rem; + color: var(--team-gray-500); + font-size: 10px; + font-weight: 400; + line-height: 16px; + letter-spacing: 1.5px; + text-transform: uppercase; +} + +.select-all { + --ig-checkbox-empty-color: var(--team-gray-500); + --ig-checkbox-empty-color-hover: var(--team-gray-500); +} + +.select-all::part(base) { + box-sizing: border-box; + width: 100%; + justify-content: space-between; + padding: 0.5rem 1rem; +} + +.select-all::part(label) { + color: var(--team-gray-600); + font-size: 1rem; + font-weight: 600; + line-height: 1.5rem; + letter-spacing: 0.15px; +} + +/* A 24px slot around the 20px box, as in the design, without the padding the + theme adds around the box for its ripple. */ +.select-all::part(control), +.member-check::part(control) { + margin: 0.125rem; + padding: 0; +} + +.members { + background: transparent; + border: none; + overflow: hidden; +} + +.member { + gap: 1rem; + padding: 0.5rem 1rem; + background: transparent; + border-bottom: none; + --border-color: transparent; + --border-width: 0; +} + +.member:hover, +.member:focus-within { + background: transparent; +} + +.member-selected, +.member-selected:hover, +.member-selected:focus-within { + background: var(--team-gray-100); +} + +.member igc-avatar { + --ig-size: var(--ig-size-small); +} + +.member-name { + display: block; + color: var(--team-gray-900); + font-size: 0.875rem; + font-weight: 600; + line-height: 1.125rem; +} + +.member-email { + display: block; + color: var(--team-gray-700); + font-size: 0.75rem; + line-height: 1rem; + letter-spacing: 0.4px; +} + +.continue-button { + align-self: flex-end; + margin: 1rem 1rem 0; +} + +.continue-button::part(base) { + min-width: auto; + width: 5.25rem; + height: 1.875rem; + padding: 0 0.75rem; + border-color: var(--team-primary); + background: var(--team-primary); + color: #fff; + font-size: 0.875rem; + font-weight: 500; + line-height: 1.375rem; + letter-spacing: 0.1px; + text-transform: none; } - -igc-checkbox::part(control checked)::after { - --fill-color: var(--ig-secondary-500); /* checkbox background color */ -} \ No newline at end of file diff --git a/samples/inputs/checkbox/styling/src/index.tsx b/samples/inputs/checkbox/styling/src/index.tsx index 255b14044c..4695b0de54 100644 --- a/samples/inputs/checkbox/styling/src/index.tsx +++ b/samples/inputs/checkbox/styling/src/index.tsx @@ -1,24 +1,76 @@ -import React from 'react'; +import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrCheckbox } from 'igniteui-react'; +import { IgrAvatar, IgrButton, IgrCheckbox, IgrList, IgrListItem } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class CheckboxStyling extends React.Component { +interface TeamMember { + name: string; + email: string; + avatar: string; + selected: boolean; +} + +const initialMembers: TeamMember[] = [ + { name: 'Emily Potter', email: 'emily@team.com', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png', selected: false }, + { name: 'Alex Lima', email: 'alex@team.com', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-05.png', selected: true }, + { name: 'Mateo García', email: 'mateo@team.com', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png', selected: false }, + { name: 'Kate Roberts', email: 'kate@team.com', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png', selected: false }, +]; + +export default function CheckboxStyling(): JSX.Element { + const [members, setMembers] = useState(initialMembers); + + const allSelected = members.every((member) => member.selected); + const someSelected = members.some((member) => member.selected); - constructor(props: any) { - super(props); - } + const toggleAll = (checked: boolean) => { + setMembers((current) => current.map((member) => ({ ...member, selected: checked }))); + }; - public render(): JSX.Element { - return ( -
- - Checkbox + const toggleMember = (index: number, checked: boolean) => { + setMembers((current) => current.map((member, i) => (i === index ? { ...member, selected: checked } : member))); + }; + + return ( +
+
+

Team members

+ + toggleAll(e.detail.checked)} + > + Select all + + + {members.map((member, index) => ( + + + {member.name} + {member.email} + toggleMember(index, e.detail.checked)} + /> + + ))} + + + Continue
- ); - } +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/checkbox/disabled/.devcontainer/devcontainer.json b/samples/inputs/checkbox/tailwind-styling/.devcontainer/devcontainer.json similarity index 97% rename from samples/inputs/checkbox/disabled/.devcontainer/devcontainer.json rename to samples/inputs/checkbox/tailwind-styling/.devcontainer/devcontainer.json index e0b8e9c925..ff434ecd44 100644 --- a/samples/inputs/checkbox/disabled/.devcontainer/devcontainer.json +++ b/samples/inputs/checkbox/tailwind-styling/.devcontainer/devcontainer.json @@ -1,4 +1,4 @@ { "name": "Node.js", "image": "mcr.microsoft.com/devcontainers/javascript-node:22" -} \ No newline at end of file +} diff --git a/samples/inputs/checkbox/disabled/.eslintrc.js b/samples/inputs/checkbox/tailwind-styling/.eslintrc.js similarity index 99% rename from samples/inputs/checkbox/disabled/.eslintrc.js rename to samples/inputs/checkbox/tailwind-styling/.eslintrc.js index b45160a9ee..ea01229020 100644 --- a/samples/inputs/checkbox/disabled/.eslintrc.js +++ b/samples/inputs/checkbox/tailwind-styling/.eslintrc.js @@ -72,4 +72,4 @@ module.exports = { } } ] - }; \ No newline at end of file + }; diff --git a/samples/inputs/checkbox/checking/README.md b/samples/inputs/checkbox/tailwind-styling/README.md similarity index 85% rename from samples/inputs/checkbox/checking/README.md rename to samples/inputs/checkbox/tailwind-styling/README.md index bf96b4bbcc..f25df553f4 100644 --- a/samples/inputs/checkbox/checking/README.md +++ b/samples/inputs/checkbox/tailwind-styling/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Checking feature using [Checkbox](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Tailwind Styling feature using [Checkbox](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Checkin View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ 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/checkbox/checking +cd ./samples/inputs/checkbox/tailwind-styling ``` open above folder in VS Code or type: diff --git a/samples/inputs/checkbox/disabled/index.html b/samples/inputs/checkbox/tailwind-styling/index.html similarity index 82% rename from samples/inputs/checkbox/disabled/index.html rename to samples/inputs/checkbox/tailwind-styling/index.html index d39728f106..db2c2e9fe3 100644 --- a/samples/inputs/checkbox/disabled/index.html +++ b/samples/inputs/checkbox/tailwind-styling/index.html @@ -1,11 +1,11 @@ - Checkbox Disabled + CheckboxTailwindStyling
- \ No newline at end of file + diff --git a/samples/inputs/checkbox/indeterminate/package.json b/samples/inputs/checkbox/tailwind-styling/package.json similarity index 81% rename from samples/inputs/checkbox/indeterminate/package.json rename to samples/inputs/checkbox/tailwind-styling/package.json index 5a1e417ce1..72823027c2 100644 --- a/samples/inputs/checkbox/indeterminate/package.json +++ b/samples/inputs/checkbox/tailwind-styling/package.json @@ -1,6 +1,6 @@ { - "name": "react-checkbox-indeterminate", - "description": "This project provides example of Checkbox Indeterminate using Infragistics React components", + "name": "react-checkbox-tailwind-styling", + "description": "This project provides example of Checkbox Tailwind Styling using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", @@ -21,12 +21,14 @@ "tslib": "^2.4.0" }, "devDependencies": { + "@tailwindcss/vite": "^4.1.14", "@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", + "tailwindcss": "^4.1.14", "typescript": "^4.8.4", "vite": "^7.1.9", "vitest": "^3.2.4", diff --git a/samples/inputs/checkbox/tailwind-styling/sandbox.config.json b/samples/inputs/checkbox/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..20199570e4 --- /dev/null +++ b/samples/inputs/checkbox/tailwind-styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/checkbox/tailwind-styling/src/index.css b/samples/inputs/checkbox/tailwind-styling/src/index.css new file mode 100644 index 0000000000..1d52d46478 --- /dev/null +++ b/samples/inputs/checkbox/tailwind-styling/src/index.css @@ -0,0 +1,39 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +@layer theme, base, components, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); +@import url("https://use.typekit.net/bng2zgw.css"); +@source "./index.tsx"; + +@theme { + /* The design's own palette. It lives here instead of coming from the theme + palette, so the sample keeps its colors in every theme. */ + --color-filter-primary: #0176ff; + --color-filter-title: #004699; + --color-filter-divider: #e5ebf3; + --color-filter-ink: #1a314a; + --color-filter-empty: #a9b8cc; +} + +/* The design's 44px header: an 8px inset around the title's 28px box. */ +igc-expansion-panel::part(header) { + padding: 0.5rem 1rem; +} + +/* A 40px row in every theme. The padding sits on the base rather than on the + control, so the padding a theme adds around the box for its ripple can no + longer stretch the row. */ +.filter-option::part(base) { + gap: 0.75rem; + padding: 0.5rem 0.625rem; +} + +.filter-option::part(control) { + padding: 0; +} + +.filter-option::part(indicator) { + --indicator-size: 1rem; +} diff --git a/samples/inputs/checkbox/tailwind-styling/src/index.tsx b/samples/inputs/checkbox/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..8bb8def5cf --- /dev/null +++ b/samples/inputs/checkbox/tailwind-styling/src/index.tsx @@ -0,0 +1,103 @@ +import React, { useState } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrAccordion, IgrCheckbox, IgrExpansionPanel } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +interface FilterSection { + title: string; + open: boolean; + options: { label: string; checked: boolean }[]; +} + +const initialSections: FilterSection[] = [ + { + title: 'Brand', + open: true, + options: [ + { label: 'Nike', checked: true }, + { label: 'Roxy', checked: false }, + { label: 'Guess', checked: false }, + ], + }, + { + title: 'Color', + open: true, + options: [ + { label: 'Black', checked: false }, + { label: 'White', checked: true }, + { label: 'Gray', checked: false }, + ], + }, + { + title: 'Size', + open: true, + options: [ + { label: 'Small', checked: false }, + { label: 'Medium', checked: true }, + { label: 'Large', checked: false }, + { label: 'Extra large', checked: false }, + ], + }, +]; + +export default function CheckboxTailwindStyling(): JSX.Element { + const [sections, setSections] = useState(initialSections); + const toggleOption = (sectionIndex: number, optionIndex: number, checked: boolean) => { + setSections((current) => + current.map((section, si) => + si !== sectionIndex + ? section + : { + ...section, + options: section.options.map((option, oi) => + oi === optionIndex ? { ...option, checked } : option + ), + } + ) + ); + }; + + const toggleSection = (sectionIndex: number, open: boolean) => { + setSections((current) => + current.map((section, si) => (si === sectionIndex ? { ...section, open } : section)) + ); + }; + + return ( +
+
+ + {sections.map((section, sectionIndex) => ( + toggleSection(sectionIndex, true)} + onClosed={() => toggleSection(sectionIndex, false)} + > + {section.title} +
+ {section.options.map((option, optionIndex) => ( + toggleOption(sectionIndex, optionIndex, e.detail.checked)} + > + {option.label} + + ))} +
+ + ))} + +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/checkbox/disabled/tsconfig.json b/samples/inputs/checkbox/tailwind-styling/tsconfig.json similarity index 100% rename from samples/inputs/checkbox/disabled/tsconfig.json rename to samples/inputs/checkbox/tailwind-styling/tsconfig.json diff --git a/samples/inputs/checkbox/disabled/vite.config.js b/samples/inputs/checkbox/tailwind-styling/vite.config.js similarity index 53% rename from samples/inputs/checkbox/disabled/vite.config.js rename to samples/inputs/checkbox/tailwind-styling/vite.config.js index 1744dbc719..4043727956 100644 --- a/samples/inputs/checkbox/disabled/vite.config.js +++ b/samples/inputs/checkbox/tailwind-styling/vite.config.js @@ -1,12 +1,13 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ - plugins: [react()], + plugins: [react(), tailwindcss()], build: { - outDir: 'build' + outDir: 'build', }, server: { - open: false + open: false, }, -}); \ No newline at end of file +});