@atlaskit/pagination 14.2.7 → 14.2.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/pagination
 
+## 14.2.9
+
+### Patch Changes
+
+- [`cfe48bb7ece`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cfe48bb7ece) - Internal change only. Replace usages of Inline/Stack with stable version from `@atlaskit/primitives`.
+
+## 14.2.8
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.2.7
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _pagination.default;
   }
 });
-
 var _pagination = _interopRequireDefault(require("./pagination"));

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

@@ -1,20 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 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
+  return /*#__PURE__*/_react.default.createElement(_standardButton.default
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , (0, _extends2.default)({}, props, {
     appearance: "subtle"
   }));

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

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Page;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 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, {

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

@@ -1,21 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = renderEllipsis;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
-
 var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
-
 function renderEllipsis(_ref) {
   var key = _ref.key,
-      testId = _ref.testId;
+    testId = _ref.testId;
   return /*#__PURE__*/_react.default.createElement(_box.default, {
     as: "span",
     testId: testId,

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

@@ -1,28 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 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,
-      transform = _ref.transform;
-  var total = pages.length; // only need ellipsis if we have more pages than we can display
-
-  var needEllipsis = total > max; // show start ellipsis if the current page is further away than max - 4 from the first page
-
-  var hasStartEllipsis = needEllipsis && max - 4 < current; // show end ellipsis if the current page is further than total - max + 3 from the last page
-
+    ellipsis = _ref.ellipsis,
+    transform = _ref.transform;
+  var total = pages.length;
+  // only need ellipsis if we have more pages than we can display
+  var needEllipsis = total > max;
+  // show start ellipsis if the current page is further away than max - 4 from the first page
+  var hasStartEllipsis = needEllipsis && max - 4 < current;
+  // show end ellipsis if the current page is further than total - max + 3 from the last page
   var hasEndEllipsis = needEllipsis && current < total - max + 3;
   var getPageComponents = (0, _memoizeOne.default)(function () {
     var startIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -31,30 +27,24 @@ var collapseRange = function collapseRange(pages, current, _ref, testId) {
       return transform(page, startIndex + index, testId);
     });
   });
-
   if (!needEllipsis) {
     return getPageComponents(0, total);
   }
-
   if (hasStartEllipsis && !hasEndEllipsis) {
     var _pageCount = max - 2;
-
     return [].concat((0, _toConsumableArray2.default)(getPageComponents(0, 1)), [ellipsis({
       key: 'ellipsis-1',
       testId: "".concat(testId, "-ellipsis")
     })], (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")
     })], (0, _toConsumableArray2.default)(getPageComponents(total - 1)));
-  } // we have both start and end ellipsis
-
-
+  }
+  // we have both start and end ellipsis
   var pageCount = max - 4;
   return [].concat((0, _toConsumableArray2.default)(getPageComponents(0, 1)), [ellipsis({
     key: 'ellipsis-1',
@@ -64,6 +54,5 @@ var collapseRange = function collapseRange(pages, current, _ref, testId) {
     testId: "".concat(testId, "-ellipsis")
   })], (0, _toConsumableArray2.default)(getPageComponents(total - 1)));
 };
-
 var _default = collapseRange;
 exports.default = _default;

package/dist/cjs/pagination.js

@@ -1,99 +1,72 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _analyticsNext = require("@atlaskit/analytics-next");
-
 var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
-
-var _inline = _interopRequireDefault(require("@atlaskit/ds-explorations/inline"));
-
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-
 var _useControlled3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
-
 var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
-
 var _chevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right-large"));
-
+var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
 var _navigator = _interopRequireDefault(require("./internal/components/navigator"));
-
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.2.7"
+  packageVersion: "14.2.9"
 };
