@atlaskit/pagination 14.5.3 → 14.6.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/pagination
 
+## 14.6.1
+
+### Patch Changes
+
+- [#80972](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80972) [`6ff808b4cb86`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6ff808b4cb86) - Remove unused "pages" prop from Navigator buttons and replace usage of spread operator with individual props.
+
+## 14.6.0
+
+### Minor Changes
+
+- [#72645](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72645) [`10cdc9cadb00`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/10cdc9cadb00) - Accessibility fix. Fixed semantics for pagination buttons.
+
 ## 14.5.3
 
 ### Patch Changes

package/dist/cjs/entry-points/types.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+"use strict";

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

@@ -5,13 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Navigator;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 function Navigator(props) {
-  return /*#__PURE__*/_react.default.createElement(_standardButton.default
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  , (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+    "aria-label": props['aria-label'],
+    isDisabled: props.isDisabled,
+    iconBefore: props.iconBefore,
+    testId: props.testId,
+    onClick: props.onClick,
+    component: props.component,
     appearance: "subtle"
-  }));
+  });
 }

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

@@ -8,15 +8,18 @@ exports.default = renderEllipsis;
 var _react = _interopRequireDefault(require("react"));
 var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
 var _primitives = require("@atlaskit/primitives");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var containerStyles = (0, _primitives.xcss)({
   display: 'flex',
   position: 'relative'
 });
 function renderEllipsis(_ref) {
   var key = _ref.key,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    from = _ref.from,
+    to = _ref.to;
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    as: "span",
+    as: "li",
     testId: testId,
     key: key,
     xcss: containerStyles,
@@ -24,5 +27,5 @@ function renderEllipsis(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_text.default, {
     testId: "".concat(testId, "-text"),
     verticalAlign: "middle"
-  }, "\u2026"));
+  }, /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, "Skipped pages from ", from, " to ", to), "\u2026"));
 }

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

@@ -34,24 +34,32 @@ var collapseRange = function collapseRange(pages, current, _ref, testId) {
     var _pageCount = max - 2;
     return [].concat((0, _toConsumableArray2.default)(getPageComponents(0, 1)), [ellipsis({
       key: 'ellipsis-1',
-      testId: "".concat(testId, "-ellipsis")
+      testId: "".concat(testId, "-ellipsis"),
+      from: 2,
+      to: total - _pageCount
     })], (0, _toConsumableArray2.default)(getPageComponents(total - _pageCount)));
   }
   if (!hasStartEllipsis && hasEndEllipsis) {
     var _pageCount2 = max - 2;
     return [].concat((0, _toConsumableArray2.default)(getPageComponents(0, _pageCount2)), [ellipsis({
       key: 'ellipsis-1',
-      testId: "".concat(testId, "-ellipsis")
+      testId: "".concat(testId, "-ellipsis"),
+      from: _pageCount2 + 1,
+      to: total - 1
     })], (0, _toConsumableArray2.default)(getPageComponents(total - 1)));
   }
   // we have both start and end ellipsis
   var pageCount = max - 4;
   return [].concat((0, _toConsumableArray2.default)(getPageComponents(0, 1)), [ellipsis({
     key: 'ellipsis-1',
-    testId: "".concat(testId, "-ellipsis")
+    testId: "".concat(testId, "-ellipsis"),
+    from: 2,
+    to: current - Math.floor(pageCount / 2)
   })], (0, _toConsumableArray2.default)(getPageComponents(current - Math.floor(pageCount / 2), current + pageCount - 1)), [ellipsis({
     key: 'ellipsis-2',
-    testId: "".concat(testId, "-ellipsis")
+    testId: "".concat(testId, "-ellipsis"),
+    from: current + 3,
+    to: total - 1
   })], (0, _toConsumableArray2.default)(getPageComponents(total - 1)));
 };
 var _default = exports.default = collapseRange;

package/dist/cjs/pagination.js

