From 9f4575d9ab074f362c201a22079f043ad3988a40 Mon Sep 17 00:00:00 2001
From: Arpita Kate <arpita.kate@dell.com>
Date: Fri, 26 Apr 2024 18:06:25 +0000
Subject: [PATCH 1/7] Revert Changes for making pageSizes as default prop

---
 package.json                         |  2 +-
 src/datagrid/DataGrid.stories.tsx    |  6 ++---
 src/datagrid/DataGrid.tsx            | 33 ++++++++++++++++++++--------
 src/datagrid/DataGridStoriesData.tsx |  4 +++-
 4 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 0ca2fa42..d5110c04 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dellstorage/clarity-react",
-    "version": "1.2.11",
+    "version": "1.2.12",
     "description": "React components for Clarity UI",
     "license": "Apache-2.0",
     "private": false,
diff --git a/src/datagrid/DataGrid.stories.tsx b/src/datagrid/DataGrid.stories.tsx
index 5803b74e..c24590a4 100644
--- a/src/datagrid/DataGrid.stories.tsx
+++ b/src/datagrid/DataGrid.stories.tsx
@@ -47,7 +47,7 @@ import {
     paginationDetailsForDetailsPane,
     paginationRowsWithLinks,
     storeForDetailPane,
-    paginationDetailswithDefaultPageSizes,
+    paginationDetailswithPageSizes,
 } from "./DataGridStoriesData";
 import {CustomFilter} from "./CustomFilter";
 import {CustomFilterMulti} from "./CustomFilterMulti";
@@ -420,12 +420,12 @@ storiesOf("DataGrid", module)
             />
         </div>
     ))