-
 function InnerPagination(_ref, ref) {
   var _ref$components = _ref.components,
-      components = _ref$components === void 0 ? _constants.emptyObject : _ref$components,
-      _ref$defaultSelectedI = _ref.defaultSelectedIndex,
-      defaultSelectedIndex = _ref$defaultSelectedI === void 0 ? 0 : _ref$defaultSelectedI,
-      selectedIndex = _ref.selectedIndex,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'pagination' : _ref$label,
-      _ref$previousLabel = _ref.previousLabel,
-      previousLabel = _ref$previousLabel === void 0 ? 'previous' : _ref$previousLabel,
-      _ref$nextLabel = _ref.nextLabel,
-      nextLabel = _ref$nextLabel === void 0 ? 'next' : _ref$nextLabel,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? _constants.emptyObject : _ref$style,
-      _ref$max = _ref.max,
-      max = _ref$max === void 0 ? 7 : _ref$max,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? _noop.default : _ref$onChange,
-      pages = _ref.pages,
-      getPageLabel = _ref.getPageLabel,
-      _ref$renderEllipsis = _ref.renderEllipsis,
-      renderEllipsis = _ref$renderEllipsis === void 0 ? _renderEllipsis.default : _ref$renderEllipsis,
-      analyticsContext = _ref.analyticsContext,
-      testId = _ref.testId;
-
+    components = _ref$components === void 0 ? _constants.emptyObject : _ref$components,
+    _ref$defaultSelectedI = _ref.defaultSelectedIndex,
+    defaultSelectedIndex = _ref$defaultSelectedI === void 0 ? 0 : _ref$defaultSelectedI,
+    selectedIndex = _ref.selectedIndex,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'pagination' : _ref$label,
+    _ref$previousLabel = _ref.previousLabel,
+    previousLabel = _ref$previousLabel === void 0 ? 'previous' : _ref$previousLabel,
+    _ref$nextLabel = _ref.nextLabel,
+    nextLabel = _ref$nextLabel === void 0 ? 'next' : _ref$nextLabel,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? _constants.emptyObject : _ref$style,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 7 : _ref$max,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? _noop.default : _ref$onChange,
+    pages = _ref.pages,
+    getPageLabel = _ref.getPageLabel,
+    _ref$renderEllipsis = _ref.renderEllipsis,
+    renderEllipsis = _ref$renderEllipsis === void 0 ? _renderEllipsis.default : _ref$renderEllipsis,
+    analyticsContext = _ref.analyticsContext,
+    testId = _ref.testId;
   var _useControlled = (0, _useControlled3.default)(selectedIndex, function () {
-    return defaultSelectedIndex || 0;
-  }),
-      _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
-      selectedIndexValue = _useControlled2[0],
-      setSelectedIndexValue = _useControlled2[1];
-
+      return defaultSelectedIndex || 0;
+    }),
+    _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
+    selectedIndexValue = _useControlled2[0],
+    setSelectedIndexValue = _useControlled2[1];
   var onChangeWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
     fn: function fn(value, analyticsEvent) {
       var event = value.event,
-          selectedPageIndex = value.selectedPageIndex;
-
+        selectedPageIndex = value.selectedPageIndex;
       if (selectedIndex === undefined) {
         setSelectedIndexValue(selectedPageIndex);
       }
-
       if (onChange) {
         onChange(event, pages[selectedPageIndex], analyticsEvent);
       }
@@ -102,7 +75,6 @@ function InnerPagination(_ref, ref) {
     actionSubject: 'pageNumber',
     analyticsData: analyticsContext
   }, analyticsAttributes));