@@ -20,15 +20,22 @@ var _page = _interopRequireDefault(require("./internal/components/page"));
 var _renderEllipsis = _interopRequireDefault(require("./internal/components/render-ellipsis"));
 var _constants = require("./internal/constants");
 var _collapseRange = _interopRequireDefault(require("./internal/utils/collapse-range"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "0.0.0-development"
+  packageVersion: "14.6.1"
 };
+var paginationMenuStyles = (0, _primitives.xcss)({
+  padding: 'space.0',
+  margin: 'space.0'
+});
+var paginationMenuItemStyles = (0, _primitives.xcss)({
+  marginBlockStart: 'space.0'
+});
 function InnerPagination(_ref, ref) {
   var _ref$components = _ref.components,
     components = _ref$components === void 0 ? _constants.emptyObject : _ref$components,
@@ -80,8 +87,12 @@ function InnerPagination(_ref, ref) {
   var transform = function transform(page, currPageIndex, testId) {
     var selectedPage = pages[selectedIndexValue];
     var pageIndexLabel = "".concat(pageLabel, " ").concat(getPageLabel ? getPageLabel(page, currPageIndex) : page);
-    return /*#__PURE__*/_react.default.createElement(_page.default, {
-      key: "page-".concat(getPageLabel ? getPageLabel(page, currPageIndex) : currPageIndex),
+    var isCurrentPage = page === selectedPage;
+    return /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+      as: "li",
+      xcss: paginationMenuItemStyles,
+      key: "page-".concat(getPageLabel ? getPageLabel(page, currPageIndex) : currPageIndex)
+    }, /*#__PURE__*/_react.default.createElement(_page.default, {
       component: components.Page,
       onClick: function onClick(event) {
         return onChangeWithAnalytics({
@@ -89,13 +100,13 @@ function InnerPagination(_ref, ref) {
           selectedPageIndex: currPageIndex
         });
       },
-      "aria-current": page === selectedPage ? 'page' : undefined,
+      "aria-current": isCurrentPage ? 'page' : undefined,
       "aria-label": pageIndexLabel,
-      isSelected: page === selectedPage,
+      isSelected: isCurrentPage,
       isDisabled: isDisabled,
       page: page,
-      testId: testId && "".concat(testId, "--").concat(page === selectedPage ? 'current-' : '', "page-").concat(currPageIndex)
-    }, getPageLabel ? getPageLabel(page, currPageIndex) : page);
+      testId: testId && "".concat(testId, "--").concat(isCurrentPage ? 'current-' : '', "page-").concat(currPageIndex)
+    }, getPageLabel ? getPageLabel(page, currPageIndex) : page));
   };
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     testId: testId,
@@ -120,13 +131,17 @@ function InnerPagination(_ref, ref) {
       label: ""
     }),
     "aria-label": previousLabel,
-    pages: pages,
     testId: testId && "".concat(testId, "--left-navigator")
-  }), (0, _collapseRange.default)(pages, selectedIndexValue, {
+  }), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    space: "space.0",
+    alignBlock: "baseline",
+    as: "ul",
+    xcss: paginationMenuStyles
+  }, (0, _collapseRange.default)(pages, selectedIndexValue, {
     max: max,
     ellipsis: renderEllipsis,
     transform: transform
-  }, testId), /*#__PURE__*/_react.default.createElement(_navigator.default, {
+  }, testId)), /*#__PURE__*/_react.default.createElement(_navigator.default, {
     key: "right-navigator",
     component: components.Next,
     onClick: function onClick(event) {
@@ -140,7 +155,6 @@ function InnerPagination(_ref, ref) {
       label: ""
     }),
     "aria-label": nextLabel,
-    pages: pages,
     testId: testId && "".concat(testId, "--right-navigator")
   })));
 }

package/dist/es2019/entry-points/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,10 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Button from '@atlaskit/button/standard-button';
 export default function Navigator(props) {
-  return /*#__PURE__*/React.createElement(Button
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  , _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Button, {
+    "aria-label": props['aria-label'],
+    isDisabled: props.isDisabled,
+    iconBefore: props.iconBefore,
+    testId: props.testId,
+    onClick: props.onClick,
+    component: props.component,
     appearance: "subtle"
-  }));
+  });
 }

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

