Essential Studio® for React Release Notes

v31.1.17
September 5, 2025

Common

Breaking Changes

  • The separate Material 3 Dark theme CSS file has been removed. Applications should now use the unified Material 3 theme, which dynamically supports both light and dark modes to simplify theme management.

Button

Breaking Changes

  • The IconPosition enum in the Button component has been renamed to Position enum.
  • The Danger theme color in the Button component has been renamed to Error.
  • The Flat variant style in the Button component has been renamed to Standard.
  • The togglable method in the Button component has been renamed to toggleable.

Chart

The Chart component is used to visualize data with interactivity and offers extensive customization options for configuring data presentation. All chart elements are rendered using Scalable Vector Graphics (SVG), ensuring crisp visuals and smooth performance across devices. Designed for modern React applications, it supports a wide range of chart types and interactive features, making it suitable for dynamic dashboards and data-driven interfaces.

Key features

  • High Performance: Optimized to render large datasets with minimal lag, enabling smooth interactions and fast updates.
  • Comprehensive Chart Types: Supports 10 essential chart types including line, bar, area, spline, and scatter charts.
  • Flexible Axis Support: Offers multiple axis types—numeric, datetime, logarithmic, and categorical—for diverse data plotting needs.
  • Axis Features: Supports multiple axes, inverted axis, multiple panes, opposed position, strip lines, and smart labels for enhanced layout control.
  • Data Labels and Markers: Supports data labels and markers to annotate and highlight specific data points for better clarity.
  • Legend: Displays legends to provide additional context for chart series, with support for paging and customization.
  • Rich Interactivity: Includes tooltips, zooming, panning, clickable legends, and smooth animations to enhance engagement.
  • Animation Support: Delivers visually appealing transitions and effects that improve data storytelling.
  • Accessibility & Navigation: Provides keyboard navigation and screen reader support for inclusive experiences.
  • Customization Options: Enables configuration of data points, series styles, and UI behaviors to match specific visualization requirements.

Checkbox

Breaking Changes

  • The labelPlacement property type has been changed from LabelPlacement ('Before' | 'After') to Position ('Left' | 'Right' | 'Top' | 'Bottom').

Chip

Breaking Changes

  • The DeleteEvent interface has been renamed to ChipDeleteEvent.
  • The danger color option in ChipColor has been renamed to error.

ChipList

Breaking Changes

  • The chips property type has been changed from ChipData[] to string[] | ChipItemProps[].
  • The ChipDeleteEvent interface has been renamed to ChipListDeleteEvent.
  • The ChipSelectEvent interface has been renamed to ChipListSelectEvent.
  • The getSelectedChips() method return type has been updated to return string[] | ChipItemProps[].

Context Menu

Breaking Changes

  • The onSelect event callback now uses ContextMenuSelectEvent type instead of the MenuEvent type for better type safety and component-specific event handling.
  • The MenuAnimationProp interface has been renamed to MenuAnimationProps.
  • The offset property type has been changed from { left: number; top: number } to OffsetPosition.

Data Grid

The Syncfusion® React Data Grid component is a fast and feature-rich UI component built specifically for React. It enables high-performance data display in tabular formats and integrates smoothly into React applications. Supporting both local and remote data sources, it efficiently manages complex data operations while maintaining responsiveness and flexibility.

Key features

  • Editing : Perform inline CRUD operations (add, edit, and delete) using toolbar actions, built-in methods, or keyboard shortcuts for a seamless editing experience.
  • Paging : Efficiently handle large datasets with built-in pagination. Supports both client-side and server-side paging strategies to optimize performance.
  • Filtering : Includes a filter bar with customizable UI for selected columns. Features numeric input fields for number columns, date pickers for date columns, and text boxes that support both string and numeric expressions.
  • Sorting : Sort data by clicking column headers, with support for multi-column sorting.
  • Searching : Quickly search data using a toolbar-integrated search box.
  • Toolbar : Customizable toolbar with built-in actions such as Add, Edit, Delete, and Search.
  • Customization : Supports custom styling, icons, images, and component injection within content and header cells to enhance flexibility and visual presentation.
  • Accessibility and Keyboard : Fully compliant with WCAG 2.1 standards, offering robust screen reader and keyboard navigation support.
  • Globalization : Automatically adapts dates, numbers, and text formats for global audiences.

Dialog

The Dialog component displays content in a modal or non-modal overlay above the main interface, requiring user attention or interaction. It provides a flexible way to create alerts, confirmation dialogs, forms, or any content that needs to be prominently displayed.

Explore the demo here

Key features

  • Modal and Non-Modal Modes: Choose between modal dialogs that prevent interaction with the underlying content or non-modal dialogs that allow background interaction.
  • Positioning: Place dialogs in 9 different positions (LeftTop, CenterTop, RightTop, LeftCenter, Center, RightCenter, LeftBottom, CenterBottom, RightBottom) or use custom coordinates.
  • Draggable: Enable drag functionality to reposition dialogs by their header area with configurable drag boundaries.
  • Resizable: Allow users to resize dialogs by dragging edges or corners.
  • Header and Footer Support: Structured layout with customizable header and footer sections for titles, actions, and navigation elements.
  • Full Screen Mode: Expand dialogs to fill the entire viewport while maintaining the header, content, and footer structure.
  • Custom Close Icon: Configure close icons with default, custom, or no close icon options.
  • Target Container: Render dialogs within specific containers rather than the default document body.

Breaking Changes

  • The IconPosition enum in the Dropdown Button component has been renamed to Position enum.
  • The Danger theme color in the Dropdown Button component has been renamed to Error.
  • The Flat variant style in the Dropdown Button component has been renamed to Standard.

Form

The Form component provides comprehensive form validation and state management functionality with built-in validation rules and field interaction tracking. It offers a powerful way to handle complex forms with real-time validation, error handling, and submission management.

Explore the demo here

Key features

  • Built-in Validation Rules: Comprehensive set of 15+ validation rules including required, email, URL, date, number, length constraints, ranges, and custom pattern matching.
  • Real-time Validation: Support for immediate validation on field changes or validation on blur/submit.
  • State Management: Complete form state tracking including field values, errors, touched/visited states, and modification tracking.
  • Custom Validation: Support for custom validation functions with full access to field values for complex business logic validation.
  • Cross-field Validation: EqualTo validation for comparing field values such as password confirmation fields.
  • Initial Values: Support for pre-populated form fields with validation on initial load.

Message

Breaking Changes

  • The Variant enum value has been changed from Text to Standard. The available variants are now: Standard (previously Text), Outlined, Filled.

Features

  • CSS for the Message component has been optimized.

NumericTextBox

Breaking Changes

  • The labelMode property type has been changed from FloatLabelType to LabelMode for better type consistency across input components.

Breaking Changes

  • The isOpen property of Popup component has been renamed to open for better consistency with React standard.

Split Button

Breaking Changes

  • The IconPosition enum in the Split Button component has been renamed to Position enum.
  • The Danger theme color in the Split Button component has been renamed to Error.
  • The Flat variant style in the Split Button component has been renamed to Standard.

TextArea

Breaking Changes

  • The labelMode property type has been changed from FloatLabelType to LabelMode for better type consistency across input components.

TextBox

Breaking Changes

  • The labelMode property type has been changed from FloatLabelType to LabelMode for better type consistency across input components.

Toast

Breaking Changes

  • The PositionAxis interface property names have been changed: X has been renamed to xAxis and Y has been renamed to yAxis.
  • The buttons property has been renamed to actions for rendering template content at the bottom of the Toast.
  • The animation configuration have been updated: AnimationOptions types for show and hide animations have been changed to ToastAnimationProps.