🎹 Pager: Implement calculating restrictions (#28078)

e2e/testcafe-devextreme/tests/pager/baseProperties.ts

@@ -20,6 +20,7 @@ test('Pager width and height property', async (t) => {
 }).before(async () => createWidget('dxPager', {
   width: 270,
   height: '95px',
+  totalCount: 50,
 }));
 
 test('Pager elementAttr property', async (t) => {
@@ -51,6 +52,7 @@ test('Pager hint, disabled and accessKey properties', async (t) => {
   hint: 'Best Pager',
   disabled: true,
   accessKey: 'F',
+  totalCount: 50,
 }));
 
 test('Pager tabindex and state properties', async (t) => {
@@ -79,6 +81,7 @@ test('Pager tabindex and state properties', async (t) => {
     .expect(pager.element.hasClass('dx-state-active'))
     .ok();
 }).before(async () => createWidget('dxPager', {
+  totalCount: 50,
   disabled: false,
   width: '100%',
   focusStateEnabled: true,
@@ -102,6 +105,7 @@ test('Pager focus method without focusStateEnabled', async (t) => {
     .ok();
 }).before(async () => createWidget('dxPager', {
   focusStateEnabled: false,
+  totalCount: 50,
 }));
 
 test('Pager focus method with focusStateEnabled', async (t) => {
@@ -119,4 +123,5 @@ test('Pager focus method with focusStateEnabled', async (t) => {
     .ok();
 }).before(async () => createWidget('dxPager', {
   focusStateEnabled: true,
+  totalCount: 50,
 }));

packages/devextreme/js/__internal/core/r1/component_wrapper.ts

@@ -483,6 +483,10 @@ export class ComponentWrapper extends DOMComponent<ComponentWrapperProps> {
     this._invalidate();
   }
 
+  _validateOptions(options: Record<string, unknown>): Record<string, unknown> {
+    return super._validateOptions(options);
+  }
+
   _extractDefaultSlot(): VNode | null {
     if (this.option('_hasAnonymousTemplateContent')) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-return

packages/devextreme/js/__internal/core/widget/component.ts

@@ -167,6 +167,7 @@ export class Component<
       this._options.onStartChange(() => this.beginUpdate());
       this._options.onEndChange(() => this.endUpdate());
       this._options.addRules(this._defaultOptionsRules());
+      this._options.validateOptions((o) => this._validateOptions(o));
 
       // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
       if (options && options.onInitializing) {
@@ -499,4 +500,8 @@ export class Component<
     this._options.reset(name);
     this.endUpdate();
   }
+
+  _validateOptions(options: TProperties): TProperties {
+    return options;
+  }
 }

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

@@ -94,10 +94,11 @@ export class PagerView extends modules.View {
       pagesNavigatorVisible: pagerOptions.visible,
       showNavigationButtons: pagerOptions.showNavigationButtons,
       label: pagerOptions.label,
-      pageSizes: that.getPageSizes(),
+      allowedPageSizes: that.getPageSizes(),
       totalCount: dataController.totalCount(),
       hasKnownLastPage: dataController.hasKnownLastPage(),
       rtlEnabled: that.option('rtlEnabled'),
+      _skipValidation: true,
       pageIndexChanged(pageIndex) {
         if (dataController.pageIndex() !== pageIndex - 1) {
           dataController.pageIndex(pageIndex - 1);

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

@@ -18,7 +18,7 @@ export interface BasePagerProps extends BaseWidgetProps {
   hasKnownLastPage?: boolean;
   pagesNavigatorVisible?: boolean | 'auto';
   showPageSizes?: boolean;
-  pageSizes: (number | 'all')[];
+  allowedPageSizes: (number | 'all')[];
   rtlEnabled?: boolean;
   showNavigationButtons?: boolean;
   totalCount?: number;
@@ -32,13 +32,13 @@ export const BasePagerDefaultProps: BasePagerProps = {
   showInfo: false,
   displayMode: 'adaptive',
   maxPagesCount: 10,
-  pageCount: 10,
+  pageCount: 1,
   visible: true,
   hasKnownLastPage: true,
   pagesNavigatorVisible: 'auto',
   showPageSizes: true,
-  pageSizes: [5, 10],
+  allowedPageSizes: [5, 10],
   showNavigationButtons: false,
-  totalCount: 0,
+  totalCount: 1,
   label: messageLocalization.format('dxPager-ariaLabel'),
 };

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

@@ -25,7 +25,7 @@ export interface PagerContentProps extends PagerProps {
   infoTextVisible: boolean;
   isLargeDisplayMode: boolean;
   rootElementRef?: RefObject<HTMLDivElement>;
-  pageSizesRef?: RefObject<HTMLDivElement>;
+  allowedPageSizesRef?: RefObject<HTMLDivElement>;
   pagesRef?: RefObject<HTMLElement>;
   infoTextRef?: RefObject<HTMLDivElement>;
 }
@@ -179,10 +179,10 @@ export class PagerContent extends InfernoComponent<PagerContentProps> {
       rtlEnabled,
       visible,
       showPageSizes,
-      pageSizesRef,
+      allowedPageSizesRef,
       pageSize,
       pageSizeChangedInternal,
-      pageSizes,
+      allowedPageSizes,
       infoTextRef,
       infoText,
       pageCount,
@@ -232,11 +232,11 @@ export class PagerContent extends InfernoComponent<PagerContentProps> {
       >
         {showPageSizes && (
           <PageSizeSelector
-            rootElementRef={pageSizesRef}
+            rootElementRef={allowedPageSizesRef}
             isLargeDisplayMode={this.getIsLargeDisplayMode()}
             pageSize={pageSize}
             pageSizeChangedInternal={pageSizeChangedInternal}
-            pageSizes={pageSizes}
+            allowedPageSizes={allowedPageSizes}
           />
         )}
         {this.getPagesContainerVisible() && (

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

@@ -13,14 +13,14 @@ import { PagerDefaultProps, type PagerProps } from '../common/pager_props';
 import type { FullPageSize } from '../common/types';
 
 export interface PageSizeLargeProps {
-  pageSizes: FullPageSize[];
+  allowedPageSizes: FullPageSize[];
 }
 
 // eslint-disable-next-line @typescript-eslint/no-type-alias
 type PageSizeLargePropsType = Pick<PagerProps, 'pageSize' | 'pageSizeChangedInternal'> & PageSizeLargeProps;
 
 export const PageSizeLargeDefaultProps: PageSizeLargePropsType = {
-  pageSizes: [],
+  allowedPageSizes: [],
   pageSize: PagerDefaultProps.pageSize,
   pageSizeChangedInternal: PagerDefaultProps.pageSizeChangedInternal,
 };
@@ -57,9 +57,9 @@ export class PageSizeLarge extends BaseInfernoComponent<PageSizeLargePropsType>
     }[] => {
       const {
         pageSize,
-        pageSizes,
+        allowedPageSizes,
       } = this.props;
-      return pageSizes.map((_ref3, index) => {
+      return allowedPageSizes.map((_ref3, index) => {
         const {
           text,
           value: processedPageSize,
@@ -90,7 +90,7 @@ export class PageSizeLarge extends BaseInfernoComponent<PageSizeLargePropsType>
 
   componentWillUpdate(nextProps: PageSizeLargePropsType): void {
     const componentChanged = this.props.pageSize !== nextProps.pageSize
-    || this.props.pageSizes !== nextProps.pageSizes
+    || this.props.allowedPageSizes !== nextProps.allowedPageSizes
     || this.props.pageSizeChangedInternal !== nextProps.pageSizeChangedInternal;
     if (componentChanged) {
       this.__getterCache.pageSizesText = undefined;

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

@@ -24,13 +24,13 @@ export interface PageSizeSelectorProps {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-type-alias
-type PageSizeSelectorPropsType = Pick<PagerProps, 'pageSize' | 'pageSizeChangedInternal' | 'pageSizes' > & PageSizeSelectorProps;
+type PageSizeSelectorPropsType = Pick<PagerProps, 'pageSize' | 'pageSizeChangedInternal' | 'allowedPageSizes' > & PageSizeSelectorProps;
 
 const PageSizeSelectorDefaultProps: PageSizeSelectorPropsType = {
   isLargeDisplayMode: true,
   pageSize: PagerDefaultProps.pageSize,
   pageSizeChangedInternal: PagerDefaultProps.pageSizeChangedInternal,
-  pageSizes: PagerDefaultProps.pageSizes,
+  allowedPageSizes: PagerDefaultProps.allowedPageSizes,
 };
 
 export class PageSizeSelector extends InfernoComponent<PageSizeSelectorPropsType> {
@@ -75,14 +75,15 @@ export class PageSizeSelector extends InfernoComponent<PageSizeSelectorPropsType
       text: String(p),
       value: p,
     });
-    const result: FullPageSize[] | undefined = this.props.pageSizes.map<FullPageSize>(mapFunction);
+    // eslint-disable-next-line max-len
+    const result: FullPageSize[] | undefined = this.props.allowedPageSizes.map<FullPageSize>(mapFunction);
     this.__getterCache.normalizedPageSizes = result;
     return result;
   }
 
   componentWillUpdate(nextProps: PageSizeSelectorPropsType) {
     super.componentWillUpdate();
-    if (this.props.pageSizes !== nextProps.pageSizes) {
+    if (this.props.allowedPageSizes !== nextProps.allowedPageSizes) {
       this.__getterCache.normalizedPageSizes = undefined;
     }
   }
@@ -98,15 +99,15 @@ export class PageSizeSelector extends InfernoComponent<PageSizeSelectorPropsType
       <div ref={this.htmlRef} className={PAGER_PAGE_SIZES_CLASS}>
         {isLargeDisplayMode && (
         <PageSizeLarge
-          pageSizes={this.getNormalizedPageSizes()}
+          allowedPageSizes={this.getNormalizedPageSizes()}
           pageSize={pageSize}
           pageSizeChangedInternal={pageSizeChangedInternal}
         />
         )}
         {!isLargeDisplayMode && (
         <PageSizeSmall
           parentRef={this.htmlRef}
-          pageSizes={normalizedPageSizes}
+          allowedPageSizes={normalizedPageSizes}
           pageSize={pageSize}
           pageSizeChangedInternal={pageSizeChangedInternal}
         />

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

@@ -12,15 +12,15 @@ import { getElementMinWidth } from '../utils/get_element_width';
 
 export interface PagerSmallProps {
   parentRef?: RefObject<HTMLElement>;
-  pageSizes: FullPageSize[];
+  allowedPageSizes: FullPageSize[];
   inputAttr?: any;
 }
 
 const PagerSmallDefaultProps: PagerSmallProps = {
   inputAttr: {
     'aria-label': messageLocalization.format('dxPager-ariaPageSize'),
   },
-  pageSizes: [],
+  allowedPageSizes: [],
 };
 
 type PageSizeSmallPropsType = PagerSmallProps & Pick<PagerProps, 'pageSize' | 'pageSizeChangedInternal'>;
@@ -53,7 +53,7 @@ export class PageSizeSmall extends InfernoComponent<PageSizeSmallPropsType> {
       this.state.minWidth,
       this.props.pageSize,
       this.props.pageSizeChangedInternal,
-      this.props.pageSizes,
+      this.props.allowedPageSizes,
       this.props.inputAttr,
     ];
     return [new InfernoEffect(this.updateWidth, dependency)];
@@ -65,7 +65,7 @@ export class PageSizeSmall extends InfernoComponent<PageSizeSmallPropsType> {
       this.state.minWidth,
       this.props.pageSize,
       this.props.pageSizeChangedInternal,
-      this.props.pageSizes,
+      this.props.allowedPageSizes,
       this.props.inputAttr,
     ];
     this._effects[0]?.update(dependency);
@@ -80,22 +80,22 @@ export class PageSizeSmall extends InfernoComponent<PageSizeSmallPropsType> {
   getWidth(): number {
     return calculateValuesFittedWidth(
       this.state.minWidth,
-      this.props.pageSizes?.map((p) => p.value),
+      this.props.allowedPageSizes?.map((p) => p.value),
     );
   }
 
   render(): JSX.Element {
     const {
       inputAttr,
-      pageSizes,
+      allowedPageSizes,
       pageSize,
       pageSizeChangedInternal,
     } = this.props;
     return (
       <SelectBox
         displayExpr="text"
         valueExpr="value"
-        dataSource={pageSizes}
+        dataSource={allowedPageSizes}
         value={pageSize}
         valueChange={pageSizeChangedInternal}
         width={this.getWidth()}