-    .add("Grid with pagination and default pageSizes dropdown", () => (
+    .add("Grid with pagination and pageSizes dropdown", () => (
         <div style={{width: "80%"}}>
             <DataGrid
                 columns={normalColumns}
                 rows={paginationRows.slice(0, 10)}
-                pagination={paginationDetailswithDefaultPageSizes}
+                pagination={paginationDetailswithPageSizes}
                 itemText={"Users"}
                 footer={{showFooter: true}}
             />
diff --git a/src/datagrid/DataGrid.tsx b/src/datagrid/DataGrid.tsx
index 0c06edf5..7afa818c 100644
--- a/src/datagrid/DataGrid.tsx
+++ b/src/datagrid/DataGrid.tsx
@@ -18,6 +18,7 @@ import {Icon, Direction} from "../icon";
 import {Spinner, SpinnerSize} from "../spinner/Spinner";
 import {HideShowColumns} from "./HideShowColumns";
 import {DataGridColumnResize} from "./DataGridColumnResize";
+import {totalmem} from "os";
 
 /**
  * General component description :
@@ -213,7 +214,8 @@ export type DataGridSort = {
  * @param {lastPage} Index of the last page for the current data
  * @param {getPage} custom function to get page data for given page number
  * @param {compactFooter} if true will render compact pagination footer
- * @param {pageSizes} Array containing pageSize which user can select from dropdown menu
+ * @param {pageSizes} Array containing pageSize which user can select from dropdown menu.
+ *          Supports custom page sizes. For example["10", "20", "50", "100", CUSTOM_PAGE_SIZE_OPTION]
  * @param {maxCustomPageSize} Maximum limit for custom page size as well as for pageSize dropdown
  */
 type DataGridPaginationProps = {
@@ -278,8 +280,8 @@ export const DEFAULT_COLUMN_WIDTH: number = 100;
 export const DEFAULT_CURRENT_PAGE_NUMBER: number = 1;
 export const DEFAULT_PAGE_SIZE: number = 10;
 export const DEFAULT_TOTAL_ITEMS: number = 0;
-export const DEFAULT_PAGE_SIZES: string[] = ["10", "20", "50", "100", "Custom"];
 export const MAX_PAGE_SIZE: number = 1000;
+export const CUSTOM_PAGE_SIZE_OPTION: string = "Custom";
 
 /**
  * State for DataGrid :
@@ -299,7 +301,16 @@ type DataGridState = {
 
 /**
  * State for DataGrid Pagination :
+ * @param {currentPage} Page index of the current page
+ * @param {pageSize} page size of the page. Default is 10
+ * @param {totalItems} total number of items
+ * @param {firstItem} first item number in current page
+ * @param {lastItem} last item number in current page
+ * @param {totalPages} number of total pages
+ * @param {pageSizes} array of page sizes. can support string "custom" For example,  ["10", "20", "50", "100", CUSTOM_PAGE_SIZE_OPTION]
+ * @param {compactFooter} if true renders compact pagination footer
  * @param {isCustomPageSizeSelected} if true renders input box to enter custom pageSize
+ * @param {maxCustomPageSize} maximum value for custom page size
  */
 type DataGridPaginationState = {
     currentPage: number;
@@ -390,7 +401,7 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
                 pageSize,
                 totalItems,
                 compactFooter,
-                pageSizes = DEFAULT_PAGE_SIZES,
+                pageSizes,
                 maxCustomPageSize = MAX_PAGE_SIZE,
             } = pagination;
             const currentPageNumber: number = currentPage || DEFAULT_CURRENT_PAGE_NUMBER;
@@ -549,7 +560,10 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
             this.setState(
                 prevState => ({
                     ...prevState,
-                    pagination: {...prevState.pagination!, isCustomPageSizeSelected: evt.target.value === "Custom"},
+                    pagination: {
+                        ...prevState.pagination!,
+                        isCustomPageSizeSelected: evt.target.value === CUSTOM_PAGE_SIZE_OPTION,
+                    },
                 }),
                 () => {
                     const {isCustomPageSizeSelected, currentPage} = this.state.pagination!;
@@ -1519,7 +1533,7 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
 
     // Function to build pageSizes select
     private buildPageSizesSelect(): React.ReactElement {
-        const {pageSizes = DEFAULT_PAGE_SIZES, pageSize, isCustomPageSizeSelected} = this.state.pagination!;
+        const {pageSizes, pageSize, isCustomPageSizeSelected} = this.state.pagination!;
         const {itemText = DEFAULT_ITEM_TEXT} = this.props;
         return (
             <div className={ClassNames.PAGINATION_SIZE}>
@@ -1622,7 +1636,7 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
         const {className, style, compactFooter} = this.props.pagination!;
         const {itemText = DEFAULT_ITEM_TEXT} = this.props;
         const showCompactFooter: boolean = compactFooter || this.isDetailPaneOpen();
-        let {totalItems, firstItem, lastItem, pageSizes = DEFAULT_PAGE_SIZES} = this.state.pagination!;
+        let {totalItems, firstItem, lastItem, pageSizes} = this.state.pagination!;
         if (totalItems === 0) {
             firstItem = lastItem = 0;
         }
@@ -1691,9 +1705,10 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
         const {pagination} = this.state;
         let renderPaginationFooter = false;
         if (pagination) {
-            const {totalItems, pageSize} = pagination;
-            if (totalItems && pageSize && totalItems > 0) {
-                renderPaginationFooter = true;
+            const {totalItems, pageSize, pageSizes} = pagination;
+            if (totalItems && pageSize) {
+                // Render pagination footer if pageSizes are given or if totalItems are greater than pageSize
+                renderPaginationFooter = pageSizes ? totalItems > 0 : totalItems >= pageSize;
             }
         }
 
diff --git a/src/datagrid/DataGridStoriesData.tsx b/src/datagrid/DataGridStoriesData.tsx
index 819cb7b8..5665f030 100644
--- a/src/datagrid/DataGridStoriesData.tsx
+++ b/src/datagrid/DataGridStoriesData.tsx
@@ -15,6 +15,7 @@ import {Button} from "../forms/button";
 import {SortOrder, DataGridRow, DataGridFilterResult, DataGridColumn} from ".";
 import {Password} from "../forms/password/Password";
 import {ToolTip, ToolTipDirection, ToolTipSize} from "../forms/tooltip/ToolTip";
+import {CUSTOM_PAGE_SIZE_OPTION} from "./DataGrid";
 
 /**
  * General file description :
@@ -595,10 +596,11 @@ export const paginationDetails = {
     pageSizes: ["5", "10"],
 };
 
-export const paginationDetailswithDefaultPageSizes = {
+export const paginationDetailswithPageSizes = {
     totalItems: paginationRows.length,
     getPageData: getPageDataForCustomPageSize,
     pageSize: 10,
+    pageSizes: ["10", "20", "50", "100", CUSTOM_PAGE_SIZE_OPTION],
 };
 
 export const paginationDetailsWithCompactFooter = {

From f0d597e1999a7ef36a24bb4634dc0c855526a8ad Mon Sep 17 00:00:00 2001
From: Arpita Kate <arpita.kate@dell.com>
Date: Fri, 26 Apr 2024 18:09:22 +0000
Subject: [PATCH 2/7] Removed unused import

---
 src/datagrid/DataGrid.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/datagrid/DataGrid.tsx b/src/datagrid/DataGrid.tsx
index 7afa818c..9ec48e70 100644
--- a/src/datagrid/DataGrid.tsx
+++ b/src/datagrid/DataGrid.tsx
@@ -18,7 +18,6 @@ import {Icon, Direction} from "../icon";
 import {Spinner, SpinnerSize} from "../spinner/Spinner";
 import {HideShowColumns} from "./HideShowColumns";
 import {DataGridColumnResize} from "./DataGridColumnResize";
-import {totalmem} from "os";
 
 /**
  * General component description :

From e8a77cbf2d384cb85792fd00b49b333486f0fde1 Mon Sep 17 00:00:00 2001
From: Arpita Kate <arpita.kate@dell.com>
Date: Sat, 27 Apr 2024 17:36:08 +0000
Subject: [PATCH 3/7] Update datagrid pagination stories

---
 src/datagrid/DataGrid.tsx            | 19 +++++++++++++------
 src/datagrid/DataGridStoriesData.tsx | 11 ++++++-----
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/datagrid/DataGrid.tsx b/src/datagrid/DataGrid.tsx
index 9ec48e70..942e8e6e 100644
--- a/src/datagrid/DataGrid.tsx
+++ b/src/datagrid/DataGrid.tsx
@@ -216,8 +216,9 @@ export type DataGridSort = {
  * @param {pageSizes} Array containing pageSize which user can select from dropdown menu.
  *          Supports custom page sizes. For example["10", "20", "50", "100", CUSTOM_PAGE_SIZE_OPTION]
  * @param {maxCustomPageSize} Maximum limit for custom page size as well as for pageSize dropdown
+ * @param {isCustomPageSizeSelected} set to true if page sizes dropdown is present and custom option is selected
  */
-type DataGridPaginationProps = {
+export type DataGridPaginationProps = {
     className?: string;
     style?: any;
     currentPage?: number;
@@ -227,6 +228,7 @@ type DataGridPaginationProps = {
     compactFooter?: boolean;
     getPageData?: (pageIndex: number, pageSize: number) => Promise<DataGridRow[]>;
     maxCustomPageSize?: number;
+    isCustomPageSizeSelected?: boolean;
 };
 
 /**
@@ -279,7 +281,7 @@ export const DEFAULT_COLUMN_WIDTH: number = 100;
 export const DEFAULT_CURRENT_PAGE_NUMBER: number = 1;
 export const DEFAULT_PAGE_SIZE: number = 10;
 export const DEFAULT_TOTAL_ITEMS: number = 0;
-export const MAX_PAGE_SIZE: number = 1000;
+export const DEFAULT_MAX_PAGE_SIZE: number = 1000;
 export const CUSTOM_PAGE_SIZE_OPTION: string = "Custom";
 
 /**
@@ -401,11 +403,14 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
                 totalItems,
                 compactFooter,
                 pageSizes,
-                maxCustomPageSize = MAX_PAGE_SIZE,
+                maxCustomPageSize,
+                isCustomPageSizeSelected,
             } = pagination;
             const currentPageNumber: number = currentPage || DEFAULT_CURRENT_PAGE_NUMBER;
             const datagridPageSize: number = pageSize || DEFAULT_PAGE_SIZE;
             const totalItemsInDatagrid: number = totalItems || DEFAULT_TOTAL_ITEMS;
+            const maxCustomPageSizeNumber: number = maxCustomPageSize || DEFAULT_MAX_PAGE_SIZE;
+            const isCustomPageSizeOptionSelected: boolean = isCustomPageSizeSelected || false;
 
             const firstItem: number = this.getFirstItemIndex(currentPageNumber, datagridPageSize);
             const lastItem: number = this.getLastItemIndex(datagridPageSize, totalItemsInDatagrid, firstItem);
@@ -419,7 +424,8 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
                 firstItem: firstItem,
                 lastItem: lastItem,
                 totalPages: this.getTotalPages(totalItemsInDatagrid, datagridPageSize),
-                maxCustomPageSize: maxCustomPageSize,
+                maxCustomPageSize: maxCustomPageSizeNumber,
+                isCustomPageSizeSelected: isCustomPageSizeOptionSelected,
             };
 
             return paginationState;
@@ -1513,12 +1519,13 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
 
     //Function to render textbox for custom pageSize
     private buildCustomPageSizeSelect = () => {
+        const {pageSize} = this.state.pagination!;
         return (
             <div className={classNames([ClassNames.PAGINATION_LIST])} style={Styles.PAGINATION_CUSTOM_PAGESIZE}>
                 <input
                     className={ClassNames.PAGINATION_CURRENT}
                     size={4}
-                    defaultValue=""
+                    defaultValue={pageSize}
                     type="text"
                     data-qa="dataqa_datagrid_custom_input"
                     ref={this.customPageSizeRef}
@@ -1542,7 +1549,7 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
                         <select
                             className={classNames([ClassNames.CLR_PAGE_SIZE_SELECT])}
                             onChange={evt => this.handleSelectPageSize(evt)}
-                            defaultValue={pageSize}
+                            defaultValue={isCustomPageSizeSelected ? CUSTOM_PAGE_SIZE_OPTION : pageSize}
                         >
                             {pageSizes!.map((size: string, index: number) => {
                                 return (
diff --git a/src/datagrid/DataGridStoriesData.tsx b/src/datagrid/DataGridStoriesData.tsx
index 5665f030..82614c96 100644
--- a/src/datagrid/DataGridStoriesData.tsx
+++ b/src/datagrid/DataGridStoriesData.tsx
@@ -15,7 +15,7 @@ import {Button} from "../forms/button";
 import {SortOrder, DataGridRow, DataGridFilterResult, DataGridColumn} from ".";
 import {Password} from "../forms/password/Password";
 import {ToolTip, ToolTipDirection, ToolTipSize} from "../forms/tooltip/ToolTip";
-import {CUSTOM_PAGE_SIZE_OPTION} from "./DataGrid";
+import {CUSTOM_PAGE_SIZE_OPTION, DataGridPaginationProps} from "./DataGrid";
 
 /**
  * General file description :
@@ -589,21 +589,22 @@ export const getPageDataForCustomPageSize = (pageIndex: number, pageSize: number
     });
 };
 
-export const paginationDetails = {
+export const paginationDetails: DataGridPaginationProps = {
     totalItems: paginationRows.length,
     getPageData: getPageData,
     pageSize: 5,
     pageSizes: ["5", "10"],
 };
 
-export const paginationDetailswithPageSizes = {
+export const paginationDetailswithPageSizes: DataGridPaginationProps = {
     totalItems: paginationRows.length,
     getPageData: getPageDataForCustomPageSize,
     pageSize: 10,
+    currentPage: 1,
     pageSizes: ["10", "20", "50", "100", CUSTOM_PAGE_SIZE_OPTION],
 };
 
-export const paginationDetailsWithCompactFooter = {
+export const paginationDetailsWithCompactFooter: DataGridPaginationProps = {
     totalItems: paginationRows.length,
     getPageData: getPageData,
     pageSize: 5,
@@ -611,7 +612,7 @@ export const paginationDetailsWithCompactFooter = {
     compactFooter: true,
 };
 
-export const paginationDetailsForAlreadySelectedRows = {
+export const paginationDetailsForAlreadySelectedRows: DataGridPaginationProps = {
     totalItems: alreadySelectedRows.length,
     getPageData: getPageDataForSelectedRows,
     pageSize: 5,

From 2f1e589c0955a0adf245b16f8ab42e4db8b7b811 Mon Sep 17 00:00:00 2001
From: Arpita Kate <arpita.kate@dell.com>
Date: Mon, 29 Apr 2024 06:38:10 +0000
Subject: [PATCH 4/7] Added validation for custom page size input

---
 src/datagrid/DataGrid.tsx | 74 ++++++++++++++++++++++-----------------
 src/utils.ts              | 40 +++++++++++++++++++++
 2 files changed, 81 insertions(+), 33 deletions(-)

diff --git a/src/datagrid/DataGrid.tsx b/src/datagrid/DataGrid.tsx
index 942e8e6e..0b06c847 100644
--- a/src/datagrid/DataGrid.tsx
+++ b/src/datagrid/DataGrid.tsx
@@ -10,7 +10,7 @@
 
 import React from "react";
 import {ClassNames, Styles} from "./ClassNames";
-import {classNames, allTrueOnKey} from "../utils";
+import {classNames, allTrueOnKey, allowOnlyIntegers, isNumber, KEYBOARD_KEYS} from "../utils";
 import {CheckBox} from "../forms/checkbox";
 import {RadioButton} from "../forms/radio";
 import {Button} from "../forms/button";
@@ -481,6 +481,10 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
             if (this.pageIndexRef.current) {
                 this.pageIndexRef.current.value = currentPage.toString();
             }
+
+            if (this.customPageSizeRef.current) {
+                this.customPageSizeRef.current.value = pageSize.toString();
+            }
             pagination.compactFooter = compactFooter !== undefined ? compactFooter : false;
         }
 
@@ -618,8 +622,8 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
     // Function to handle pageIndex change in input box on Enter ot Tab key press event
     private handlePageChangeOnKeyDown = (evt: React.KeyboardEvent<HTMLInputElement>) => {
         // Check for 'Enter' or 'tab' key
-        const keyCode = evt.keyCode;
-        if (keyCode === 13 || keyCode === 9) {
+        const keyName = evt.key;
+        if (keyName === KEYBOARD_KEYS.ENTER || keyName === KEYBOARD_KEYS.TAB) {
             this.handlePageChange();
         }
     };
@@ -627,23 +631,12 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
     // Function to handle CustomPageSize change in input box on Enter or Tab key press event
     private handleCustomPageSizeChangeOnKeyDown = (evt: React.KeyboardEvent<HTMLInputElement>) => {
         // Check for 'Enter' or 'tab' key
-        const keyCode = evt.keyCode;
-        if (keyCode === 13 || keyCode === 9) {
+        const keyName = evt.key;
+        if (keyName === KEYBOARD_KEYS.ENTER || keyName === KEYBOARD_KEYS.TAB) {
             this.handleCustomPageSizeChange();
         }
     };
 
-    // Function to handle CustomPageSize change in input box on blur event
-    private handleCustomPageSizeChangeOnBlur = () => {
-        const {pagination} = this.state;
-        const pageSizeInputFieldValue: number | null =
-            this.customPageSizeRef.current && parseInt(this.customPageSizeRef.current.value);
-        const currentPageSizeValue: number | null | undefined = pagination && pagination.pageSize;
-
-        if (pageSizeInputFieldValue !== currentPageSizeValue) {
-            this.handleCustomPageSizeChange();
-        }
-    };
     // Function to handle pageIndex change in input box
     private handlePageChange = () => {
         const {pageSize, currentPage} = this.state.pagination!;
@@ -658,22 +651,30 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
     };
 
     // Function to handle CustomPageSize change in input box
-    private handleCustomPageSizeChange = () => {
-        const {maxCustomPageSize, totalItems} = this.state.pagination!;
-        const pageSize = this.customPageSizeRef.current && parseInt(this.customPageSizeRef.current.value);
+    private handleCustomPageSizeChange = (event?: any) => {
+        const {maxCustomPageSize = DEFAULT_MAX_PAGE_SIZE, totalItems, pageSize, currentPage} = this.state.pagination!;
+        const customPageSize = this.customPageSizeRef.current && this.customPageSizeRef.current.value;
 
-        if (pageSize && maxCustomPageSize) {
-            if (pageSize <= maxCustomPageSize) {
-                this.getPage(this.state.pagination!.currentPage, pageSize);
-            }
-            //If page size selected by user is greater than maximum limit for custom page size
-            else if (pageSize > maxCustomPageSize && this.customPageSizeRef.current) {
-                this.customPageSizeRef.current.value =
-                    totalItems < maxCustomPageSize ? totalItems.toString() : maxCustomPageSize.toString();
-                this.getPage(DEFAULT_CURRENT_PAGE_NUMBER, parseInt(this.customPageSizeRef.current.value));
+        if (pageSize && customPageSize) {
+            if (!isNumber(customPageSize)) {
+                this.customPageSizeRef.current!.value = pageSize.toString();
+            } else {
+                const customPageSizeInt: number = parseInt(customPageSize);
+                if (pageSize !== customPageSizeInt) {
+                    if (customPageSizeInt <= maxCustomPageSize) {
+                        this.getPage(currentPage, customPageSizeInt);
+                    }
+                    //If page size selected by user is greater than maximum limit for custom page size
+                    else if (customPageSizeInt > maxCustomPageSize && this.customPageSizeRef.current) {
+                        this.customPageSizeRef.current.value =
+                            totalItems < maxCustomPageSize ? totalItems.toString() : maxCustomPageSize.toString();
+                        this.getPage(DEFAULT_CURRENT_PAGE_NUMBER, customPageSizeInt);
+                    }
+                }
             }
         }
     };
+
     // Function to get page data for given page number
     private getPage(pageIndex: number, pageSize: number) {
         if (this.state.pagination && this.props.pagination) {
@@ -700,6 +701,11 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
                 this.pageIndexRef.current.value = pageIndex.toString();
             }
 
+            //Set custom page size in input box
+            if (this.customPageSizeRef.current) {
+                this.customPageSizeRef.current.value = pageSize.toString();
+            }
+
             if (getPageData) {
                 var firstItem = this.getFirstItemIndex(pageIndex, pageSize);
                 var lastItem = this.getLastItemIndex(pageSize, totalItems, firstItem);
@@ -1518,20 +1524,21 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
     }
 
     //Function to render textbox for custom pageSize
-    private buildCustomPageSizeSelect = () => {
+    private buildCustomPageSizeInput = () => {
         const {pageSize} = this.state.pagination!;
         return (
             <div className={classNames([ClassNames.PAGINATION_LIST])} style={Styles.PAGINATION_CUSTOM_PAGESIZE}>
                 <input
                     className={ClassNames.PAGINATION_CURRENT}
                     size={4}
-                    defaultValue={pageSize}
+                    defaultValue={pageSize.toString()}
                     type="text"
                     data-qa="dataqa_datagrid_custom_input"
                     ref={this.customPageSizeRef}
                     style={Styles.PAGINATION_CUSTOM_INPUT}
-                    onBlur={this.handleCustomPageSizeChangeOnBlur}
-                    onKeyDown={this.handleCustomPageSizeChangeOnKeyDown}
+                    onBlur={evt => this.handleCustomPageSizeChange(evt)}
+                    onKeyDown={evt => this.handleCustomPageSizeChangeOnKeyDown(evt)}
+                    onKeyPress={allowOnlyIntegers}
                 />
             </div>
         );
@@ -1560,7 +1567,7 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
                             })}
                         </select>
                     </div>
-                    {isCustomPageSizeSelected && this.buildCustomPageSizeSelect()}
+                    {isCustomPageSizeSelected && this.buildCustomPageSizeInput()}
                 </div>
             </div>
         );
@@ -1617,6 +1624,7 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
                     aria-label="Current Page"
                     onBlur={evt => this.handlePageChangeOnBlur(evt)}
                     onKeyDown={evt => this.handlePageChangeOnKeyDown(evt)}
+                    onKeyPress={allowOnlyIntegers}
                 />
                 &nbsp;/&nbsp;<span aria-label="Total Pages">{totalPages}</span>
                 <Button
diff --git a/src/utils.ts b/src/utils.ts
index 4b8282e4..21321f31 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -8,8 +8,19 @@
  *     http://www.apache.org/licenses/LICENSE-2.0
  */
 
+export const NUMBER_RE = /^[0-9]\d*$/;
 export type ReactChildren = React.ReactNode | (React.ReactNode[] & React.ReactNode);
 
+// Keybord Key Names
+export enum KEYBOARD_KEYS {
+    ESCAPE = "Escape",
+    TAB = "Tab",
+    ENTER = "Enter",
+    SPACE = " ",
+    BACKSPACE = "Backspace",
+    DELETE = "Delete",
+}
+
 export function classNames(classNameList: (false | undefined | null | string)[]) {
     return classNameList.filter(x => typeof x === "string").join(" ");
 }
@@ -39,3 +50,32 @@ export function allFalseOnKey(obj: any, key: any) {
     }
     return true;
 }
+
+/**
+ * Function to check if input is a number.
+ * @param input - The input to be checked.
+ * @returns True if the input is a number, false otherwise.
+ */
+export function isNumber(input: any): boolean {
+    // Test if the input matches the regular expression for a number.
+    return NUMBER_RE.test(input);
+}
+
+/**
+ * Function to check if a key event allows only number inputs.
+ * @param evt - The key event to be checked.
+ * @returns True if the event allows only number inputs, false otherwise.
+ */
+export function allowOnlyIntegers(evt: any) {
+    // Get the ASCII code of the key pressed.
+    var ASCIICode = evt.which ? evt.which : evt.keyCode;
+
+    // Check if the key pressed is not a number (ASCII values between 48 and 57).
+    if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57)) {
+        // Return false if the key pressed is not a number.
+        evt.preventDefault();
+    }
+
+    // Return true if the key pressed is a number.
+    return true;
+}

From e7ba832a33ea9bf1726aeca2ce3d75b323a57368 Mon Sep 17 00:00:00 2001
From: Arpita Kate <arpita.kate@dell.com>
Date: Mon, 29 Apr 2024 06:41:00 +0000
Subject: [PATCH 5/7] Fixed typo

---
 src/utils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils.ts b/src/utils.ts
index 21321f31..73de2b08 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -53,7 +53,7 @@ export function allFalseOnKey(obj: any, key: any) {
 
 /**
  * Function to check if input is a number.
- * @param input - The input to be checked.
+ * @param {input} - The input to be checked.
  * @returns True if the input is a number, false otherwise.
  */
 export function isNumber(input: any): boolean {
@@ -63,7 +63,7 @@ export function isNumber(input: any): boolean {
 
 /**
  * Function to check if a key event allows only number inputs.
- * @param evt - The key event to be checked.
+ * @param {evt} - The key event to be checked.
  * @returns True if the event allows only number inputs, false otherwise.
  */
 export function allowOnlyIntegers(evt: any) {

From 77c084a8b103d3842442a170fde643bd2e9193e5 Mon Sep 17 00:00:00 2001
From: Arpita Kate <arpita.kate@dell.com>
Date: Mon, 29 Apr 2024 09:06:32 +0000
Subject: [PATCH 6/7] Addressed code review comments

---
 src/datagrid/DataGrid.stories.tsx | 2 +-
 src/datagrid/DataGrid.tsx         | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/datagrid/DataGrid.stories.tsx b/src/datagrid/DataGrid.stories.tsx
index c24590a4..20aadc8d 100644
--- a/src/datagrid/DataGrid.stories.tsx
+++ b/src/datagrid/DataGrid.stories.tsx
@@ -420,7 +420,7 @@ storiesOf("DataGrid", module)
             />
         </div>
     ))
-    .add("Grid with pagination and pageSizes dropdown", () => (
+    .add("Grid with pagination and custom page size", () => (
         <div style={{width: "80%"}}>
             <DataGrid
                 columns={normalColumns}
diff --git a/src/datagrid/DataGrid.tsx b/src/datagrid/DataGrid.tsx
index 0b06c847..ef17b577 100644
--- a/src/datagrid/DataGrid.tsx
+++ b/src/datagrid/DataGrid.tsx
@@ -664,11 +664,10 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
                     if (customPageSizeInt <= maxCustomPageSize) {
                         this.getPage(currentPage, customPageSizeInt);
                     }
-                    //If page size selected by user is greater than maximum limit for custom page size
+                    // If page size selected by user is greater than maximum limit for custom page size
                     else if (customPageSizeInt > maxCustomPageSize && this.customPageSizeRef.current) {
-                        this.customPageSizeRef.current.value =
-                            totalItems < maxCustomPageSize ? totalItems.toString() : maxCustomPageSize.toString();
-                        this.getPage(DEFAULT_CURRENT_PAGE_NUMBER, customPageSizeInt);
+                        const newCustomPageSize = totalItems < maxCustomPageSize ? totalItems : maxCustomPageSize;
+                        this.getPage(DEFAULT_CURRENT_PAGE_NUMBER, newCustomPageSize);
                     }
                 }
             }

From 6e9d7fe9128859ce09ee6ee6dee25fe5df2f44b0 Mon Sep 17 00:00:00 2001
From: Arpita Kate <arpita.kate@dell.com>
Date: Mon, 29 Apr 2024 09:49:38 +0000
Subject: [PATCH 7/7] Fixed issue of custom page size as 0

---
 src/datagrid/DataGrid.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/datagrid/DataGrid.tsx b/src/datagrid/DataGrid.tsx
index ef17b577..b61554f5 100644
--- a/src/datagrid/DataGrid.tsx
+++ b/src/datagrid/DataGrid.tsx
@@ -656,11 +656,11 @@ export class DataGrid extends React.PureComponent<DataGridProps, DataGridState>
         const customPageSize = this.customPageSizeRef.current && this.customPageSizeRef.current.value;
 
         if (pageSize && customPageSize) {
-            if (!isNumber(customPageSize)) {
+            if (!isNumber(customPageSize) || parseInt(customPageSize) === 0) {
                 this.customPageSizeRef.current!.value = pageSize.toString();
             } else {
                 const customPageSizeInt: number = parseInt(customPageSize);
-                if (pageSize !== customPageSizeInt) {
+                if (pageSize !== customPageSizeInt && customPageSizeInt > 0) {
                     if (customPageSizeInt <= maxCustomPageSize) {
                         this.getPage(currentPage, customPageSizeInt);
                     }