@atlaskit/pagination 14.5.2 → 14.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/pagination
 
+## 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
+
+- Updated dependencies
+
 ## 14.5.2
 
 ### Patch Changes

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

@@ -27,8 +27,15 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.5.2"
+  packageVersion: "14.6.0"
 };
+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,
@@ -122,11 +133,16 @@ function InnerPagination(_ref, ref) {
     "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) {

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: "14.5.2"
+  packageVersion: "14.6.0"
 };
+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,
@@ -93,11 +104,16 @@ function InnerPagination({
     "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({

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: "14.5.2"
+  packageVersion: "14.6.0"
 };
+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,
@@ -112,11 +123,16 @@ function InnerPagination(_ref, ref) {
     "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) {

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/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.2",
+  "version": "14.6.0",
   "description": "Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -45,7 +45,8 @@
     "@atlaskit/ds-explorations": "^3.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/primitives": "^3.0.0",
+    "@atlaskit/primitives": "^4.0.0",
+    "@atlaskit/visually-hidden": "^1.2.4",
     "@babel/runtime": "^7.0.0",
     "memoize-one": "^6.0.0"
   },