diff --git a/samples/inputs/combo/disabled/README.md b/samples/inputs/combo/disabled/README.md new file mode 100644 index 0000000000..93e646a4d0 --- /dev/null +++ b/samples/inputs/combo/disabled/README.md @@ -0,0 +1,50 @@ +This folder contains implementation of React application with example of Disabled feature using [Combo](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + 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 +cd ./igniteui-react-examples +git checkout master +cd ./samples/inputs/combo/disabled +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install +npm 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/combo/disabled/index.html b/samples/inputs/combo/disabled/index.html new file mode 100644 index 0000000000..82e4bab5be --- /dev/null +++ b/samples/inputs/combo/disabled/index.html @@ -0,0 +1,11 @@ + + + + Combo Disabled + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/combo/disabled/package.json b/samples/inputs/combo/disabled/package.json new file mode 100644 index 0000000000..392ab982db --- /dev/null +++ b/samples/inputs/combo/disabled/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-combo-disabled", + "description": "This project provides an example of Combo 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": "^2.2.1", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "~7.4.1", + "react": "^19.3.0", + "react-dom": "^19.3.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^30.0.0", + "@types/node": "^24.7.1", + "@types/react": "^19.3.0", + "@types/react-dom": "^19.3.0", + "@vitejs/plugin-react": "^6.1.1", + "@vitest/browser": "^5.0.2", + "typescript": "^5.9.3", + "vite": "^8.3.1", + "vitest": "^5.0.2", + "vitest-canvas-mock": "^1.2.0", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/combo/disabled/src/index.css b/samples/inputs/combo/disabled/src/index.css new file mode 100644 index 0000000000..049758e02b --- /dev/null +++ b/samples/inputs/combo/disabled/src/index.css @@ -0,0 +1,43 @@ +/* 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: grid; + grid-template-columns: max-content repeat(2, minmax(0, 17.4375rem)); + width: 100%; + justify-content: center; + align-items: center; + column-gap: 1.75rem; + row-gap: 1.5rem; +} + +.states igc-combo { + width: 100%; +} + +.group-start { + margin-top: 1.5rem; +} + +.state-label { + font: 400 13px / 20px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.3px; + color: var(--ig-gray-600); +} + +.state-column { + justify-self: center; +} + +/* the list shows a group header and three options */ +.states igc-combo { + --item-count: 4; +} diff --git a/samples/inputs/combo/disabled/src/index.tsx b/samples/inputs/combo/disabled/src/index.tsx new file mode 100644 index 0000000000..61eda99baf --- /dev/null +++ b/samples/inputs/combo/disabled/src/index.tsx @@ -0,0 +1,61 @@ +import { Fragment } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrCombo } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +interface Country { + id: string; + name: string; + region: string; +} + +const countries: Country[] = [ + { id: 'BY', name: 'Belarus', region: 'Europe' }, + { id: 'BE', name: 'Belgium', region: 'Europe' }, + { id: 'BG', name: 'Bulgaria', region: 'Europe' }, +]; + +const rows = [ + { label: 'Idle', outlined: true, value: [] as string[] }, + { label: 'Filled', outlined: true, value: ['BY', 'BE'] }, + { label: 'Idle', outlined: false, value: [] as string[] }, + { label: 'Filled', outlined: false, value: ['BY', 'BE'] }, +]; + +export default function ComboDisabled() { + const combo = (outlined: boolean, value: string[], disabled: boolean) => ( + + ); + + return ( +
+
+ + Enabled + Disabled + {rows.map((row, index) => ( + + {row.label} +
{combo(row.outlined, row.value, false)}
+
{combo(row.outlined, row.value, true)}
+ + ))} +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/inputs/combo/disabled/tsconfig.json b/samples/inputs/combo/disabled/tsconfig.json new file mode 100644 index 0000000000..e27a22be9b --- /dev/null +++ b/samples/inputs/combo/disabled/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "es2020", + "lib": [ + "es2020", + "dom", + "dom.iterable" + ], + "module": "esnext", + "moduleResolution": "bundler", + "jsx": "react-jsx", + "types": [ + "vite/client" + ], + "strict": true, + "resolveJsonModule": true, + "isolatedModules": true, + "skipLibCheck": true, + "noEmit": true + }, + "include": [ + "src" + ] +} diff --git a/samples/inputs/combo/disabled/vite.config.js b/samples/inputs/combo/disabled/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/combo/disabled/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/combo/dropdown-size/README.md b/samples/inputs/combo/dropdown-size/README.md new file mode 100644 index 0000000000..0dee23974b --- /dev/null +++ b/samples/inputs/combo/dropdown-size/README.md @@ -0,0 +1,50 @@ +This folder contains implementation of React application with example of Dropdown Size feature using [Combo](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + 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 +cd ./igniteui-react-examples +git checkout master +cd ./samples/inputs/combo/dropdown-size +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install +npm 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/combo/dropdown-size/index.html b/samples/inputs/combo/dropdown-size/index.html new file mode 100644 index 0000000000..4d7340d6f0 --- /dev/null +++ b/samples/inputs/combo/dropdown-size/index.html @@ -0,0 +1,11 @@ + + + + Combo Dropdown Size + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/combo/dropdown-size/package.json b/samples/inputs/combo/dropdown-size/package.json new file mode 100644 index 0000000000..3357a9103f --- /dev/null +++ b/samples/inputs/combo/dropdown-size/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-combo-dropdown-size", + "description": "This project provides an example of Combo dropdown 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": "^2.2.1", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "~7.4.1", + "react": "^19.3.0", + "react-dom": "^19.3.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^30.0.0", + "@types/node": "^24.7.1", + "@types/react": "^19.3.0", + "@types/react-dom": "^19.3.0", + "@vitejs/plugin-react": "^6.1.1", + "@vitest/browser": "^5.0.2", + "typescript": "^5.9.3", + "vite": "^8.3.1", + "vitest": "^5.0.2", + "vitest-canvas-mock": "^1.2.0", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/combo/dropdown-size/src/index.css b/samples/inputs/combo/dropdown-size/src/index.css new file mode 100644 index 0000000000..61f9913860 --- /dev/null +++ b/samples/inputs/combo/dropdown-size/src/index.css @@ -0,0 +1,55 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: flex-start; + justify-content: center; + height: 100%; + padding: 2rem 1rem; +} + +.sizes { + display: grid; + grid-template-columns: repeat(3, 11.25rem); + column-gap: 1rem; +} + +.size { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +/* only the dropdown of the combo is shown, so the input field is hidden */ +.dropdown { + width: 100%; +} + +.dropdown::part(input) { + display: none; +} + +/* the list shows a group header and three options */ +.dropdown { + --item-count: 4; +} + +.small { + --ig-size: var(--ig-size-small); +} + +.medium { + --ig-size: var(--ig-size-medium); +} + +.large { + --ig-size: var(--ig-size-large); +} + +.state-label { + font: 400 13px / 20px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.3px; + color: var(--ig-gray-600); +} diff --git a/samples/inputs/combo/dropdown-size/src/index.tsx b/samples/inputs/combo/dropdown-size/src/index.tsx new file mode 100644 index 0000000000..6bf94f37db --- /dev/null +++ b/samples/inputs/combo/dropdown-size/src/index.tsx @@ -0,0 +1,49 @@ +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrCombo } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +interface Option { + id: number; + name: string; + group: string; +} + +const options: Option[] = [1, 2, 3].map((id) => ({ id, name: 'Item', group: 'Header' })); + +const sizes = [ + { label: 'Small', className: 'small' }, + { label: 'Medium', className: 'medium' }, + { label: 'Large', className: 'large' }, +]; + +export default function ComboDropdownSize() { + // the input fields are hidden, so the dropdowns stay open and each one works on its own + const keepOpen = (e: CustomEvent) => e.preventDefault(); + + return ( +
+
+ {sizes.map((size) => ( +
+ {size.label} + +
+ ))} +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/inputs/combo/dropdown-size/tsconfig.json b/samples/inputs/combo/dropdown-size/tsconfig.json new file mode 100644 index 0000000000..e27a22be9b --- /dev/null +++ b/samples/inputs/combo/dropdown-size/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "es2020", + "lib": [ + "es2020", + "dom", + "dom.iterable" + ], + "module": "esnext", + "moduleResolution": "bundler", + "jsx": "react-jsx", + "types": [ + "vite/client" + ], + "strict": true, + "resolveJsonModule": true, + "isolatedModules": true, + "skipLibCheck": true, + "noEmit": true + }, + "include": [ + "src" + ] +} diff --git a/samples/inputs/combo/dropdown-size/vite.config.js b/samples/inputs/combo/dropdown-size/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/combo/dropdown-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 diff --git a/samples/inputs/combo/overview/package.json b/samples/inputs/combo/overview/package.json index c38f57c133..8a4c589946 100644 --- a/samples/inputs/combo/overview/package.json +++ b/samples/inputs/combo/overview/package.json @@ -1,6 +1,6 @@ { "name": "react-combo-overview", - "description": "This project provides example of Combo Overview using Infragistics React components", + "description": "This project provides an example of Combo overview using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/combo/overview/src/index.css b/samples/inputs/combo/overview/src/index.css index 1f53b8aa05..e150f16806 100644 --- a/samples/inputs/combo/overview/src/index.css +++ b/samples/inputs/combo/overview/src/index.css @@ -1,2 +1,14 @@ /* 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: flex-start; + justify-content: center; + height: 100%; + padding: 2rem 1rem; +} + +.locations { + width: 22.5rem; +} diff --git a/samples/inputs/combo/overview/src/index.tsx b/samples/inputs/combo/overview/src/index.tsx index ecbfa32dfa..b63ed19f9d 100644 --- a/samples/inputs/combo/overview/src/index.tsx +++ b/samples/inputs/combo/overview/src/index.tsx @@ -1,32 +1,50 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import { IgrCombo } from "igniteui-react"; -import "igniteui-webcomponents/themes/light/bootstrap.css"; +import { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrCombo, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const placeIcon = ''; interface City { - id: string; - name: string; + id: string; + name: string; + country: string; } const cities: City[] = [ - { name: "London", id: "UK01" }, - { name: "Sofia", id: "BG01" }, - { name: "New York", id: "NY01" }, + { id: 'BG01', name: 'Sofia', country: 'Country of Bulgaria' }, + { id: 'BG02', name: 'Plovdiv', country: 'Country of Bulgaria' }, + { id: 'BG03', name: 'Varna', country: 'Country of Bulgaria' }, + { id: 'BG04', name: 'Burgas', country: 'Country of Bulgaria' }, + { id: 'BG05', name: 'Pleven', country: 'Country of Bulgaria' }, ]; export default function ComboOverview() { - return ( -
- -
- ); + useEffect(() => { + registerIconFromText('place', placeIcon, 'material'); + }, []); + + return ( +
+ + + +
+ ); } -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/inputs/combo/overview/tsconfig.json b/samples/inputs/combo/overview/tsconfig.json index e7db8a94f5..e27a22be9b 100644 --- a/samples/inputs/combo/overview/tsconfig.json +++ b/samples/inputs/combo/overview/tsconfig.json @@ -1,43 +1,23 @@ { "compilerOptions": { - "resolveJsonModule": true, - "esModuleInterop": true, - "baseUrl": ".", - "outDir": "build/dist", - "module": "esnext", - "target": "es5", + "target": "es2020", "lib": [ - "es6", - "dom" + "es2020", + "dom", + "dom.iterable" ], - "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, + "module": "esnext", + "moduleResolution": "bundler", + "jsx": "react-jsx", + "types": [ + "vite/client" + ], + "strict": true, + "resolveJsonModule": true, "isolatedModules": true, + "skipLibCheck": 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/combo/search-input/README.md b/samples/inputs/combo/search-input/README.md new file mode 100644 index 0000000000..9300578fa6 --- /dev/null +++ b/samples/inputs/combo/search-input/README.md @@ -0,0 +1,50 @@ +This folder contains implementation of React application with example of Search Input feature using [Combo](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + 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 +cd ./igniteui-react-examples +git checkout master +cd ./samples/inputs/combo/search-input +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install +npm 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/combo/search-input/index.html b/samples/inputs/combo/search-input/index.html new file mode 100644 index 0000000000..88d0af79a9 --- /dev/null +++ b/samples/inputs/combo/search-input/index.html @@ -0,0 +1,11 @@ + + + + Combo Search Input + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/combo/search-input/package.json b/samples/inputs/combo/search-input/package.json new file mode 100644 index 0000000000..9e330a5535 --- /dev/null +++ b/samples/inputs/combo/search-input/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-combo-search-input", + "description": "This project provides an example of Combo search 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": "^2.2.1", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "~7.4.1", + "react": "^19.3.0", + "react-dom": "^19.3.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^30.0.0", + "@types/node": "^24.7.1", + "@types/react": "^19.3.0", + "@types/react-dom": "^19.3.0", + "@vitejs/plugin-react": "^6.1.1", + "@vitest/browser": "^5.0.2", + "typescript": "^5.9.3", + "vite": "^8.3.1", + "vitest": "^5.0.2", + "vitest-canvas-mock": "^1.2.0", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/combo/search-input/src/index.css b/samples/inputs/combo/search-input/src/index.css new file mode 100644 index 0000000000..1b85a094fa --- /dev/null +++ b/samples/inputs/combo/search-input/src/index.css @@ -0,0 +1,66 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: flex-start; + justify-content: center; + height: 100%; + padding: 2rem 1rem; +} + +.states { + display: grid; + grid-template-columns: repeat(3, 11.25rem); + grid-template-rows: repeat(2, 5.5rem); + column-gap: 1rem; + row-gap: 1rem; +} + +.state { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +/* only the search input of the combo dropdown is shown */ +.search { + width: 100%; + pointer-events: none; +} + +.search::part(input), +.search::part(empty) { + display: none; +} + +.search.hover::part(search-input) { + --idle-bottom-line-color: var(--hover-bottom-line-color); +} + +.search.disabled::part(search-input) { + --idle-bottom-line-color: var(--disabled-bottom-line-color); +} + +.search.disabled::part(search-input)::placeholder { + color: var(--disabled-text-color); +} + +.search.filled::part(search-input)::placeholder { + color: var(--filled-text-color); +} + +.search.focused::part(search-input) { + --idle-bottom-line-color: var(--focused-bottom-line-color); + --hover-bottom-line-color: var(--focused-bottom-line-color); + + /* the focused line is two pixels thick */ + box-shadow: inset 0 -2px 0 var(--focused-bottom-line-color); +} + +.state-label { + font: 400 13px / 20px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.3px; + color: var(--ig-gray-600); +} diff --git a/samples/inputs/combo/search-input/src/index.tsx b/samples/inputs/combo/search-input/src/index.tsx new file mode 100644 index 0000000000..a1b8aa5b07 --- /dev/null +++ b/samples/inputs/combo/search-input/src/index.tsx @@ -0,0 +1,50 @@ +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrCombo } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +interface SearchState { + label: string; + className?: string; + text?: string; +} + +// the search input states come from the pointer and the keyboard, so the `hover`, +// `disabled`, `filled` and `focused` classes show them on the display-only combos +const states: SearchState[] = [ + { label: 'Idle' }, + { label: 'Idle & Hover', className: 'hover' }, + { label: 'Disabled', className: 'disabled' }, + { label: 'Filled', className: 'filled', text: 'Input text' }, + { label: 'Filled & Hover', className: 'filled hover', text: 'Input text' }, + { label: 'Focused', className: 'filled focused', text: 'Input text' }, +]; + +export default function ComboSearchInput() { + // the display-only dropdowns stay open when the user clicks outside them + const keepOpen = (e: CustomEvent) => e.preventDefault(); + + return ( +
+ {/* the search inputs are display-only, so inert blocks keyboard interaction */} +
+ {states.map((state) => ( +
+ {state.label} + +
+ ))} +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/inputs/combo/search-input/tsconfig.json b/samples/inputs/combo/search-input/tsconfig.json new file mode 100644 index 0000000000..e27a22be9b --- /dev/null +++ b/samples/inputs/combo/search-input/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "es2020", + "lib": [ + "es2020", + "dom", + "dom.iterable" + ], + "module": "esnext", + "moduleResolution": "bundler", + "jsx": "react-jsx", + "types": [ + "vite/client" + ], + "strict": true, + "resolveJsonModule": true, + "isolatedModules": true, + "skipLibCheck": true, + "noEmit": true + }, + "include": [ + "src" + ] +} diff --git a/samples/inputs/combo/search-input/vite.config.js b/samples/inputs/combo/search-input/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/combo/search-input/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/combo/size/README.md b/samples/inputs/combo/size/README.md new file mode 100644 index 0000000000..faab48db05 --- /dev/null +++ b/samples/inputs/combo/size/README.md @@ -0,0 +1,50 @@ +This folder contains implementation of React application with example of Size feature using [Combo](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + 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 +cd ./igniteui-react-examples +git checkout master +cd ./samples/inputs/combo/size +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install +npm 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/combo/size/index.html b/samples/inputs/combo/size/index.html new file mode 100644 index 0000000000..fcd4a1b712 --- /dev/null +++ b/samples/inputs/combo/size/index.html @@ -0,0 +1,11 @@ + + + + Combo Size + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/combo/size/package.json b/samples/inputs/combo/size/package.json new file mode 100644 index 0000000000..54b58ec4b1 --- /dev/null +++ b/samples/inputs/combo/size/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-combo-size", + "description": "This project provides an example of Combo 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": "^2.2.1", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "~7.4.1", + "react": "^19.3.0", + "react-dom": "^19.3.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^30.0.0", + "@types/node": "^24.7.1", + "@types/react": "^19.3.0", + "@types/react-dom": "^19.3.0", + "@vitejs/plugin-react": "^6.1.1", + "@vitest/browser": "^5.0.2", + "typescript": "^5.9.3", + "vite": "^8.3.1", + "vitest": "^5.0.2", + "vitest-canvas-mock": "^1.2.0", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/combo/size/src/index.css b/samples/inputs/combo/size/src/index.css new file mode 100644 index 0000000000..26c8f8a6cb --- /dev/null +++ b/samples/inputs/combo/size/src/index.css @@ -0,0 +1,52 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: flex-start; + justify-content: center; + height: 100%; + padding: 2rem 1rem; +} + +.sizes { + display: grid; + grid-template-columns: max-content repeat(3, minmax(0, 17.4375rem)); + width: 100%; + justify-content: center; + grid-template-rows: auto repeat(2, 17rem); + align-items: start; + column-gap: 1.75rem; + row-gap: 1rem; +} + +.type-label { + padding-top: 0.75rem; +} + +.small { + --ig-size: var(--ig-size-small); +} + +.medium { + --ig-size: var(--ig-size-medium); +} + +.large { + --ig-size: var(--ig-size-large); +} + +.state-label { + font: 400 13px / 20px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.3px; + color: var(--ig-gray-600); +} + +.state-column { + justify-self: center; +} + +/* the list shows a group header and three options */ +.sizes igc-combo { + --item-count: 4; +} diff --git a/samples/inputs/combo/size/src/index.tsx b/samples/inputs/combo/size/src/index.tsx new file mode 100644 index 0000000000..24fdce541c --- /dev/null +++ b/samples/inputs/combo/size/src/index.tsx @@ -0,0 +1,72 @@ +import { Fragment } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrCombo } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +interface Country { + id: string; + name: string; + region: string; +} + +const countries: Country[] = [ + { id: 'BY', name: 'Belarus', region: 'Europe' }, + { id: 'BE', name: 'Belgium', region: 'Europe' }, + { id: 'BG', name: 'Bulgaria', region: 'Europe' }, +]; + +const sizes = [ + { label: 'Small', className: 'small' }, + { label: 'Medium', className: 'medium' }, + { label: 'Large', className: 'large' }, +]; + +const types = [ + { label: 'Border Type', outlined: true }, + { label: 'Box Type', outlined: false }, +]; + +export default function ComboSize() { + // a click outside a combo moves the focus out of it, and then its dropdown stays open, so each combo opens and closes on its own + const keepOpenOnOutsideClick = (e: CustomEvent) => { + if (!(e.target as HTMLElement).matches(':focus-within')) { + e.preventDefault(); + } + }; + + return ( +
+
+ + {sizes.map((size) => ( + {size.label} + ))} + {types.map((type) => ( + + {type.label} + {sizes.map((size) => ( + + ))} + + ))} +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/inputs/combo/size/tsconfig.json b/samples/inputs/combo/size/tsconfig.json new file mode 100644 index 0000000000..e27a22be9b --- /dev/null +++ b/samples/inputs/combo/size/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "es2020", + "lib": [ + "es2020", + "dom", + "dom.iterable" + ], + "module": "esnext", + "moduleResolution": "bundler", + "jsx": "react-jsx", + "types": [ + "vite/client" + ], + "strict": true, + "resolveJsonModule": true, + "isolatedModules": true, + "skipLibCheck": true, + "noEmit": true + }, + "include": [ + "src" + ] +} diff --git a/samples/inputs/combo/size/vite.config.js b/samples/inputs/combo/size/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/combo/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 diff --git a/samples/inputs/combo/states/README.md b/samples/inputs/combo/states/README.md new file mode 100644 index 0000000000..67dcbfe02c --- /dev/null +++ b/samples/inputs/combo/states/README.md @@ -0,0 +1,50 @@ +This folder contains implementation of React application with example of States feature using [Combo](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + 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 +cd ./igniteui-react-examples +git checkout master +cd ./samples/inputs/combo/states +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install +npm 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/combo/states/index.html b/samples/inputs/combo/states/index.html new file mode 100644 index 0000000000..31e5394343 --- /dev/null +++ b/samples/inputs/combo/states/index.html @@ -0,0 +1,11 @@ + + + + Combo States + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/combo/states/package.json b/samples/inputs/combo/states/package.json new file mode 100644 index 0000000000..0704bdfac1 --- /dev/null +++ b/samples/inputs/combo/states/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-combo-states", + "description": "This project provides an example of Combo 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": "^2.2.1", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "~7.4.1", + "react": "^19.3.0", + "react-dom": "^19.3.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^30.0.0", + "@types/node": "^24.7.1", + "@types/react": "^19.3.0", + "@types/react-dom": "^19.3.0", + "@vitejs/plugin-react": "^6.1.1", + "@vitest/browser": "^5.0.2", + "typescript": "^5.9.3", + "vite": "^8.3.1", + "vitest": "^5.0.2", + "vitest-canvas-mock": "^1.2.0", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/combo/states/src/index.css b/samples/inputs/combo/states/src/index.css new file mode 100644 index 0000000000..3d7276dad3 --- /dev/null +++ b/samples/inputs/combo/states/src/index.css @@ -0,0 +1,65 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: flex-start; + justify-content: center; + height: 100%; + padding: 2rem 1rem; +} + +.states { + display: grid; + grid-template-columns: repeat(3, minmax(0, 17.4375rem)); + width: 100%; + justify-content: center; + column-gap: 1.75rem; + row-gap: 1.25rem; +} + +.state { + display: flex; + flex-direction: column; + min-width: 0; + align-items: center; + gap: 0.5rem; +} + +.state-combo { + width: 100%; + pointer-events: none; +} + +.state-combo.hover::part(input) { + --border-color: var(--hover-border-color); + --idle-bottom-line-color: var(--hover-bottom-line-color); +} + +.state-combo.focused::part(input) { + --border-color: var(--focused-border-color); + --idle-bottom-line-color: var(--focused-bottom-line-color); + + box-shadow: inset 0 0 0 0.125rem var(--focused-border-color); +} + +.state-combo.focused::part(toggle-icon) { + color: var(--toggle-button-foreground-focus); + background: var(--toggle-button-background-focus--border); +} + +.state-combo.focused::part(clear-icon) { + color: var(--clear-button-foreground-focus); + background: var(--clear-button-background-focus); +} + +.state-label { + font: 400 13px / 20px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.3px; + color: var(--ig-gray-600); +} + +/* the list shows a group header and three options */ +.state-combo { + --item-count: 4; +} diff --git a/samples/inputs/combo/states/src/index.tsx b/samples/inputs/combo/states/src/index.tsx new file mode 100644 index 0000000000..b259ce9ace --- /dev/null +++ b/samples/inputs/combo/states/src/index.tsx @@ -0,0 +1,69 @@ +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrCombo } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +interface Country { + id: string; + name: string; + region: string; +} + +interface ComboState { + label: string; + className?: string; + value: string[]; + open?: boolean; +} + +const countries: Country[] = [ + { id: 'BY', name: 'Belarus', region: 'Europe' }, + { id: 'BE', name: 'Belgium', region: 'Europe' }, + { id: 'BG', name: 'Bulgaria', region: 'Europe' }, +]; + +// hover and focus come from the pointer and the keyboard, so the `hover` and `focused` +// classes show them on the display-only combos +const states: ComboState[] = [ + { label: 'Idle', value: [] }, + { label: 'Idle & Hover', className: 'hover', value: [] }, + { label: 'Filled', value: ['BY', 'BE'] }, + { label: 'Filled & Hover', className: 'hover', value: ['BY', 'BE'] }, + { label: 'Focused', className: 'focused', value: ['BY', 'BE'] }, + { label: 'Focused (Dropdown On)', className: 'focused', value: ['BY', 'BE'], open: true }, +]; + +export default function ComboStates() { + // the display-only dropdowns stay open when the user clicks outside them + const keepOpen = (e: CustomEvent) => e.preventDefault(); + + return ( +
+ {/* the combos are display-only, so inert blocks keyboard interaction */} +
+ {states.map((state) => ( +
+ {state.label} + +
+ ))} +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/inputs/combo/states/tsconfig.json b/samples/inputs/combo/states/tsconfig.json new file mode 100644 index 0000000000..e27a22be9b --- /dev/null +++ b/samples/inputs/combo/states/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "es2020", + "lib": [ + "es2020", + "dom", + "dom.iterable" + ], + "module": "esnext", + "moduleResolution": "bundler", + "jsx": "react-jsx", + "types": [ + "vite/client" + ], + "strict": true, + "resolveJsonModule": true, + "isolatedModules": true, + "skipLibCheck": true, + "noEmit": true + }, + "include": [ + "src" + ] +} diff --git a/samples/inputs/combo/states/vite.config.js b/samples/inputs/combo/states/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/combo/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/inputs/combo/styling/package.json b/samples/inputs/combo/styling/package.json index d72448719e..981efac444 100644 --- a/samples/inputs/combo/styling/package.json +++ b/samples/inputs/combo/styling/package.json @@ -1,6 +1,6 @@ { "name": "react-combo-styling", - "description": "This project provides example of Combo Styling using Infragistics React components", + "description": "This project provides an example of Combo styling using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/combo/styling/src/ComboData.ts b/samples/inputs/combo/styling/src/ComboData.ts deleted file mode 100644 index 5cb8230841..0000000000 --- a/samples/inputs/combo/styling/src/ComboData.ts +++ /dev/null @@ -1,33 +0,0 @@ -interface City { - id: string; - name: string; - country: string; -} - -export const Cities: City[] = [ - { name: "London", id: "UK01", country: "UK" }, - { name: "Manchester", id: "UK02", country: "UK" }, - { name: "Birmingham", id: "UK03", country: "UK" }, - { name: "Glasgow", id: "UK04", country: "UK" }, - { name: "Liverpool", id: "UK05", country: "UK" }, - { name: "New York", id: "US01", country: "USA" }, - { name: "Miami", id: "US02", country: "USA" }, - { name: "Philadelphia", id: "US03", country: "USA" }, - { name: "Chicago", id: "US04", country: "USA" }, - { name: "Springfield", id: "US05", country: "USA" }, - { name: "Los Angeles", id: "US06", country: "USA" }, - { name: "Houston", id: "US07", country: "USA" }, - { name: "Phoenix", id: "US08", country: "USA" }, - { name: "San Diego", id: "US09", country: "USA" }, - { name: "Dallas", id: "US010", country: "USA" }, - { name: "Sofia", id: "BG01", country: "Bulgaria" }, - { name: "Plovdiv", id: "BG02", country: "Bulgaria" }, - { name: "Varna", id: "BG03", country: "Bulgaria" }, - { name: "Burgas", id: "BG04", country: "Bulgaria" }, - { name: "Rome", id: "IT01", country: "Italy" }, - { name: "Milan", id: "IT02", country: "Italy" }, - { name: "Naples", id: "IT03", country: "Italy" }, - { name: "Turin", id: "IT04", country: "Italy" }, - { name: "Palermo", id: "IT05", country: "Italy" }, - { name: "Florence", id: "IT06", country: "Italy" }, -]; diff --git a/samples/inputs/combo/styling/src/index.css b/samples/inputs/combo/styling/src/index.css index 6a25057b21..7882a18ea6 100644 --- a/samples/inputs/combo/styling/src/index.css +++ b/samples/inputs/combo/styling/src/index.css @@ -1,34 +1,44 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-combo::part(label), -igc-combo::part(empty), -igc-combo::part(group-header) { - color: #2b3a55; +.sample { + display: flex; + align-items: flex-start; + justify-content: center; + height: 100%; + padding: 2rem 1rem; } -igc-combo::part(native-input), -igc-combo::part(list-wrapper) { - background-color: #f2e5e5; -} - -igc-combo::part(item selected) { - background: #e8c4c4; -} +.styled-combo { + --ig-font-family: "Titillium Web", sans-serif; + --ig-input-group-border-color: #1377d5; + --ig-input-group-hover-border-color: #1377d5; + --ig-input-group-focused-border-color: #1377d5; + --ig-input-group-filled-text-color: #212121; + --ig-input-group-focused-bottom-line-color: #007ccf; + --ig-combo-toggle-button-background: #e0e0e0; + --ig-combo-toggle-button-background-focus: #e0e0e0; + --ig-combo-toggle-button-background-focus--border: #e0e0e0; + --ig-combo-toggle-button-foreground: #212121; + --ig-combo-toggle-button-foreground-focus: #212121; + --ig-combo-toggle-button-foreground-filled: #212121; + --ig-drop-down-background-color: #e6f2ff; + --ig-drop-down-header-text-color: #005dcc; + --ig-drop-down-item-text-color: #212121; + --ig-drop-down-hover-item-background: #cce4ff; + --ig-drop-down-focused-item-background: #cce4ff; + --ig-drop-down-selected-item-background: #4ca7e3; + --ig-drop-down-selected-item-text-color: #000; + --ig-drop-down-selected-hover-item-background: #4ca7e3; + --ig-drop-down-selected-hover-item-text-color: #000; + --ig-drop-down-selected-focus-item-background: #4ca7e3; + --ig-drop-down-selected-focus-item-text-color: #000; + --ig-checkbox-empty-color: #005dcc; + --ig-checkbox-fill-color: #005dcc; + --ig-checkbox-tick-color: #fff; -igc-combo::part(item selected active), -igc-combo::part(item selected):hover { - background: #ce7777; -} - -igc-combo::part(prefix), -igc-combo::part(suffix), -igc-combo::part(case-icon) { - color: #f2e5e5; - background-color: #2b3a55; -} + /* the list shows a group header and three options */ + --item-count: 4; -igc-combo::part(checkbox checked)::after { - background: #2b3a55; - box-shadow: none; + width: 17.4375rem; } diff --git a/samples/inputs/combo/styling/src/index.tsx b/samples/inputs/combo/styling/src/index.tsx index 25f60770ef..7b681445d1 100644 --- a/samples/inputs/combo/styling/src/index.tsx +++ b/samples/inputs/combo/styling/src/index.tsx @@ -1,38 +1,39 @@ -import React, { useEffect } from "react"; -import ReactDOM from "react-dom/client"; -import { IgrCombo, IgrIcon, registerIconFromText } from "igniteui-react"; -import "./index.css"; -import "igniteui-webcomponents/themes/light/bootstrap.css"; -import { Cities } from "./ComboData"; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrCombo } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; -const placeSvg = - ''; - -export default function ComboStyling() { +interface Country { + id: string; + name: string; + region: string; +} - useEffect(() => { - registerIconFromText("place", placeSvg, "material"); - }, []); +const countries: Country[] = [ + { id: 'BY', name: 'Belarus', region: 'Europe' }, + { id: 'BE', name: 'Belgium', region: 'Europe' }, + { id: 'BG', name: 'Bulgaria', region: 'Europe' }, +]; - return ( -
- - Choose the desired place - - - - -
- ); +export default function ComboStyling() { + return ( +
+ +
+ ); } -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/inputs/combo/styling/tsconfig.json b/samples/inputs/combo/styling/tsconfig.json index e7db8a94f5..e27a22be9b 100644 --- a/samples/inputs/combo/styling/tsconfig.json +++ b/samples/inputs/combo/styling/tsconfig.json @@ -1,43 +1,23 @@ { "compilerOptions": { - "resolveJsonModule": true, - "esModuleInterop": true, - "baseUrl": ".", - "outDir": "build/dist", - "module": "esnext", - "target": "es5", + "target": "es2020", "lib": [ - "es6", - "dom" + "es2020", + "dom", + "dom.iterable" ], - "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, + "module": "esnext", + "moduleResolution": "bundler", + "jsx": "react-jsx", + "types": [ + "vite/client" + ], + "strict": true, + "resolveJsonModule": true, "isolatedModules": true, + "skipLibCheck": 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/combo/tailwind-styling/README.md b/samples/inputs/combo/tailwind-styling/README.md new file mode 100644 index 0000000000..57e43de0cb --- /dev/null +++ b/samples/inputs/combo/tailwind-styling/README.md @@ -0,0 +1,50 @@ +This folder contains implementation of React application with example of Tailwind Styling feature using [Combo](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + 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 +cd ./igniteui-react-examples +git checkout master +cd ./samples/inputs/combo/tailwind-styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install +npm 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/combo/tailwind-styling/index.html b/samples/inputs/combo/tailwind-styling/index.html new file mode 100644 index 0000000000..e8cfef185f --- /dev/null +++ b/samples/inputs/combo/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + Combo Tailwind Styling + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/combo/tailwind-styling/package.json b/samples/inputs/combo/tailwind-styling/package.json new file mode 100644 index 0000000000..e70e308568 --- /dev/null +++ b/samples/inputs/combo/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-combo-tailwind-styling", + "description": "This project provides an example of Combo 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": "^2.2.1", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "~7.4.1", + "react": "^19.3.0", + "react-dom": "^19.3.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.3.3", + "@types/jest": "^30.0.0", + "@types/node": "^24.7.1", + "@types/react": "^19.3.0", + "@types/react-dom": "^19.3.0", + "@vitejs/plugin-react": "^6.1.1", + "@vitest/browser": "^5.0.2", + "tailwindcss": "^4.3.3", + "typescript": "^5.9.3", + "vite": "^8.3.1", + "vitest": "^5.0.2", + "vitest-canvas-mock": "^1.2.0", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/combo/tailwind-styling/src/index.css b/samples/inputs/combo/tailwind-styling/src/index.css new file mode 100644 index 0000000000..c0a1be880a --- /dev/null +++ b/samples/inputs/combo/tailwind-styling/src/index.css @@ -0,0 +1,23 @@ +/* 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 { + --color-combo-border: #a9b8cc; + --color-combo-toggle: #e5ebf3; + --color-combo-surface: #f3f6fa; + --color-combo-selected: #d2dbe8; + --color-combo-accent: #7d91ab; + --color-combo-header: #005dcc; + --color-combo-ink: #212121; +} + +/* outside the Tailwind layers, so it overrides the padding of the shared .sample rule */ +.sample { + padding: 2rem 1rem; +} diff --git a/samples/inputs/combo/tailwind-styling/src/index.tsx b/samples/inputs/combo/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..8676ca06b9 --- /dev/null +++ b/samples/inputs/combo/tailwind-styling/src/index.tsx @@ -0,0 +1,39 @@ +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrCombo } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +interface Country { + id: string; + name: string; + region: string; +} + +const countries: Country[] = [ + { id: 'BY', name: 'Belarus', region: 'Europe' }, + { id: 'BE', name: 'Belgium', region: 'Europe' }, + { id: 'BG', name: 'Bulgaria', region: 'Europe' }, +]; + +export default function ComboTailwindStyling() { + return ( +
+ +
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/inputs/combo/tailwind-styling/tsconfig.json b/samples/inputs/combo/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..e27a22be9b --- /dev/null +++ b/samples/inputs/combo/tailwind-styling/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "es2020", + "lib": [ + "es2020", + "dom", + "dom.iterable" + ], + "module": "esnext", + "moduleResolution": "bundler", + "jsx": "react-jsx", + "types": [ + "vite/client" + ], + "strict": true, + "resolveJsonModule": true, + "isolatedModules": true, + "skipLibCheck": true, + "noEmit": true + }, + "include": [ + "src" + ] +} diff --git a/samples/inputs/combo/tailwind-styling/vite.config.js b/samples/inputs/combo/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..4043727956 --- /dev/null +++ b/samples/inputs/combo/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/inputs/combo/type/README.md b/samples/inputs/combo/type/README.md new file mode 100644 index 0000000000..9218320994 --- /dev/null +++ b/samples/inputs/combo/type/README.md @@ -0,0 +1,50 @@ +This folder contains implementation of React application with example of Type feature using [Combo](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + 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 +cd ./igniteui-react-examples +git checkout master +cd ./samples/inputs/combo/type +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install +npm 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/combo/type/index.html b/samples/inputs/combo/type/index.html new file mode 100644 index 0000000000..0af58165c3 --- /dev/null +++ b/samples/inputs/combo/type/index.html @@ -0,0 +1,11 @@ + + + + Combo Type + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/combo/type/package.json b/samples/inputs/combo/type/package.json new file mode 100644 index 0000000000..b45b1aace4 --- /dev/null +++ b/samples/inputs/combo/type/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-combo-type", + "description": "This project provides an example of Combo type 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": "^2.2.1", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "~7.4.1", + "react": "^19.3.0", + "react-dom": "^19.3.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^30.0.0", + "@types/node": "^24.7.1", + "@types/react": "^19.3.0", + "@types/react-dom": "^19.3.0", + "@vitejs/plugin-react": "^6.1.1", + "@vitest/browser": "^5.0.2", + "typescript": "^5.9.3", + "vite": "^8.3.1", + "vitest": "^5.0.2", + "vitest-canvas-mock": "^1.2.0", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/combo/type/src/index.css b/samples/inputs/combo/type/src/index.css new file mode 100644 index 0000000000..e581f1812d --- /dev/null +++ b/samples/inputs/combo/type/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: flex-start; + justify-content: center; + height: 100%; + padding: 2rem 1rem; +} + +.types { + display: grid; + grid-template-columns: repeat(2, minmax(0, 22.5rem)); + width: 100%; + justify-content: center; + column-gap: 3.75rem; +} + +.type { + display: flex; + flex-direction: column; + min-width: 0; + gap: 0.75rem; +} + +.type-label { + justify-self: center; + text-align: center; + font: 400 13px / 20px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.3px; + color: var(--ig-gray-600); +} diff --git a/samples/inputs/combo/type/src/index.tsx b/samples/inputs/combo/type/src/index.tsx new file mode 100644 index 0000000000..f19afb7c2a --- /dev/null +++ b/samples/inputs/combo/type/src/index.tsx @@ -0,0 +1,63 @@ +import { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrCombo, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const languageIcon = ''; + +interface Option { + id: number; + name: string; + group: string; +} + +const options: Option[] = [1, 2, 3, 4, 5].map((id) => ({ id, name: 'Item', group: 'Header' })); + +const types = [ + { label: 'Border Type', outlined: true }, + { label: 'Box Type', outlined: false }, +]; + +export default function ComboType() { + useEffect(() => { + registerIconFromText('language', languageIcon, 'material'); + }, []); + + // a click outside a combo moves the focus out of it, and then its dropdown stays open, so each combo opens and closes on its own + const keepOpenOnOutsideClick = (e: CustomEvent) => { + if (!(e.target as HTMLElement).matches(':focus-within')) { + e.preventDefault(); + } + }; + + return ( +
+
+ {types.map((type) => ( +
+ {type.label} + + + +
+ ))} +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/inputs/combo/type/tsconfig.json b/samples/inputs/combo/type/tsconfig.json new file mode 100644 index 0000000000..e27a22be9b --- /dev/null +++ b/samples/inputs/combo/type/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "es2020", + "lib": [ + "es2020", + "dom", + "dom.iterable" + ], + "module": "esnext", + "moduleResolution": "bundler", + "jsx": "react-jsx", + "types": [ + "vite/client" + ], + "strict": true, + "resolveJsonModule": true, + "isolatedModules": true, + "skipLibCheck": true, + "noEmit": true + }, + "include": [ + "src" + ] +} diff --git a/samples/inputs/combo/type/vite.config.js b/samples/inputs/combo/type/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/combo/type/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/combo/validation/README.md b/samples/inputs/combo/validation/README.md new file mode 100644 index 0000000000..53180acf89 --- /dev/null +++ b/samples/inputs/combo/validation/README.md @@ -0,0 +1,50 @@ +This folder contains implementation of React application with example of Validation feature using [Combo](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + 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 +cd ./igniteui-react-examples +git checkout master +cd ./samples/inputs/combo/validation +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install +npm 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/combo/validation/index.html b/samples/inputs/combo/validation/index.html new file mode 100644 index 0000000000..99738866a4 --- /dev/null +++ b/samples/inputs/combo/validation/index.html @@ -0,0 +1,11 @@ + + + + Combo Validation + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/combo/validation/package.json b/samples/inputs/combo/validation/package.json new file mode 100644 index 0000000000..f596b1a444 --- /dev/null +++ b/samples/inputs/combo/validation/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-combo-validation", + "description": "This project provides an example of Combo validation 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": "^2.2.1", + "igniteui-react": "19.9.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "~7.4.1", + "react": "^19.3.0", + "react-dom": "^19.3.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^30.0.0", + "@types/node": "^24.7.1", + "@types/react": "^19.3.0", + "@types/react-dom": "^19.3.0", + "@vitejs/plugin-react": "^6.1.1", + "@vitest/browser": "^5.0.2", + "typescript": "^5.9.3", + "vite": "^8.3.1", + "vitest": "^5.0.2", + "vitest-canvas-mock": "^1.2.0", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/combo/validation/src/index.css b/samples/inputs/combo/validation/src/index.css new file mode 100644 index 0000000000..cf7c3da50c --- /dev/null +++ b/samples/inputs/combo/validation/src/index.css @@ -0,0 +1,52 @@ +/* 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: grid; + grid-template-columns: max-content repeat(3, minmax(0, 17.4375rem)); + width: 100%; + justify-content: center; + align-items: start; + column-gap: 1.75rem; + row-gap: 1rem; +} + +.type-label { + padding-top: 0.75rem; +} + +.state-combo { + pointer-events: none; +} + +.state-combo.success::part(input) { + --border-color: var(--ig-success-500); + --idle-bottom-line-color: var(--ig-success-500); +} + +.state-combo.warn::part(input) { + --border-color: var(--ig-warn-500); + --idle-bottom-line-color: var(--ig-warn-500); +} + +.state-combo.warn::part(helper-text) { + color: var(--ig-warn-500); +} + +.state-label { + font: 400 13px / 20px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.3px; + color: var(--ig-gray-600); +} + +.state-column { + justify-self: center; +} diff --git a/samples/inputs/combo/validation/src/index.tsx b/samples/inputs/combo/validation/src/index.tsx new file mode 100644 index 0000000000..b88c8f6477 --- /dev/null +++ b/samples/inputs/combo/validation/src/index.tsx @@ -0,0 +1,77 @@ +import { Fragment } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrCombo } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +interface Country { + id: string; + name: string; + region: string; +} + +interface ValidationState { + label: string; + className: string; + invalid?: boolean; + helperText?: string; +} + +const countries: Country[] = [ + { id: 'BY', name: 'Belarus', region: 'Europe' }, + { id: 'BE', name: 'Belgium', region: 'Europe' }, + { id: 'BG', name: 'Bulgaria', region: 'Europe' }, +]; + +// the combo has a built-in invalid state, so the `success` and `warn` classes show +// the other two states on the display-only combos +const states: ValidationState[] = [ + { label: 'Success', className: 'success' }, + { label: 'Warn', className: 'warn', helperText: 'Additional fees might be included' }, + { label: 'Error', className: 'error', invalid: true, helperText: 'Please select a different region' }, +]; + +const types = [ + { label: 'Border Type', outlined: true }, + { label: 'Box Type', outlined: false }, +]; + +export default function ComboValidation() { + return ( +
+ {/* the combos are display-only, so inert blocks keyboard interaction */} +
+ + {states.map((state) => ( + {state.label} + ))} + {types.map((type) => ( + + {type.label} + {states.map((state) => ( + + {state.helperText && {state.helperText}} + + ))} + + ))} +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/inputs/combo/validation/tsconfig.json b/samples/inputs/combo/validation/tsconfig.json new file mode 100644 index 0000000000..e27a22be9b --- /dev/null +++ b/samples/inputs/combo/validation/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "es2020", + "lib": [ + "es2020", + "dom", + "dom.iterable" + ], + "module": "esnext", + "moduleResolution": "bundler", + "jsx": "react-jsx", + "types": [ + "vite/client" + ], + "strict": true, + "resolveJsonModule": true, + "isolatedModules": true, + "skipLibCheck": true, + "noEmit": true + }, + "include": [ + "src" + ] +} diff --git a/samples/inputs/combo/validation/vite.config.js b/samples/inputs/combo/validation/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/combo/validation/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