igniteui-cli 15.2.2-alpha.2 → 15.2.2

package/templates/react/igr-ts/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const IGNITEUI_REACT_PACKAGE = "igniteui-react@~19.7.0";
+export declare const IGNITEUI_REACT_GRIDS_PACKAGE = "igniteui-react-grids@~19.7.0";

package/templates/react/igr-ts/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IGNITEUI_REACT_GRIDS_PACKAGE = exports.IGNITEUI_REACT_PACKAGE = void 0;
+exports.IGNITEUI_REACT_PACKAGE = "igniteui-react@~19.7.0";
+exports.IGNITEUI_REACT_GRIDS_PACKAGE = "igniteui-react-grids@~19.7.0";

package/templates/react/igr-ts/custom-templates/subscription-form/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrSubscriptionFormTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -10,7 +11,7 @@ class IgrSubscriptionFormTemplate extends IgniteUIForReactTemplate_1.IgniteUIFor
         this.projectType = "igr-ts";
         this.name = "Subscription Form";
         this.description = "Subscription form with inputs, buttons and a checkbox inside";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrSubscriptionFormTemplate();

package/templates/react/igr-ts/date-picker/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrDatePickerTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrDatePickerTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactT
         this.projectType = "igr-ts";
         this.name = "Date Picker";
         this.description = "basic IgrDatePicker";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrDatePickerTemplate();

package/templates/react/igr-ts/divider/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrDividerTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrDividerTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemp
         this.projectType = "igr-ts";
         this.name = "Divider";
         this.description = "basic IgrDivider";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrDividerTemplate();

package/templates/react/igr-ts/dropdown/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrDropdownTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrDropdownTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTem
         this.projectType = "igr-ts";
         this.name = "Dropdown";
         this.description = "basic IgrDropdown";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrDropdownTemplate();

package/templates/react/igr-ts/expansion-panel/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrExpansionPanelTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrExpansionPanelTemplate extends IgniteUIForReactTemplate_1.IgniteUIForRe
         this.projectType = "igr-ts";
         this.name = "Expansion Panel";
         this.description = "basic IgrExpansionPanel";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrExpansionPanelTemplate();

package/templates/react/igr-ts/form/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrFormTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrFormTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplat
         this.projectType = "igr-ts";
         this.name = "Form";
         this.description = "basic IgrForm";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrFormTemplate();

