[WIP] DTS: remove undefined from default value

apps/demos/Demos/Accordion/Overview/Angular/app/app.component.html

@@ -6,6 +6,7 @@
     [multiple]="false"
     [animationDuration]="300"
     [selectedItems]="[companies[0]]"
+    [height]="height"
     id="accordion-container"
   >
     <div *dxTemplate="let company of 'title'">
@@ -43,10 +44,10 @@
   <div class="options">
     <div class="caption">Options</div>
     <div class="option">
-      <dx-check-box
-        text="Multiple enabled"
-        [(value)]="accordion.multiple"
-      ></dx-check-box>
+      <dx-button
+        text="Reset height"
+        (onClick)="onResetClick()"
+      ></dx-button>
     </div>
     <div class="option">
       <dx-check-box

apps/demos/Demos/Accordion/Overview/Angular/app/app.component.ts

@@ -1,8 +1,9 @@
 import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import {
-  DxAccordionModule, DxCheckBoxModule, DxSliderModule, DxTagBoxModule,
+  DxButtonModule, DxCheckBoxModule, DxSliderModule, DxTagBoxModule,
 } from 'devextreme-angular';
+import { DxAccordionModule, type DxAccordionTypes } from 'devextreme-angular/ui/accordion';
 
 import { Company, Service } from './app.service';
 
