@atlaskit/pagination 14.1.8 → 14.2.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/pagination
 
+## 14.2.0
+
+### Minor Changes
+
+- [`2afcf534bad`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2afcf534bad) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.1.10
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 14.1.9
+
+### Patch Changes
+
+- [`ac051e856a6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac051e856a6) - Internal code change turning on new linting rules.
+- Updated dependencies
+
 ## 14.1.8
 
 ### Patch Changes

package/dist/cjs/internal/components/navigator.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
@@ -19,13 +19,14 @@ var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
-var navigatorStyles = (0, _core.css)({
+var navigatorStyles = (0, _react2.css)({
   paddingRight: gridSize / 2,
   paddingLeft: gridSize / 2
 });
 
 function Navigator(props) {
-  return (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
+  return (0, _react2.jsx)(_standardButton.default // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , (0, _extends2.default)({}, props, {
     appearance: "subtle",
     spacing: "none",
     css: navigatorStyles

package/dist/cjs/internal/components/page.js

@@ -14,6 +14,7 @@ var _react = _interopRequireDefault(require("react"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
 function Page(props) {
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, props, {
     appearance: "subtle"
   }));

package/dist/cjs/internal/components/render-ellipsis.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = renderEllipsis;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 /**  @jsx jsx */
-var ellipsisStyles = (0, _core.css)({
+var ellipsisStyles = (0, _react.css)({
   display: 'inline-flex',
   padding: '0 8px',
   alignItems: 'center',
@@ -17,7 +17,7 @@ var ellipsisStyles = (0, _core.css)({
 
 function renderEllipsis(_ref) {
   var key = _ref.key;
-  return (0, _core.jsx)("span", {
+  return (0, _react.jsx)("span", {
     key: key,
     css: ellipsisStyles
   }, "...");

package/dist/cjs/internal/utils/collapse-range.js

@@ -11,6 +11,8 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
+// TODO: comma needed after generic declaration below, or the .tsx file thinks
+// it is a JSX element. Tidy up in a future refactor.
 var collapseRange = function collapseRange(pages, current, _ref, testId) {
   var max = _ref.max,
       ellipsis = _ref.ellipsis,

package/dist/cjs/pagination.js

@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -42,9 +42,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.1.8"
+  packageVersion: "14.2.0"
 };
-var navStyles = (0, _core.css)({
+var navStyles = (0, _react2.css)({
   display: 'flex'
 });
 
@@ -100,7 +100,7 @@ function InnerPagination(_ref, ref) {
 
   var transform = function transform(page, currPageIndex, testId) {
     var selectedPage = pages[selectedIndexValue];
-    return (0, _core.jsx)(_page.default, {
+    return (0, _react2.jsx)(_page.default, {
       key: "page-".concat(getPageLabel ? getPageLabel(page, currPageIndex) : currPageIndex),
       component: components.Page,
       onClick: function onClick(event) {
@@ -115,13 +115,13 @@ function InnerPagination(_ref, ref) {
     }, getPageLabel ? getPageLabel(page, currPageIndex) : page);
   };
 
-  return (0, _core.jsx)("nav", {
+  return (0, _react2.jsx)("nav", {
     "data-testid": testId,
     css: navStyles,
     style: style,
     ref: ref,
     "aria-label": label
-  }, (0, _core.jsx)(_navigator.default, {
+  }, (0, _react2.jsx)(_navigator.default, {
     key: "left-navigator",
     component: components.Previous,
     onClick: function onClick(event) {
@@ -131,7 +131,7 @@ function InnerPagination(_ref, ref) {
       });
     },
     isDisabled: selectedIndexValue === 0,
-    iconBefore: (0, _core.jsx)(_chevronLeftLarge.default, {
+    iconBefore: (0, _react2.jsx)(_chevronLeftLarge.default, {
       label: ""
     }),
     "aria-label": previousLabel,
@@ -141,7 +141,7 @@ function InnerPagination(_ref, ref) {
     max: max,
     ellipsis: renderEllipsis,
     transform: transform
-  }, testId), (0, _core.jsx)(_navigator.default, {
+  }, testId), (0, _react2.jsx)(_navigator.default, {
     key: "right-navigator",
     component: components.Next,
     onClick: function onClick(event) {
@@ -151,7 +151,7 @@ function InnerPagination(_ref, ref) {
       });
     },
     isDisabled: selectedIndexValue === pages.length - 1,
-    iconBefore: (0, _core.jsx)(_chevronRightLarge.default, {
+    iconBefore: (0, _react2.jsx)(_chevronRightLarge.default, {
       label: ""
     }),
     "aria-label": nextLabel,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/pagination",
-	"version": "14.1.8",
+	"version": "14.2.0",
 	"sideEffects": false
 }

package/dist/es2019/internal/components/navigator.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const gridSize = getGridSize();
@@ -11,7 +11,8 @@ const navigatorStyles = css({
   paddingLeft: gridSize / 2
 });
 export default function Navigator(props) {
-  return jsx(Button, _extends({}, props, {
+  return jsx(Button // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, props, {
     appearance: "subtle",
     spacing: "none",
     css: navigatorStyles

package/dist/es2019/internal/components/page.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Button from '@atlaskit/button/standard-button';
 export default function Page(props) {
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
     appearance: "subtle"
   }));

package/dist/es2019/internal/components/render-ellipsis.js

@@ -1,5 +1,5 @@
 /**  @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 const ellipsisStyles = css({
   display: 'inline-flex',
   padding: '0 8px',

package/dist/es2019/internal/utils/collapse-range.js

@@ -1,4 +1,5 @@
-import memoizeOne from 'memoize-one';
+import memoizeOne from 'memoize-one'; // TODO: comma needed after generic declaration below, or the .tsx file thinks
+// it is a JSX element. Tidy up in a future refactor.
 
 const collapseRange = (pages, current, {
   max,

package/dist/es2019/pagination.js

@@ -1,6 +1,6 @@
 /**  @jsx jsx */
 import { forwardRef, memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import useControlled from '@atlaskit/ds-lib/use-controlled';
@@ -14,7 +14,7 @@ import collapseRange from './internal/utils/collapse-range';
 const analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.1.8"
+  packageVersion: "14.2.0"
 };
 const navStyles = css({
   display: 'flex'

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/pagination",
-	"version": "14.1.8",
+	"version": "14.2.0",
 	"sideEffects": false
 }

package/dist/esm/internal/components/navigator.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 var gridSize = getGridSize();
@@ -11,7 +11,8 @@ var navigatorStyles = css({
   paddingLeft: gridSize / 2
 });
 export default function Navigator(props) {
-  return jsx(Button, _extends({}, props, {
+  return jsx(Button // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, props, {
     appearance: "subtle",
     spacing: "none",
     css: navigatorStyles

package/dist/esm/internal/components/page.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Button from '@atlaskit/button/standard-button';
 export default function Page(props) {
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
     appearance: "subtle"
   }));

package/dist/esm/internal/components/render-ellipsis.js

@@ -1,5 +1,5 @@
 /**  @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 var ellipsisStyles = css({
   display: 'inline-flex',
   padding: '0 8px',

package/dist/esm/internal/utils/collapse-range.js

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import memoizeOne from 'memoize-one';
+import memoizeOne from 'memoize-one'; // TODO: comma needed after generic declaration below, or the .tsx file thinks
+// it is a JSX element. Tidy up in a future refactor.
 
 var collapseRange = function collapseRange(pages, current, _ref, testId) {
   var max = _ref.max,

package/dist/esm/pagination.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /**  @jsx jsx */
 import { forwardRef, memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import useControlled from '@atlaskit/ds-lib/use-controlled';
@@ -21,7 +21,7 @@ import collapseRange from './internal/utils/collapse-range';
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.1.8"
+  packageVersion: "14.2.0"
 };
 var navStyles = css({
   display: 'flex'

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/pagination",
-	"version": "14.1.8",
+	"version": "14.2.0",
 	"sideEffects": false
 }

package/dist/types/internal/components/navigator.d.ts

@@ -1,15 +1,22 @@
 /** @jsx jsx */
 import React, { ReactElement, SyntheticEvent } from 'react';
-export declare type NavigatorPropsType<T> = {
-    /** This will be passed in as aria-label to button. This is what screen reader will read */
+import { jsx } from '@emotion/react';
+export declare type NavigatorProps<T> = {
+    /**
+     * This will be passed in as aria-label to button. This is what screen reader will read
+     */
     'aria-label'?: string;
-    /** Is the navigator disabled */
+    /**
+     * Is the navigator disabled
+     */
     isDisabled?: boolean;
     iconBefore: ReactElement;
     pages: T[];
     testId?: string;
-    /** This function is called with the when user clicks on navigator */
+    /**
+     * This function is called with the when user clicks on navigator
+     */
     onClick?: (event: SyntheticEvent) => void;
     component?: React.ElementType<any>;
 };
-export default function Navigator<T>(props: NavigatorPropsType<T>): JSX.Element;
+export default function Navigator<T>(props: NavigatorProps<T>): jsx.JSX.Element;

package/dist/types/internal/components/page.d.ts

@@ -2,7 +2,7 @@
 import { ButtonProps } from '@atlaskit/button/standard-button';
 import type { Appearance } from '@atlaskit/button/types';
 declare type Diff<T, U> = T extends U ? never : T;
-declare type PagePropsType = Diff<ButtonProps, {
+declare type PageProps = Diff<ButtonProps, {
     appearance?: Appearance;
     autoFocus: boolean;
     isDisabled: boolean;
@@ -13,5 +13,5 @@ declare type PagePropsType = Diff<ButtonProps, {
 }> & {
     page?: any;
 };
-export default function Page(props: PagePropsType): JSX.Element;
+export default function Page(props: PageProps): JSX.Element;
 export {};

package/dist/types/internal/components/render-ellipsis.d.ts

@@ -1,6 +1,6 @@
 /**  @jsx jsx */
 import { ReactElement } from 'react';
-export declare type EllipsisPropType = {
+export declare type EllipsisProp = {
     key: string;
 };
-export default function renderEllipsis({ key, }: EllipsisPropType): ReactElement;
+export default function renderEllipsis({ key }: EllipsisProp): ReactElement;

package/dist/types/pagination.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { PaginationPropTypes } from './types';
-declare function InnerPagination<T>({ components, defaultSelectedIndex, selectedIndex, label, previousLabel, nextLabel, style, max, onChange, pages, getPageLabel, renderEllipsis, analyticsContext, testId, }: PaginationPropTypes<T>, ref: React.Ref<HTMLDivElement>): JSX.Element;
+declare function InnerPagination<T>({ components, defaultSelectedIndex, selectedIndex, label, previousLabel, nextLabel, style, max, onChange, pages, getPageLabel, renderEllipsis, analyticsContext, testId, }: PaginationPropTypes<T>, ref: React.Ref<HTMLDivElement>): jsx.JSX.Element;
 declare const _default: typeof InnerPagination;
 export default _default;

package/dist/types/types.d.ts

@@ -1,49 +1,75 @@
 import type { CSSProperties, ReactElement, SyntheticEvent } from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 export interface PaginationPropTypes<T = unknown> {
-    /** Replace the built-in Page, Previous, Next and/ or Ellipsis component */
+    /**
+     * Replace the built-in Page, Previous, Next and/ or Ellipsis component
+     */
     components?: {
         Page?: React.ElementType;
         Previous?: React.ElementType;
         Next?: React.ElementType;
     };
-    /** Index of the page to be selected by default */
+    /**
+     * Index of the page to be selected by default
+     */
     defaultSelectedIndex?: number;
-    /** Helper function to get text displayed on the page button. It is helpful in scenarios when page the page passed in is an object  */
+    /**
+     * Helper function to get text displayed on the page button. It is helpful in scenarios when page the page passed in is an object
+     */
     getPageLabel?: (page: T, pageIndex: number) => number | string;
-    /** The aria-label for the pagination wrapper */
+    /**
+     * The aria-label for the pagination wrapper
+     */
     label?: string;
-    /** The aria-label for the next button */
+    /**
+     * The aria-label for the next button
+     */
     nextLabel?: string;
-    /** The aria-label for the previous button */
+    /**
+     * The aria-label for the previous button
+     */
     previousLabel?: string;
-    /** Style to spread on the container element */
+    /**
+     * Style to spread on the container element
+     */
     style?: CSSProperties;
-    /** Maximum number of pages to be displayed in the pagination */
+    /**
+     * Maximum number of pages to be displayed in the pagination
+     */
     max?: number;
-    /** The onChange handler which is called when the page is changed */
+    /**
+     * The onChange handler which is called when the page is changed
+     */
     onChange?: (event: SyntheticEvent, page: T, analyticsEvent?: UIAnalyticsEvent) => void;
-    /** Array of the pages to display */
+    /**
+     * Array of the pages to display
+     */
     pages: T[];
-    /** Index of the selected page. This will make this pagination controlled */
+    /**
+     * Index of the selected page. This will make this pagination controlled
+     */
     selectedIndex?: number;
-    /** The react Node returned from the function is rendered instead of the default ellipsis node */
+    /**
+     * The react Node returned from the function is rendered instead of the default ellipsis node
+     */
     renderEllipsis?: (arg: {
         key: string;
     }) => ReactElement;
-    /** Additional information to be included in the `context` of analytics events */
+    /**
+     * Additional information to be included in the `context` of analytics events
+     */
     analyticsContext?: Record<string, any>;
     /**
-      A `testId` prop is provided for specified elements,
-      which is a unique string that appears as a data attribute `data-testid`
-      in the rendered code, serving as a hook for automated tests.
-  
-      Will set data-testid on these elements when defined:
-      - Pagination nav wrapper - {testId}
-      - Page - {testId}--page-{page index}
-      - Current page - {testId}--current-page-{page index}
-      - Left navigator - {testId}--left-navigator
-      - Right navigator - {testId}--right-navigator
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid`
+     * in the rendered code, serving as a hook for automated tests.
+     *
+     * Will set data-testid on these elements when defined:
+     * - Pagination nav wrapper - {testId}
+     * - Page - {testId}--page-{page index}
+     * - Current page - {testId}--current-page-{page index}
+     * - Left navigator - {testId}--left-navigator
+     * - Right navigator - {testId}--right-navigator
      */
     testId?: string;
 }

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@atlaskit/pagination",
-  "version": "14.1.8",
+  "version": "14.2.0",
   "description": "Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+  "homepage": "https://atlassian.design/components/pagination/",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -13,7 +14,11 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
