react-router-pagination 3.2.308 → 3.3.0

package/babel.config.cjs

@@ -35,13 +35,34 @@ const presets = [
       useBuiltIns: 'usage',
       corejs: 3
     }
+  ],
+  '@babel/react',
+  '@babel/typescript'
+]
+
+const plugins = [
+  '@babel/syntax-jsx',
+  [
+    'module-resolver', {
+      alias: {
+        '#pagination/pagination/component': './src/pagination/component.tsx',
+        '#pagination/super/pagination/component': './src/super/pagination/component.tsx'
+      }
+    }
   ]
 ]
 
+// @ts-ignore
 module.exports = (api) => {
   if (api) api.cache.using(env)
 
   return {
-    presets
+    presets,
+    plugins,
+    ignore: [
+      /node_modules\/(?!react-component-instance)\//,
+      /node_modules\/(?!react-component-snapshot)\//,
+      /node_modules\/(?!react-component-name)\//
+    ]
   }
 }

package/eslint.config.mjs

@@ -137,7 +137,7 @@ export default [
   }),
   standard({
     files: [
-      'src/**/__tests__/**/*.{mts,tsx}',
+      'src/**/__tests__/**/*.{mjs,jsx}',
       'stories/**/__tests__/**/*.{mjs,jsx}'
     ],
     languageOptions: {
@@ -211,7 +211,8 @@ export default [
         project: 'tsconfig.json'
       },
       globals: {
-        ...globals.browser
+        ...globals.browser,
+        ReactRouterPaginationTypes: 'readonly'
       }
     },
     plugins: {
@@ -220,9 +221,16 @@ export default [
     rules: {
       ...reactRules,
       '@typescript-eslint/no-magic-numbers': 'off',
-      '@typescript-eslint/prefer-destructuring': 'off',
+      '@typescript-eslint/prefer-destructuring': 'warn',
       '@typescript-eslint/class-methods-use-this': 'off',
-      '@typescript-eslint/no-empty-function': 'off'
+      '@typescript-eslint/no-empty-function': 'warn',
+      '@typescript-eslint/no-unsafe-assignment': 'warn',
+      '@typescript-eslint/no-unsafe-member-access': 'warn',
+      '@typescript-eslint/no-unsafe-call': 'warn',
+      '@typescript-eslint/no-unsafe-return': 'warn',
+      '@typescript-eslint/strict-boolean-expressions': 'warn',
+      '@typescript-eslint/prefer-nullish-coalescing': 'warn',
+      '@typescript-eslint/no-unsafe-argument': 'warn'
     },
     settings: {
       ...reactSettings

package/index.d.mts

@@ -0,0 +1,46 @@
+declare global {
+  namespace ReactRouterPaginationTypes {
+    export interface AbstractPaginationProps {
+      onClick: (pageNumber: number) => void
+      pageNumber: string | number
+      totalPages: string | number
+      match: {
+        path?: string
+        params?: object
+      }
+    }
+
+    export interface AbstractPaginationState {
+      pageNumber: number
+      totalPages: number
+    }
+
+    export interface CenteredProps extends AbstractPaginationProps {
+      spread: string | number
+      onChange: (pageNumber: number) => void
+    }
+
+    export interface CenteredState extends AbstractPaginationState {
+      spread: number
+    }
+
+    export interface StandardProps extends AbstractPaginationProps {
+      pageNumber: string | number
+      totalPages: string | number
+      spread: string | number
+      onChange: (pageNumber: number) => void
+    }
+
+    export interface StandardState extends AbstractPaginationState {
+      pageNumber: number
+      totalPages: number
+      spread: number
+    }
+
+    export interface PaginationProps {
+      format?: string
+    }
+  }
+}
+
+export {}

package/jest.config.mjs

@@ -0,0 +1,26 @@
+export default {
+  bail: true,
+  verbose: true,
+  rootDir: '.',
+  roots: [
+    './src'
+  ],
+  clearMocks: true,
+  collectCoverage: true,
+  coverageDirectory: './coverage',
+  coverageProvider: 'v8',
+  testRegex: '(/__tests__/.*|(\\.|/))(test|spec)\\.(jsx?|mjs?)$',
+  transform: {
+    '^.+\\.jsx$': 'babel-jest',
+    '^.+\\.mjs$': 'babel-jest',
+    '^.+\\.tsx$': 'babel-jest',
+    '^.+\\.mts$': 'babel-jest'
+  },
+  transformIgnorePatterns: [
+    '/node_modules\\/(?!react-component-instance)\\/',
+    '/node_modules\\/(?!react-component-snapshot)\\/',
+    '/node_modules\\/(?!react-component-name)\\/'
+  ],
+  moduleFileExtensions: ['js', 'jsx', 'mjs'],
+  testEnvironment: 'jest-fixed-jsdom'
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "react-router-pagination",
-  "version": "3.2.308",
+  "version": "3.3.0",
   "description": "A React Router Pagination component",
   "main": "./src/index.mjs",
   "type": "module",
-  "types": "./src/index.d.mts",
+  "types": "./index.d.mts",
   "author": {
     "name": "Jonathan Perry for Sequence Media Limited",
     "email": "sequencemedia@sequencemedia.net",
@@ -40,21 +40,25 @@
     "@babel/register": "^7.25.9",
     "@chromatic-com/storybook": "^3.2.6",
     "@sequencemedia/eslint-config-standard": "^0.2.43",
-    "@sequencemedia/eslint-config-typescript": "^0.1.62",
+    "@sequencemedia/eslint-config-typescript": "^0.1.63",
     "@storybook/addon-essentials": "^8.6.7",
     "@storybook/addon-links": "^8.6.7",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
     "@storybook/manager-api": "^8.6.7",
     "@storybook/react": "^8.6.7",
     "@storybook/react-webpack5": "^8.6.7",
+    "@storybook/test": "^8.6.7",
     "@storybook/theming": "^8.6.7",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/debug": "^4.1.12",
     "@types/jest": "^29.5.14",
+    "@types/prop-types": "^15.7.14",
     "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
     "@types/react-router": "^5.1.20",
-    "@types/react-test-renderer": "^19.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.26.1",
-    "@typescript-eslint/parser": "^8.26.1",
+    "@typescript-eslint/eslint-plugin": "^8.27.0",
+    "@typescript-eslint/parser": "^8.27.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "core-js": "^3.41.0",
     "cross-env": "^7.0.3",
@@ -65,19 +69,45 @@
     "globals": "^16.0.0",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-fixed-jsdom": "^0.0.9",
     "prop-types": "^15.8.1",
     "react": "^19.0.0",
+    "react-component-snapshot": "^0.0.7",
     "react-dom": "^19.0.0",
     "react-router": "^7.4.0",
     "react-test-renderer": "^19.0.0",
     "storybook": "^8.6.7"
   },
   "imports": {
-    "#pagination": "./src/pagination/index.tsx",
-    "#pagination/centered": "./src/pagination/centered/index.tsx",
-    "#pagination/common": "./src/pagination/common/index.mts",
-    "#pagination/component": "./src/pagination/component.tsx",
-    "#pagination/standard": "./src/pagination/standard/index.tsx"
+    "#pagination": {
+      "require": "./src/index.cjs",
+      "import": "./src/index.mjs"
+    },
+    "#pagination/pagination": {
+      "require": "./src/pagination/index.cjs",
+      "import": "./src/pagination/index.mjs"
+    },
+    "#pagination/pagination/centered": {
+      "require": "./src/pagination/centered/index.cjs",
+      "import": "./src/pagination/centered/index.mjs"
+    },
+    "#pagination/pagination/common": {
+      "require": "./src/pagination/common/index.cjs",
+      "import": "./src/pagination/common/index.mjs"
+    },
+    "#pagination/pagination/component": {
+      "require": "./src/pagination/component.cjs",
+      "import": "./src/pagination/component.mjs"
+    },
+    "#pagination/pagination/standard": {
+      "require": "./src/pagination/standard/index.cjs",
+      "import": "./src/pagination/standard/index.mjs"
+    },
+    "#pagination/super/pagination/component": {
+      "require": "./src/super/pagination/component.cjs",
+      "import": "./src/super/pagination/component.mjs"
+    }
   },
   "exports": {
     ".": {

package/src/index.cjs

@@ -9,8 +9,4 @@ require('@babel/register')({
   ]
 })
 
-const {
-  default: component
-} = require('./index.tsx')
-
-module.exports = component
+module.exports = require('./index.tsx')

package/src/index.d.mts

@@ -1,46 +1,3 @@
-declare namespace ReactRouterPaginationTypes {
-  export interface AbstractPaginationProps {
-    onClick: (pageNumber: number) => void
-    pageNumber: string | number
-    totalPages: string | number
-    match: {
-      path?: string
-      params?: object
-    }
-  }
-
-  export interface AbstractPaginationState {
-    pageNumber: number
-    totalPages: number
-  }
-
-  export interface CenteredProps extends AbstractPaginationProps {
-    spread: string | number
-    onChange: (pageNumber: number) => void
-  }
-
-  export interface CenteredState extends AbstractPaginationState {
-    spread: number
-  }
-
-  export interface StandardProps extends AbstractPaginationProps {
-    pageNumber: string | number
-    totalPages: string | number
-    spread: string | number
-    onChange: (pageNumber: number) => void
-  }
-
-  export interface StandardState extends AbstractPaginationState {
-    pageNumber: number
-    totalPages: number
-    spread: number
-  }
-
-  export interface PaginationProps {
-    format?: string
-  }
-}
-
 declare module 'react-router-pagination' {
   import type { JSX } from 'react'
 

package/src/index.tsx

@@ -1,5 +1,4 @@
 import type { JSX } from 'react'
-import type ReactRouterPaginationTypes from 'react-router-pagination'
 import React, { Component } from 'react'
 
 import {

package/src/pagination/centered/index.tsx

@@ -1,12 +1,12 @@
 import debug from 'debug'
 
-import type ReactRouterPaginationTypes from 'react-router-pagination'
+import AbstractPagination from '#pagination/super/pagination/component' // '../../super/pagination/component.tsx'
 
-import AbstractPagination, {
+import {
   toInteger,
   calculateTotalPages,
   calculatePageNumber
-} from '#pagination/component'
+} from '#pagination/pagination/component'
 
 const error = debug('react-router-pagination/pagination/component')
 

package/src/pagination/component.tsx

@@ -1,30 +1,18 @@
 /**
  * Pagination component
  */
-import type { JSX } from 'react'
-import type ReactRouterPaginationTypes from 'react-router-pagination'
-import React, { Component } from 'react'
-
-import {
-  Link,
-  generatePath
-} from 'react-router'
-
 import {
   toInteger,
   calculateTotalPages,
   calculatePageNumber
-} from './common/index.mts'
+} from '#pagination/pagination/common'
 
-const getListItemClassName = (currentPageNumber: string | number, pageNumber: string | number): string => (
-  toInteger(currentPageNumber) === toInteger(pageNumber)
-    ? 'current-page'
-    : 'page'
-)
+import AbstractPagination from '#pagination/super/pagination/component' // '../super/pagination/component.tsx'
 
-const getListItemKey = (key: string | number): string => `list-item-${key}`
-
-const getLinkTo = ({ path = '/:pageNumber', params = {} } = {}, pageNumber = 0): string => generatePath(path, { ...params, pageNumber })
+import type {
+  AbstractPaginationProps,
+  AbstractPaginationState
+} from '#pagination/super/pagination/component'
 
 export {
   toInteger,
@@ -32,194 +20,6 @@ export {
   calculatePageNumber
 }
 
-type AbstractPaginationProps = ReactRouterPaginationTypes.AbstractPaginationProps
-
-type AbstractPaginationState = ReactRouterPaginationTypes.AbstractPaginationState
-
-export default abstract class AbstractPagination<P, S> extends Component<P & AbstractPaginationProps, S & AbstractPaginationState> { // eslint-disable-line @typescript-eslint/no-unnecessary-type-parameters -- Base
-  static defaultProps = {
-    onClick () {},
-    pageNumber: 0,
-    totalPages: 0,
-    match: {}
-  }
-
-  static calculateTotalPages = calculateTotalPages
-
-  static calculatePageNumber = calculatePageNumber
-
-  x (): number {
-    return 0
-  }
-
-  y (): number {
-    return 0
-  }
-
-  z (): number {
-    return 0
-  }
-
-  zeroIndex (pageNumber: string | number, totalPages: string | number): number { // eslint-disable-line no-unused-vars -- Base
-    return 0
-  }
-
-  lastIndex (pageNumber: string | number, totalPages: string | number): number { // eslint-disable-line no-unused-vars -- Base
-    return 0
-  }
-
-  hasReversePageLink (pageNumber: string | number, totalPages: string | number): boolean {
-    return (this.zeroIndex(pageNumber, totalPages) - 1) > 0
-  }
-
-  hasForwardPageLink (pageNumber: string | number, totalPages: string | number): boolean {
-    const i = Number(pageNumber)
-    const j = Number(totalPages)
-    return (this.lastIndex(i, j) + 1) < j
-  }
-
-  hasZeroPageLink (pageNumber: string | number, totalPages: string | number): boolean {
-    const i = Number(pageNumber)
-    const j = Number(totalPages)
-    return this.zeroIndex(i, j) > 0
-  }
-
-  hasLastPageLink (pageNumber: string | number, totalPages: string | number): boolean {
-    const i = Number(pageNumber)
-    const j = Number(totalPages)
-    return this.lastIndex(i, j) < j
-  }
-
-  reversePageLinkItem (match: object, pageNumber: string | number, totalPages: string | number): JSX.Element | null {
-    if (this.hasReversePageLink(pageNumber, totalPages)) {
-      const n = this.zeroIndex(pageNumber, totalPages)
-      return (
-        <li key={getListItemKey('reverse')} className='reverse-page'>
-          <Link to={getLinkTo(match, n)} onClick={() => { this.handlePageNumberSelect(n) }}>
-            <span className='reverse'>
-              {'\u2039'}
-            </span>
-          </Link>
-        </li>
-      )
-    }
-    return null
-  }
-
-  forwardPageLinkItem (match: object, pageNumber: string | number, totalPages: string | number): JSX.Element | null {
-    if (this.hasForwardPageLink(pageNumber, totalPages)) {
-      const n = this.lastIndex(pageNumber, totalPages) + 1
-      return (
-        <li key={getListItemKey('forward')} className='forward-page'>
-          <Link to={getLinkTo(match, n)} onClick={() => { this.handlePageNumberSelect(n) }}>
-            <span className='forward'>
-              {'\u203A'}
-            </span>
-          </Link>
-        </li>
-      )
-    }
-    return null
-  }
-
-  zeroPageLinkItem (match: object, pageNumber: string | number, totalPages: string | number): JSX.Element | null {
-    if (this.hasZeroPageLink(pageNumber, totalPages)) {
-      const n = 1
-      return (
-        <li key={getListItemKey(n)} className='zero-page'>
-          <Link to={getLinkTo(match, n)} onClick={() => { this.handlePageNumberSelect(n) }}>
-            <span className='page-number'>
-              {n}
-            </span>
-          </Link>
-        </li>
-      )
-    }
-    return null
-  }
-
-  lastPageLinkItem (match: object, pageNumber: string | number, totalPages: string | number): JSX.Element | null {
-    if (this.hasLastPageLink(pageNumber, totalPages)) {
-      const n = toInteger(totalPages)
-      return (
-        <li key={getListItemKey(n)} className='last-page'>
-          <Link to={getLinkTo(match, n)} onClick={() => { this.handlePageNumberSelect(n) }}>
-            <span className='page-number'>
-              {n}
-            </span>
-          </Link>
-        </li>
-      )
-    }
-    return null
-  }
-
-  pageLinkItems (match: object, pageNumber: string | number, totalPages: string | number): JSX.Element[] {
-    let i = this.zeroIndex(pageNumber, totalPages)
-    const j = this.lastIndex(pageNumber, totalPages)
-    const a = []
-    for (j; i < j; i = i + 1) {
-      const n = (i + 1)
-      a.push((
-        <li key={getListItemKey(n)} className={getListItemClassName(pageNumber, n)}>
-          <Link to={getLinkTo(match, n)} onClick={() => { this.handlePageNumberSelect(n) }}>
-            <span className='page-number'>
-              {n}
-            </span>
-          </Link>
-        </li>
-      ))
-    }
-    return a
-  }
-
-  static getDerivedStateFromProps ({ pageNumber, totalPages }: AbstractPaginationProps): AbstractPaginationState {
-    return {
-      pageNumber: toInteger(pageNumber),
-      totalPages: toInteger(totalPages)
-    }
-  }
-
-  shouldComponentUpdate (props: AbstractPaginationProps): boolean {
-    return (
-      toInteger(props.pageNumber) !== toInteger(this.props.pageNumber) ||
-      toInteger(props.totalPages) !== toInteger(this.props.totalPages) ||
-      props.match !== this.props.match
-    )
-  }
-
-  handlePageNumberSelect = (pageNumber: number): void => {
-    this.props.onClick(pageNumber)
-  }
-
-  render (): JSX.Element | null {
-    const { totalPages } = this.state
-    if (totalPages > 1) {
-      const { match } = this.props
-      const { pageNumber } = this.state
-      const page = calculatePageNumber(pageNumber, totalPages)
-      if (totalPages > this.z()) {
-        return (
-          <ul className='pagination'>
-            {this.zeroPageLinkItem(match, page, totalPages)}
-            {this.reversePageLinkItem(match, page, totalPages)}
-            {this.pageLinkItems(match, page, totalPages)}
-            {this.forwardPageLinkItem(match, page, totalPages)}
-            {this.lastPageLinkItem(match, page, totalPages)}
-          </ul>
-        )
-      } else {
-        return (
-          <ul className='pagination'>
-            {this.pageLinkItems(match, page, totalPages)}
-          </ul>
-        )
-      }
-    }
-    return null
-  }
-}
-
 export class Pagination extends AbstractPagination<AbstractPaginationProps, AbstractPaginationState> {
   state = {
     pageNumber: toInteger(this.props.pageNumber),

package/src/pagination/standard/index.tsx

@@ -1,12 +1,12 @@
 import debug from 'debug'
 
-import type ReactRouterPaginationTypes from 'react-router-pagination'
+import AbstractPagination from '#pagination/super/pagination/component' // '../../super/pagination/component.tsx'
 
-import AbstractPagination, {
+import {
   toInteger,
   calculateTotalPages,
   calculatePageNumber
-} from '#pagination/component'
+} from '#pagination/pagination/component'
 
 const error = debug('react-router-pagination/pagination/component')
 

package/src/super/pagination/component.cjs

@@ -0,0 +1,12 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!react-router-pagination)/
+  ],
+  extensions: [
+    '.mts',
+    '.cts',
+    '.tsx'
+  ]
+})
+
+module.exports = require('./component.tsx')

package/src/super/pagination/component.mjs

@@ -0,0 +1 @@
+export * from './component.cjs'

package/src/super/pagination/component.tsx

@@ -0,0 +1,220 @@
+/**
+ * Pagination component
+ */
+import type { JSX } from 'react'
+import React, { Component } from 'react'
+
+import {
+  Link,
+  generatePath
+} from 'react-router'
+
+import {
+  toInteger,
+  calculateTotalPages,
+  calculatePageNumber
+} from '#pagination/pagination/common'
+
+const getListItemClassName = (currentPageNumber: string | number, pageNumber: string | number): string => (
+  toInteger(currentPageNumber) === toInteger(pageNumber)
+    ? 'current-page'
+    : 'page'
+)
+
+const getListItemKey = (key: string | number): string => `list-item-${key}`
+
+const getLinkTo = ({ path = '/:pageNumber', params = {} } = {}, pageNumber = 0): string => generatePath(path, { ...params, pageNumber })
+
+export {
+  toInteger,
+  calculateTotalPages,
+  calculatePageNumber
+}
+
+export type AbstractPaginationProps = ReactRouterPaginationTypes.AbstractPaginationProps
+
+export type AbstractPaginationState = ReactRouterPaginationTypes.AbstractPaginationState
+
+export default abstract class AbstractPagination<P, S> extends Component<P & AbstractPaginationProps, S & AbstractPaginationState> { // eslint-disable-line @typescript-eslint/no-unnecessary-type-parameters -- Base
+  static defaultProps = {
+    onClick () {},
+    pageNumber: 0,
+    totalPages: 0,
+    match: {}
+  }
+
+  static calculateTotalPages = calculateTotalPages
+
+  static calculatePageNumber = calculatePageNumber
+
+  x (): number {
+    return 0
+  }
+
+  y (): number {
+    return 0
+  }
+
+  z (): number {
+    return 0
+  }
+
+  zeroIndex (pageNumber: string | number, totalPages: string | number): number { // eslint-disable-line no-unused-vars -- Base
+    return 0
+  }
+
+  lastIndex (pageNumber: string | number, totalPages: string | number): number { // eslint-disable-line no-unused-vars -- Base
+    return 0
+  }
+
+  hasReversePageLink (pageNumber: string | number, totalPages: string | number): boolean {
+    return (this.zeroIndex(pageNumber, totalPages) - 1) > 0
+  }
+
+  hasForwardPageLink (pageNumber: string | number, totalPages: string | number): boolean {
+    const i = Number(pageNumber)
+    const j = Number(totalPages)
+    return (this.lastIndex(i, j) + 1) < j
+  }
+
+  hasZeroPageLink (pageNumber: string | number, totalPages: string | number): boolean {
+    const i = Number(pageNumber)
+    const j = Number(totalPages)
+    return this.zeroIndex(i, j) > 0
+  }
+
+  hasLastPageLink (pageNumber: string | number, totalPages: string | number): boolean {
+    const i = Number(pageNumber)
+    const j = Number(totalPages)
+    return this.lastIndex(i, j) < j
+  }
+
+  reversePageLinkItem (match: object, pageNumber: string | number, totalPages: string | number): JSX.Element | null {
+    if (this.hasReversePageLink(pageNumber, totalPages)) {
+      const n = this.zeroIndex(pageNumber, totalPages)
+      return (
+        <li key={getListItemKey('reverse')} className='reverse-page'>
+          <Link to={getLinkTo(match, n)} onClick={() => { this.handlePageNumberSelect(n) }}>
+            <span className='reverse'>
+              {'\u2039'}
+            </span>
+          </Link>
+        </li>
+      )
+    }
+    return null
+  }
+
+  forwardPageLinkItem (match: object, pageNumber: string | number, totalPages: string | number): JSX.Element | null {
+    if (this.hasForwardPageLink(pageNumber, totalPages)) {
+      const n = this.lastIndex(pageNumber, totalPages) + 1
+      return (
+        <li key={getListItemKey('forward')} className='forward-page'>
+          <Link to={getLinkTo(match, n)} onClick={() => { this.handlePageNumberSelect(n) }}>
+            <span className='forward'>
+              {'\u203A'}
+            </span>
+          </Link>
+        </li>
+      )
+    }
+    return null
+  }
+
+  zeroPageLinkItem (match: object, pageNumber: string | number, totalPages: string | number): JSX.Element | null {
+    if (this.hasZeroPageLink(pageNumber, totalPages)) {
+      const n = 1
+      return (
+        <li key={getListItemKey(n)} className='zero-page'>
+          <Link to={getLinkTo(match, n)} onClick={() => { this.handlePageNumberSelect(n) }}>
+            <span className='page-number'>
+              {n}
+            </span>
+          </Link>
+        </li>
+      )
+    }
+    return null
+  }
+
+  lastPageLinkItem (match: object, pageNumber: string | number, totalPages: string | number): JSX.Element | null {
+    if (this.hasLastPageLink(pageNumber, totalPages)) {
+      const n = toInteger(totalPages)
+      return (
+        <li key={getListItemKey(n)} className='last-page'>
+          <Link to={getLinkTo(match, n)} onClick={() => { this.handlePageNumberSelect(n) }}>
+            <span className='page-number'>
+              {n}
+            </span>
+          </Link>
+        </li>
+      )
+    }
+    return null
+  }
+
+  pageLinkItems (match: object, pageNumber: string | number, totalPages: string | number): JSX.Element[] {
+    let i = this.zeroIndex(pageNumber, totalPages)
+    const j = this.lastIndex(pageNumber, totalPages)
+    const a = []
+    for (j; i < j; i = i + 1) {
+      const n = (i + 1)
+      a.push((
+        <li key={getListItemKey(n)} className={getListItemClassName(pageNumber, n)}>
+          <Link to={getLinkTo(match, n)} onClick={() => { this.handlePageNumberSelect(n) }}>
+            <span className='page-number'>
+              {n}
+            </span>
+          </Link>
+        </li>
+      ))
+    }
+    return a
+  }
+
+  static getDerivedStateFromProps ({ pageNumber, totalPages }: AbstractPaginationProps): AbstractPaginationState {
+    return {
+      pageNumber: toInteger(pageNumber),
+      totalPages: toInteger(totalPages)
+    }
+  }
+
+  shouldComponentUpdate (props: AbstractPaginationProps): boolean {
+    return (
+      toInteger(props.pageNumber) !== toInteger(this.props.pageNumber) ||
+      toInteger(props.totalPages) !== toInteger(this.props.totalPages) ||
+      props.match !== this.props.match
+    )
+  }
+
+  handlePageNumberSelect = (pageNumber: number): void => {
+    this.props.onClick(pageNumber)
+  }
+
+  render (): JSX.Element | null {
+    const { totalPages } = this.state
+    if (totalPages > 1) {
+      const { match } = this.props
+      const { pageNumber } = this.state
+      const page = calculatePageNumber(pageNumber, totalPages)
+      if (totalPages > this.z()) {
+        return (
+          <ul className='pagination'>
+            {this.zeroPageLinkItem(match, page, totalPages)}
+            {this.reversePageLinkItem(match, page, totalPages)}
+            {this.pageLinkItems(match, page, totalPages)}
+            {this.forwardPageLinkItem(match, page, totalPages)}
+            {this.lastPageLinkItem(match, page, totalPages)}
+          </ul>
+        )
+      } else {
+        return (
+          <ul className='pagination'>
+            {this.pageLinkItems(match, page, totalPages)}
+          </ul>
+        )
+      }
+    }
+    return null
+  }
+}

package/src/.babelrc

@@ -1,27 +0,0 @@
-{
-  "presets": [
-    "@babel/typescript",
-    [
-      "@babel/env",
-      {
-        "targets": {
-          "node": "current",
-          "browsers": [
-            "last 4 versions",
-            "safari >= 9",
-            "ios >= 8",
-            "ie >= 9",
-            "> 2%"
-          ]
-        },
-        "useBuiltIns": "usage",
-        "corejs": 3
-      }
-    ],
-    "@babel/react"
-  ],
-  "plugins": [
-    "@babel/syntax-jsx",
-    "@babel/transform-typescript"
-  ]
-}