Grids: type m_header_filter

packages/devextreme/js/__internal/grids/data_grid/grouping/m_grouping.ts

@@ -274,13 +274,13 @@ export const GroupingHeaderPanelExtender = (
     const $target = $(event.target);
     const groupColumnIndex = $target.closest(`.${CLASSES.groupPanelItem}`).index();
     const column = this._columnsController.getGroupColumns()[groupColumnIndex];
-    const columnIndex = column && column.index;
+    const columnIndex = column?.index;
 
-    if ($target.is(HEADER_FILTER_CLASS_SELECTOR)) {
-      this._headerFilterController.showHeaderFilterMenu(columnIndex, true);
-    } else {
+    if (!$target.is(HEADER_FILTER_CLASS_SELECTOR)) {
       // @ts-expect-error
       this._processGroupItemAction(columnIndex);
+    } else if (isDefined(columnIndex)) {
+      this._headerFilterController.showHeaderFilterMenu(columnIndex, true);
     }
 
     event.preventDefault();

packages/devextreme/js/__internal/grids/grid_core/column_state_mixin/column_state_mixin.ts

@@ -24,7 +24,7 @@ export const ColumnStateMixin = <T extends ColumnStateMixinBase>(Base: T) => cla
   protected _applyColumnState(options: ColumnStateOptions): dxElementWrapper | undefined {
     const rtlEnabled = this.option('rtlEnabled');
     const columnAlignment = this._getColumnAlignment(options.column.alignment, rtlEnabled);
-    const parameters: IndicatorOptions = extend(true, { columnAlignment }, options);
+    const parameters = extend(true, { columnAlignment }, options);
     const isGroupPanelItem = parameters.rootElement.hasClass(GROUP_PANEL_ITEM_CLASS);
     const $indicatorsContainer = this._createIndicatorContainer(parameters, isGroupPanelItem);
     const $span = $('<span>').addClass(this._getIndicatorClassName(options.name) ?? '');
@@ -33,9 +33,10 @@ export const ColumnStateMixin = <T extends ColumnStateMixinBase>(Base: T) => cla
     const indicatorAlignment = columnsController?.getHeaderContentAlignment(columnAlignment)
       ?? columnAlignment;
 
-    parameters.container = $indicatorsContainer;
-    parameters.indicator = $span;
-    this._renderIndicator(parameters);
+    this._renderIndicator(Object.assign(parameters, {
+      container: $indicatorsContainer,
+      indicator: $span,
+    }));
 
     $indicatorsContainer[(isGroupPanelItem || !options.showColumnLines) && indicatorAlignment === 'left' ? 'appendTo' : 'prependTo'](options.rootElement);
 
@@ -60,7 +61,7 @@ export const ColumnStateMixin = <T extends ColumnStateMixinBase>(Base: T) => cla
   }
 
   private _createIndicatorContainer(
-    options: IndicatorOptions,
+    options: Omit<IndicatorOptions, 'container' | 'indicator'>,
     ignoreIndicatorAlignment: boolean,
   ): dxElementWrapper {
     let $indicatorsContainer = this._getIndicatorContainer(options.rootElement);

packages/devextreme/js/__internal/grids/grid_core/column_state_mixin/types.ts

@@ -27,8 +27,8 @@ export interface ColumnStateOptions {
 
 export interface IndicatorOptions extends ColumnStateOptions {
   columnAlignment: string;
-  container?: dxElementWrapper;
-  indicator?: dxElementWrapper;
+  container: dxElementWrapper;
+  indicator: dxElementWrapper;
 }
 
 export interface IndicatorRowOptions {

packages/devextreme/js/__internal/grids/grid_core/filter_sync/filter_custom_operations.ts

@@ -103,7 +103,6 @@ function baseOperation(grid: InternalGrid): HeaderFilterOperation {
         0,
         grid.option('headerFilter'),
       );
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-return -- untyped getHeaderItemText
       return text;
     }
 
@@ -113,6 +112,7 @@ function baseOperation(grid: InternalGrid): HeaderFilterOperation {
     if (!textOptions.items) {
       column = extend({}, column, { filterType: 'include', filterValues: values });
       const dataSourceOptions = headerFilterController.getDataSource(column);
+      // @ts-expect-error getDataSource() returns undefined only for a grid without a data source
       dataSourceOptions.paginate = false;
       const dataSource = new DataSource(dataSourceOptions);
       const key = dataSource.store().key();

packages/devextreme/js/__internal/grids/grid_core/header_filter/__tests__/utils.test.ts

@@ -5,9 +5,10 @@ import {
   jest,
 } from '@jest/globals';
 import filterUtils from '@js/ui/shared/filtering';
+import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 
 import { getFormatOptions } from '../m_header_filter';
-import type { HeaderFilterGroupSelector } from '../types';
+import type { DateIntervalFormat, HeaderFilterGroupSelector } from '../types';
 import { getHeaderFilterGroupParameters } from '../utils';
 
 describe('getGroupInterval', () => {
@@ -177,46 +178,46 @@ describe('getHeaderFilterGroupParameters', () => {
 
 describe('getFormatOptions', () => {
   it('selects the interval of the requested level for a number[]', () => {
-    const column = { dataType: 'number', headerFilter: { groupInterval: [100, 10] } };
+    const column: Column = { dataType: 'number', headerFilter: { groupInterval: [100, 10] } };
 
     expect(getFormatOptions(700, column, 0).groupInterval).toBe(100);
     expect(getFormatOptions(750, column, 1).groupInterval).toBe(10);
   });
 
   it('formats a numeric bucket as a "<value> - <value + interval>" range', () => {
-    const column = { dataType: 'number', headerFilter: { groupInterval: [100, 10] } };
+    const column: Column = { dataType: 'number', headerFilter: { groupInterval: [100, 10] } };
 
-    expect(getFormatOptions(700, column, 0).getDisplayFormat()).toBe('700 - 800');
-    expect(getFormatOptions(750, column, 1).getDisplayFormat()).toBe('750 - 760');
+    expect(getFormatOptions(700, column, 0).getDisplayFormat?.('')).toBe('700 - 800');
+    expect(getFormatOptions(750, column, 1).getDisplayFormat?.('')).toBe('750 - 760');
   });
 
   it('selects the hierarchy level name for a string[]', () => {
-    const column = { dataType: 'string', headerFilter: { groupInterval: ['Country', 'State', 'City'] } };
+    const column: Column = { dataType: 'string', headerFilter: { groupInterval: ['Country', 'State', 'City'] } };
 
     expect(getFormatOptions('USA', column, 0).groupInterval).toBe('Country');
     expect(getFormatOptions('Arkansas', column, 1).groupInterval).toBe('State');
     expect(getFormatOptions('Bentonville', column, 2).groupInterval).toBe('City');
   });
 
   it('selects the date interval and its format per level for a date column', () => {
-    const column = { dataType: 'date', headerFilter: { groupInterval: 'month' } };
+    const column: Column = { dataType: 'date', headerFilter: { groupInterval: 'month' } };
 
     const yearLevel = getFormatOptions(2024, column, 0);
     expect(yearLevel.groupInterval).toBe('year');
-    expect(yearLevel.format(2024)).toBe('2024');
+    expect((yearLevel.format as DateIntervalFormat)(2024)).toBe('2024');
 
     const monthLevel = getFormatOptions(3, column, 1);
     expect(monthLevel.groupInterval).toBe('month');
-    expect(monthLevel.format(3)).toBe('March');
+    expect((monthLevel.format as DateIntervalFormat)(3)).toBe('March');
   });
 
   it('selects the date interval and its format per level for a datetime column', () => {
-    const column = { dataType: 'datetime', headerFilter: { groupInterval: 'hour' } };
+    const column: Column = { dataType: 'datetime', headerFilter: { groupInterval: 'hour' } };
 
     expect(getFormatOptions(2024, column, 0).groupInterval).toBe('year');
 
     const hourLevel = getFormatOptions(14, column, 3);
     expect(hourLevel.groupInterval).toBe('hour');
-    expect(hourLevel.format(14)).toBe('14');
+    expect((hourLevel.format as DateIntervalFormat)(14)).toBe('14');
   });
 });