Tabs, TabPanel: remove 'm_' prefix (DevExpress#29648)

EugeniyKiyashko · web-flow · commit f1aaee82e265 · 2025-04-18T14:53:34.000+04:00
diff --git a/packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts b/packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts
@@ -39,8 +39,8 @@ import { getPublicElement } from '@ts/core/m_element';
 import type { ActionConfig } from '@ts/core/widget/component';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
-import type CollectionItem from '@ts/ui/collection/m_item';
-import CollectionWidgetItem from '@ts/ui/collection/m_item';
+import type CollectionItem from '@ts/ui/collection/item';
+import CollectionWidgetItem from '@ts/ui/collection/item';
 
 const COLLECTION_CLASS = 'dx-collection';
 const ITEM_CLASS = 'dx-item';
diff --git a/packages/devextreme/js/__internal/ui/collection/item.ts b/packages/devextreme/js/__internal/ui/collection/item.ts
diff --git a/packages/devextreme/js/__internal/ui/context_menu/m_menu_base.ts b/packages/devextreme/js/__internal/ui/context_menu/m_menu_base.ts
@@ -10,7 +10,7 @@ import type { DxEvent } from '@js/events';
 import type { dxMenuBaseOptions } from '@js/ui/context_menu/ui.menu_base';
 import type { Item, SubmenuShowMode } from '@js/ui/menu';
 import { render } from '@js/ui/widget/utils.ink_ripple';
-import MenuItem from '@ts/ui/collection/m_item';
+import MenuItem from '@ts/ui/collection/item';
 import MenuBaseEditStrategy from '@ts/ui/context_menu/m_menu_base.edit.strategy';
 import HierarchicalCollectionWidget from '@ts/ui/hierarchical_collection/m_hierarchical_collection_widget';
 
diff --git a/packages/devextreme/js/__internal/ui/list/m_item.ts b/packages/devextreme/js/__internal/ui/list/m_item.ts
@@ -1,6 +1,6 @@
 import $ from '@js/core/renderer';
 import type { Item } from '@js/ui/list';
-import CollectionWidgetItem from '@ts/ui/collection/m_item';
+import CollectionWidgetItem from '@ts/ui/collection/item';
 
 const LIST_ITEM_BADGE_CONTAINER_CLASS = 'dx-list-item-badge-container';
 const LIST_ITEM_BADGE_CLASS = 'dx-list-item-badge';
diff --git a/packages/devextreme/js/__internal/ui/m_box.ts b/packages/devextreme/js/__internal/ui/m_box.ts
@@ -12,8 +12,8 @@ import { isDefined } from '@js/core/utils/type';
 import { hasWindow } from '@js/core/utils/window';
 import CollectionWidget from '@js/ui//collection/ui.collection_widget.edit';
 import type { Item, Properties } from '@js/ui/box';
-import type { ItemExtraOption } from '@ts/ui/collection/m_item';
-import CollectionWidgetItem from '@ts/ui/collection/m_item';
+import type { ItemExtraOption } from '@ts/ui/collection/item';
+import CollectionWidgetItem from '@ts/ui/collection/item';
 
 // STYLE box
 
diff --git a/packages/devextreme/js/__internal/ui/splitter/splitter_item.ts b/packages/devextreme/js/__internal/ui/splitter/splitter_item.ts
@@ -2,7 +2,7 @@ import Guid from '@js/core/guid';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import type { Item } from '@js/ui/splitter';
-import CollectionWidgetItem from '@ts/ui/collection/m_item';
+import CollectionWidgetItem from '@ts/ui/collection/item';
 
 import ResizeHandle from './resize_handle';
 import type Splitter from './splitter';
diff --git a/packages/devextreme/js/__internal/ui/tab_panel/item.ts b/packages/devextreme/js/__internal/ui/tab_panel/item.ts
@@ -1,6 +1,6 @@
 import { noop } from '@js/core/utils/common';
 import type { Item } from '@js/ui/tab_panel';
-import CollectionWidgetItem from '@ts/ui/collection/m_item';
+import CollectionWidgetItem from '@ts/ui/collection/item';
 
 export default class TabPanelItem extends CollectionWidgetItem<Item> {
   _renderWatchers(): void {
diff --git a/packages/devextreme/js/__internal/ui/tab_panel/tab_panel.ts b/packages/devextreme/js/__internal/ui/tab_panel/tab_panel.ts
@@ -17,11 +17,11 @@ import { current as currentTheme, isFluent, isMaterialBased } from '@js/ui/theme
 import supportUtils from '@ts/core/utils/m_support';
 import type { OptionChanged } from '@ts/core/widget/types';
 import MultiView from '@ts/ui/m_multi_view';
-import type { TabsProperties } from '@ts/ui/tabs/m_tabs';
-import Tabs from '@ts/ui/tabs/m_tabs';
+import type { TabsProperties } from '@ts/ui/tabs/tabs';
+import Tabs from '@ts/ui/tabs/tabs';
 
 // eslint-disable-next-line import/no-named-default
-import { default as TabPanelItem } from './m_item';
+import { default as TabPanelItem } from './item';
 
 export const TABPANEL_CLASS = 'dx-tabpanel';
 const TABPANEL_TABS_CLASS = 'dx-tabpanel-tabs';
@@ -172,12 +172,10 @@ class TabPanel extends MultiView<TabPanelProperties> {
     this._toggleTabPanelTabsPositionClass();
   }
 
-  // eslint-disable-next-line class-methods-use-this
   _getElementAria(): Record<string, string> {
     return { role: 'tabpanel' };
   }
 
-  // eslint-disable-next-line class-methods-use-this
   _getItemAria(): Record<string, string> {
     return { role: 'tabpanel' };
   }
@@ -189,7 +187,6 @@ class TabPanel extends MultiView<TabPanelProperties> {
     this._renderLayout();
   }
 
-  // eslint-disable-next-line class-methods-use-this
   _prepareTabsItemTemplate(data: Item, $container: dxElementWrapper): void {
     const $iconElement = getImageContainer(data?.icon);
 
diff --git a/packages/devextreme/js/__internal/ui/tabs/item.ts b/packages/devextreme/js/__internal/ui/tabs/item.ts
@@ -1,18 +1,18 @@
 import $ from '@js/core/renderer';
 import type { Item } from '@js/ui/tabs';
-import CollectionItem from '@ts/ui/collection/m_item';
+import CollectionItem from '@ts/ui/collection/item';
 
 const TABS_ITEM_BADGE_CLASS = 'dx-tabs-item-badge';
 const BADGE_CLASS = 'dx-badge';
 
 class TabsItem extends CollectionItem<Item> {
   _renderWatchers(): void {
     super._renderWatchers();
-
+    // @ts-expect-error ts-error
     this._startWatcher('badge', this._renderBadge.bind(this));
   }
 
-  _renderBadge(badge): void {
+  _renderBadge(badge: string | undefined): void {
     this._$element.children(`.${BADGE_CLASS}`).remove();
 
     if (!badge) {
diff --git a/packages/devextreme/js/__internal/ui/tabs/tabs.ts b/packages/devextreme/js/__internal/ui/tabs/tabs.ts
@@ -31,7 +31,7 @@ import {
 import { getScrollLeftMax } from '@ts/ui/scroll_view/utils/get_scroll_left_max';
 
 import { TABS_EXPANDED_CLASS } from './constants';
-import TabsItem from './m_item';
+import TabsItem from './item';
 
 // STYLE tabs
 
@@ -246,7 +246,6 @@ class Tabs extends CollectionWidget<TabsProperties> {
     this._feedbackHideTimeout = FEEDBACK_HIDE_TIMEOUT;
   }
 
-  // eslint-disable-next-line class-methods-use-this
   _prepareDefaultItemTemplate(data: Item, $container: dxElementWrapper): void {
     const text = isPlainObject(data) ? data?.text : data;
 
@@ -287,17 +286,14 @@ class Tabs extends CollectionWidget<TabsProperties> {
     });
   }
 
-  // eslint-disable-next-line class-methods-use-this
   _itemClass(): string {
     return TABS_ITEM_CLASS;
   }
 
-  // eslint-disable-next-line class-methods-use-this
   _selectedItemClass(): string {
     return TABS_ITEM_SELECTED_CLASS;
   }
 
-  // eslint-disable-next-line class-methods-use-this
   _itemDataKey(): string {
     return TABS_ITEM_DATA_KEY;
   }
@@ -327,6 +323,7 @@ class Tabs extends CollectionWidget<TabsProperties> {
       }
 
       const scrollable = this.getScrollable();
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       scrollable?.update();
 
       if (this.option('rtlEnabled')) {
@@ -432,7 +429,6 @@ class Tabs extends CollectionWidget<TabsProperties> {
     this._inkRipple = render();
   }
 
-  // eslint-disable-next-line class-methods-use-this
   _getPointerEvent(): string {
     return pointerEvents.up;
   }
@@ -581,6 +577,7 @@ class Tabs extends CollectionWidget<TabsProperties> {
   }
 
   _updateScrollPosition(offset: number, duration: number): void {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     this._scrollable?.update();
     this._scrollable?.scrollBy(offset / duration);
   }
@@ -664,6 +661,7 @@ class Tabs extends CollectionWidget<TabsProperties> {
       return;
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     super._itemSelectHandler(e);
   }
 
@@ -680,7 +678,6 @@ class Tabs extends CollectionWidget<TabsProperties> {
     this.$element().toggleClass(TABS_ORIENTATION_CLASS.horizontal, value);
   }
 
-  // eslint-disable-next-line class-methods-use-this
   _getIndicatorPositionClass(indicatorPosition: Position): string {
     return INDICATOR_POSITION_CLASS[indicatorPosition];
   }
@@ -781,6 +778,7 @@ class Tabs extends CollectionWidget<TabsProperties> {
     // @ts-expect-error ts-error
     const prevItemIndex = currentIndex - 1;
     // @ts-expect-error ts-error
+    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
     const nextItemIndex = currentIndex + 1;
 
     const nextFocusedIndex = $(value).index();
diff --git a/packages/devextreme/js/ui/tab_panel.js b/packages/devextreme/js/ui/tab_panel.js
@@ -1,4 +1,4 @@
-import TabPanel from '../__internal/ui/tab_panel/m_tab_panel';
+import TabPanel from '../__internal/ui/tab_panel/tab_panel';
 
 export default TabPanel;
 
diff --git a/packages/devextreme/js/ui/tabs.js b/packages/devextreme/js/ui/tabs.js
@@ -1,4 +1,4 @@
-import Tabs from '../__internal/ui/tabs/m_tabs';
+import Tabs from '../__internal/ui/tabs/tabs';
 
 export default Tabs;
 
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
@@ -41,6 +41,81 @@
     <script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
     <script type="text/javascript" src="./themeSelector.js"></script>
     <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
+    <style>
+.demo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: 16px;
+  height: 760px;
+  min-width: 320px;
+}
+
+.stepper-label {
+  font-weight: 600;
+}
+
+#customStepShape {
+  margin-bottom: 64px;
+}
+
+#customStepShape .dx-step-indicator {
+  border-radius: 4px;
+}
+
+#labelOnly {
+  margin-bottom: 64px;
+  align-items: center;
+}
+
+#labelOnly .dx-step {
+  padding-inline: 2px;
+}
+
+#labelOnly .dx-step-content {
+  padding-block: 4px;
+}
+
+#labelOnly .dx-step-caption {
+  width: auto;
+  max-width: 100%;
+}
+
+#labelOnly .dx-step-label {
+  background-color: var(--dx-color-main-bg);
+  padding-inline: 8px;
+}
+
+#labelOnly .dx-step.dx-state-focused .dx-step-caption {
+  box-shadow: 0 0 0 2px var(--dx-color-main-bg), 0 0 0 4px var(--dx-color-primary), 0 0 0 8px var(--dx-color-main-bg);
+  border-radius: 4px;
+}
+
+#iconOnly {
+  align-items: center;
+}
+
+#iconOnly .dx-step-content {
+  margin-block: 4px;
+}
+
+#iconOnly .dx-icon {
+  box-sizing: content-box;
+  padding: 6px;
+  background-color: var(--dx-color-main-bg);
+}
+
+#iconOnly .dx-state-focused .dx-icon {
+  box-shadow: 0 0 0 2px var(--dx-color-primary), 0 0 0 6px var(--dx-color-main-bg);
+  border-radius: 4px;
+}
+
+#iconOnly :is(.dx-step-selected, .dx-step-completed) .dx-icon {
+  color: var(--dx-color-primary);
+}
+
+    </style>
 </head>
 <body class="dx-surface">
     <div role="main">