@@ -1,16 +1,19 @@
 import React from 'react';
 import Text from '@atlaskit/ds-explorations/text';
 import { Box, xcss } from '@atlaskit/primitives';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 const containerStyles = xcss({
   display: 'flex',
   position: 'relative'
 });
 export default function renderEllipsis({
   key,
-  testId
+  testId,
+  from,
+  to
 }) {
   return /*#__PURE__*/React.createElement(Box, {
-    as: "span",
+    as: "li",
     testId: testId,
     key: key,
     xcss: containerStyles,
@@ -18,5 +21,5 @@ export default function renderEllipsis({
   }, /*#__PURE__*/React.createElement(Text, {
     testId: `${testId}-text`,
     verticalAlign: "middle"
-  }, "\u2026"));
+  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, "Skipped pages from ", from, " to ", to), "\u2026"));
 }

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

@@ -24,24 +24,32 @@ const collapseRange = (pages, current, {
     const pageCount = max - 2;
     return [...getPageComponents(0, 1), ellipsis({
       key: 'ellipsis-1',
-      testId: `${testId}-ellipsis`
+      testId: `${testId}-ellipsis`,
+      from: 2,
+      to: total - pageCount
     }), ...getPageComponents(total - pageCount)];
   }
   if (!hasStartEllipsis && hasEndEllipsis) {
     const pageCount = max - 2;
     return [...getPageComponents(0, pageCount), ellipsis({
       key: 'ellipsis-1',
-      testId: `${testId}-ellipsis`
+      testId: `${testId}-ellipsis`,
+      from: pageCount + 1,
+      to: total - 1
     }), ...getPageComponents(total - 1)];
   }
   // we have both start and end ellipsis
   const pageCount = max - 4;
   return [...getPageComponents(0, 1), ellipsis({
     key: 'ellipsis-1',
-    testId: `${testId}-ellipsis`
+    testId: `${testId}-ellipsis`,
+    from: 2,
+    to: current - Math.floor(pageCount / 2)
   }), ...getPageComponents(current - Math.floor(pageCount / 2), current + pageCount - 1), ellipsis({
     key: 'ellipsis-2',
-    testId: `${testId}-ellipsis`
+    testId: `${testId}-ellipsis`,
+    from: current + 3,
+    to: total - 1
   }), ...getPageComponents(total - 1)];
 };
 export default collapseRange;

package/dist/es2019/pagination.js

@@ -4,7 +4,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import ChevronRightLargeIcon from '@atlaskit/icon/glyph/chevron-right-large';
-import { Box, Inline } from '@atlaskit/primitives';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
 import Navigator from './internal/components/navigator';
 import PageComponent from './internal/components/page';
 import renderDefaultEllipsis from './internal/components/render-ellipsis';
@@ -13,8 +13,15 @@ import collapseRange from './internal/utils/collapse-range';
 const analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "0.0.0-development"
+  packageVersion: "14.6.1"
 };
