Ignite UI for React Changelog

All notable changes for each version of Ignite UI for React are documented on this page.

19.10.0 (September 2026)

igniteui-react-grids (Grids)

• IgrGrid, IgrTreeGrid, IgrHierarchicalGrid, IgrPivotGrid
  • The Excel style filtering search list now uses the IgrVirtualScroll component. The list measures each row when the row renders. The measured size replaces the estimated size.
  • The markup of the Excel style filtering search list changed. The virtual scroll host and its item wrappers replace the internal display container and the vertical scrollbar helper. Update the applications and tests that access these elements directly.
  • The internal virtual scroll container of the Excel style filtering no longer has a nested list role. The listbox and its options do not change.
  • The rowStyles, headerStyles and headerGroupStyles properties now have the type GridStyleCSSProperty | null. Before, the type was any.
  • The scrollbars now use the standard scrollbar-color and scrollbar-width CSS properties. Before, they used the ::-webkit-scrollbar-* pseudo-elements.
  • The scrollbars in the grids, the Column Actions and the Excel style filtering menus use the background and foreground colors of their host.

Breaking Changes

• Theming
  • Removed the --ig-grid-summary-border-width and --ig-grid-summary-pinned-border-width CSS variables. A summary cell now uses the border widths of the grid. The header border width sets the cell separator, and the pinned border width sets the pinned border.
  • You can still set the summary border styles and colors with --ig-grid-summary-border-style, --ig-grid-summary-pinned-border-style, --ig-grid-summary-border-color and --ig-grid-summary-pinned-border-color.
  • Most scrollbar theme variables now have no effect, because the standard scrollbar properties accept only two colors and three width keywords. --sb-thumb-bg-color and --sb-track-bg-color continue to work. The hover, border, corner and minimum height variables have no effect.
  • --sb-size no longer sets the scrollbar thickness, because scrollbar-width accepts only auto, thin or none. For a thinner scrollbar, set --sb-width: thin on the element that declares the scrollbar variables. You can also set scrollbar-width: thin directly on the scrolling element.

Behavioral Changes

• Scrollbars
  • The standard CSS properties cannot style or show the scrollbar arrow buttons. scrollbar-width: thin removes the arrow buttons on platforms that show them.
  • Firefox versions before 64 do not support scrollbar-color and scrollbar-width. These versions show the scrollbars with the default colors and size of the platform.
• PDF export
  • Summary rows now have the same background as the header row. As with the header background, the showTableBorders option controls this background.
  • The row dimension cells of a IgrPivotGrid export also have this background.
  • When a row dimension value repeats in consecutive records, the IgrPivotGrid export now shows the value one time, in one merged cell. The grid merges its row headers in the same way.
  • A value merges only under the same parent dimension. For example, the same date under two different cities gets two cells.
  • When a merged cell goes past the bottom of a page, the cell stops at the end of the page. The cell continues below the headers on the next page.

19.9.0 (September 2026)

igniteui-react

New Components

Ignite UI for React now includes these components from igniteui-webcomponents 7.3.0 and 7.4.0:

• Breadcrumbs (IgrBreadcrumbs and IgrBreadcrumb) - Shows a navigation trail.
• Color Picker (IgrColorPicker) - Lets the user select a color. It supports different color formats and a custom palette.
• QR Code (IgrQrCode) - Renders a QR code as an SVG from the value property. It encodes the data in numeric, alphanumeric or byte mode.
• Virtual Scroll (IgrVirtualScroll) - Renders only the items in the viewport and the number of additional items that overScan sets. Use it for large or unbounded lists.
  • The component supports vertical and horizontal orientation, and right-to-left (RTL) layouts.
  • Item sizes can be fixed, estimated with estimatedItemSize, or variable. The component measures each rendered item and corrects the estimate.
  • Items that are not measured yet use the average measured size instead of estimatedItemSize. The scrollbar then agrees with the real content.
  • The component recycles item elements. An item that stays in the rendered window keeps its element. The elements of the items that leave the window show the items that enter it.
  • The keyFunction property returns the key of an item. With a key, an item keeps its element when it moves in data. Without keyFunction, the index is the key.
  • DOM state that the item template does not bind stays with the element. An example is the state of a checkbox without a checked binding. Bind this state in the item template.
  • The component operates correctly in lists that are larger than the maximum scroll size of the browser.

Changed

• Updated igniteui-webcomponents to 7.4.1. This update includes the 7.3.0, 7.3.1, 7.3.2, 7.4.0 and 7.4.1 releases.
• Updated igniteui-dockmanager to 2.2.1 and igniteui-grid-lite to 0.11.0. Refer to the Dock Manager and Grid Lite sections.

• Library

  • Removed the @lit-labs/virtualizer dependency. The IgrVirtualScroll component now does the virtualization. The IgrCombo list also uses it.
  • Updated the optional peer dependencies dompurify, marked and shiki to their current stable versions.

• Avatar

  • The component now has role="img". Before, it had image, which is an ARIA 1.3 value that current tools do not support.
  • The accessible name comes from alt. If alt is not set, the name comes from initials. The role description is always avatar.
  • Before, the name was always “avatar”, and alt or initials set the role description.

• Badge

  • The role description is always badge. Assistive technology no longer reads the variant.
  • The icon CSS part applies only when an IgrIcon is the only content of the badge. This agrees with the documentation.

• Carousel

  • The component now delegates the focus in this order: the indicator container, the navigation buttons, then the first focusable element in the active slide.

• Chip

  • The type of the onRemove event no longer declares a boolean detail. The event never had this detail.

• Tile Manager

  • IgrTile now renders its resize handles directly. The trigger-side, trigger and trigger-bottom CSS parts keep their names.
  • The new tile-container CSS part contains the tile content and the resize handles.

• AI-Assisted Development - Skills

  • Reduced the React skills to the framework-specific facts that an agent cannot find by itself. The total size of the skills is approximately half of the previous size.
  • Merged the reference files into COMPONENTS, USAGE, DATAVIZ, MCP and TROUBLESHOOTING. Removed duplicate setup and theming guidance.
  • The skills now document the named-argument schemas of the MCP tools. The documentation tools take framework, and the API tools take platform.
  • Added get_project_setup_guide. Replaced get_theming_guidance, which does not exist, with read_resource.
  • The skills now document dark mode as a global switch that --ig-theme-variant and configureTheme() control. You cannot apply dark mode to only a part of the page with custom properties.
  • Corrected the palette override: all shades come from the 500 shade, for example --ig-primary-500. The --ig-primary-h, -s and -l tokens do not exist.
  • Corrected the Excel/CSV exporter import path to igniteui-react-grids. Corrected the form submit handler type to React.FormEvent, and the event handler types to the generated Igr*EventArgs aliases.
  • Removed the deprecated IgrGridModule.register() from the grid migration guidance. Replaced the --ig-button-foreground token example, because this token does not exist.
  • Added license: MIT to all skills. Each skill description now has WHEN TO USE: and WHEN NOT TO USE: sections, so that agents select the correct skill.
  • The skills README now lists the Grid Lite to premium grid migration skill.

New Features

• Button Group

  • The single selection modes (single and single-required) now use the radio group keyboard pattern:
    • The group is one tab stop.
    • The arrow keys move the focus and the selection together. They skip disabled buttons and wrap at the two ends.
    • With alignment="horizontal", ArrowLeft and ArrowRight move the selection in the text direction. With alignment="vertical", ArrowUp and ArrowDown move the selection.
    • The multiple mode does not change. Each button stays a tab stop.
  • The single selection modes now expose a radiogroup with radio buttons. Before, they exposed toggle buttons with aria-pressed.
  • The IgrButtonGroup host now has the radiogroup or group role and the disabled state. An aria-label or aria-labelledby on the host names the group.
  • In the single selection modes, alignment sets the aria-orientation of the radio group.
  • The focused CSS part of IgrToggleButton is now documented.

• Calendar, Date Picker, Date Range Picker

  • IgrCalendar now exports the label-inner, months-row and years-row CSS parts. The pickers export them as calendar-label-inner, months-row and years-row.

• Chip

  • New outlined property. Set it to true to show an outlined chip.
  • The start and end slots, and the new action and remove CSS parts, are now documented.

• Combo, Color Picker, Date Picker, Date Range Picker, Dropdown, Select, Tooltip

  • New scrollStrategy property. It sets the popup behavior when a container scrolls:
    • hide (default) hides the popup while its anchor is fully out of view.
    • scroll keeps the popup visible and on its anchor.
    • close closes the component on each scroll. This also closes a sticky tooltip.
  • The date pickers ignore scrollStrategy in dialog mode.