@@ -49,14 +124,83 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
         <select id="theme-selector" style="display: block;">
         </select>
         <br />
-        <div id="button"></div>
+        <div class="demo-container">
+          <div id="label-customStepShape" class="stepper-label">Custom Step Shape</div>
+          <div id="customStepShape"></div>
+          <div id="label-labelOnly" class="stepper-label">Label Only</div>
+          <div id="labelOnly"></div>
+          <div id="label-iconOnly" class="stepper-label">Icon Only</div>
+          <div id="iconOnly"></div>
+        </div>
         <script>
-            $(function() {
-                $("#button").dxButton({
-                    text: 'Click me!',
-                    onClick: function() { alert("clicked"); }
-                });
-            });
+           $(() => {
+  $('#customStepShape').dxStepper({
+    selectedIndex: 2,
+    dataSource,
+    linear: false,
+    elementAttr: { 'aria-labelledby': 'label-customStepShape' },
+    itemTemplate(data) {
+      return `<div class="dx-step-indicator">
+          <i class="dx-icon dx-icon-${data.icon}"></i>
+        </div>
+        <div class="dx-step-caption">
+          <div class="dx-step-label">${data.label}</div>
+          ${data.optional ? '<div class="dx-step-optional-mark">(Optional)</div>' : ''}
+        </div>`;
+    },
+  });
+
+  $('#labelOnly').dxStepper({
+    selectedIndex: 2,
+    dataSource,
+    linear: false,
+    elementAttr: { 'aria-labelledby': 'label-labelOnly' },
+    itemTemplate(data) {
+      return `<div class='dx-step-caption'>
+        <div class='dx-step-label'>${data.label}</div>
+      </div>`;
+    },
+  });
+
+  $('#iconOnly').dxStepper({
+    selectedIndex: 2,
+    dataSource,
+    linear: false,
+    elementAttr: { 'aria-labelledby': 'label-iconOnly' },
+    itemTemplate(data) {
+      return `<i class="dx-icon dx-icon-${data.icon}"></i>`;
+    },
+  });
+});
+
+
+const dataSource = [{
+  text: 'A',
+  label: 'Cart',
+  icon: 'cart',
+},
+{
+  text: 'B',
+  label: 'Shipping Info',
+  icon: 'clipboardtasklist',
+},
+{
+  text: 'C',
+  label: 'Promo Code',
+  icon: 'gift',
+  optional: true,
+},
+{
+  text: 'D',
+  label: 'Checkout',
+  icon: 'packagebox',
+},
+{
+  text: 'E',
+  label: 'Ordered',
+  icon: 'checkmarkcircle',
+}];
+
         </script>
     </div>
 </body>