+const paginationMenuStyles = xcss({
+  padding: 'space.0',
+  margin: 'space.0'
+});
+const paginationMenuItemStyles = xcss({
+  marginBlockStart: 'space.0'
+});
 function InnerPagination({
   components = emptyObject,
   defaultSelectedIndex = 0,
@@ -55,20 +62,24 @@ function InnerPagination({
   const transform = (page, currPageIndex, testId) => {
     const selectedPage = pages[selectedIndexValue];
     const pageIndexLabel = `${pageLabel} ${getPageLabel ? getPageLabel(page, currPageIndex) : page}`;
-    return /*#__PURE__*/React.createElement(PageComponent, {
-      key: `page-${getPageLabel ? getPageLabel(page, currPageIndex) : currPageIndex}`,
+    const isCurrentPage = page === selectedPage;
+    return /*#__PURE__*/React.createElement(Inline, {
+      as: "li",
+      xcss: paginationMenuItemStyles,
+      key: `page-${getPageLabel ? getPageLabel(page, currPageIndex) : currPageIndex}`
+    }, /*#__PURE__*/React.createElement(PageComponent, {
       component: components.Page,
       onClick: event => onChangeWithAnalytics({
         event,
         selectedPageIndex: currPageIndex
       }),
-      "aria-current": page === selectedPage ? 'page' : undefined,
+      "aria-current": isCurrentPage ? 'page' : undefined,
       "aria-label": pageIndexLabel,
-      isSelected: page === selectedPage,
+      isSelected: isCurrentPage,
       isDisabled: isDisabled,
       page: page,
-      testId: testId && `${testId}--${page === selectedPage ? 'current-' : ''}page-${currPageIndex}`
-    }, getPageLabel ? getPageLabel(page, currPageIndex) : page);
+      testId: testId && `${testId}--${isCurrentPage ? 'current-' : ''}page-${currPageIndex}`
+    }, getPageLabel ? getPageLabel(page, currPageIndex) : page));
   };
   return /*#__PURE__*/React.createElement(Box, {
     testId: testId,
@@ -91,13 +102,17 @@ function InnerPagination({
       label: ""
     }),
     "aria-label": previousLabel,
-    pages: pages,
     testId: testId && `${testId}--left-navigator`
-  }), collapseRange(pages, selectedIndexValue, {
+  }), /*#__PURE__*/React.createElement(Inline, {
+    space: "space.0",
+    alignBlock: "baseline",
+    as: "ul",
+    xcss: paginationMenuStyles
+  }, collapseRange(pages, selectedIndexValue, {
     max: max,
     ellipsis: renderEllipsis,
     transform
-  }, testId), /*#__PURE__*/React.createElement(Navigator, {
+  }, testId)), /*#__PURE__*/React.createElement(Navigator, {
     key: "right-navigator",
     component: components.Next,
     onClick: event => onChangeWithAnalytics({
@@ -109,7 +124,6 @@ function InnerPagination({
       label: ""
     }),
     "aria-label": nextLabel,
-    pages: pages,
     testId: testId && `${testId}--right-navigator`
   })));
 }

package/dist/esm/entry-points/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,10 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Button from '@atlaskit/button/standard-button';
 export default function Navigator(props) {
-  return /*#__PURE__*/React.createElement(Button
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  , _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Button, {
+    "aria-label": props['aria-label'],
+    isDisabled: props.isDisabled,
+    iconBefore: props.iconBefore,
+    testId: props.testId,
+    onClick: props.onClick,
+    component: props.component,
     appearance: "subtle"
-  }));
+  });
 }

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

@@ -1,15 +1,18 @@
 import React from 'react';
 import Text from '@atlaskit/ds-explorations/text';
 import { Box, xcss } from '@atlaskit/primitives';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 var containerStyles = xcss({
   display: 'flex',
   position: 'relative'
 });
 export default function renderEllipsis(_ref) {
   var key = _ref.key,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    from = _ref.from,
+    to = _ref.to;
   return /*#__PURE__*/React.createElement(Box, {
-    as: "span",
+    as: "li",
     testId: testId,
     key: key,
     xcss: containerStyles,
@@ -17,5 +20,5 @@ export default function renderEllipsis(_ref) {
   }, /*#__PURE__*/React.createElement(Text, {
     testId: "".concat(testId, "-text"),
     verticalAlign: "middle"
-  }, "\u2026"));
+  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, "Skipped pages from ", from, " to ", to), "\u2026"));
 }

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

@@ -28,24 +28,32 @@ var collapseRange = function collapseRange(pages, current, _ref, testId) {
     var _pageCount = max - 2;
     return [].concat(_toConsumableArray(getPageComponents(0, 1)), [ellipsis({
       key: 'ellipsis-1',
-      testId: "".concat(testId, "-ellipsis")
+      testId: "".concat(testId, "-ellipsis"),
+      from: 2,
+      to: total - _pageCount
     })], _toConsumableArray(getPageComponents(total - _pageCount)));
   }
   if (!hasStartEllipsis && hasEndEllipsis) {
     var _pageCount2 = max - 2;
     return [].concat(_toConsumableArray(getPageComponents(0, _pageCount2)), [ellipsis({
       key: 'ellipsis-1',
-      testId: "".concat(testId, "-ellipsis")
+      testId: "".concat(testId, "-ellipsis"),
+      from: _pageCount2 + 1,
+      to: total - 1
     })], _toConsumableArray(getPageComponents(total - 1)));
   }
   // we have both start and end ellipsis
   var pageCount = max - 4;
   return [].concat(_toConsumableArray(getPageComponents(0, 1)), [ellipsis({
     key: 'ellipsis-1',
-    testId: "".concat(testId, "-ellipsis")
+    testId: "".concat(testId, "-ellipsis"),
+    from: 2,
+    to: current - Math.floor(pageCount / 2)
   })], _toConsumableArray(getPageComponents(current - Math.floor(pageCount / 2), current + pageCount - 1)), [ellipsis({
     key: 'ellipsis-2',
-    testId: "".concat(testId, "-ellipsis")
+    testId: "".concat(testId, "-ellipsis"),
+    from: current + 3,
+    to: total - 1
   })], _toConsumableArray(getPageComponents(total - 1)));
 };
 export default collapseRange;

