feat(ui-pagination): add onMouseEnter to Pagination

INSTUI-4678

Author: joyenjoyer

packages/ui-pagination/src/Pagination/index.tsx

@@ -331,6 +331,7 @@ class Pagination extends Component<PaginationProps> {
           ref={(e) => (i === currentPage ? (this.currentPageRef = e) : null)}
           key={i}
           onClick={() => this.handleNavigation(i, currentPage)}
+          onMouseEnter={() => this.handleOnMouseEnter(i)}
           current={i === currentPage}
           {...(this.props.screenReaderLabelPageButton
             ? {
@@ -615,6 +616,12 @@ class Pagination extends Component<PaginationProps> {
     ) : null
   }
 
+  handleOnMouseEnter = (page: number) => {
+    if (typeof this.props.onMouseEnter === 'function') {
+      this.props.onMouseEnter(page)
+    }
+  }
+
   render() {
     const currentPageIndex = fastFindIndex(
       this.childPages,

packages/ui-pagination/src/Pagination/props.ts

@@ -182,6 +182,11 @@ type PaginationOwnProps = {
    */
   onPageChange?: (next: number, prev: number) => void
 
+  /**
+   * Called when a page is hovered.
+   */
+  onMouseEnter?: (page: number) => void
+
   /**
    * Renders the visible pages
    */
@@ -234,6 +239,7 @@ const propTypes: PropValidators<PropKeys> = {
   siblingCount: PropTypes.number,
   boundaryCount: PropTypes.number,
   onPageChange: PropTypes.func,
+  onMouseEnter: PropTypes.func,
   renderPageIndicator: PropTypes.func,
   ellipsis: PropTypes.node
 }
@@ -263,7 +269,8 @@ const allowedProps: AllowedPropKeys = [
   'siblingCount',
   'boundaryCount',
   'renderPageIndicator',
-  'ellipsis'
+  'ellipsis',
+  'onMouseEnter'
 ]
 
 type PaginationSnapshot = {