List, DropDownList: remove the use of DataConverterMixin (DevExpress#30648)

Co-authored-by: EugeniyKiyashko <[email protected]>

Author: pharret31

packages/devextreme/js/__internal/data/data_converter/grouped.ts

@@ -0,0 +1,52 @@
+import type { GroupItem } from '@js/common/data';
+import { isGroupItemsArray } from '@js/common/data';
+import { isObject } from '@js/core/utils/type';
+import type { DataSourceLike, DataSourceOptions } from '@js/data/data_source';
+
+const groupKey = 'key';
+
+export function getDataSourceOptions<TItem>(
+  dataSource: DataSourceLike<TItem>,
+): DataSourceLike<TItem> | DataSourceOptions<GroupItem<TItem>> {
+  if (!isGroupItemsArray<TItem>(dataSource)) {
+    return dataSource;
+  }
+
+  let hasSimpleItems = false;
+
+  const data = dataSource.reduce((
+    accumulator: GroupItem<TItem>[],
+    item: GroupItem<TItem>,
+  ) => {
+    const items = item.items?.map((value: TItem | GroupItem<TItem>): GroupItem<TItem> => {
+      let innerItem = value;
+      if (!isObject(innerItem)) {
+        // @ts-expect-error
+        innerItem = { text: innerItem };
+        hasSimpleItems = true;
+      }
+
+      const objectItem = innerItem as Partial<GroupItem<TItem>>;
+
+      if (!(groupKey in objectItem)) {
+        objectItem[groupKey] = item.key;
+      }
+
+      return objectItem as GroupItem<TItem>;
+    }) ?? [];
+    return accumulator.concat(items);
+  }, []);
+
+  return {
+    store: {
+      type: 'array',
+      data,
+    },
+    group: {
+      selector: groupKey,
+      // @ts-expect-error
+      keepInitialKeyOrder: true,
+    },
+    searchExpr: hasSimpleItems ? 'text' : undefined,
+  };
+}

packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_list.ts

@@ -2,6 +2,7 @@ import type { SingleMultipleAllOrNone } from '@js/common';
 import eventsEngine from '@js/common/core/events/core/events_engine';
 import { addNamespace } from '@js/common/core/events/utils';
 import messageLocalization from '@js/common/core/localization/message';
+import type { GroupItem } from '@js/common/data';
 import dataQuery from '@js/common/data/query';
 import registerComponent from '@js/core/component_registrator';
 import devices from '@js/core/devices';
@@ -22,15 +23,17 @@ import { each } from '@js/core/utils/iterator';
 import { getOuterHeight } from '@js/core/utils/size';
 import { isDefined, isObject, isWindow } from '@js/core/utils/type';
 import { getWindow } from '@js/core/utils/window';
+import type { DataSourceLike, DataSourceOptions } from '@js/data/data_source';
 import type { dxDropDownListOptions } from '@js/ui/drop_down_editor/ui.drop_down_list';
 import DataExpressionMixin from '@js/ui/editor/ui.data_expression';
+import type { Item } from '@js/ui/list';
 import type { Properties as PopupProperties } from '@js/ui/popup';
 import errors from '@js/ui/widget/ui.errors';
 import type { OptionChanged } from '@ts/core/widget/types';
+import { getDataSourceOptions } from '@ts/data/data_converter/grouped';
 import DropDownEditor from '@ts/ui/drop_down_editor/m_drop_down_editor';
 import type { ListBaseProperties } from '@ts/ui/list/list.base';
 import List from '@ts/ui/list/list.edit.search';
-import DataConverterMixin from '@ts/ui/shared/m_grouped_data_converter_mixin';
 
 const window = getWindow();
 
@@ -87,8 +90,11 @@ class DropDownList<
       tab(e): void {
         if (this._allowSelectItemByTab()) {
           this._saveValueChangeEvent(e);
-          const $focusedItem = $(this._list.option('focusedElement'));
-          $focusedItem.length && this._setSelectedElement($focusedItem);
+          const { focusedElement } = this._list.option();
+          const $focusedItem = $(focusedElement);
+          if ($focusedItem.length) {
+            this._setSelectedElement($focusedItem);
+          }
         }
 
         parentSupportedKeys.tab(e);
@@ -381,7 +387,8 @@ class DropDownList<
 
   _getPlainItems(items?) {
     let plainItems: any = [];
-    const grouped = this._getGroupedOption();
+
+    const { grouped } = this.option();
 
     items = items || this.option('items') || this._dataSource.items() || [];
 
@@ -642,8 +649,17 @@ class DropDownList<
     };
   }
 
-  _getGroupedOption() {
-    return this.option('grouped');
+  _getSpecificDataSourceOption(): DataSourceLike<Item>
+    | DataSourceOptions<GroupItem<Item>>
+    | null
+    | undefined {
+    const { dataSource, grouped } = this.option();
+
+    if (dataSource && grouped) {
+      return getDataSourceOptions(dataSource);
+    }
+
+    return dataSource;
   }
 
   _dataSourceFromUrlLoadMode(): string {
@@ -1038,7 +1054,7 @@ class DropDownList<
 }
 
 // @ts-expect-error ts-error
-DropDownList.include(DataExpressionMixin, DataConverterMixin);
+DropDownList.include(DataExpressionMixin);
 
 registerComponent('dxDropDownList', DropDownList);
 

packages/devextreme/js/__internal/ui/list/list.base.ts

@@ -5,7 +5,7 @@ import pointerEvents from '@js/common/core/events/pointer';
 import { end as swipeEventEnd } from '@js/common/core/events/swipe';
 import { addNamespace } from '@js/common/core/events/utils';
 import messageLocalization from '@js/common/core/localization/message';
-import type { DataSourceOptions } from '@js/common/data';
+import type { DataSourceOptions, GroupItem } from '@js/common/data';
 import devices from '@js/core/devices';
 import { getPublicElement } from '@js/core/element';
 import Guid from '@js/core/guid';
@@ -22,6 +22,7 @@ import { each } from '@js/core/utils/iterator';
 import { getHeight, getOuterHeight, setHeight } from '@js/core/utils/size';
 import { isDefined, isPlainObject } from '@js/core/utils/type';
 import { hasWindow } from '@js/core/utils/window';
+import type { DataSourceLike } from '@js/data/data_source';
 import type { DxEvent, NativeEventInfo } from '@js/events';
 import Button from '@js/ui/button';
 import type {
@@ -38,6 +39,7 @@ import { render } from '@ts/core/utils/m_ink_ripple';
 import supportUtils from '@ts/core/utils/m_support';
 import type { OptionChanged } from '@ts/core/widget/types';
 import type { SupportedKeys } from '@ts/core/widget/widget';
+import { getDataSourceOptions } from '@ts/data/data_converter/grouped';
 import type {
   CollectionItemInfo,
   CollectionItemKey,
@@ -46,6 +48,7 @@ import type {
   InkRippleEvent,
   PostprocessRenderItemInfo,
 } from '@ts/ui/collection/collection_widget.base';
+import type { CollectionItemIndex } from '@ts/ui/collection/collection_widget.edit.strategy';
 import type { CollectionWidgetLiveUpdateProperties } from '@ts/ui/collection/collection_widget.live_update';
 import CollectionWidget from '@ts/ui/collection/collection_widget.live_update';
 import ListItem from '@ts/ui/list/item';
@@ -57,9 +60,6 @@ import ScrollView from '@ts/ui/scroll_view/scroll_view';
 import { deviceDependentOptions } from '@ts/ui/scroll_view/scrollable.device';
 import type { ScrollOffset } from '@ts/ui/scroll_view/types';
 import { getElementMargin } from '@ts/ui/scroll_view/utils/get_element_style';
-import DataConverterMixin from '@ts/ui/shared/m_grouped_data_converter_mixin';
-
-import type { CollectionItemIndex } from '../collection/collection_widget.edit.strategy';
 
 const LIST_CLASS = 'dx-list';
 const LIST_ITEMS_CLASS = 'dx-list-items';
@@ -545,10 +545,17 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
     };
   }
 
-  _getGroupedOption(): boolean | undefined {
-    const { grouped } = this.option();
+  _getSpecificDataSourceOption(): DataSourceLike<Item>
+    | DataSourceOptions<GroupItem<Item>>
+    | null
+    | undefined {
+    const { dataSource, grouped } = this.option();
+
+    if (dataSource && grouped) {
+      return getDataSourceOptions<Item>(dataSource);
+    }
 
-    return grouped;
+    return dataSource;
   }
 
   _getGroupContainerByIndex(groupIndex: number): dxElementWrapper {
@@ -1502,5 +1509,3 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
     this.updateDimensions();
   }
 }
-// @ts-expect-error ts-error
-ListBase.include(DataConverterMixin);