+  "af:exports": {
+    "./types": "./src/entry-points/types.tsx",
+    ".": "./src/index.tsx"
+  },
   "atlassian": {
     "team": "Design System Team",
     "releaseModel": "scheduled",
@@ -26,11 +31,11 @@
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/codemod-utils": "^4.1.0",
-    "@atlaskit/ds-lib": "^2.0.0",
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "memoize-one": "^6.0.0"
   },
   "peerDependencies": {
@@ -38,8 +43,9 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/dynamic-table": "^14.6.0",
-    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/ds-lib": "^2.1.0",
+    "@atlaskit/dynamic-table": "^14.8.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -52,7 +58,7 @@
     "react-router-dom": "^4.2.2",
     "storybook-addon-performance": "^0.16.0",
     "tiny-invariant": "^1.2.0",
-    "typescript": "4.2.4",
+    "typescript": "4.3.5",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {
@@ -60,6 +66,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "design-system": "v1",
       "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
@@ -71,10 +78,5 @@
       ]
     }
   },
-  "af:exports": {
-    "./types": "./src/entry-points/types.ts",
-    ".": "./src/index.ts"
-  },
-  "homepage": "https://atlassian.design/components/pagination/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/report.api.md

@@ -0,0 +1,87 @@
+## API Report File for "@atlaskit/pagination"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import type { CSSProperties } from 'react';
+import type { ReactElement } from 'react';
+import type { SyntheticEvent } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+
+declare const _default: typeof InnerPagination;
+export default _default;
+
+declare function InnerPagination<T>(
+  {
+    components,
+    defaultSelectedIndex,
+    selectedIndex,
+    label,
+    previousLabel,
+    nextLabel,
+    style,
+    max,
+    onChange,
+    pages,
+    getPageLabel,
+    renderEllipsis,
+    analyticsContext,
+    testId,
+  }: PaginationPropTypes<T>,
+  ref: React.Ref<HTMLDivElement>,
+): JSX.Element;
+
+export declare interface PaginationPropTypes<T = unknown> {
+  /** Replace the built-in Page, Previous, Next and/ or Ellipsis component */
+  components?: {
+    Page?: React.ElementType;
+    Previous?: React.ElementType;
+    Next?: React.ElementType;
+  };
+  /** Index of the page to be selected by default */
+  defaultSelectedIndex?: number;
+  /** Helper function to get text displayed on the page button. It is helpful in scenarios when page the page passed in is an object  */
+  getPageLabel?: (page: T, pageIndex: number) => number | string;
+  /** The aria-label for the pagination wrapper */
+  label?: string;
+  /** The aria-label for the next button */
+  nextLabel?: string;
+  /** The aria-label for the previous button */
+  previousLabel?: string;
+  /** Style to spread on the container element */
+  style?: CSSProperties;
+  /** Maximum number of pages to be displayed in the pagination */
+  max?: number;
+  /** The onChange handler which is called when the page is changed */
+  onChange?: (
+    event: SyntheticEvent,
+    page: T,
+    analyticsEvent?: UIAnalyticsEvent,
+  ) => void;
+  /** Array of the pages to display */
+  pages: T[];
+  /** Index of the selected page. This will make this pagination controlled */
+  selectedIndex?: number;
+  /** The react Node returned from the function is rendered instead of the default ellipsis node */
+  renderEllipsis?: (arg: { key: string }) => ReactElement;
+  /** Additional information to be included in the `context` of analytics events */
+  analyticsContext?: Record<string, any>;
+  /**
+     A `testId` prop is provided for specified elements,
+     which is a unique string that appears as a data attribute `data-testid`
+     in the rendered code, serving as a hook for automated tests.
+
+     Will set data-testid on these elements when defined:
+     - Pagination nav wrapper - {testId}
+     - Page - {testId}--page-{page index}
+     - Current page - {testId}--current-page-{page index}
+     - Left navigator - {testId}--left-navigator
+     - Right navigator - {testId}--right-navigator
+     */
+  testId?: string;
+}
+
+export {};
+```