• Dropdown

  • The target element now has aria-haspopup="listbox". Before, it had aria-haspopup="true".
  • While the list is open, aria-activedescendant on the target points to the active item. Screen readers announce this item.

• Icon

  • registerIcon and registerIconFromText now accept a RegisterIconOptions object as the third argument. The plain collection string continues to work.
  • stripMeta: true removes the <title> and <desc> elements from the stored SVG. This prevents the native browser tooltip on hover.
  • The title text stays available as the aria-label of the host IgrIcon element.

• Mask Input, Date Time Input, Date Range Picker

  • The masked editors now support undo and redo:
    • Undo: Ctrl + Z or Cmd + Z.
    • Redo: Ctrl + Y, Ctrl + Shift + Z or Cmd + Shift + Z.
  • A sequence of typed characters is one undo step. A sequence of deletions is also one undo step.
  • A caret movement, a paste, a drop, a cut, a spin of a date part and an IME composition each start a new step.
  • A restored step emits onInput. Two-way bindings follow the undo.
  • The history stays when the focus changes. The component clears the history when you set the value programmatically, when the form resets the control, or when mask, prompt or inputFormat changes.

• Splitter

  • New startCollapsed and endCollapsed properties. They get and set the collapsed state of each pane.
  • New onLayoutChanged event. The component emits it after a user resize or a change of the expansion state.
  • The onLayoutChanged payload contains the current layout: startSize, endSize, startCollapsed and endCollapsed.

• Tabs

  • New selectedTab property. It returns the selected IgrTab element, or null.
  • select() now also accepts the label of a tab, in addition to its id. You can pass the value of selected back to select().
  • The tab headers now have aria-posinset and aria-setsize. The strip has aria-orientation.
  • The selected panel is focusable. Keyboard users can reach panel content that has no focusable elements.
  • The strip keeps a tab stop when no tab is selected.
  • The component now finds IgrTab elements that come through an intermediate slot. Another component can wrap IgrTabs.

• Tooltip

  • The anchor now references the tooltip with aria-describedby. Screen readers announce the tooltip content as the description of the anchor.
  • In sticky mode, the default close action is a labeled <button>. You can reach and use it with the keyboard. The new close-button CSS part exposes it.

• Popover

  • Popover-based components now use native CSS anchor positioning in browsers that support it: Chrome and Edge 133+, Firefox 147+ and Safari 26+.
  • Other browsers continue to use @floating-ui/dom. They load it only when necessary.

• Themes

  • All components now have forced-colors: active styles in the Material, Bootstrap, Fluent and Indigo themes.
  • In Windows High Contrast mode, the components use the system colors (CanvasText, Highlight, GrayText, LinkText). The disabled, hover, focus and selected states stay different from each other.

Breaking Changes

• Chip

  • part="base" is now a plain wrapper. The selection control moved to the new action part. The remove control moved to the new remove part.
  • Move the ::part(base) rules for the interactive surface to ::part(action).
  • focus-shadow-color and focus-selected-shadow-color replace the focus-outline-color and focus-selected-outline-color CSS variables.

• AI-Assisted Development - Skills

  • Renamed the grid-lite-to-igr-grid-migration skill to igniteui-react-migrate-grid-lite-to-premium. The new name uses the igniteui-react- prefix, as the other skills do.
  • Install the renamed skill again under the new folder name, and remove the old folder.
  • Renamed the reference/ folder of each skill to references/. Install these skills again so that their links work: igniteui-react-components, igniteui-react-customize-theme and igniteui-react-generate-from-image-design.

Behavioral Changes

• Combo, Color Picker, Date Picker, Date Range Picker, Dropdown, Select, Tooltip

  • The popup now hides while its anchor is fully out of view. Before, the popup stayed visible. To keep the previous behavior, set scrollStrategy="scroll".

• Dropdown, Select, Tooltip

  • The popup no longer moves along the viewport edge to stay in view. It only flips to the opposite side.

• Button Group

  • A disabled group no longer sets disabled on its buttons. The buttons inherit the disabled state.
  • A button that has its own disabled stays disabled when you enable the group again. A button that you add to a disabled group is also disabled.
  • In the single selection modes, the buttons are no longer separate tab stops. Refer to the keyboard pattern in New Features.

• Calendar, Date Picker, Date Range Picker

  • If weekStart is not set, the week starts on the first day of the week of the locale. The component gets this day from Intl.Locale.prototype.getWeekInfo().
  • For example, the week starts on Monday for bg and on Sunday for en.
  • An explicit weekStart has priority. Set weekStart to undefined to use the locale value again. Browsers without getWeekInfo() use Sunday.
  • The header date and the month and year navigation use the field order of the locale. For example, for ja the year button comes before the month button. The years view continues to show plain numbers.

• Date Time Input, Date Picker, Date Range Picker

  • The components no longer change value while the user types. value changes only on commit, together with the onChange event. The components emit onChange on blur, as before.
  • Before, value changed on each keystroke, and no event announced the change.
  • You can now bind value externally, for example in an edit template of IgrGrid.
  • The detail of the onInput event contains the typed value. It also contains the result of a date part spin or of Ctrl + ;.
  • In a focused editor, a spin of a date part also waits for the commit on blur.
  • On an unfocused component, stepUp() and stepDown() change value immediately. clear(), setRangeText() and direct assignments also change value immediately.
  • In the pickers, the calendar continues to follow the typed date while the user types.

• Dropdown

  • The component no longer emits onChange when the user selects the item that is already selected. The list still closes.

• Tabs

  • The scroll buttons now scroll to the nearest tab that is not fully visible. Before, they scrolled a fixed step of 180px.
  • A tab below a scroll button counts as not visible. One click shows exactly one more tab.

• Tooltip

  • A tooltip that closes from a hide trigger now waits exactly hideDelay. Before, it waited an additional 180ms that was not documented.
  • In sticky mode, the default close button hides the tooltip immediately. It does not wait for hideDelay.
  • The default showTriggers and hideTriggers now include focusin and focusout. The tooltip opens when its anchor gets keyboard focus, and closes when the focus leaves the anchor.

Bug Fixes

igniteui-react-dockmanager (Dock Manager)

• Dock Manager (IgrDockManager): Updated igniteui-dockmanager from 2.1.3 to 2.2.1. Refer to the full changelog.

New Features

• New CSS variables for the unpinned pane header: --igc-unpinned-header-background and --igc-unpinned-header-text.

Bug Fixes

igniteui-grid-lite (Grid Lite)

• Grid Lite (IgrGridLite): Updated igniteui-grid-lite from 0.9.0 to 0.11.0. This update includes the 0.10.0 and 0.11.0 releases.

New Features

• The grid now implements the full ARIA grid pattern through ElementInternals: roles, row and column counts and indices, aria-sort and aria-selected. The filter row is a second header row.
• Keyboard navigation and a click now move the DOM focus to the active cell. Screen readers announce the cell.
• New public columns setter.

Changed

• Row virtualization now uses the IgrVirtualScroll component. Fewer rows outside the viewport render. Removed the @lit-labs/virtualizer dependency.
• Performance compared to 0.10.0, with 10,000 rows and 20 columns in an 800px-high grid:
  • Smooth scrolling runs at 60 fps. Before, it ran at 30 fps.
  • A jump to a distant scroll position is 8 times faster.
  • Sorting is 8 times faster.
  • With a cell template, the improvements are equal or larger.
• Navigation without a column keeps the current column.
• Cell activation now updates only the two affected rows. Before, it updated all visible rows.
• Rows reuse cells when the columns change. Sorting uses one shared collator. A ResizeObserver controls the scrollbar offset.
• The cancelable onSorting and onFiltering events fire before the state changes. Listeners can cancel or change the expression.
• The onSorted and onFiltered events fire after the data view updates.

Deprecated

• The positional arguments of navigateTo(row, column?, activate?). Use navigateTo(row, options).

Bug Fixes

19.8.0 (July 2026)

igniteui-react

New Features