@@ -24,6 +25,7 @@ if (window && window.config?.packageConfigPaths) {
   preserveWhitespaces: true,
   imports: [
     DxAccordionModule,
+    DxButtonModule,
     DxCheckBoxModule,
     DxSliderModule,
     DxTagBoxModule,
@@ -32,9 +34,15 @@ if (window && window.config?.packageConfigPaths) {
 export class AppComponent {
   companies: Company[];
 
+  height: DxAccordionTypes.Properties['height'] = 500;
+
   constructor(service: Service) {
     this.companies = service.getCompanies();
   }
+
+  onResetClick() {
+    this.height = undefined;
+  }
 }
 
 bootstrapApplication(AppComponent, {

apps/demos/Demos/Accordion/Overview/React/App.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import Accordion, { type AccordionTypes } from 'devextreme-react/accordion';
+import Button from 'devextreme-react/button';
 import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
 import TagBox, { type TagBoxTypes } from 'devextreme-react/tag-box';
 import Slider, { Tooltip, Label, type SliderTypes } from 'devextreme-react/slider';
@@ -16,6 +17,7 @@ const App = () => {
   const [multiple, setMultiple] = useState(false);
   const [collapsible, setCollapsible] = useState(false);
   const [animationDuration, setAnimationDuration] = useState(300);
+  const [height, setHeight] = useState<AccordionTypes.Properties['height']>(400);
 
   const selectionChanged = useCallback((e: AccordionTypes.SelectionChangedEvent) => {
     let newItems = [...selectedItems];
@@ -52,6 +54,7 @@ const App = () => {
       <Accordion
         dataSource={companies}
         collapsible={collapsible}
+        height={height}
         multiple={multiple}
         animationDuration={animationDuration}
         selectedItems={selectedItems}
@@ -63,10 +66,9 @@ const App = () => {
       <div className="options">
         <div className="caption">Options</div>
         <div className="option">
-          <CheckBox
-            text="Multiple enabled"
-            value={multiple}
-            onValueChanged={multipleChanged}
+          <Button
+            text="Reset height"
+            onClick={() => setHeight(undefined)}
           />
         </div>
         <div className="option">

apps/demos/Demos/Accordion/Overview/Vue/App.vue

@@ -8,6 +8,7 @@
       v-model:selected-items="selectedCompanies"
       id="accordion-container"
       item-title-template="itemTitle"
+      :height="height"
     >
       <template #itemTitle="{ data }">
         <CustomTitle :item-data="data"/>
@@ -20,9 +21,9 @@
     <div class="options">
       <div class="caption">Options</div>
       <div class="option">
-        <DxCheckBox
-          v-model:value="multiple"
-          text="Multiple enabled"
+        <DxButton
+          text="Reset height"
+          @click="onResetClick"
         />
       </div>
       <div class="option">
@@ -62,7 +63,8 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import DxAccordion from 'devextreme-vue/accordion';
+import DxAccordion, { type DxAccordionTypes } from 'devextreme-vue/accordion';
+import DxButton from 'devextreme-vue/button';
 import DxTagBox from 'devextreme-vue/tag-box';
 import DxCheckBox from 'devextreme-vue/check-box';
 import DxSlider, { DxTooltip, DxLabel } from 'devextreme-vue/slider';
@@ -74,6 +76,7 @@ import service from './data.ts';
 const multiple = ref(false);
 const collapsible = ref(false);
 const animationDuration = ref(300);
+const height = ref<DxAccordionTypes.Properties['height']>(500);
 const companies = service.getCompanies();
 const selectedCompaniesIds = ref([companies[0].ID]);
 
@@ -89,6 +92,10 @@ const selectedCompanies = computed({
   set: setSelectedCompanies,
 });
 
+const onResetClick = () => {
+  height.value = undefined;
+};
+
 </script>
 <style scoped>
 #accordion {

apps/demos/Demos/Accordion/Overview/jQuery/index.js

@@ -18,6 +18,7 @@ $(() => {
   const accordion = $('#accordion-container').dxAccordion({
     dataSource: accordionItems,
     animationDuration: 300,
+    height: 500,
     collapsible: false,
     multiple: false,
     selectedItems: [accordionItems[0]],
@@ -42,12 +43,10 @@ $(() => {
     },
   });
 
-  $('#multiple-enabled').dxCheckBox({
-    text: 'Multiple enabled',
-    onValueChanged(e) {
-      accordion.option('multiple', e.value);
-      tagBox.option('disabled', !e.value);
-      tagBox.option('value', accordion.option('selectedItems'));
+  $('#multiple-enabled').dxButton({
+    text: 'Reset height',
+    onClick() {
+      accordion.resetOption('height');
     },
   });
 

packages/devextreme-angular/src/ui/accordion/index.ts

@@ -198,10 +198,10 @@ export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent i
 
      */
     @Input()
-    get height(): number | string | undefined {
+    get height(): number | string {
         return this._getOption('height');
     }
-    set height(value: number | string | undefined) {
+    set height(value: number | string) {
         this._setOption('height', value);
     }
 
@@ -587,7 +587,7 @@ export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent i
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
 
      */
-    @Output() heightChange: EventEmitter<number | string | undefined>;
+    @Output() heightChange: EventEmitter<number | string>;
 
     /**
 

packages/devextreme-angular/src/ui/data-grid/nested/column-dxi.ts

@@ -388,10 +388,10 @@ export class DxiDataGridColumnComponent extends CollectionNestedOption {
     }
 
     @Input()
-    get groupIndex(): number | undefined {
+    get groupIndex(): number {
         return this._getOption('groupIndex');
     }
-    set groupIndex(value: number | undefined) {
+    set groupIndex(value: number) {
         this._setOption('groupIndex', value);
     }
 
@@ -599,7 +599,7 @@ export class DxiDataGridColumnComponent extends CollectionNestedOption {
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
 
      */
-    @Output() groupIndexChange: EventEmitter<number | undefined>;
+    @Output() groupIndexChange: EventEmitter<number>;
 
     /**
 

packages/devextreme-angular/src/ui/nested/base/data-grid-column-dxi.ts

@@ -291,10 +291,10 @@ export abstract class DxiDataGridColumn extends CollectionNestedOption {
         this._setOption('groupCellTemplate', value);
     }
 
-    get groupIndex(): number | undefined {
+    get groupIndex(): number {
         return this._getOption('groupIndex');
     }
-    set groupIndex(value: number | undefined) {
+    set groupIndex(value: number) {
         this._setOption('groupIndex', value);
     }
 

packages/devextreme-angular/src/ui/nested/column-dxi.ts

@@ -147,7 +147,7 @@ export class DxiColumnComponent extends DxiDataGridColumn {
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
 
      */
-    @Output() groupIndexChange: EventEmitter<number | undefined>;
+    @Output() groupIndexChange: EventEmitter<number>;
 
     /**
 

packages/devextreme-react/src/data-grid.ts

@@ -489,7 +489,7 @@ type IColumnProps = React.PropsWithChildren<{
   format?: LocalizationFormat;
   formItem?: dxFormSimpleItem;
   groupCellTemplate?: ((cellElement: any, cellInfo: { column: dxDataGridColumn, columnIndex: number, component: dxDataGrid, data: Record<string, any>, displayValue: any, groupContinuedMessage: string, groupContinuesMessage: string, row: dxDataGridRowObject, rowIndex: number, summaryItems: Array<any>, text: string, value: any }) => any) | template;
-  groupIndex?: number | undefined;
+  groupIndex?: number;
   headerCellTemplate?: ((columnHeader: any, headerInfo: { column: dxDataGridColumn, columnIndex: number, component: dxDataGrid }) => any) | template;
   headerFilter?: GridsColumnHeaderFilter | undefined;
   hidingPriority?: number | undefined;
@@ -523,8 +523,8 @@ type IColumnProps = React.PropsWithChildren<{
   onFilterValueChange?: (value: any | undefined) => void;
   defaultFilterValues?: Array<any>;
   onFilterValuesChange?: (value: Array<any>) => void;
-  defaultGroupIndex?: number | undefined;
-  onGroupIndexChange?: (value: number | undefined) => void;
+  defaultGroupIndex?: number;
+  onGroupIndexChange?: (value: number) => void;
   defaultSelectedFilterOperation?: SelectedFilterOperation | undefined;
   onSelectedFilterOperationChange?: (value: SelectedFilterOperation | undefined) => void;
   defaultSortIndex?: number | undefined;

packages/devextreme/js/__internal/ui/accordion.ts

@@ -62,8 +62,7 @@ class Accordion extends CollectionWidgetLiveUpdate<AccordionProperties, Item, Co
       ...super._getDefaultOptions(),
       hoverStateEnabled: true,
       itemTitleTemplate: 'title',
-      // @ts-expect-error ts-error
-      onItemTitleClick: null,
+      onItemTitleClick: undefined,
       selectedIndex: 0,
       collapsible: false,
       multiple: false,

packages/devextreme/js/ui/accordion.d.ts

@@ -154,10 +154,9 @@ export interface dxAccordionOptions<
     focusStateEnabled?: boolean;
     /**
      * @docid
-     * @default undefined
      * @public
      */
-    height?: number | string | undefined;
+    height?: number | string;
     /**
      * @docid
      * @default true
@@ -195,7 +194,6 @@ export interface dxAccordionOptions<
     multiple?: boolean;
     /**
      * @docid
-     * @default null
      * @type function
      * @type_function_param1 e:{ui/accordion:ItemTitleClickEvent}
      * @action

packages/devextreme/js/ui/data_grid.d.ts

@@ -2276,10 +2276,9 @@ export interface dxDataGridColumn<TRowData = any, TKey = any> extends ColumnBase
     /**
      * @docid dxDataGridColumn.columns
      * @type Array<dxDataGridColumn|string>
-     * @default undefined
      * @public
      */
-    columns?: Array<Column<TRowData, TKey> | string> | undefined;
+    columns?: Array<Column<TRowData, TKey> | string>;
     /**
      * @docid dxDataGridColumn.editCellTemplate
      * @type_function_param2 cellInfo:object
@@ -2302,11 +2301,10 @@ export interface dxDataGridColumn<TRowData = any, TKey = any> extends ColumnBase
     groupCellTemplate?: template | ((cellElement: DxElement, cellInfo: ColumnGroupCellTemplateData<TRowData, TKey>) => any);
     /**
      * @docid dxDataGridColumn.groupIndex
-     * @default undefined
      * @fires dxDataGridOptions.onOptionChanged
      * @public
      */
-    groupIndex?: number | undefined;
+    groupIndex?: number;
     /**
      * @docid dxDataGridColumn.headerCellTemplate
      * @type_function_param2 headerInfo:object

packages/devextreme/ts/dx.all.d.ts

@@ -9192,7 +9192,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxAccordionOptions.height]
      */
-    height?: number | string | undefined;
+    height?: number | string;
     /**
      * [descr:dxAccordionOptions.hoverStateEnabled]
      */
@@ -13955,9 +13955,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxDataGridColumn.columns]
      */
-    columns?:
-      | Array<DevExpress.ui.dxDataGrid.Column<TRowData, TKey> | string>
-      | undefined;
+    columns?: Array<DevExpress.ui.dxDataGrid.Column<TRowData, TKey> | string>;
     /**
      * [descr:dxDataGridColumn.editCellTemplate]
      */
@@ -13985,7 +13983,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxDataGridColumn.groupIndex]
      */
-    groupIndex?: number | undefined;
+    groupIndex?: number;
     /**
      * [descr:dxDataGridColumn.headerCellTemplate]
      */