DevExtreme React - What’s New in v23.2

Look & Feel

New Fluent Theme

DevExtreme v23.2 ships with a new Microsoft Fluent inspired web theme.

The theme includes the following capabilities:

• Accessible components with contrast color support.
• Two color schemes: Classic and SaaS.
• Two size modes: Standard and Compact.
• New icon package.

ThemeBuilder Enhancements

We introduced numerous enhancements to the DevExtreme ThemeBuilder tool. Enhancements include:

• Integration of the new Fluent theme.
• Advanced ThemeBuilder settings were expanded to incorporate all possible states of Button and ButtonGroup.
• Added a new set of variables for editors.

Material Theme Enhancements

This release includes the following changes to Material theme:

• To address accessibility-related issues, the disabled state for the Button component now includes a higher contrast color combination.
• We updated the appearance of our ButtonGroup component to ensure consistency with Google's Material Design guidelines.
• Different text editor (type) boxes are now the same height. Thanks to higher contrast color combinations, the content of label and placeholder elements are also accessible.
• Multiple changes have been introduced within the DevExtreme Accordion component. The spin icon uses a higher contrast color combination. The component's overall style is more consistent with those outlined in Google's Material Design guidelines.
• To avoid help text overlapping with nearby items, the validation message now uses a contrasting background.
• Two icons were changed to make the overall icon set consistent.
• We changed the Slider's tooltip to make it more consistent with Material guidelines.
• The List component also better matches Material guidelines (no accent colors).
• Our Form was improved to avoid vertical item misalignment between groups.
• Our PivotFieldChooser includes full-fledged DevExtreme font icons (in previous versions, icons were SVG based)

Scheduler

Work Shift Support

In v23.2, the DevExtreme Scheduler introduces an offset display option, allowing you to configure enterprise work day offsets and accommodate work shift variations, time zones, and other related usage scenarios.

Calendar

Multi-Selection of Discrete Days

The new Calendar selectionMode option offers three modes: single, multiple, or range selection.

• single - select a single date.
• multiple - choose multiple dates.
• range - select the first and last dates in a range.

You can set a single date or an array of dates as the initial value. You can also use the selectWeekOnClick option to allow selection of an entire week by clicking on associated week numbers.

Demo

Tabs & TabPanel

Vertical Tabs Orientation

For Tabs, we added a new orientation option that allows you to arrange tabs either horizontally or vertically.

Custom Tabs Position

For TabPanel, our new tabsPosition option allows you to locate tabs on the right, left, top, or bottom of the panel.

Custom Icon Position

Both Tabs and TabPanel now include an iconPosition option, allowing you to define where icons are displayed within Tabs (start, end, top, or bottom position).

Secondary Styling Mode

You can now specify a styling mode for the active tab. The following styling modes are available:

• primary - the width of the underline is fixed.
• secondary - the width of the underline depends on tab content.

Form & Editors

Change Detection (Dirty State)

v23.2 includes the following changes:

• Renamed the reset method to clear for uniformity and introduced a new reset method for editors to maintain reset functionality.
• Deprecated the Form's resetValues method, replacing it with clear, and introduced a new reset method for the entire Form.
• Added the isDirty flag for both editors and Form. isDirty helps detect changes in Form items or editors.

DateRangeBox Support

You can now use editorType: 'dxDateRangeBox' to add our DateRangeBox component to a Form.

'Outside' Label Mode

v23.2 includes a new 'outside' label mode for editors.

DropDownButton — New 'Type' Option

The DevExtreme DropDownButton includes a type option like its Button counterpart.

Accessibility

The following accessibility-related enhancements have been introduced in this release cycle (WCAG and Section 508 standards):

• Data Grid:
  - Improved color contrast.
  - All checker errors (Axe, WAVE, Lighthouse) were fixed.
  - Adaptive rows can now be expanded/collapsed using keyboard navigation.
  - We added the ability to focus on total summary and group footer summary.
  
• We enhanced the reading experience for screen reader users. The following elements are now supported:
  - Modified cells and deleted rows in DataGrid batch edit mode.
  - Delete confirmation messages in DataGrid.
  - Sort header indexes in DataGrid.
  - Items in Lookup.
  - Dialog titles in HtmlEditor.
  - Validation messages in various components, such as DataGrid, HtmlEditor, DropDownBox, NumberBox, DateBox.
  
• Global rework of aria-* attributes.
• Improved keyboard navigation support for multiple components, including enhanced focus in the Calendar component.
• We updated visual focus indication in our Popup and other components.

Performance

Vite Tree Shaking Support

We addressed Vite support restrictions that previously lead to a larger JS bundle size. You no longer need to disable Vite's Tree Shaking feature in your DevExtreme-based JS applications.

Reduce CSS Size

The DevExtreme package includes all Generic and Material themes. We reduced theme set size as follows:

• 30% for Generic themes
• 37% for Material themes
• 34% overall

Demos & TypeScript

React Demos — TypeScript and React Hooks

We migrated our React demo examples to TypeScript, providing you with two choices: JavaScript and TypeScript. Additionally, we made the switch from Class Components to Function Components.

Vue Demos — TypeScript and Vue Composition API

We transferred all our Vue demo code to TypeScript. We also transitioned from Options API to Composition API.

TypeScript Enhancements

• Angular component properties now support literal union types. IntelliSense supplies hints to identify misuse of such types in code.
  
• DevExtreme Angular allows you to specify generic type parameters to define instances of data-aware components like DataGrid.

import { Component, ViewChild } from '@angular/core';
import { DxDataGridComponent } from 'devextreme-angular/ui/data-grid';
import { Employee } from './data';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    @ViewChild(DxDataGridComponent) dataGrid!: DxDataGridComponent<Employee, number>;

    onButtonClick() {
        const selectedRows: Employee[] = this.dataGrid.instance.getSelectedRowData();
    }
}