package/templates/react/igr-ts/grid/basic/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class GridTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     /**
      *
@@ -14,7 +15,7 @@ class GridTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
         this.projectType = "igr-ts";
         this.components = ["Grid"];
         this.controlGroup = "Data Grids";
-        this.packages = ["igniteui-react-grids@~19.6.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_GRIDS_PACKAGE];
         this.hasExtraConfiguration = false;
     }
 }

package/templates/react/igr-ts/icon/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrIconTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrIconTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplat
         this.projectType = "igr-ts";
         this.name = "Icon";
         this.description = "basic IgrIcon";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrIconTemplate();

package/templates/react/igr-ts/icon-button/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrIconButtonTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrIconButtonTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactT
         this.projectType = "igr-ts";
         this.name = "Icon button";
         this.description = "basic IgrIconButton";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrIconButtonTemplate();

package/templates/react/igr-ts/input/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrInputTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrInputTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTempla
         this.projectType = "igr-ts";
         this.name = "Input";
         this.description = "basic IgrInput";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrInputTemplate();

package/templates/react/igr-ts/linear-progress/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrLinearProgressTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrLinearProgressTemplate extends IgniteUIForReactTemplate_1.IgniteUIForRe
         this.projectType = "igr-ts";
         this.name = "Linear Progress";
         this.description = "basic IgrLinearProgress";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrLinearProgressTemplate();

package/templates/react/igr-ts/list/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrListTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrListTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplat
         this.projectType = "igr-ts";
         this.name = "List";
         this.description = "basic IgrList";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrListTemplate();

package/templates/react/igr-ts/navbar/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrNavbarTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrNavbarTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTempl
         this.projectType = "igr-ts";
         this.name = "Navbar";
         this.description = "basic IgrNavbar";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrNavbarTemplate();

package/templates/react/igr-ts/projects/_base/files/package.json

@@ -15,7 +15,7 @@
     "@testing-library/react": "^16.3.0",
     "element-internals-polyfill": "^3.0.2",
     "functions-have-names": "^1.2.3",
-    "igniteui-react": "~19.6.2",
+    "igniteui-react": "~19.7.0",
     "react": "^19.2.4",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^19.2.4",

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-components/reference/CHARTS-GRIDS.md

@@ -374,7 +374,7 @@ const currencyTemplate = (ctx: IgrCellContext<Order>) => (
 );
 
 const dateTemplate = (ctx: IgrCellContext<Order>) => (
-  <span>${(ctx.value as Date).toLocaleDateString()}</span>
+  <span>{(ctx.value as Date).toLocaleDateString()}</span>
 );
 
 const statusTemplate = (ctx: IgrCellContext<Order>) => {

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md

@@ -57,7 +57,7 @@ Use the tables below to map a UI need to the right React component. All componen
 | UI Need | Component | Import | Docs |
 |---|---|---|---|
 | Full calendar view | `IgrCalendar` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/calendar) |
-| Date picker (popup calendar) | `IgrDatepicker` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/date-picker) |
+| Date picker (popup calendar) | `IgrDatePicker` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/date-picker) |
 | Date range selection | `IgrDateRangePicker` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/date-range-picker) |
 
 ### Notifications & Feedback
@@ -109,7 +109,7 @@ Use the tables below to map a UI need to the right React component. All componen
 | Simple scrollable list | `IgrList` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/list) |
 | Hierarchical / tree data | `IgrTree` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/tree) |
 | Tabular data (MIT, lightweight) | `IgrGridLite` | `igniteui-react/grid-lite` (requires both `igniteui-react` and `igniteui-grid-lite` packages) | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grid-lite/overview) |
-| Full-featured tabular data grid | `IgrDataGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/overview) |
+| Full-featured tabular data grid | `IgrGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/overview) |
 | Nested / master-detail grid | `IgrHierarchicalGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/hierarchical-grid/overview) |
 | Parent-child relational tree grid | `IgrTreeGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/tree-grid/overview) |
 | Cross-tabulation / BI pivot table | `IgrPivotGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/overview) |
@@ -156,8 +156,8 @@ Use the **Component Catalogue** tables above to find matching components. When i
 | Simple static list | `IgrList` | Data Grid |
 | Basic dropdown | `IgrSelect` | `IgrCombo` |
 | Searchable or multi-select dropdown | `IgrCombo` | `IgrSelect` |
-| Tabular data with basic display | `IgrGridLite` (grid-lite) | `IgrDataGrid` (commercial) |
-| Tabular data, advanced features needed | `IgrDataGrid` | `IgrGridLite` (grid-lite) |
+| Tabular data with basic display | `IgrGridLite` (grid-lite) | `IgrGrid` (commercial) |
+| Tabular data, advanced features needed | `IgrGrid` | `IgrGridLite` (grid-lite) |
 | Single dismissible message | `IgrToast` | `IgrSnackbar` |
 | Message requiring user action | `IgrSnackbar` | `IgrToast` |
 | Collapsible single section | `IgrExpansionPanel` | `IgrAccordion` |
@@ -249,7 +249,7 @@ function Dashboard() {
 
 - `IgrInput` — search bar
 - `IgrCombo` — filter dropdowns
-- `IgrGridLite` (grid-lite) or `IgrDataGrid` — tabular data
+- `IgrGridLite` (grid-lite) or `IgrGrid` — tabular data
 - `IgrButton` / `IgrIconButton` — actions
 - `IgrDialog` — confirm delete modal
 - `IgrBadge` — status indicators
@@ -269,7 +269,7 @@ function Dashboard() {
 - `IgrNavDrawer` — side navigation
 - `IgrCard` — KPI summary cards
 - `IgrTabs` or `IgrTileManager` — section layout
-- `IgrDataGrid` or `IgrPivotGrid` — detailed data tables
+- `IgrGrid` or `IgrPivotGrid` — detailed data tables
 - `IgrCategoryChart` — charts (from `igniteui-react-charts`)
 - `IgrLinearProgress` / `IgrCircularProgress` — loading indicators
 

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-components/reference/EVENT-HANDLING.md

@@ -50,7 +50,7 @@ function MyForm() {
 | `IgrDialog` | `onClosed` | Dialog has closed |
 | `IgrTabs` | `onChange` | Active tab changes |
 | `IgrCalendar` | `onChange` | Selected date changes |
-| `IgrDatepicker` | `onChange` | Selected date changes |
+| `IgrDatePicker` | `onChange` | Selected date changes |
 
 ## TypeScript Event Types
 

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-components/reference/JSX-PATTERNS.md

@@ -51,6 +51,7 @@ Ignite UI components use the web component **slot** mechanism under the hood. In
 Some components like the Data Grid support **render props** for custom cell rendering:
 
 ```tsx
+import { IgrBadge } from 'igniteui-react';
 import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
 
 function UserGrid({ users }: { users: User[] }) {
@@ -152,10 +153,9 @@ function MainLayout() {
   const location = useLocation();
 
   const handleTabChange = (e: CustomEvent) => {
-    const selectedIndex = (e.target as any).selectedIndex;
-    if (selectedIndex !== undefined && tabs[selectedIndex]) {
-      navigate(tabs[selectedIndex].path);
-    }
+    const selectedLabel = (e.detail as any).label as string;
+    const tab = tabs.find(t => t.label === selectedLabel);
+    if (tab) navigate(tab.path);
   };
 
   return (

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-components/reference/REFS-FORMS.md

@@ -57,7 +57,7 @@ import { IgrInput, IgrSelect, IgrSelectItem, IgrButton } from 'igniteui-react';
 function SimpleForm() {
   const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
     // e.preventDefault(); // optionally prevent default submit for custom handling
-    const formData = new FormData(e.target);
+    const formData = new FormData(e.currentTarget);
     console.log(formData.get('name'));       // input value
     console.log(formData.get('role'));       // selected option value
   };
@@ -84,7 +84,7 @@ Wire up Ignite UI form components with React state for controlled behavior:
 
 ```tsx
 import { useState } from 'react';
-import { IgrInput, IgrCheckbox, IgrSelect, IgrSelectItem } from 'igniteui-react';
+import { IgrInput, IgrCheckbox, IgrSelect, IgrSelectItem, IgrCheckboxChangeEventArgsDetail } from 'igniteui-react';
 
 function ProfileForm() {
   const [name, setName] = useState('');
@@ -101,7 +101,7 @@ function ProfileForm() {
 
       <IgrCheckbox
         checked={newsletter}
-        onChange={(e: CustomEvent<IgcCheckboxChangeEventArgs>) =>
+        onChange={(e: CustomEvent<IgrCheckboxChangeEventArgsDetail>) =>
           setNewsletter(e.detail.checked)
         }
       >
@@ -111,7 +111,7 @@ function ProfileForm() {
       <IgrSelect
         label="Role"
         value={role}
-        onChange={(e: CustomEvent<IgcSelectItemComponent>) =>
+        onChange={(e: CustomEvent<IgrSelectItem>) =>
           setRole(e.detail.value)
         }
       >
@@ -130,7 +130,7 @@ Ignite UI components are form-associated web components. You can integrate them
 
 ```tsx
 import { useForm, Controller } from 'react-hook-form';
-import { IgrInput, IgrCheckbox, IgrButton } from 'igniteui-react';
+import { IgrInput, IgrCheckbox, IgrButton, IgrCheckboxChangeEventArgsDetail } from 'igniteui-react';
 
 interface FormData {
   email: string;
@@ -172,7 +172,7 @@ function SignUpForm() {
         render={({ field }) => (
           <IgrCheckbox
             checked={field.value || false}
-            onChange={(e: CustomEvent<IgcCheckboxChangeEventArgs>) =>
+            onChange={(e: CustomEvent<IgrCheckboxChangeEventArgsDetail>) =>
               field.onChange(e.detail.checked)
             }
           >

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md

@@ -39,10 +39,10 @@ Component decision matrix (by visual pattern, domain-neutral):
 | Content blocks / summary cards | `IgrCard` | Use when card chrome helps match the panel shape and structure. Use `IgrCardHeader`, `IgrCardContent`, and `IgrCardActions`, or plain `<div>` containers for flat or highly custom tiles |
 | Any text input field | `IgrInput` | Use when the input anatomy matches the screenshot, including search fields and inline editors. Apply CSS to match the screenshot's border/radius style |
 | Dropdown or select | `IgrSelect` | Use when the screenshot clearly shows select/dropdown behavior |
-| Form fields with labels and inputs | `IgrInput`, `IgrSelect`, `IgrCombo`, `IgrDatepicker`, `IgrDateTimeInput` | Cover text, select, combo, and date/time inputs |
+| Form fields with labels and inputs | `IgrInput`, `IgrSelect`, `IgrCombo`, `IgrDatePicker`, `IgrDateTimeInput` | Cover text, select, combo, and date/time inputs |
 | Multi-step form / wizard | `IgrStepper` | Use when a sequence of steps is visually present |
 | Filter chips / tag inputs | `IgrChip` | Use when chip anatomy matches status badges, filter tags, or removable labels in the screenshot |
-| Calendar or date picker as a primary view element | `IgrCalendar`, `IgrDatepicker`, `IgrDateRangePicker` | Use when scheduling or date selection is the core UI |
+| Calendar or date picker as a primary view element | `IgrCalendar`, `IgrDatePicker`, `IgrDateRangePicker` | Use when scheduling or date selection is the core UI |
 | Top icon/action bar | `IgrNavbar` with `IgrButton` / `IgrIconButton` | Use when a navbar structure matches the screenshot; use plain icon buttons or custom containers when that is a closer fit |
 
 ## Chart Components
@@ -51,7 +51,7 @@ Component decision matrix (by visual pattern, domain-neutral):
 |---|---|---|
 | Area chart | `IgrCategoryChart` | `chartType`, `markerTypes`, `areaFillOpacity` |
 | Line chart | `IgrCategoryChart` | `chartType`, `markerTypes` |
-| Column/bar chart | `IgrCategoryChart` | `chartType`, `markerTypes`, `includedProperties` |
+| Column chart | `IgrCategoryChart` | `chartType`, `markerTypes`, `includedProperties` |
 | Sparkline (mini chart) | `IgrSparkline` or `IgrDataChart` | `displayType`, `valueMemberPath`, sized container |
 | Pie/donut chart | `IgrPieChart` | `valueMemberPath`, `labelMemberPath` |
 | Financial chart | `IgrFinancialChart` | OHLC/candlestick data |
@@ -68,7 +68,7 @@ Decision rule:
 | UI Pattern | Ignite UI Component | Key Properties |
 |---|---|---|
 | Item list | `IgrList` | slot-based row content, selection, and dense list styling |
-| User avatar | `IgrAvatar` | `initials`, `shape`, `size` |
+| User avatar | `IgrAvatar` | `initials`, `shape`, `src` |
 | Status badge | `IgrBadge` | value/children plus token-based styling |
 | Icons | `IgrIcon` | icon name, collection, styling |
 | Progress bar | `IgrLinearProgress` | `value`, `max` |
@@ -91,7 +91,7 @@ Decision rule:
 | Text input | `IgrInput` | `label`, `placeholder`, `type` |
 | Dropdown select | `IgrSelect` | option children, label, value |
 | Searchable multi-select | `IgrCombo` | `data`, `displayKey`, `valueKey` |
-| Date picker | `IgrDatepicker` | value and label props |
+| Date picker | `IgrDatePicker` | value and label props |
 | Date/time input | `IgrDateTimeInput` | value, format options |
 | Toggle switch | `IgrSwitch` | checked state, change events |
 | Checkbox | `IgrCheckbox` | checked state, `indeterminate` |

package/templates/react/igr-ts/radio-group/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrRadioGroupTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrRadioGroupTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactT
         this.projectType = "igr-ts";
         this.name = "Radio Group";
         this.description = "basic IgrRadioGroup";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrRadioGroupTemplate();

package/templates/react/igr-ts/rating/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrRatingTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrRatingTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTempl
         this.projectType = "igr-ts";
         this.name = "Rating";
         this.description = "basic IgrRating";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrRatingTemplate();

package/templates/react/igr-ts/ripple/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrRippleTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrRippleTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTempl
         this.projectType = "igr-ts";
         this.name = "Ripple";
         this.description = "basic IgrRipple";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrRippleTemplate();

package/templates/react/igr-ts/slider/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrSliderTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrSliderTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTempl
         this.projectType = "igr-ts";
         this.name = "Slider";
         this.description = "basic IgrSlider";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrSliderTemplate();

package/templates/react/igr-ts/switch/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrSwitchTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrSwitchTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTempl
         this.projectType = "igr-ts";
         this.name = "Switch";
         this.description = "basic IgrSwitch";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrSwitchTemplate();

package/templates/react/igr-ts/tabs/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrTabsTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrTabsTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplat
         this.projectType = "igr-ts";
         this.name = "Tabs";
         this.description = "basic IgrTabs";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrTabsTemplate();

package/templates/react/igr-ts/text-area/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrTextAreaTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrTextAreaTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTem
         this.projectType = "igr-ts";
         this.name = "Text area";
         this.description = "basic IgrTextarea";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrTextAreaTemplate();

package/templates/react/igr-ts/tree/default/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+const constants_1 = require("../../constants");
 class IgrTreeTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
     constructor() {
         super(__dirname);
@@ -11,7 +12,7 @@ class IgrTreeTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplat
         this.projectType = "igr-ts";
         this.name = "Tree";
         this.description = "basic IgrTree";
-        this.packages = ["igniteui-react@~19.5.2"];
+        this.packages = [constants_1.IGNITEUI_REACT_PACKAGE];
     }
 }
 module.exports = new IgrTreeTemplate();

package/templates/webcomponents/igc-ts/grid/default/index.js

@@ -11,7 +11,7 @@ class IgcGridTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUIForWebC
         this.projectType = "igc-ts";
         this.name = "Grid";
         this.description = "IgcGrid with local data";
-        this.packages = ["igniteui-webcomponents-grids@~7.0.0"];
+        this.packages = ["igniteui-webcomponents-grids@~7.1.0"];
     }
 }
 module.exports = new IgcGridTemplate();

package/templates/webcomponents/igc-ts/grid/grid-editing/index.js

@@ -11,7 +11,7 @@ class IgcGridEditingTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUI
         this.projectType = "igc-ts";
         this.name = "Grid Editing";
         this.description = "IgcGrid with editing enabled";
-        this.packages = ["igniteui-webcomponents-grids@~7.0.0"];
+        this.packages = ["igniteui-webcomponents-grids@~7.1.0"];
     }
 }
 module.exports = new IgcGridEditingTemplate();

package/templates/webcomponents/igc-ts/grid/grid-summaries/index.js

@@ -11,7 +11,7 @@ class IgcGridSummariesTemplate extends IgniteUIForWebComponentsTemplate_1.Ignite
         this.projectType = "igc-ts";
         this.name = "Grid Summaries";
         this.description = "IgcGrid with column summaries";
-        this.packages = ["igniteui-webcomponents-grids@~7.0.0"];
+        this.packages = ["igniteui-webcomponents-grids@~7.1.0"];
     }
 }
 module.exports = new IgcGridSummariesTemplate();

package/templates/webcomponents/igc-ts/projects/_base/files/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@vaadin/router": "^2.0.0",
-    "igniteui-webcomponents": "~7.1.3",
+    "igniteui-webcomponents": "~7.2.0",
     "lit": "^3.3.2"
   },
   "devDependencies": {