• AI-Assisted Development - Skills

  • New Grid Lite to Premium Data Grid migration skill. It maps imports, templates, sorting, filtering, server-side patterns, and toolbar and export flows (#168).

Changed

• Updated igniteui-webcomponents to 7.2.4. This update includes the 7.2.2, 7.2.3 and 7.2.4 patch releases.
• Updated igniteui-dockmanager to 2.1.3 and igniteui-grid-lite to 0.9.0. Refer to the Dock Manager and Grid Lite sections.

• Form associated components

  • An external <label> now links to the native input of IgrInput, IgrMaskInput, IgrTextarea, IgrDateTimeInput, IgrSelect, IgrCombo, IgrDatePicker and IgrDateRangePicker.
  • Use the for and id attributes, or put the component inside the <label>. Assistive technology reads the label. A click on the label focuses the native input (#2263).

• Snackbar, Toast

  • The container positioning property now uses the new NotificationPositioning type (#2251).

• AI-Assisted Development - Skills

  • The React skills now use MCP documentation and API lookups for usage patterns (#167).
  • The image-to-React generation guidance now uses the canonical MCP calls, for example list_components('react') and get_doc('react', '<name>') (#167, #170).
  • The theme customization workflow now sets a safer order for palette, theme, typography and elevations. It finds the tokens before it overrides them (#167).
  • Corrected the Nav Drawer CSS variable names in the guidance and gotchas references (#169).
  • The grid guidance now tells agents not to use fixed column widths that leave empty space at the end. Agents use fixed widths only when the user requests them (#170).
  • Removed unclear text and incorrect API usage patterns (#170).

Bug Fixes

igniteui-react-grids (Grids)

• Updated igniteui-webcomponents-grids to 7.2.0. This version uses igniteui-angular 22.0.0.
• The derived Sass grid themes of igniteui-angular 22.0.0 apply only to the Angular theming API. They do not change the Ignite UI for React grids, which use CSS themes.

igniteui-react-dockmanager (Dock Manager)

• Dock Manager (IgrDockManager): Updated igniteui-dockmanager from 2.1.2 to 2.1.3. Refer to the full changelog.

Bug Fixes

igniteui-grid-lite (Grid Lite)

• Grid Lite (IgrGridLite): Updated igniteui-grid-lite from 0.8.0 to 0.9.0. Refer to the full changelog.

Changed

• Sort and filter operations are faster on large data sets. The grid now calculates the sort keys and the filter expression trees in advance (#63).
• The body cell and row themes now use the current igniteui-theming variables. Updated igniteui-theming to 27.3.0 (#66).

Bug Fixes

19.7.0 (May 2026)

igniteui-react

Changed

• Updated igniteui-webcomponents to 7.2.1. This update includes the 7.2.0 release.
• Updated igniteui-dockmanager to 2.1.2 and igniteui-grid-lite to 0.8.0. Refer to the Dock Manager and Grid Lite sections.

• Form controls

  • IgrInput, IgrMaskInput, IgrDateTimeInput, IgrCheckbox, IgrRadio, IgrSwitch, IgrDatePicker and IgrDateRangePicker now submit their form when the user presses Enter, as native controls do (#2213).

• Input

  • Added theme support for the date, time, datetime-local, week and month input types. These types now have the same styles and floating label behavior in all themes (#2223).

• AI-Assisted Development - Skills

  • Updated the skills in the package.

New Features

• Date Range Picker

  • You can now edit the date range value in a single input field (#1733).

• Nav Drawer

  • For non-relative positions, IgrNavDrawer now uses the native Popover API. The API supplies modal semantics, a focus trap and accessibility support (#2194).
  • New keepOpenOnEscape property. It keeps the drawer open when the user presses Escape. It applies only to non-relative positions.
  • New onClosing event. The drawer emits it before a user interaction closes the drawer. You can cancel this event.
  • New onClosed event. The drawer emits it after a user interaction closes the drawer.

• Invoker Commands API

  • IgrButton and IgrIconButton now support the command and commandFor properties. With these properties, a button controls a target component without custom JavaScript (#2225).
  • IgrBanner, IgrDialog, IgrNavDrawer, IgrSnackbar and IgrToast now respond to the --show, --hide and --toggle commands from an invoker button.

• Snackbar, Toast

  • New positioning property (viewport or container). The components now render as a popover in the top layer of the browser.
  • With positioning set to container, the component anchors to its nearest visible ancestor instead of the viewport (#2203).

Breaking Changes

• Nav Drawer

  • Removed the overlay CSS part. Use the ::backdrop pseudo-element of the base part, the --ig-overlay-background-color variable, or the theming package (#2194).

Deprecated

• Localization

  • The old resource string interfaces for IgrCalendar, IgrChat, IgrDatePicker and IgrDateRangePicker are deprecated. The components now use the igniteui-i18n resource keys.
  • You can no longer set individual resourceStrings properties. Set a complete resource strings object (#2169).

Bug Fixes

igniteui-react-dockmanager (Dock Manager)

• Dock Manager (IgrDockManager): Updated igniteui-dockmanager from 2.1.1 to 2.1.2. Refer to the full changelog.

Bug Fixes

igniteui-grid-lite (Grid Lite)

• Grid Lite (IgrGridLite): Updated igniteui-grid-lite from 0.7.1 to 0.8.0. Refer to the full changelog.

Changed

• Updated the styles of the filter row input. Refactored the common filter logic (#54).
• Updated igniteui-webcomponents to 7.2.0. The grid now requires Node.js 22 or later (#65, #64).

19.6.2 (April 2026)

This entry also includes the 19.6.1 (April 2026) patch release.

igniteui-react

Changed

• Updated igniteui-webcomponents to 7.1.3. This update includes the 7.1.1, 7.1.2 and 7.1.3 patch releases.
• Dock Manager (IgrDockManager): Updated igniteui-dockmanager to 2.1.1. This release changes only the build, CI/CD and development workflow (#152).
• Updated igniteui-grid-lite to 0.7.1. Refer to the Grid Lite section.

• Button Group

  • Aligned the theme colors (#2182).

• Checkbox

  • Updated the disabled and indeterminate styles (#2158).

• Chip

  • The chip content is now inside a new part container. Updated the chip styles (#2190).

• Circular Progress

  • The circular and linear progress bars now use the same track color CSS variable (#2185).

• AI-Assisted Development - Skills

  • New igniteui-react-generate-from-image-design skill. It shows AI coding assistants how to build React views from design images, for example screenshots, mockups and wireframes (#146).
  • The skills now use the Ignite UI CLI MCP server (#151, #154).
  • 19.6.1: Clarified and expanded the guidance for grids, Grid Lite and forms (#141). Added a complete data chart example (#143) and package routing guidance (#145).

Bug Fixes

igniteui-react-grids (Grids)

• Updated igniteui-webcomponents-grids to 7.1.0. This version uses igniteui-angular 21.2.0.
• Security - Updated the jspdf dependency of the PDF export to 4.2.1. This version fixes a security vulnerability of earlier versions (21.1.3).

igniteui-grid-lite (Grid Lite)

• Grid Lite (IgrGridLite): Updated igniteui-grid-lite from 0.7.0 to 0.7.1. Refer to the full changelog.

Bug Fixes

19.6.0 (June 2026)

igniteui-react-charts

New Features

• Added Checkmark option to the MarkerType enum. Use MarkerType.Checkmark on a series to display a V-shaped checkmark icon inside a circle. The new MarkerAutomaticBehavior.Checkmark enum value allows applying the checkmark shape to all series in the chart, and the SeriesViewer.CheckmarkMarkerTemplate property can be used to customize its template.
• Added MarkerSize support on marker-enabled chart series to control marker dimensions in device-independent pixels and reset to template-based sizing with NaN.

igniteui-react

Changed

• IgrDockManager: Updated to use the latest igniteui-dockmanager@2.1.0 with new minResizeWidth and minResizeHeight properties, paneFlyoutToggle event; additional layoutChange event detail and fixes. See the full changelog.
• Updated to use the latest igniteui-webcomponents@7.1.0 including new IgrSplitter and IgrHighlight container components and fixes. See the full changelog.

New Features

• AI-Assisted Development - Agent Skills

  • Structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with Ignite UI for React.
  • The skill files are included in the igniteui-react package and also live in the skills/ directory:
    • components - Identify the right React components (Igr*) for a UI pattern, then install, import, and use them — JSX patterns, events, refs, forms, etc.
    • customize-theme - Customize styling using CSS custom properties, Sass, and the theming system in React, including using Ignite UI Theming MCP server.
    • optimize-bundle-size - Reduce bundle size with granular imports, tree-shaking, and lazy loading.
  • These skills are automatically discovered when placed in the agent’s skills path (e.g. .agents/skills or .claude/skills).

19.5.2 (March 2026)

Bug Fixes

Enhancements

igniteui-react-charts

• Added RangeBarSeries support for horizontal range rendering in IgrDataChart.

19.5.1 (February 2026)

igniteui-react

New Features

• AI-Assisted Development - Copilot Skills

  • Four end-user skills are now shipped with the igniteui-react package under the skills/ directory providing step-by-step guidance to GitHub Copilot and other LLM agents for common tasks:
    • igniteui-wc-choose-components - Identify the right component for a given UI pattern.
    • igniteui-wc-integrate-with-framework - Set up and use components in React, Angular, Vue, or vanilla JS.
    • igniteui-wc-customize-component-theme - Apply custom styles via CSS custom properties, parts, and the theming system.
    • igniteui-wc-optimize-bundle-size - Reduce production bundle size through selective imports and lazy loading.

• Chat

  • adoptRootStyles can now be toggled on/off at runtime.

Breaking Changes

• Themes

  • Changed global prefixes for CSS custom properties for component themes to align with other Ignite UI component libraries.

• Chat

  • Removed the typingIndicator template renderer. Use the typing-indicator slot instead.

• Tooltip

  • Removed the disableArrow deprecated property.

• Library

  • Minimum Node version required is now >= 22.

  Bug Fixes

igniteui-react-grids (Grids)

• IgrGrid, IgrTreeGrid, IgrHierarchicalGrid, IgrPivotGrid
  • Improved performance by dynamically adjusting the scroll throttle based on the data displayed in grid.

Breaking Changes

• IgrGrid, IgrTreeGrid, IgrHierarchicalGrid, IgrPivotGrid
  • Original data array mutations (like adding/removing/moving records in the original array) are no longer detected automatically. Components need an array reference change for the change to be detected.

Localization(i18n)

• IgrGrid, IgrTreeGrid, IgrHierarchicalGrid, IgrPivotGrid, IgrCombo, IgrDatePicker, IgrDateRangePicker, IgrCalendar, IgrCarousel, IgrChip, IgrInput, IgrTree
  • New Intl implementation for the grid components that format and render data like dates and numbers. Updated Intl implementation for IgrCalendar, IgrDatePicker, and IgrDateRangePicker.
  • New localization implementation for the currently supported languages for all components that have resource strings in the currently supported languages.
  • New public localization API and package named igniteui-i18n-resources containing the new resources that are used in conjunction.

PDF export

• Added PDF export functionality allowing users to export grid data to PDF format.

Popover API

• Dropdown menus and dialogs are now using HTML Popover API to provide better positioning and accessibility.

19.3.2 (February 2026)

Enhancements

igniteui-react-charts

Added OthersCategoryBrush and OthersCategoryOutline to DataPieChart and ProportionalCategoryAngleAxis

Bug Fixes

19.3.1 (December 2025)

Bug Fixes

Enhancements

Charts

• Added LabelFormatOverride event to TimeXAxisLabelFormat so you can now override the formatting with an event at all time-formatting levels on the TimeXAxis.

• Adjusted the schema generation to account for more items to make it more likely to find valid values for properties.

19.3.0 (November 2025)

igniteui-react-charts (Charts)

Preview User Annotations

In Ignite UI for React, you can now annotate the IgrDataChart with slice, strip, and point annotations at runtime using the new user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three.

This is directly integrated with the available tools of the Toolbar.

Preview Collision Detection for Axis Annotations

Ability for axis annotations to automatically detect collisions and truncate to fit better. To enable this feature you must set the following properties:

• ShouldAvoidAnnotationCollisions
• ShouldAutoTruncateAnnotations

igniteui-react-maps (Geographic Map)

• Azure Map Imagery is now RTM.

Bug Fixes

19.3.0 (October 2025)

New Components

• Added IgrChat component

igniteui-react-grids (Grids)

• IgrGrid, IgrTreeGrid, IgrHierarchicalGrid

• Introduced a new cell merging feature that allows you to configure and merge cells in a column based on same data or other custom condition, into a single cell.

  It can be enabled on the individual columns:

        <IgrColumn field="field" merge={true}></IgrColumn>

The merging can be configured on the grid level to apply either:

• onSort - only when the column is sorted.
• always - always, regardless of data operations.

        <IgrGrid cellMergeMode="always">
        </IgrGrid>

The default cellMergeMode is onSort.

The functionality can be modified by setting a custom mergeStrategy on the grid, in case some other merge conditions or logic is needed for a custom scenario.

It’s possible also to set a mergeComparer on the individual columns, in case some custom handling is needed for a particular data field.

• Added ability to pin individual columns to a specific side (start or end of the grid), so that you can now have pinning from both sides. This can be done either declaratively by setting the pinningPosition property on the column:

        <IgrColumn field="Col1" pinned={true} pinningPosition="pinningPosition">
        </IgrColumn>

pinningPosition = ColumnPinningPosition.End;

Or with the API, via optional parameter:

grid.pinColumn('Col1', 0, ColumnPinningPosition.End);
grid.pinColumn('Col2', 0, ColumnPinningPosition.Start);

If property pinningPosition is not set on a column, the column will default to the position specified on the grid’s pinning options for columns.

• Sorting improvements
  • Improved sorting algorithm efficiency using Schwartzian transformation. This is a technique, also known as decorate-sort-undecorate, which avoids recomputing the sort keys by temporarily associating them with the original data records.
  • Refactored sorting algorithms from recursive to iterative.
• Groupby improvements
  • Refactored grouping algorithm from recursive to iterative.
  • Optimized grouping operations.

Bug Fixes

19.2.2 (October 2025)

igniteui-react-maps (Geographic Map)

Preview Azure Map Imagery Support

The IgrIgbGeographicMap now supports Azure-based map imagery, allowing developers to display detailed, dynamic maps across multiple application types. You can combine multiple map layers, visualize geographic data, and create interactive mapping experiences with ease.

Note: Support for Bing Maps imagery is being phased out. Existing enterprise keys can still be used to access Bing Maps, ensuring your current applications continue to function while you transition to Azure maps.

Explore some of the publicly available Azure maps here.

igniteui-react-charts (Charts)

Preview New Axis Label Events

The following events have been added to the IgrIgbDataChart to allow you to detect different operations on the axis labels:

• LabelMouseDown
• LabelMouseUp
• LabelMouseEnter
• LabelMouseLeave
• LabelMouseMove
• LabelMouseClick

Preview Companion Axis

Added CompanionAxis properties to the X and Y axis that allow you to quickly create a clone of an existing axis. When enabled using the CompanionAxisEnabled property, this will default the cloned axis to the opposite position of the chart and you can then configure that axes’ properties.

Preview RadialPieSeries Inset Outlines

There is a new property called UseInsetOutlines to control how outlines on the IgrRadialPieSeries are rendered. Setting this value to true will inset the outlines within the slice shape, whereas a false (default) value will place the outlines half-in half-out along the edge of the slice shape.

Breaking Changes

• A fix was made due to an issue where the PlotAreaPosition and ChartPosition properties on IgrChartMouseEventArgs class were reversed. This will change the values that PlotAreaPosition and ChartPosition return.

igniteui-react-grids (Grids)

Preview Cell Suffix Content

Added support for suffix content within the cells that allows you to add additional text or icons to the end of the cell value and style it. The full list of added properties for the cell suffix content is listed below and is available on the IgrDataGridColumn and CellInfo class:

• SuffixText
• SuffixTextColor
• SuffixTextFont
• SuffixIconName
• SuffixIconCollectionName
• SuffixIconStroke
• SuffixIconFill
• SuffixIconViewBoxLeft
• SuffixIconViewBoxTop
• SuffixIconViewBoxWidth
• SuffixIconViewBoxHeight
• TextDecoration

Please note that the maximum size available for the icons is 24x24. You can provide an icon that is larger or smaller than this, but you will need to configure the viewbox settings in order to properly scale it to fit in the 24x24 space so it is fully visible.

Bug Fixes

Enhancements

IgrBulletGraph

• Preview Added new LabelsVisible property

Charts

• New properties added to the DataToolTipLayer, ItemToolTipLayer, and CategoryToolTipLayer to aid in styling: ToolTipBackground, ToolTipBorderBrush, and ToolTipBorderThickness

• New properties added to the DataLegend to aid in styling: ContentBackground, ContentBorderBrush, and ContentBorderThickness. The ContentBorderBrush and ContentBorderThickness default to transparent and 0 respectively, so in order to see these borders, you will need to set these properties.

• Added a new property to IgrChartMouseEventArgs called WorldPosition that provides the world relative position of the mouse. This position will be a value between 0 and 1 for both the X and Y axis within the axis space.

• Added HighlightingFadeOpacity to IgrSeriesViewer and IgrDomainChart. This allows you to configure the opacity applied to highlighted series.

• Expose CalloutLabelUpdating event for domain charts.

IgrDataGrid

• Added new property called stopPropagation to DataGrid which prevents mouse events from bubbling to parent elements

IgrLinearGauge

• Preview Added new LabelsVisible property

19.2.1 (September 2025)

Enhancements

• Added enhancement DatePicker should update calendar view on typing, as Date Range Picker 1818

Bug Fixes

19.2.0 (August 2025)

• Form associated custom elements now expose the ig-invalid custom state for styling with the :state() CSS selector. See here for additional information
• Form associated custom elements validity behavior. Now elements will try to mimic :user-invalid, and won’t apply invalid styles unless interacted through the UI or through a form requestSubmit()/reset() invocation.

Bug Fixes

19.1.0 (July 2025)

• New Component - Date Range Picker

Breaking Changes

File Input

• onChange & onCancel events detail now returns the underlying component files property.

Tooltip

• Tooltip events will no longer return its anchor target in its detail property

Behavioral Changes

Tooltip

• Behavioral change: Tooltip default placement is ‘bottom’ now.
• Behavioral change: Tooltip will not render an arrow indicator by default unless with-arrow is set.

Enhancements

• Updated the readonly styles of most form associated components across all themes to better signify when a component is in a readonly state.

Bug Fixes

19.0.1 (July 2025)

Bug Fixes

igniteui-react-charts (Charts)

• Add New MaximumExtent and MaximumExtentPercentage properties for use with axis labels.

19.0.0 (April 2025)

igniteui-react-maps (Geographic Map)

Microsoft Bing Blogs

igniteui-react-charts (Charts)

• Added Preview Chart Data Annotations layers:

  • Data Annotation Band Layer
  • Data Annotation Line Layer
  • Data Annotation Rect Layer
  • Data Annotation Slice Layer
  • Data Annotation Strip Layer

• The Data Tooltip and Data Legend expose Preview LayoutMode property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.

• Preview The DefaultInteraction property of the charts has been updated to include a new enumeration - DragSelect in which the dragged preview Rect will select the points contained within.

• Preview The ValueOverlay and ValueLayer, in addition to the Preview Chart Data Annotations listed above now expose an OverlayText property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the OverlayTextBrush property will configure the color of the overlay text.

• New Trendline Layer series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple TrendlineLayer series types in the chart.

igniteui-react-dashboards (Dashboards)

• The IgrDashboardTile now supports propagating the aggregations from its DataGrid view to the chart visualization such as sorting, grouping, filtering and selection. This is currently supported by binding the IgrDataSource of the IgrDashboardTile to an instance of IgrLocalDataSource.

igniteui-react-grids

Breaking Changes

• The IgrDataGrid & IgrMultiColumnComboBox are now part of the igniteui-react-data-grids package.

Enhancements

Toolbar

• Value layers added from the toolbar now appear on the legend.
• The zoom reset tool has been moved to the zoom drop-down.

Data Pie Chart

• The chart now exposes a GetOthersContext() method. This will return the contents of the “others” slice.

Bug Fixes

19.0.0 (April 2025)

Update Guide

Removed

• IgrCheckboxChangeEventArgs removed, use IgrCheckboxChangeEventArgs instead.
• IgrRadioChangeEventArgs removed, use IgrRadioChangeEventArgs instead.
• IgrRangeSliderValue removed, use IgrRangeSliderValueEventArgs instead.
• ActiveStepChangingArgs removed, use IgrActiveStepChangingEventArgs instead.
• ActiveStepChangedArgs removed, use IgrActiveStepChangedEventArgs instead.

Enhancements

Stepper

Stepper Step’s titlePosition now defaults to auto, instead of being undefined, which has the same behavior.

Tabs

igr-tab panel property is removed.

igr-tab-panel component is removed. The igr-tab now encompasses both the tab header and the tab content in a single component.

18.9.0 (April 2025)

New Components

• TileManager

Enhancements

List

• Added new property on IgrListItem called Selected

Accordion

• Added new events Open and Close

igniteui-react-grids

• All Grids
  • Allow applying initial filtering through FilteringExpressionsTree property

Deprecations

• The clicked event of the Button is deprecated. Use the native onClick handler.

Bug Fixes

18.8.1 (March 2025)

igniteui-react-grids

The following table lists the bug fixes made for the Ignite UI for React toolset for this release:

18.8.0 (February 2025)

igniteui-react-grids

• All Grids
  • Added new disabledSummaries for the columns of the grid, allowing the developers to skip some of the summaries
  • Encapsulate internal grid action button

igniteui-react

• Added new allowSplitterDock property for Dockmanager that allows docking directly in a split.
• Added new useFixedSize property for the IgrSplitPane of Dockmanager that allows new resize behavior.

Enhancements

Toolbar

• Added new groupHeaderTextStyle property to Toolbar and IgrToolPanel. If set, it will apply to all IgrToolActionGroupHeader actions.
• Added new property on IgrToolAction called TitleHorizontalAlignment which controls the horizontal alignment of the title text.
• Added new property on IgrToolActionSubPanel called itemSpacing which controls the spacing between items inside the panel.

Bug Fixes

The following table lists the bug fixes made for the Ignite UI for React toolset for this release:

18.7.7 (January 2025)

• Bug Fixes

igniteui-react-grids

• All Grids
  • Fixed a critical memory leak when components are opened in several duplicate browser tabs.

18.7.6 (December 2024)

igniteui-react-charts (Charts)

DashboardTile Preview

• New Dashboard Tile component is a container control that analyzes and visualizes a bound ItemsSource collection or single point and returns an appropriate data visualization based on the schema and count of the data. This control utilizes a built-in Toolbar component to allow you to make changes to the visualization at runtime, allowing you to see many different visualizations of your data with minimal code.

igniteui-react-charts (Inputs)

• Preview Color Editor can be used as a standalone color picker and is now integrated into Preview ToolAction of Toolbar component to update visualizations at runtime.

18.7.4 (November 2024)

General

• New Carousel component.
• IgrInput
  • Changed change event argument type from IgrComponentDataValueChangedEventArgs to IgrComponentValueChangedEventArgs

18.7.0 (September 2024)

igniteui-react-charts (Charts)

• New Data Pie Chart - The IgrDataPieChart is a new component that renders a pie chart. This component works similarly to the IgrCategoryChart, in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.

• New Proportional Category Angle Axis - New axes for the Radial Pie Series in the IgrDataChart, to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.

• Toolbar

  • New ToolActionCheckboxList A new CheckboxList ToolAction that displays a collection of items with checkboxes for selecting. A grid inside ToolAction CheckboxList grows in height up to 5 items, then a scrollbar is displayed. Requires IgrCheckboxListModule to be registered.

  • New Filtering Support

  • Axis Field Changes New default IconMenu in Toolbar when targeting CategoryChart. Label fields are mapped to the X-axis and Value fields are mapped to the Y-axis. Target chart reacts in realtime to changes made. IconMenu is hidden when chart has no ItemsSource set.

igniteui-react

• New Banner component.
• New DatePicker component.
• New IgrDivider component.
• Added support for native events to all components.
• IgrIcon
  • Added setIconRef method. This allows to register and replace icons by SVG files.
  • All components now use icons by reference internally so that it’s easy to replace them without explicitly providing custom templates.
• IgrCombo, IgrDatePicker, IgrDialog, IgrDropdown, IgrExpansionPanel, IgrNavDrawer, IgrToast, IgrSnackbar, IgrSelectComponent
  • Toggle methods show, hide, toggle methods return true now on success, otherwise false.
• IgrButtonComponent, IgrIconButton, IgrCheckbox, IgrSwitch, IgrCombo, IgrDateTimeInput, IgrInput, IgrMaskInput, IgrRadio, IgrSelectComponent, IgrTextarea
  • Deprecated custom focus and blur events. Use the native onFocus and onBlur events instead
• IgrRadioGroup
  • Added Name and Value properties.

Breaking Changes

• Renamed old IgrDatePicker to IgrXDatePicker.
• Removed Form component. Use native form instead.
• Removed size property in favor of the --ig-size CSS custom property for the following components:
  • IgrAvatar, IgrButtonComponent, IgrIconButton, IgrCalendar, IgrChip, IgrDropdown, IgrIcon, IgrInput, IgrList, IgrRating, IgrSnackbar, IgrTabs, IgrTree
• IgrBadge, IgrChip, IgrLinearProgress, IgrCircularProgress
  • Renamed Variant property type to StyleVariant.
• IgrCalendar
  • Renamed WeekStart property type to WeekDays.
• IgrCheckbox, IgrSwitch
  • Changed change event argument type from IgrComponentBoolValueChangedEventArgs to IgrCheckboxChangeEventArgs.
• IgrCombo, IgrSelectComponent
  • Removed positionStrategy, flip, sameWidth properties.
• IgrDateTimeInput
  • Removed maxValue and minValue properties. Use max and min instead.
• IgrDropdown
  • Removed positionStrategy property.
• IgrInput
  • Removed old named maxlength and minlength properties. Use maxLength and minLength.
  • Removed old named readonly and inputmode properties. Use readOnly and inputMode.
  • Changed inputMode type also to string.
• IgrRadio
  • Changed change event argument type from IgrComponentBoolValueChangedEventArgs to IgrRadioChangeEventArgs.
• IgrRangeSlider
  • Removed ariaThumbLower and ariaThumbUpper properties. Use thumbLabelLower and thumbLabelUpper instead.
• IgrRating
  • Renamed readonly property to readOnly.

igniteui-react-grids

• All Grids
  • Added new RowClick event.
• IgrPivotGrid
  • Added sortable property for a IgrPivotDimension.
  • Added horizontal layout. Can be enabled inside the new pivotUI property as rowLayout horizontal.
  • Added row dimension summaries for horizontal layout only. Can be enabled for each IgrPivotDimension by setting horizontalSummary to true.
  • Added horizontalSummariesPosition property to the pivotUI, configuring horizontal summaries position.
  • Added row headers for the row dimensions. Can be enabled inside the new pivotUI property as showHeaders true.
  • Keyboard navigation now can move in to row headers back and forth from any row dimension headers or column headers.
  • Added keyboard interactions for row dimension collapse using ALT + ↑ ↓ ← → arrows and row headers sorting using CTRL + ↑ ↓ arrows.

Breaking Changes

• All Grids
  • IgrRowIsland
  • Removed displayDensity deprecated property.
  • Renamed actualColumns, contentColumns properties to actualColumnList and contentColumnList. Use columns or columnList property to get all columns now.
  • Renamed rowDelete and rowAdd event argument type to IgrRowDataCancelableEventArgs.
  • Renamed contextMenu event argument type to IgrGridContextMenuEventArgs.
  • Removed IgrGridEditEventArgs, IgrGridEditDoneEventArgs, IgrPinRowEventArgs events rowID and primaryKey properties. Use rowKey instead.
• IgrPivotGrid
  • removed showPivotConfigurationUI property. Use pivotUI and set inside it the new showConfiguration option.
• IgrColumn
  • Removed movable property. Use Grid’s moving property now.
  • Removed columnChildren property. Use childColumns instead.
• IgrColumnGroup
  • Removed children property. Use childColumns instead.
• IgrPaginator
  • Removed isFirstPageDisabled and isLastPageDisabled properties. Use isFirstPage and isLastPage instead.

18.6.1 (June 2024)

igniteui-react

• IgrInput, IgrTextarea - exposed ValidateOnly to enable validation rules being enforced without restricting user input.
• IgrDropdown - IgrPositionStrategy property is deprecated. The dropdown now uses the Popover API to render its container in the top layer of the browser viewport, making the property obsolete.
• IgrDockManager - IgrSplitPane IsMaximized is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the IsMaximized property of IgrTabGroupPane and/or IgrContentPane instead.

igniteui-react-grids

• DisplayDensity deprecated in favor of the --ig-size CSS custom property. Check out the Grid Size topic for more.

• IgrPivotGrid - Configuration of the component can now be applied correctly.

igniteui-react-charts (Charts)

• Data Legend Grouping & Data Tooltip Grouping - New grouping feature added. The property GroupRowVisible toggles grouping with each series opting in can assign group text via the DataLegendGroup property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.

• Chart Selection - New series selection styling. This is adopted broadly across all category, financial and radial series for IgrCategoryChart and IgrDataChart. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also SelectedSeriesItemsChanged event and SelectedSeriesItems are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.

• Proportional Category Angle Axis - New axes for the Radial Pie Series in the IgrDataChart, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.

• Treemap Highlighting - Now exposes a HighlightingMode property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: Brighten where the highlight will apply to the item that you hover the mouse over only, and FadeOthers where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the HighlightingTransitionDuration property.

• Treemap Percent-based Highlighting - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new HighlightedItemsSource. Can be toggled via HighlightedValuesDisplayMode and styled via FillBrushes.

• Toolbar - New IsHighlighted option for ToolAction for outlining a border around specific tools of choice.

igniteui-react-gauges (Gauges)

• IgrRadialGauge
  • New label for the highlight needle. HighlightLabelText and HighlightLabelSnapsToNeedlePivot and many other styling related properties for the HighlightLabel were added.

18.6.0 (March 2024)

igniteui-react-charts

• New Data Filtering via the InitialFilter property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data.

• RadialChart

  • New Label Mode The IgrCategoryAngleAxis for the now exposes a LabelMode property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the Center enum, or use the new mode, ClosestPoint, which will bring the labels closer to the circular plot area.

igniteui-react-grids

• New IgrHierarchicalGrid component

igniteui-react-gauges

• IgrRadialGauge
  • New title/subtitle properties. TitleText, SubtitleText will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as TitleFontSize, TitleFontFamily, TitleFontStyle, TitleFontWeight and TitleExtent. Finally, the new TitleDisplaysValue will allow the value to correspond with the needle’s position.
  • New OpticalScalingEnabled and OpticalScalingSize properties for the IgrRadialGauge. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this topic
  • New highlight needle was added. HighlightValue and HighlightValueDisplayMode when both are provided a value and ‘Overlay’ setting, this will make the main needle to appear faded and a new needle will appear.
• IgrLinearGauge
  • New highlight needle was added. HighlightValue and HighlightValueDisplayMode when both are provided a value and ‘Overlay’ setting, this will make the main needle to appear faded and a new needle will appear.
• IgrBulletGraph
  • The Performance bar will now reflect a difference between the value and new HighlightValue when the HighlightValueDisplayMode is applied to the ‘Overlay’ setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar’s appearance will appear faded to the assigned value, illustrating the performance in real-time.

igniteui-react

• New IgrTextarea component
• New IgrButtonGroup component
• IgrDockManager
  • New ProximityDock property. If enabled, docking indicators are not visible and the end user can dock the dragged pane by dragging it close to the target pane edges.
  • New ContainedInBoundaries property. Determines whether the floating panes are kept inside the Dock Manager boundaries. Defaults to false.
  • New ShowPaneHeaders property. Determines whether pane headers are only shown on hover or always visible. Defaults to always.
• IgrInput, IgrMaskInput, IgrDateTimeInput, IgrRating
  • Readonly has been renamed to ReadOnly
• IgrInput
  • Maxlength has been renamed to MaxLength
  • Minlength has been renamed to MinLength
• IgrTree
  • Added toggleNodeOnClick property that determines whether clicking over a node will change its expanded state or not. Defaults to false.
• IgrRating
  • allowReset added. When enabled selecting the same value will reset the component. Behavioral change - In previous releases this was the default behavior of the rating component. Make sure to set allowReset if you need to keep this behavior in your application.
• Select, IgrDropdown
  • exposed selectedItem, items and groups getters

Deprecations

• The Form component has been deprecated. Please, use the native form element instead.

• The size property and attribute have been deprecated for all components. Use the --ig-size CSS custom property instead. The following example sets the size of the avatar component to small:

  .avatar {
      --ig-size: var(--ig-size-small);
  }

• IgrDateTimeInput
  • MinValue and MaxValue properties have been deprecated. Please, use Min and Max instead.
• IgrRangeSlider
  • AriaLabelLower and AriaLabelUpper properties have been deprecated. Please, use ThumbLabelLower and ThumbLabelUpper instead.

Removed

• Removed our own dir attribute which shadowed the default one. This is a non-breaking change.
• IgrSlider - ariaLabel shadowed property. This is a non-breaking change.
• IgrCheckbox - ariaLabelledBy shadowed attribute. This is a non-breaking change.
• IgrSwitch - ariaLabelledBy shadowed attribute. This is a non-breaking change.
• IgrRadio - ariaLabelledBy shadowed attribute. This is a non-breaking change.

18.5.0 (January 2024)

igniteui-react-charts (Charts)

• Chart Highlight Filter - The IgrCategoryChart and IgrDataChart now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.

18.4.0 (December 2023)

igniteui-react-grids (Grid)

• Added New Features - State Persistence

18.3.0 (October 2023)

igniteui-react-grids - Toolbar - Preview

• Save tool action has been added to save the chart to an image via the clipboard.

• Vertical orientation has been added via the toolbar’s Orientation property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully.

• Custom SVG icons support was added via the toolbar’s renderImageFromText method, further enhancing custom tool creation.

• Grid - This is a new fully functional cross-platform grid and includes features like filtering, sorting, templates, row selection, row grouping, row pinning and movable columns.

Deprecated Components

DataGrid - The DataGrid is deprecated, please use Grid

18.2.0 (June 2023)

New Components

• Preview Toolbar - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our IgrDataChart or IgrCategoryChart components. You’ll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.

igniteui-react-charts (Charts)

• ValueLayer - A new series type named the IgrValueLayer is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the IgrCategoryChart and IgrFinancialChart by adding to the new ValueLines collection.

• It is now possible to apply a dash array to the different parts of the series of the IgrDataChart. You can apply this to the series plotted in the chart, the gridlines of the chart, and the trendlines of the series plotted in the chart.

18.1.0 (November 2022)

Added significant improvements to default behaviors, and refined the Category Chart API to make it easier to use. These new chart improvements include:

• Responsive layouts for horizontal label rotation based on browser / screen size.
• Enhanced rendering for rounded labels on all platforms.
• Added marker properties to StackedFragmentSeries.
• Added ShouldPanOnMaximumZoom property.
• New Category Axis Properties:
  • ZoomMaximumCategoryRange
  • ZoomMaximumItemSpan
  • ZoomToCategoryRange
  • ZoomToItemSpan
• New Chart Aggregation API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data:
  • InitialSortDescriptions
  • InitialSorts
  • SortDescriptions
  • InitialGroups
  • InitialGroupDescriptions
  • GroupDescriptions
  • InitialSummaries
  • InitialSummaryDescriptions
  • SummaryDescriptions
  • InitialGroupSortDescriptions
  • GroupSorts
  • GroupSortDescriptions

Chart Aggregation will not work when using IncludedProperties | ExcludedProperties. These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.

igniteui-react-grids (Data Grid)

• Changed IgrColumn to IgrDataGridColumn
• Changed GridCellEventArgs to IgrDataGridCellEventArgs
• Changed GridSelectionMode to IgrDataGridSelectionMode
• Changed SummaryOperand to DataSourceSummaryOperand

16.16.0 (June 2022)

igniteui-react-charts (Charts)

• Added the highly-configurable DataLegend component, which works much like the Legend, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
• Added the highly-configurable DataToolTip which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
• Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the IsTransitionInEnabled property to true. From there, you can set the TransitionInDuration property to determine how long your animation should take to complete and the TransitionInMode to determine the type of animation that takes place.
• Added AssigningCategoryStyle event, is now available to all series in IgrDataChart. This event is handled when you want to conditionally configure aspects of the series items such as Fill background-color and highlighting.
• New AllowedPositions enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example TopLeft, TopRight, BottomLeft or BottomRight.
• New corner radius properties added for Annotation Layers; used to round-out the corners of each of the callouts. Note, a corner radius has now been added by default.
  • CalloutCornerRadius for CalloutLayer
  • AxisAnnotationBackgroundCornerRadius for FinalValueLayer
  • XAxisAnnotationBackgroundCornerRadius and YAxisAnnotationBackgroundCornerRadius for CrosshairLayer
• New HorizontalViewScrollbarMode and VerticalViewScrollbarMode enumeration to enable scrollbars in various ways. When paired with IsVerticalZoomEnabled or IsHorizontalZoomEnabled, you’ll be able to persist or fade-in and out the scrollbars along the axes to navigate the chart.
• New FavorLabellingScaleEnd, determines whether the axis should favor emitting a label at the end of the scale. Only compatible with numeric axes (e.g. IgrNumericXAxis, IgrNumericYAxis, PercentChangeAxis).
• New IsSplineShapePartOfRange determines whether to include the spline shape in the axis range requested of the axis.
• New XAxisMaximumGap, determines the maximum allowed value for the plotted series when using XAxisGap. The gap determines the amount of space between columns or bars of plotted series.
• New XAxisMinimumGapSize, determines the minimum allowed pixel-based value for the plotted series when using XAxisGap to ensure there is always some spacing between each category.

igniteui-react-grids (Data Grid)

Added New Feature - Row Paging which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data.

16.15.1 (December 2021)

igniteui-react-grids (Data Grid)

Data Grid

• Added ValueMultiField, of type string[], in the IgrComboBoxColumn to be used when your items in the drop down contain a key that consists of multiple fields.

• Changed ValueField property from type string[] to string.

igniteui-react-inputs (Inputs)

Date Picker

• Changed ValueChanged event to SelectedValueChanged.

Multi-Column ComboBox

• Changed TextChanged event to TextValueChanged.
• Changed ValueChanged event to SelectedValueChanged.

16.15.0 (November 2021)

igniteui-react-charts (Charts)

This release introduces a few improvements and simplifications to visual design and configuration options for the geographic map and all chart components.

• Changed YAxisLabelLocation property’s type to YAxisLabelLocation from AxisLabelLocation in IgrFinancialChart and IgrCategoryChart
• Changed XAxisLabelLocation property’s type to XAxisLabelLocation from AxisLabelLocation in IgrFinancialChart
• Added XAxisLabelLocation property to IgrCategoryChart
• Added support for representing geographic series of IgrGeographicMap in a legend
• Added crosshair lines by default in IgrFinancialChart and IgrCategoryChart
• Added crosshair annotations by default in IgrFinancialChart and IgrCategoryChart
• Added final value annotation by default in IgrFinancialChart
• Added new properties in Category Chart and Financial Chart:
  • CrosshairsLineThickness and other properties for customizing crosshairs lines
  • CrosshairsAnnotationXAxisBackground and other properties for customizing crosshairs annotations
  • FinalValueAnnotationsBackground and other properties for customizing final value annotations
  • AreaFillOpacity that allow changing opacity of series fill (e.g. Area chart)
  • MarkerThickness that allows changing thickness of markers
• Added new properties in Category Chart, Financial Chart, Data Chart, and Geographic Map:
  • MarkerAutomaticBehavior that allows which marker type is assigned to multiple series in the same chart
  • LegendItemBadgeShape for setting badge shape of all series represented in a legend
  • LegendItemBadgeMode for setting badge complexity on all series in a legend
• Added new properties in Series in Data Chart and Geographic Map:
  • LegendItemBadgeShape for setting badge shape on specific series represented in a legend
  • LegendItemBadgeMode for setting badge complexity on specific series in a legend
• Changed default vertical crosshair line stroke from #000000 to #BBBBBB in category chart and series
• Changed shape of markers to circle for all series plotted in the same chart. This can be reverted by setting chart’s MarkerAutomaticBehavior property to SmartIndexed enum value
• Simplified shapes of series in chart’s legend to display only circle, line, or square. This can be reverted by setting chart’s LegendItemBadgeMode property to MatchSeries enum value
• Changed color palette of series and markers displayed in all charts to improve accessibility

igniteui-react-grids (Data Grid)

• New Features Added:
  • Filter Row
  • Load/Save Layout Customizations
  • GroupBy Area for column grouping
  • Cell Merging
• New API:
  • Added SelectionChanged event. Used to detect changes on selection interactions e.g. Multiple row selection.
• Breaking Changes:
  • Changed grid’s SummaryScope property’s type to SummaryScope from DataSourceSummaryScope
  • Changed GroupHeaderDisplayMode property’s type to GroupHeaderDisplayMode from DataSourceSectionHeaderDisplayMode

16.14.0 (April 2021)

igniteui-react-charts (Charts)

This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. IgrDataChart, IgrCategoryChart, and IgrFinancialChart.

• Changed Bar/Column/Waterfall series to have square corners instead of rounded corners
• Changed Scatter High Density series’ colors for heat min property from #8a5bb1 to #000000
• Changed Scatter High Density series’ colors for heat max property from #ee5879 to #ee5879
• Changed Financial/Waterfall series’ NegativeBrush and NegativeOutline properties from #C62828 to #ee5879
• Changed marker’s thickness to 2px from 1px
• Changed marker’s fill to match the marker’s outline for IgrPointSeries, IgrBubbleSeries, IgrScatterSeries, IgrPolarScatterSeries. You can use set MarkerFillMode property to Normal to undo this change
• Compressed labelling for the IgrTimeXAxis and IgrOrdinalTimeXAxis
• New Marker Properties:
  • series.MarkerFillMode - Can be set to MatchMarkerOutline so the marker depends on the outline
  • series.MarkerFillOpacity - Can be set to a value 0 to 1
  • series.MarkerOutlineMode - Can be set to MatchMarkerBrush so the marker’s outline depends on the fill brush color
• New Series Property:
  • series.OutlineMode - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series
• New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the ComputedPlotAreaMarginMode, listed below, will automatically set the margin when markers are enabled. The others are designed to specify a Double to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart:
  • chart.PlotAreaMarginLeft
  • chart.PlotAreaMarginTop
  • chart.PlotAreaMarginRight
  • chart.PlotAreaMarginBottom
  • chart.ComputedPlotAreaMarginMode
• New Highlighting Properties
  • chart.HighlightingMode - Sets whether hovered or non-hovered series to fade, brighten
  • chart.HighlightingBehavior - Sets whether the series highlights depending on mouse position e.g. directly over or nearest item
  • Note, in previous releases the highlighting was limited to fade on hover.
• Added Highlighting Stacked, Scatter, Polar, Radial, and Shape series:
• Added Annotation layers to Stacked, Scatter, Polar, Radial, and Shape series:
• Added support for overriding the data source of individual stack fragments within a stacked series
• Added custom style events to Stacked, Scatter, Range, Polar, Radial, and Shape series
• Added support to automatically sync the vertical zoom to the series content
• Added support to automatically expanding the horizontal margins of the chart based on the initial labels displayed
• Redesigned color palette of series and markers:

for example:

Chart Legend

• Added horizontal Orientation property to ItemLegend that can be used with Bubble, Donut, and Pie Chart
• Added LegendHighlightingMode property - Enables series highlighting when hovering over legend items

igniteui-react-maps (GeoMap)

• Added support for wrap around display of the map (scroll infinitely horizontally)
• Added support for shifting display of some map series while wrapping around the coordinate origin
• Added support for highlighting of the shape series
• Added support for some annotation layers for the shape series

igniteui-react-grids (Data Grid)

• Added EditOnKeyPress aka Excel-style Editing, instantly begin editing when typing.
• Added EditModeClickAction property - By default double-clicking is required to enter edit mode. This can be set to SingleClick to allow for edit mode to occur when selecting a new cell.
• Added IgrEnterKeyBehaviors property - aka Excel-style Navigation (Enter Behavior) – controls the behavior of the enter key, e.g. Options are (none, edit, move up, down, left, right)
• Added IgrEnterKeyBehaviorAfterEdit property - While in edit-mode, this property controls when enter is pressed, e.g. Options are (moves to the cell below, above, right, left)
• Added SelectAllRows - method.
• Added Row Range Selection - With GridSelectionMode property set to MultipleRow the following new functionality is now included:
  • Click and drag to select rows
  • SHIFT and click to select multiple rows.
  • SHIFT and press the ↑ + ↓ arrow keys to select multiple rows.
• Pressing space bar toggles selection of active row via GridSelectionMode property set to MultipleRow or SingleRow
• Added Column Summaries to Column Options Dialog.

igniteui-react-inputs (Inputs)

Date Picker

• ShowTodayButton - Toggles Today button visibility
• Label - Adds a label above the date value
• Placeholder property - adds custom text when no value is selected
• FormatString - Customize input date string e.g. (yyyy-MM-dd)
• DateFormat - Specifies whether to display selected dates as LongDate or ShortDate
• FirstDayOfWeek - Specifies first day of week
• FirstWeekOfYear - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week)
• ShowWeekNumbers - Toggles Week number visibility
• MinDate & MaxDate - Date limits, specifying a range of available selectable dates.
• Added Accessibility

16.12.3 (November 2020)

igniteui-react-grids (Data Grid)

• Changed name of PropertyPath

The data grid component property propertyPath has been renamed to field. This applies to all Column types, GroupDescription, SortDescription & SummaryDescription.

 <IgrTextColumn field="Name"/>

import { IgrColumnSummaryDescription, IgrColumnSortDescription, IgrColumnGroupDescription } from 'igniteui-react-data-grids'
const productCount = new IgrColumnSummaryDescription();
productCount.field = "ProductName";
const colSortDesc = new IgrColumnSortDescription();
colSortDesc.field = "UnitsInStock";
const income = new IgrColumnGroupDescription();
income.field = "Income";

16.12.2 (April 2020)

igniteui-react-grids (Data Grid)

• Changed Name of Live Grid

The data grid component and it’s corresponding module’s names have changed from “LiveGrid” to “DataGrid”.

The new code for importing the grid and it’s corresponding module is:

import { IgrDataGrid } from "igniteui-react-data-grids";
import { IgrDataGridModule } from 'igniteui-react-data-grids';

• Required Peer Dependency for Data Grid

The data grid component requires the “inputs” package.

npm install --save igniteui-react-inputs

16.11.7

• Changed Import Statements

Import statements have been simplified to use just package names instead of full paths to API classes and enums.

• Code After Changes

Now, you need to use just package names instead of full paths to API classes and enums.

Please also note that the name of the Data Grid component and its corresponding modules have also changed.

// gauges:
import { IgrLinearGauge } from "igniteui-react-gauges";
import { IgrLinearGaugeModule } from "igniteui-react-gauges";
import { IgrLinearGraphRange } from "igniteui-react-gauges";
import { IgrRadialGauge } from 'igniteui-react-gauges';
import { IgrRadialGaugeModule } from 'igniteui-react-gauges';
import { IgrRadialGaugeRange } from 'igniteui-react-gauges';
import { SweepDirection } from 'igniteui-react-core';
// charts:
import { IgrFinancialChart } from 'igniteui-react-charts';
import { IgrFinancialChartModule } from 'igniteui-react-charts';
import { IgrDataChart } from 'igniteui-react-charts';
import { IgrDataChartCoreModule } from 'igniteui-react-charts';
// maps:
import { IgrGeographicMap } from "igniteui-react-maps";
import { IgrGeographicMapModule } from "igniteui-react-maps";
// grids:
import { IgrLiveGrid } from "igniteui-react-data-grids";
import { IgrLiveGridModule } from 'igniteui-react-data-grids';

• Code Before Changes

Before, you had to import using full paths to API classes and enums:

// gauges:
import { IgrLinearGauge } from "igniteui-react-gauges/ES5/igr-linear-gauge";
import { IgrLinearGaugeModule } from "igniteui-react-gauges/ES5/igr-linear-gauge-module";
import { IgrLinearGraphRange } from "igniteui-react-gauges/ES5/igr-linear-graph-range";

import { IgrRadialGauge } from "igniteui-react-gauges/ES5/igr-radial-gauge";
import { IgrRadialGaugeModule } from "igniteui-react-gauges/ES5/igr-radial-gauge-module";
import { IgrRadialGaugeRange } from "igniteui-react-gauges/ES5/igr-radial-gauge-range";
import { SweepDirection } from "igniteui-react-core/ES5/SweepDirection";

// charts:
import { IgrFinancialChart } from "igniteui-react-charts/ES5/igr-financial-chart";
import { IgrFinancialChartModule } from "igniteui-react-charts/ES5/igr-financial-chart-module";
import { IgrDataChart } from "igniteui-react-charts/ES5/igr-data-chart";
import { IgrDataChartCoreModule } from "igniteui-react-charts/ES5/igr-data-chart-core-module";

// maps:
import { IgrGeographicMap } from "igniteui-react-maps/ES5/igr-geographic-map";
import { IgrGeographicMapModule } from "igniteui-react-maps/ES5/igr-geographic-map-module";

// grids:
import { IgrLiveGrid } from "igniteui-react-data-grids/ES5/igr-live-grid";
import { IgrLiveGridModule } from 'igniteui-react-data-grids/ES5/igr-live-grid-module';