🎹 Pager: Create dxPagination-* localization constants (#28197)

packages/devextreme/js/__internal/grids/grid_core/pager/m_pager.ts

@@ -98,6 +98,7 @@ export class PagerView extends modules.View {
       itemCount: dataController.totalCount(),
       hasKnownLastPage: dataController.hasKnownLastPage(),
       rtlEnabled: that.option('rtlEnabled'),
+      isGridCompatibilityMode: true,
       _skipValidation: true,
       pageIndexChanged(pageIndex) {
         if (dataController.pageIndex() !== pageIndex - 1) {

packages/devextreme/js/__internal/pager/common/base_pagination_props.ts

@@ -6,7 +6,7 @@ import type { EventCallback } from '../../core/r1/event_callback';
 import { BaseWidgetDefaultProps, type BaseWidgetProps } from '../base_props';
 
 export interface BasePaginationProps extends BaseWidgetProps {
-  gridCompatibility?: boolean;
+  isGridCompatibilityMode?: boolean;
   className?: string;
   showInfo?: boolean;
   infoText?: string;
@@ -29,7 +29,7 @@ export interface BasePaginationProps extends BaseWidgetProps {
 
 export const BasePaginationDefaultProps: BasePaginationProps = {
   ...BaseWidgetDefaultProps,
-  gridCompatibility: true,
+  isGridCompatibilityMode: false,
   showInfo: false,
   displayMode: 'adaptive',
   maxPagesCount: 10,
@@ -41,5 +41,5 @@ export const BasePaginationDefaultProps: BasePaginationProps = {
   allowedPageSizes: [5, 10],
   showNavigationButtons: false,
   itemCount: 1,
-  label: messageLocalization.format('dxPager-ariaLabel'),
+  label: messageLocalization.format('dxPagination-ariaLabel'),
 };

packages/devextreme/js/__internal/pager/common/pagination_config_context.ts

@@ -0,0 +1,7 @@
+import { createContext } from '@devextreme/runtime/inferno';
+
+export interface PaginationConfigContextValue {
+  isGridCompatibilityMode?: boolean;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, max-len
+export const PaginationConfigContext = createContext<PaginationConfigContextValue | undefined>(undefined) as any;

packages/devextreme/js/__internal/pager/common/pagination_config_provider.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { BaseInfernoComponent } from '@devextreme/runtime/inferno';
+
+import { PaginationConfigContext, type PaginationConfigContextValue } from './pagination_config_context';
+
+export interface PaginationConfigProviderProps {
+  isGridCompatibilityMode?: boolean;
+  children: JSX.Element;
+}
+
+export const PaginationConfigProviderDefaultProps = {};
+export class PaginationConfigProvider extends BaseInfernoComponent<PaginationConfigProviderProps> {
+  public state: any = {};
+
+  getConfig(): PaginationConfigContextValue {
+    return {
+      isGridCompatibilityMode: this.props.isGridCompatibilityMode,
+    };
+  }
+
+  getChildContext(): any {
+    return {
+      ...this.context,
+      ...{
+        [PaginationConfigContext.id]: this.getConfig() || PaginationConfigContext.defaultValue,
+      },
+    };
+  }
+
+  render(): JSX.Element {
+    return (
+      this.props.children
+    );
+  }
+}
+PaginationConfigProvider.defaultProps = PaginationConfigProviderDefaultProps;

packages/devextreme/js/__internal/pager/content.tsx

@@ -14,6 +14,7 @@ import {
 } from './common/consts';
 import type { KeyboardActionContextType } from './common/keyboard_action_context';
 import { KeyboardActionContext } from './common/keyboard_action_context';
+import { PaginationConfigProvider } from './common/pagination_config_provider';
 import type { PaginationProps } from './common/pagination_props';
 import { PaginationDefaultProps } from './common/pagination_props';
 import { Widget } from './common/widget';
@@ -176,6 +177,7 @@ export class PaginationContent extends InfernoComponent<PaginationContentProps>
 
   render(): JSX.Element {
     const {
+      isGridCompatibilityMode,
       rtlEnabled,
       visible,
       showPageSizeSelector,
@@ -209,7 +211,7 @@ export class PaginationContent extends InfernoComponent<PaginationContentProps>
       hoverStateEnabled,
     } = this.props;
 
-    return (
+    const content = (
       <Widget
         rootElementRef={this.widgetRootElementRef}
         rtlEnabled={rtlEnabled}
@@ -275,6 +277,12 @@ export class PaginationContent extends InfernoComponent<PaginationContentProps>
         )}
       </Widget>
     );
+
+    return (
+      <PaginationConfigProvider isGridCompatibilityMode={isGridCompatibilityMode}>
+        {content}
+      </PaginationConfigProvider>
+    );
   }
 }
 PaginationContent.defaultProps = PaginationContentDefaultProps;

packages/devextreme/js/__internal/pager/info.tsx

@@ -4,8 +4,8 @@ import { BaseInfernoComponent } from '@devextreme/runtime/inferno';
 import { createRef as infernoCreateRef } from 'inferno';
 
 import { format } from '../../core/utils/string';
-import messageLocalization from '../../localization/message';
 import { PaginationDefaultProps, type PaginationProps } from './common/pagination_props';
+import { getLocalizationMessage } from './utils/compatibility_utils';
 
 export const PAGER_INFO_CLASS = 'dx-info';
 
@@ -30,7 +30,7 @@ export class InfoText extends BaseInfernoComponent<InfoTextPropsType> {
   public rootElementRef?: RefObject<HTMLDivElement> = infernoCreateRef() as RefObject<HTMLDivElement>;
 
   getInfoText(): string {
-    return this.props.infoText ?? messageLocalization.getFormatter('dxPager-infoText')();
+    return this.props.infoText ?? getLocalizationMessage(this.context, 'dxPagination-infoText');
   }
 
   getText(): string {

packages/devextreme/js/__internal/pager/page_size/large.tsx

@@ -5,12 +5,12 @@ import { BaseInfernoComponent } from '@devextreme/runtime/inferno';
 import { Fragment } from 'inferno';
 
 import { format } from '../../../core/utils/string';
-import messageLocalization from '../../../localization/message';
 import { combineClasses } from '../../core/r1/utils/render_utils';
 import { FIRST_CHILD_CLASS, PAGER_PAGE_SIZE_CLASS, PAGER_SELECTED_PAGE_SIZE_CLASS } from '../common/consts';
 import { LightButton } from '../common/light_button';
 import { PaginationDefaultProps, type PaginationProps } from '../common/pagination_props';
 import type { FullPageSize } from '../common/types';
+import { getLocalizationMessage } from '../utils/compatibility_utils';
 
 export interface PageSizeLargeProps {
   allowedPageSizes: FullPageSize[];
@@ -72,7 +72,10 @@ export class PageSizeLarge extends BaseInfernoComponent<PageSizeLargePropsType>
         return {
           className,
           click: this.onPageSizeChange(processedPageSize),
-          label: format(messageLocalization.getFormatter('dxPager-pageSize'), processedPageSize || messageLocalization.getFormatter('dxPager-pageSizesAllText')),
+          label: format(
+            getLocalizationMessage(this.context, 'dxPagination-pageSize'),
+            processedPageSize || getLocalizationMessage(this.context, 'dxPagination-pageSizesAllText'),
+          ),
           text,
         };
       });

packages/devextreme/js/__internal/pager/page_size/selector.tsx

@@ -6,18 +6,14 @@ import { InfernoComponent, InfernoEffect } from '@devextreme/runtime/inferno';
 import type { RefObject } from '@devextreme-generator/declarations';
 import { createRef as infernoCreateRef } from 'inferno';
 
-import messageLocalization from '../../../localization/message';
 import { PAGER_PAGE_SIZES_CLASS } from '../common/consts';
 import type { PaginationProps } from '../common/pagination_props';
 import { PaginationDefaultProps } from '../common/pagination_props';
 import type { FullPageSize } from '../common/types';
+import { getLocalizationMessage } from '../utils/compatibility_utils';
 import { PageSizeLarge } from './large';
 import { PageSizeSmall } from './small';
 
-function getAllText(): string {
-  return messageLocalization.getFormatter('dxPager-pageSizesAllText')();
-}
-
 export interface PageSizeSelectorProps {
   isLargeDisplayMode: boolean;
   rootElementRef?: RefObject<HTMLDivElement>;
@@ -64,12 +60,16 @@ export class PageSizeSelector extends InfernoComponent<PageSizeSelectorPropsType
     }
   }
 
+  getAllText(): string {
+    return getLocalizationMessage(this.context, 'dxPagination-pageSizesAllText');
+  }
+
   getNormalizedPageSizes(): FullPageSize[] {
     if (this.__getterCache.normalizedPageSizes !== undefined) {
       return this.__getterCache.normalizedPageSizes;
     }
     const mapFunction = (p): FullPageSize => (p === 'all' || p === 0 ? {
-      text: getAllText(),
+      text: this.getAllText(),
       value: 0,
     } : {
       text: String(p),

packages/devextreme/js/__internal/pager/page_size/small.tsx

@@ -3,23 +3,20 @@
 import type { RefObject } from '@devextreme/runtime/inferno';
 import { InfernoComponent, InfernoEffect } from '@devextreme/runtime/inferno';
 
-import messageLocalization from '../../../localization/message';
 import { PaginationDefaultProps, type PaginationProps } from '../common/pagination_props';
 import type { FullPageSize } from '../common/types';
 import { SelectBox } from '../drop_down_editors/select_box';
 import { calculateValuesFittedWidth } from '../utils/calculate_values_fitted_width';
+import { getLocalizationMessage } from '../utils/compatibility_utils';
 import { getElementMinWidth } from '../utils/get_element_width';
 
 export interface PaginationSmallProps {
   parentRef?: RefObject<HTMLElement>;
   allowedPageSizes: FullPageSize[];
-  inputAttr?: any;
 }
 
 const PaginationSmallDefaultProps: PaginationSmallProps = {
-  inputAttr: {
-    'aria-label': messageLocalization.format('dxPager-ariaPageSize'),
-  },
+
   allowedPageSizes: [],
 };
 
@@ -54,7 +51,6 @@ export class PageSizeSmall extends InfernoComponent<PageSizeSmallPropsType> {
       this.props.pageSize,
       this.props.pageSizeChangedInternal,
       this.props.allowedPageSizes,
-      this.props.inputAttr,
     ];
     return [new InfernoEffect(this.updateWidth, dependency)];
   }
@@ -66,7 +62,6 @@ export class PageSizeSmall extends InfernoComponent<PageSizeSmallPropsType> {
       this.props.pageSize,
       this.props.pageSizeChangedInternal,
       this.props.allowedPageSizes,
-      this.props.inputAttr,
     ];
     this._effects[0]?.update(dependency);
   }
@@ -84,9 +79,14 @@ export class PageSizeSmall extends InfernoComponent<PageSizeSmallPropsType> {
     );
   }
 
+  getInputAttributes(): object {
+    return {
+      'aria-label': getLocalizationMessage(this.context, 'dxPagination-ariaPageSize'),
+    };
+  }
+
   render(): JSX.Element {
     const {
-      inputAttr,
       allowedPageSizes,
       pageSize,
       pageSizeChangedInternal,
@@ -99,7 +99,7 @@ export class PageSizeSmall extends InfernoComponent<PageSizeSmallPropsType> {
         value={pageSize}
         valueChange={pageSizeChangedInternal}
         width={this.getWidth()}
-        inputAttr={inputAttr}
+        inputAttr={this.getInputAttributes()}
       />
     );
   }

packages/devextreme/js/__internal/pager/pages/page.tsx

@@ -3,11 +3,11 @@
 import { BaseInfernoComponent } from '@devextreme/runtime/inferno';
 
 import { format } from '../../../core/utils/string';
-import messageLocalization from '../../../localization/message';
 import type { EventCallback } from '../../core/r1/event_callback';
 import { combineClasses } from '../../core/r1/utils/render_utils';
 import { PAGER_PAGE_CLASS, PAGER_SELECTION_CLASS } from '../common/consts';
 import { LightButton } from '../common/light_button';
+import { getLocalizationMessage } from '../utils/compatibility_utils';
 
 // for angular type inference (onClick type in angular changes to EventEmitter)
 export interface PagePropsInterface {
@@ -29,7 +29,7 @@ export class Page extends BaseInfernoComponent<PagePropsInterface> {
   public refs: any = null;
 
   getLabel(): string {
-    return format(messageLocalization.getFormatter('dxPager-page'), this.getValue()) as string;
+    return format(getLocalizationMessage(this.context, 'dxPagination-page'), this.getValue()) as string;
   }
 
   getValue(): number {

packages/devextreme/js/__internal/pager/pages/page_index_selector.tsx

@@ -4,11 +4,11 @@
 import { BaseInfernoComponent } from '@devextreme/runtime/inferno';
 import { Fragment } from 'inferno';
 
-import messageLocalization from '../../../localization/message';
 import { ConfigContext } from '../../core/r1/config_context';
 import type { LightButtonProps } from '../common/light_button';
 import { LightButton } from '../common/light_button';
 import { PaginationDefaultProps, type PaginationProps } from '../common/pagination_props';
+import { getLocalizationMessage } from '../utils/compatibility_utils';
 import { PagesLarge } from './large';
 import { PagesSmall } from './small';
 
@@ -17,9 +17,6 @@ const PAGER_PREV_BUTTON_CLASS = 'dx-prev-button';
 const PAGER_NEXT_BUTTON_CLASS = 'dx-next-button';
 export const PAGER_BUTTON_DISABLE_CLASS = 'dx-button-disable';
 
-const getNextButtonLabel = (): string => messageLocalization.getFormatter('dxPager-nextPage')();
-const getPrevButtonLabel = (): string => messageLocalization.getFormatter('dxPager-prevPage')();
-
 const classNames = {
   nextEnabledClass: `${PAGER_NAVIGATE_BUTTON} ${PAGER_NEXT_BUTTON_CLASS}`,
   prevEnabledClass: `${PAGER_NAVIGATE_BUTTON} ${PAGER_PREV_BUTTON_CLASS}`,
@@ -174,6 +171,14 @@ export class PageIndexSelector extends BaseInfernoComponent<PageIndexSelectorPro
     }
   }
 
+  getPrevButtonLabel(): string {
+    return getLocalizationMessage(this.context, 'dxPagination-prevPage');
+  }
+
+  getNextButtonLabel(): string {
+    return getLocalizationMessage(this.context, 'dxPagination-nextPage');
+  }
+
   render(): JSX.Element {
     const {
       className,
@@ -193,7 +198,7 @@ export class PageIndexSelector extends BaseInfernoComponent<PageIndexSelectorPro
       <Fragment>
         {this.getRenderPrevButton() && (
           <LightButton
-            label={getPrevButtonLabel()}
+            label={this.getPrevButtonLabel()}
             className={className}
             tabIndex={tabIndex}
             onClick={navigate}
@@ -217,7 +222,7 @@ export class PageIndexSelector extends BaseInfernoComponent<PageIndexSelectorPro
         )}
         {this.getRenderNextButton() && (
           <LightButton
-            label={getNextButtonLabel()}
+            label={this.getNextButtonLabel()}
             className={this.getNextButtonProps().className}
             tabIndex={this.getNextButtonProps().tabIndex}
             onClick={this.getNextButtonProps().navigate}

packages/devextreme/js/__internal/pager/pages/small.tsx

@@ -4,11 +4,11 @@ import { InfernoComponent, InfernoEffect } from '@devextreme/runtime/inferno';
 import type { RefObject } from 'inferno';
 import { createRef } from 'inferno';
 
-import messageLocalization from '../../../localization/message';
 import { PaginationDefaultProps, type PaginationProps } from '../common/pagination_props';
 import { NumberBox } from '../editors/number_box';
 import { PAGER_INFO_CLASS } from '../info';
 import { calculateValuesFittedWidth } from '../utils/calculate_values_fitted_width';
+import { getLocalizationMessage } from '../utils/compatibility_utils';
 import { getElementMinWidth } from '../utils/get_element_width';
 import { Page } from './page';
 
@@ -17,15 +17,10 @@ const PAGER_PAGE_INDEX_CLASS = 'dx-page-index';
 const LIGHT_PAGES_CLASS = 'dx-light-pages';
 const PAGER_PAGES_COUNT_CLASS = 'dx-pages-count';
 
-export interface PaginationSmallProps {
-  inputAttr?: any;
-}
-
 // eslint-disable-next-line @typescript-eslint/no-type-alias
-type PaginationSmallPropsType = Pick<PaginationProps, 'pageCount' | 'pageIndex' | 'pageIndexChangedInternal' | 'pagesCountText'> & PaginationSmallProps;
+type PaginationSmallPropsType = Pick<PaginationProps, 'pageCount' | 'pageIndex' | 'pageIndexChangedInternal' | 'pagesCountText'>;
 
 export const PaginationSmallDefaultProps: PaginationSmallPropsType = {
-  inputAttr: { 'aria-label': messageLocalization.format('dxPager-ariaPageNumber') },
   pageIndex: PaginationDefaultProps.pageIndex,
   pageCount: PaginationDefaultProps.pageCount,
   pageIndexChangedInternal: PaginationDefaultProps.pageIndexChangedInternal,
@@ -75,7 +70,13 @@ export class PagesSmall extends InfernoComponent<PaginationSmallPropsType> {
   }
 
   getPagesCountText(): string {
-    return (this.props.pagesCountText ?? '') || messageLocalization.getFormatter('dxPager-pagesCountText')();
+    return (this.props.pagesCountText ?? '') || getLocalizationMessage(this.context, 'dxPagination-pagesCountText');
+  }
+
+  getInputAttributes(): object {
+    return {
+      'aria-label': getLocalizationMessage(this.context, 'dxPagination-ariaPageNumber'),
+    };
   }
 
   selectLastPageIndex(): void {
@@ -96,7 +97,7 @@ export class PagesSmall extends InfernoComponent<PaginationSmallPropsType> {
           width={this.getWidth()}
           value={this.getValue()}
           valueChange={this.valueChange}
-          inputAttr={this.props.inputAttr}
+          inputAttr={this.getInputAttributes()}
         />
         <span className={PAGER_INFO_TEXT_CLASS}>{this.getPagesCountText()}</span>
         <Page