package/dist/esm/pagination.js

@@ -8,7 +8,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import ChevronRightLargeIcon from '@atlaskit/icon/glyph/chevron-right-large';
-import { Box, Inline } from '@atlaskit/primitives';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
 import Navigator from './internal/components/navigator';
 import PageComponent from './internal/components/page';
 import renderDefaultEllipsis from './internal/components/render-ellipsis';
@@ -17,8 +17,15 @@ import collapseRange from './internal/utils/collapse-range';
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "0.0.0-development"
+  packageVersion: "14.6.1"
 };
+var paginationMenuStyles = xcss({
+  padding: 'space.0',
+  margin: 'space.0'
+});
+var paginationMenuItemStyles = xcss({
+  marginBlockStart: 'space.0'
+});
 function InnerPagination(_ref, ref) {
   var _ref$components = _ref.components,
     components = _ref$components === void 0 ? emptyObject : _ref$components,
@@ -70,8 +77,12 @@ function InnerPagination(_ref, ref) {
   var transform = function transform(page, currPageIndex, testId) {
     var selectedPage = pages[selectedIndexValue];
     var pageIndexLabel = "".concat(pageLabel, " ").concat(getPageLabel ? getPageLabel(page, currPageIndex) : page);
-    return /*#__PURE__*/React.createElement(PageComponent, {
-      key: "page-".concat(getPageLabel ? getPageLabel(page, currPageIndex) : currPageIndex),
+    var isCurrentPage = page === selectedPage;
+    return /*#__PURE__*/React.createElement(Inline, {
+      as: "li",
+      xcss: paginationMenuItemStyles,
+      key: "page-".concat(getPageLabel ? getPageLabel(page, currPageIndex) : currPageIndex)
+    }, /*#__PURE__*/React.createElement(PageComponent, {
       component: components.Page,
       onClick: function onClick(event) {
         return onChangeWithAnalytics({
@@ -79,13 +90,13 @@ function InnerPagination(_ref, ref) {
           selectedPageIndex: currPageIndex
         });
       },
-      "aria-current": page === selectedPage ? 'page' : undefined,
+      "aria-current": isCurrentPage ? 'page' : undefined,
       "aria-label": pageIndexLabel,
-      isSelected: page === selectedPage,
+      isSelected: isCurrentPage,
       isDisabled: isDisabled,
       page: page,
-      testId: testId && "".concat(testId, "--").concat(page === selectedPage ? 'current-' : '', "page-").concat(currPageIndex)
-    }, getPageLabel ? getPageLabel(page, currPageIndex) : page);
+      testId: testId && "".concat(testId, "--").concat(isCurrentPage ? 'current-' : '', "page-").concat(currPageIndex)
+    }, getPageLabel ? getPageLabel(page, currPageIndex) : page));
   };
   return /*#__PURE__*/React.createElement(Box, {
     testId: testId,
@@ -110,13 +121,17 @@ function InnerPagination(_ref, ref) {
       label: ""
     }),
     "aria-label": previousLabel,
-    pages: pages,
     testId: testId && "".concat(testId, "--left-navigator")
-  }), collapseRange(pages, selectedIndexValue, {
+  }), /*#__PURE__*/React.createElement(Inline, {
+    space: "space.0",
+    alignBlock: "baseline",
+    as: "ul",
+    xcss: paginationMenuStyles
+  }, collapseRange(pages, selectedIndexValue, {
     max: max,
     ellipsis: renderEllipsis,
     transform: transform
-  }, testId), /*#__PURE__*/React.createElement(Navigator, {
+  }, testId)), /*#__PURE__*/React.createElement(Navigator, {
     key: "right-navigator",
     component: components.Next,
     onClick: function onClick(event) {
@@ -130,7 +145,6 @@ function InnerPagination(_ref, ref) {
       label: ""
     }),
     "aria-label": nextLabel,
-    pages: pages,
     testId: testId && "".concat(testId, "--right-navigator")
   })));
 }

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