-
   var transform = function transform(page, currPageIndex, testId) {
     var selectedPage = pages[selectedIndexValue];
     return /*#__PURE__*/_react.default.createElement(_page.default, {
@@ -119,7 +91,6 @@ function InnerPagination(_ref, ref) {
       testId: testId && "".concat(testId, "--").concat(page === selectedPage ? 'current-' : '', "page-").concat(currPageIndex)
     }, getPageLabel ? getPageLabel(page, currPageIndex) : page);
   };
-
   return /*#__PURE__*/_react.default.createElement(_box.default, {
     testId: testId,
     UNSAFE_style: style,
@@ -127,8 +98,8 @@ function InnerPagination(_ref, ref) {
     "aria-label": label,
     as: "nav"
   }, /*#__PURE__*/_react.default.createElement(_inline.default, {
-    gap: "space.0",
-    alignItems: "center"
+    space: "0",
+    alignBlock: "center"
   }, /*#__PURE__*/_react.default.createElement(_navigator.default, {
     key: "left-navigator",
     component: components.Previous,
@@ -167,9 +138,6 @@ function InnerPagination(_ref, ref) {
     testId: testId && "".concat(testId, "--right-navigator")
   })));
 }
-
 var Pagination = /*#__PURE__*/(0, _react.forwardRef)(InnerPagination);
-
 var _default = /*#__PURE__*/(0, _react.memo)(Pagination);
-
 exports.default = _default;

package/dist/cjs/version.json

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

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

@@ -2,7 +2,8 @@ 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
+  return /*#__PURE__*/React.createElement(Button
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , _extends({}, props, {
     appearance: "subtle"
   }));

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

@@ -1,26 +1,25 @@
-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.
+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,
   ellipsis,
   transform
 }, testId) => {
-  const total = pages.length; // only need ellipsis if we have more pages than we can display
-
-  const needEllipsis = total > max; // show start ellipsis if the current page is further away than max - 4 from the first page
-
-  const hasStartEllipsis = needEllipsis && max - 4 < current; // show end ellipsis if the current page is further than total - max + 3 from the last page
-
+  const total = pages.length;
+  // only need ellipsis if we have more pages than we can display
+  const needEllipsis = total > max;
+  // show start ellipsis if the current page is further away than max - 4 from the first page
+  const hasStartEllipsis = needEllipsis && max - 4 < current;
+  // show end ellipsis if the current page is further than total - max + 3 from the last page
   const hasEndEllipsis = needEllipsis && current < total - max + 3;
   const getPageComponents = memoizeOne((startIndex = 0, lastIndex = total) => {
     return pages.slice(startIndex, lastIndex).map((page, index) => transform(page, startIndex + index, testId));
   });
-
   if (!needEllipsis) {
     return getPageComponents(0, total);
   }
-
   if (hasStartEllipsis && !hasEndEllipsis) {
     const pageCount = max - 2;
     return [...getPageComponents(0, 1), ellipsis({
@@ -28,16 +27,14 @@ const collapseRange = (pages, current, {
       testId: `${testId}-ellipsis`
     }), ...getPageComponents(total - pageCount)];
   }
-
   if (!hasStartEllipsis && hasEndEllipsis) {
     const pageCount = max - 2;
     return [...getPageComponents(0, pageCount), ellipsis({
       key: 'ellipsis-1',
       testId: `${testId}-ellipsis`
     }), ...getPageComponents(total - 1)];
-  } // we have both start and end ellipsis
-
-
+  }
+  // we have both start and end ellipsis
   const pageCount = max - 4;
   return [...getPageComponents(0, 1), ellipsis({
     key: 'ellipsis-1',
@@ -47,5 +44,4 @@ const collapseRange = (pages, current, {
     testId: `${testId}-ellipsis`
   }), ...getPageComponents(total - 1)];
 };
-
 export default collapseRange;

package/dist/es2019/pagination.js

@@ -1,11 +1,11 @@
 import React, { forwardRef, memo } from 'react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import Box from '@atlaskit/ds-explorations/box';
-import Inline from '@atlaskit/ds-explorations/inline';
 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 Inline from '@atlaskit/primitives/inline';
 import Navigator from './internal/components/navigator';
 import PageComponent from './internal/components/page';
 import renderDefaultEllipsis from './internal/components/render-ellipsis';
@@ -14,9 +14,8 @@ import collapseRange from './internal/utils/collapse-range';
 const analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.2.7"
+  packageVersion: "14.2.9"
 };
-
 function InnerPagination({
   components = emptyObject,
   defaultSelectedIndex = 0,
@@ -40,11 +39,9 @@ function InnerPagination({
         event,
         selectedPageIndex
       } = value;
-
       if (selectedIndex === undefined) {
         setSelectedIndexValue(selectedPageIndex);
       }
-
       if (onChange) {
         onChange(event, pages[selectedPageIndex], analyticsEvent);
       }
@@ -54,7 +51,6 @@ function InnerPagination({
     analyticsData: analyticsContext,
     ...analyticsAttributes
   });
-
   const transform = (page, currPageIndex, testId) => {
     const selectedPage = pages[selectedIndexValue];
     return /*#__PURE__*/React.createElement(PageComponent, {
@@ -69,7 +65,6 @@ function InnerPagination({
       testId: testId && `${testId}--${page === selectedPage ? 'current-' : ''}page-${currPageIndex}`
     }, getPageLabel ? getPageLabel(page, currPageIndex) : page);
   };
-
   return /*#__PURE__*/React.createElement(Box, {
     testId: testId,
     UNSAFE_style: style,
@@ -77,8 +72,8 @@ function InnerPagination({
     "aria-label": label,
     as: "nav"
   }, /*#__PURE__*/React.createElement(Inline, {
-    gap: "space.0",
-    alignItems: "center"
+    space: "0",
+    alignBlock: "center"
   }, /*#__PURE__*/React.createElement(Navigator, {
     key: "left-navigator",
     component: components.Previous,
@@ -113,6 +108,5 @@ function InnerPagination({
     testId: testId && `${testId}--right-navigator`
   })));
 }
-
 const Pagination = /*#__PURE__*/forwardRef(InnerPagination);
 export default /*#__PURE__*/memo(Pagination);

package/dist/es2019/version.json

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

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

@@ -2,7 +2,8 @@ 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
+  return /*#__PURE__*/React.createElement(Button
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , _extends({}, props, {
     appearance: "subtle"
   }));

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

@@ -3,7 +3,7 @@ import Box from '@atlaskit/ds-explorations/box';
 import Text from '@atlaskit/ds-explorations/text';
 export default function renderEllipsis(_ref) {
   var key = _ref.key,
-      testId = _ref.testId;
+    testId = _ref.testId;
   return /*#__PURE__*/React.createElement(Box, {
     as: "span",
     testId: testId,

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

@@ -1,17 +1,18 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-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.
+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,
-      ellipsis = _ref.ellipsis,
-      transform = _ref.transform;
-  var total = pages.length; // only need ellipsis if we have more pages than we can display
-
-  var needEllipsis = total > max; // show start ellipsis if the current page is further away than max - 4 from the first page
-
-  var hasStartEllipsis = needEllipsis && max - 4 < current; // show end ellipsis if the current page is further than total - max + 3 from the last page
-
+    ellipsis = _ref.ellipsis,
+    transform = _ref.transform;
+  var total = pages.length;
+  // only need ellipsis if we have more pages than we can display
+  var needEllipsis = total > max;
+  // show start ellipsis if the current page is further away than max - 4 from the first page
+  var hasStartEllipsis = needEllipsis && max - 4 < current;
+  // show end ellipsis if the current page is further than total - max + 3 from the last page
   var hasEndEllipsis = needEllipsis && current < total - max + 3;
   var getPageComponents = memoizeOne(function () {
     var startIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -20,30 +21,24 @@ var collapseRange = function collapseRange(pages, current, _ref, testId) {
       return transform(page, startIndex + index, testId);
     });
   });
-
   if (!needEllipsis) {
     return getPageComponents(0, total);
   }
-
   if (hasStartEllipsis && !hasEndEllipsis) {
     var _pageCount = max - 2;
-
     return [].concat(_toConsumableArray(getPageComponents(0, 1)), [ellipsis({
       key: 'ellipsis-1',
       testId: "".concat(testId, "-ellipsis")
     })], _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")
     })], _toConsumableArray(getPageComponents(total - 1)));
-  } // we have both start and end ellipsis
-
-
+  }
+  // we have both start and end ellipsis
   var pageCount = max - 4;
   return [].concat(_toConsumableArray(getPageComponents(0, 1)), [ellipsis({
     key: 'ellipsis-1',
@@ -53,5 +48,4 @@ var collapseRange = function collapseRange(pages, current, _ref, testId) {
     testId: "".concat(testId, "-ellipsis")
   })], _toConsumableArray(getPageComponents(total - 1)));
 };
-
 export default collapseRange;

package/dist/esm/pagination.js

@@ -1,18 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { forwardRef, memo } from 'react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import Box from '@atlaskit/ds-explorations/box';
-import Inline from '@atlaskit/ds-explorations/inline';
 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 Inline from '@atlaskit/primitives/inline';
 import Navigator from './internal/components/navigator';
 import PageComponent from './internal/components/page';
 import renderDefaultEllipsis from './internal/components/render-ellipsis';
@@ -21,50 +18,45 @@ import collapseRange from './internal/utils/collapse-range';
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.2.7"
+  packageVersion: "14.2.9"
 };
-
 function InnerPagination(_ref, ref) {
   var _ref$components = _ref.components,
-      components = _ref$components === void 0 ? emptyObject : _ref$components,
-      _ref$defaultSelectedI = _ref.defaultSelectedIndex,
-      defaultSelectedIndex = _ref$defaultSelectedI === void 0 ? 0 : _ref$defaultSelectedI,
-      selectedIndex = _ref.selectedIndex,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'pagination' : _ref$label,
-      _ref$previousLabel = _ref.previousLabel,
-      previousLabel = _ref$previousLabel === void 0 ? 'previous' : _ref$previousLabel,
-      _ref$nextLabel = _ref.nextLabel,
-      nextLabel = _ref$nextLabel === void 0 ? 'next' : _ref$nextLabel,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? emptyObject : _ref$style,
-      _ref$max = _ref.max,
-      max = _ref$max === void 0 ? 7 : _ref$max,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
-      pages = _ref.pages,
-      getPageLabel = _ref.getPageLabel,
-      _ref$renderEllipsis = _ref.renderEllipsis,
-      renderEllipsis = _ref$renderEllipsis === void 0 ? renderDefaultEllipsis : _ref$renderEllipsis,
-      analyticsContext = _ref.analyticsContext,
-      testId = _ref.testId;
-
+    components = _ref$components === void 0 ? emptyObject : _ref$components,
+    _ref$defaultSelectedI = _ref.defaultSelectedIndex,
+    defaultSelectedIndex = _ref$defaultSelectedI === void 0 ? 0 : _ref$defaultSelectedI,
+    selectedIndex = _ref.selectedIndex,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'pagination' : _ref$label,
+    _ref$previousLabel = _ref.previousLabel,
+    previousLabel = _ref$previousLabel === void 0 ? 'previous' : _ref$previousLabel,
+    _ref$nextLabel = _ref.nextLabel,
+    nextLabel = _ref$nextLabel === void 0 ? 'next' : _ref$nextLabel,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? emptyObject : _ref$style,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 7 : _ref$max,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
+    pages = _ref.pages,
+    getPageLabel = _ref.getPageLabel,
+    _ref$renderEllipsis = _ref.renderEllipsis,
+    renderEllipsis = _ref$renderEllipsis === void 0 ? renderDefaultEllipsis : _ref$renderEllipsis,
+    analyticsContext = _ref.analyticsContext,
+    testId = _ref.testId;
   var _useControlled = useControlled(selectedIndex, function () {
-    return defaultSelectedIndex || 0;
-  }),
-      _useControlled2 = _slicedToArray(_useControlled, 2),
-      selectedIndexValue = _useControlled2[0],
-      setSelectedIndexValue = _useControlled2[1];
-
+      return defaultSelectedIndex || 0;
+    }),
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    selectedIndexValue = _useControlled2[0],
+    setSelectedIndexValue = _useControlled2[1];
   var onChangeWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
     fn: function fn(value, analyticsEvent) {
       var event = value.event,
-          selectedPageIndex = value.selectedPageIndex;
-
+        selectedPageIndex = value.selectedPageIndex;
       if (selectedIndex === undefined) {
         setSelectedIndexValue(selectedPageIndex);
       }
-
       if (onChange) {
         onChange(event, pages[selectedPageIndex], analyticsEvent);
       }
@@ -73,7 +65,6 @@ function InnerPagination(_ref, ref) {
     actionSubject: 'pageNumber',
     analyticsData: analyticsContext
   }, analyticsAttributes));
-
   var transform = function transform(page, currPageIndex, testId) {
     var selectedPage = pages[selectedIndexValue];
     return /*#__PURE__*/React.createElement(PageComponent, {
@@ -90,7 +81,6 @@ function InnerPagination(_ref, ref) {
       testId: testId && "".concat(testId, "--").concat(page === selectedPage ? 'current-' : '', "page-").concat(currPageIndex)
     }, getPageLabel ? getPageLabel(page, currPageIndex) : page);
   };
-
   return /*#__PURE__*/React.createElement(Box, {
     testId: testId,
     UNSAFE_style: style,
@@ -98,8 +88,8 @@ function InnerPagination(_ref, ref) {
     "aria-label": label,
     as: "nav"
   }, /*#__PURE__*/React.createElement(Inline, {
-    gap: "space.0",
-    alignItems: "center"
+    space: "0",
+    alignBlock: "center"
   }, /*#__PURE__*/React.createElement(Navigator, {
     key: "left-navigator",
     component: components.Previous,
@@ -138,6 +128,5 @@ function InnerPagination(_ref, ref) {
     testId: testId && "".concat(testId, "--right-navigator")
   })));
 }
-
 var Pagination = /*#__PURE__*/forwardRef(InnerPagination);
 export default /*#__PURE__*/memo(Pagination);

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/pagination",
-  "version": "14.2.7",
+  "version": "14.2.9",
   "description": "Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -20,7 +20,6 @@
     ".": "./src/index.tsx"
   },
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -29,12 +28,13 @@
     }
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^8.0.0",
+    "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/button": "^16.5.0",
     "@atlaskit/codemod-utils": "^4.1.0",
     "@atlaskit/ds-explorations": "^2.0.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.11.0",
+    "@atlaskit/primitives": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "memoize-one": "^6.0.0"
   },
@@ -42,7 +42,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/code": "^14.4.1",
+    "@atlaskit/code": "^14.5.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/dynamic-table": "^14.8.0",
@@ -76,9 +76,9 @@
       ],
       "analytics": "analytics-next",
       "design-tokens": [
+        "color",
         "spacing"
       ],
-      "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [
         "emotion",