diff --git a/packages/devextreme/testing/tests/DevExpress.knockout/collectionWidgetItem.tests.js b/packages/devextreme/testing/tests/DevExpress.knockout/collectionWidgetItem.tests.js
@@ -2,7 +2,7 @@ import $ from 'jquery';
 import ko from 'knockout';
 import registerComponent from 'core/component_registrator';
 import CollectionWidget from 'ui/collection/ui.collection_widget.edit';
-import CollectionWidgetItem from '__internal/ui/collection/m_item';
+import CollectionWidgetItem from '__internal/ui/collection/item';
 
 import 'integration/knockout';
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.tests.js
@@ -63,7 +63,7 @@ import themes from 'ui/themes';
 import registerKeyHandlerTestHelper from '../../helpers/registerKeyHandlerTestHelper.js';
 import responsiveBoxScreenMock from '../../helpers/responsiveBoxScreenMock.js';
 import { isDefined } from 'core/utils/type.js';
-import { TABPANEL_CLASS } from '__internal/ui/tab_panel/m_tab_panel';
+import { TABPANEL_CLASS } from '__internal/ui/tab_panel/tab_panel';
 
 const INVALID_CLASS = 'dx-invalid';
 const FORM_GROUP_CONTENT_CLASS = 'dx-form-group-content';