@@ -9,7 +9,6 @@ export type NavigatorProps<T> = {
      */
     isDisabled?: boolean;
     iconBefore: ReactElement;
-    pages: T[];
     testId?: string;
     /**
      * This function is called when the user clicks on the navigator.

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

@@ -2,5 +2,7 @@ import { ReactElement } from 'react';
 export type EllipsisProp = {
     key: string;
     testId?: string;
+    from: number;
+    to: number;
 };
-export default function renderEllipsis({ key, testId, }: EllipsisProp): ReactElement;
+export default function renderEllipsis({ key, testId, from, to, }: EllipsisProp): ReactElement;

package/dist/types/internal/utils/collapse-range.d.ts

@@ -4,6 +4,8 @@ declare const collapseRange: <T>(pages: T[], current: number, { max, ellipsis, t
     ellipsis: (arg: {
         key: string;
         testId: string;
+        from: number;
+        to: number;
     }) => ReactElement;
     transform: (page: T, index: number, testId?: string) => ReactElement;
 }, testId?: string) => ReactElement[];

package/dist/types/types.d.ts

@@ -65,6 +65,8 @@ export interface PaginationPropTypes<T = unknown> {
      */
     renderEllipsis?: (arg: {
         key: string;
+        from: number;
+        to: number;
     }) => ReactElement;
     /**
      * Additional information to be included in the `context` of analytics events.

package/dist/types-ts4.5/internal/components/navigator.d.ts

@@ -9,7 +9,6 @@ export type NavigatorProps<T> = {
      */
     isDisabled?: boolean;
     iconBefore: ReactElement;
-    pages: T[];
     testId?: string;
     /**
      * This function is called when the user clicks on the navigator.

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

@@ -2,5 +2,7 @@ import { ReactElement } from 'react';
 export type EllipsisProp = {
     key: string;
     testId?: string;
+    from: number;
+    to: number;
 };
-export default function renderEllipsis({ key, testId, }: EllipsisProp): ReactElement;
+export default function renderEllipsis({ key, testId, from, to, }: EllipsisProp): ReactElement;

package/dist/types-ts4.5/internal/utils/collapse-range.d.ts

@@ -4,6 +4,8 @@ declare const collapseRange: <T>(pages: T[], current: number, { max, ellipsis, t
     ellipsis: (arg: {
         key: string;
         testId: string;
+        from: number;
+        to: number;
     }) => ReactElement;
     transform: (page: T, index: number, testId?: string) => ReactElement;
 }, testId?: string) => ReactElement[];

package/dist/types-ts4.5/types.d.ts

@@ -65,6 +65,8 @@ export interface PaginationPropTypes<T = unknown> {
      */
     renderEllipsis?: (arg: {
         key: string;
+        from: number;
+        to: number;
     }) => ReactElement;
     /**
      * Additional information to be included in the `context` of analytics events.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/pagination",
-  "version": "14.5.3",
+  "version": "14.6.1",
   "description": "Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,12 +40,13 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.6.0",
+    "@atlaskit/button": "^17.7.0",
     "@atlaskit/codemod-utils": "^4.2.0",
     "@atlaskit/ds-explorations": "^3.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/primitives": "^4.0.0",
+    "@atlaskit/primitives": "^4.1.0",
+    "@atlaskit/visually-hidden": "^1.2.4",
     "@babel/runtime": "^7.0.0",
     "memoize-one": "^6.0.0"
   },