diff --git a/packages/devextreme/testing/tests/DevExpress.ui/collectionWidgetItem.tests.js b/packages/devextreme/testing/tests/DevExpress.ui/collectionWidgetItem.tests.js

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ import {`
`31`	`31`	`import { getScrollLeftMax } from '@ts/ui/scroll_view/utils/get_scroll_left_max';`
`32`	`32`
`33`	`33`	`import { TABS_EXPANDED_CLASS } from './constants';`
`34`		`-import TabsItem from './m_item';`
	`34`	`+import TabsItem from './item';`
`35`	`35`
`36`	`36`	`// STYLE tabs`
`37`	`37`
`@@ -246,7 +246,6 @@ class Tabs extends CollectionWidget<TabsProperties> {`
`246`	`246`	`this._feedbackHideTimeout = FEEDBACK_HIDE_TIMEOUT;`
`247`	`247`	`}`
`248`	`248`
`249`		`- // eslint-disable-next-line class-methods-use-this`
`250`	`249`	`_prepareDefaultItemTemplate(data: Item, $container: dxElementWrapper): void {`
`251`	`250`	`const text = isPlainObject(data) ? data?.text : data;`
`252`	`251`
`@@ -287,17 +286,14 @@ class Tabs extends CollectionWidget<TabsProperties> {`
`287`	`286`	`});`
`288`	`287`	`}`
`289`	`288`
`290`		`- // eslint-disable-next-line class-methods-use-this`
`291`	`289`	`_itemClass(): string {`
`292`	`290`	`return TABS_ITEM_CLASS;`
`293`	`291`	`}`
`294`	`292`
`295`		`- // eslint-disable-next-line class-methods-use-this`
`296`	`293`	`_selectedItemClass(): string {`
`297`	`294`	`return TABS_ITEM_SELECTED_CLASS;`
`298`	`295`	`}`
`299`	`296`
`300`		`- // eslint-disable-next-line class-methods-use-this`
`301`	`297`	`_itemDataKey(): string {`
`302`	`298`	`return TABS_ITEM_DATA_KEY;`
`303`	`299`	`}`
`@@ -327,6 +323,7 @@ class Tabs extends CollectionWidget<TabsProperties> {`
`327`	`323`	`}`
`328`	`324`
`329`	`325`	`const scrollable = this.getScrollable();`
	`326`	`+ // eslint-disable-next-line @typescript-eslint/no-floating-promises`
`330`	`327`	`scrollable?.update();`
`331`	`328`
`332`	`329`	`if (this.option('rtlEnabled')) {`
`@@ -432,7 +429,6 @@ class Tabs extends CollectionWidget<TabsProperties> {`
`432`	`429`	`this._inkRipple = render();`
`433`	`430`	`}`
`434`	`431`
`435`		`- // eslint-disable-next-line class-methods-use-this`
`436`	`432`	`_getPointerEvent(): string {`
`437`	`433`	`return pointerEvents.up;`
`438`	`434`	`}`
`@@ -581,6 +577,7 @@ class Tabs extends CollectionWidget<TabsProperties> {`
`581`	`577`	`}`
`582`	`578`
`583`	`579`	`_updateScrollPosition(offset: number, duration: number): void {`
	`580`	`+ // eslint-disable-next-line @typescript-eslint/no-floating-promises`
`584`	`581`	`this._scrollable?.update();`
`585`	`582`	`this._scrollable?.scrollBy(offset / duration);`
`586`	`583`	`}`
`@@ -664,6 +661,7 @@ class Tabs extends CollectionWidget<TabsProperties> {`
`664`	`661`	`return;`
`665`	`662`	`}`
`666`	`663`
	`664`	`+ // eslint-disable-next-line @typescript-eslint/no-floating-promises`
`667`	`665`	`super._itemSelectHandler(e);`
`668`	`666`	`}`
`669`	`667`
`@@ -680,7 +678,6 @@ class Tabs extends CollectionWidget<TabsProperties> {`
`680`	`678`	`this.$element().toggleClass(TABS_ORIENTATION_CLASS.horizontal, value);`
`681`	`679`	`}`
`682`	`680`
`683`		`- // eslint-disable-next-line class-methods-use-this`
`684`	`681`	`_getIndicatorPositionClass(indicatorPosition: Position): string {`
`685`	`682`	`return INDICATOR_POSITION_CLASS[indicatorPosition];`
`686`	`683`	`}`
`@@ -781,6 +778,7 @@ class Tabs extends CollectionWidget<TabsProperties> {`
`781`	`778`	`// @ts-expect-error ts-error`
`782`	`779`	`const prevItemIndex = currentIndex - 1;`
`783`	`780`	`// @ts-expect-error ts-error`
	`781`	`+ // eslint-disable-next-line @typescript-eslint/restrict-plus-operands`
`784`	`782`	`const nextItemIndex = currentIndex + 1;`
`785`	`783`
`786`	`784`	`const nextFocusedIndex = $(value).index();`