@openedx/paragon 21.12.1 → 21.12.2

package/dist/Pagination/index.js

@@ -1,3 +1,23 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 /* eslint-disable max-len */
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -13,25 +33,23 @@ import breakpoints from '../utils/breakpoints';
 import newId from '../utils/newId';
 import { ELLIPSIS } from './constants';
 import getPaginationRange from './getPaginationRange';
-export const PAGINATION_BUTTON_LABEL_PREV = 'Previous';
-export const PAGINATION_BUTTON_LABEL_NEXT = 'Next';
-export const PAGINATION_BUTTON_LABEL_PAGE = 'Page';
-export const PAGINATION_BUTTON_LABEL_CURRENT_PAGE = 'Current Page';
-export const PAGINATION_BUTTON_LABEL_PAGE_OF_COUNT = 'of';
-export const PAGINATION_BUTTON_ICON_BUTTON_NEXT_ALT = 'Go to next page';
-export const PAGINATION_BUTTON_ICON_BUTTON_PREV_ALT = 'Go to previous page';
-const VARIANTS = {
-  default: 'default',
+export var PAGINATION_BUTTON_LABEL_PREV = 'Previous';
+export var PAGINATION_BUTTON_LABEL_NEXT = 'Next';
+export var PAGINATION_BUTTON_LABEL_PAGE = 'Page';
+export var PAGINATION_BUTTON_LABEL_CURRENT_PAGE = 'Current Page';
+export var PAGINATION_BUTTON_LABEL_PAGE_OF_COUNT = 'of';
+export var PAGINATION_BUTTON_ICON_BUTTON_NEXT_ALT = 'Go to next page';
+export var PAGINATION_BUTTON_ICON_BUTTON_PREV_ALT = 'Go to previous page';
+var VARIANTS = {
+  "default": 'default',
   secondary: 'secondary',
   reduced: 'reduced',
   minimal: 'minimal'
 };
 function ReducedPagination(_ref) {
-  let {
-    currentPage,
-    pageCount,
-    handlePageSelect
-  } = _ref;
+  var currentPage = _ref.currentPage,
+    pageCount = _ref.pageCount,
+    handlePageSelect = _ref.handlePageSelect;
   if (pageCount <= 1) {
     return null;
   }
@@ -40,307 +58,324 @@ function ReducedPagination(_ref) {
     id: "Pagination dropdown"
   }, currentPage, " of ", pageCount), /*#__PURE__*/React.createElement(Dropdown.Menu, {
     className: "pgn__reduced-pagination-dropdown"
-  }, [...Array(pageCount).keys()].map(pageNum => /*#__PURE__*/React.createElement(Dropdown.Item, {
-    onClick: () => handlePageSelect(pageNum + 1),
-    key: pageNum,
-    "data-testid": "pagination-dropdown-item"
-  }, pageNum + 1))));
+  }, _toConsumableArray(Array(pageCount).keys()).map(function (pageNum) {
+    return /*#__PURE__*/React.createElement(Dropdown.Item, {
+      onClick: function onClick() {
+        return handlePageSelect(pageNum + 1);
+      },
+      key: pageNum,
+      "data-testid": "pagination-dropdown-item"
+    }, pageNum + 1);
+  })));
 }
-class Pagination extends React.Component {
-  constructor(props) {
-    super(props);
-    this.previousButtonRef = null;
-    this.nextButtonRef = null;
-    this.pageRefs = {};
-    this.state = {
-      currentPage: this.props.currentPage,
+var Pagination = /*#__PURE__*/function (_React$Component) {
+  _inherits(Pagination, _React$Component);
+  var _super = _createSuper(Pagination);
+  function Pagination(props) {
+    var _this;
+    _classCallCheck(this, Pagination);
+    _this = _super.call(this, props);
+    _this.previousButtonRef = null;
+    _this.nextButtonRef = null;
+    _this.pageRefs = {};
+    _this.state = {
+      currentPage: _this.props.currentPage,
       pageButtonSelected: false
     };
-    this.handlePageSelect = this.handlePageSelect.bind(this);
-  }
-  shouldComponentUpdate(nextProps, nextState) {
-    // Update only when the props and currentPage state changes to avoid re-render
-    // if only the pageButtonSelected state is changed.
-    return nextProps !== this.props || nextState.currentPage !== this.state.currentPage;
+    _this.handlePageSelect = _this.handlePageSelect.bind(_assertThisInitialized(_this));
+    return _this;
   }
-  componentDidUpdate(prevProps, prevState) {
-    const {
-      currentPage,
-      pageButtonSelected
-    } = this.state;
-    const currentPageRef = this.pageRefs[currentPage];
-    if (currentPageRef && pageButtonSelected) {
-      currentPageRef.focus();
-      this.setPageButtonSelectedState(false);
+  _createClass(Pagination, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      // Update only when the props and currentPage state changes to avoid re-render
+      // if only the pageButtonSelected state is changed.
+      return nextProps !== this.props || nextState.currentPage !== this.state.currentPage;
     }
-    /* eslint-disable react/no-did-update-set-state */
-    if (this.state.currentPage === prevState.currentPage && (this.props.currentPage !== prevProps.currentPage || this.props.currentPage !== this.state.currentPage)) {
-      this.setState({
-        currentPage: this.props.currentPage
-      });
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this$state = this.state,
+        currentPage = _this$state.currentPage,
+        pageButtonSelected = _this$state.pageButtonSelected;
+      var currentPageRef = this.pageRefs[currentPage];
+      if (currentPageRef && pageButtonSelected) {
+        currentPageRef.focus();
+        this.setPageButtonSelectedState(false);
+      }
+      /* eslint-disable react/no-did-update-set-state */
+      if (this.state.currentPage === prevState.currentPage && (this.props.currentPage !== prevProps.currentPage || this.props.currentPage !== this.state.currentPage)) {
+        this.setState({
+          currentPage: this.props.currentPage
+        });
+      }
     }
-  }
-  handlePageSelect(page) {
-    if (page !== this.state.currentPage) {
+  }, {
+    key: "handlePageSelect",
+    value: function handlePageSelect(page) {
+      if (page !== this.state.currentPage) {
+        this.setState({
+          currentPage: page,
+          pageButtonSelected: true
+        });
+        this.props.onPageSelect(page);
+      }
+    }
+  }, {
+    key: "handlePreviousNextButtonClick",
+    value: function handlePreviousNextButtonClick(page) {
+      var pageCount = this.props.pageCount;
+      if (page === 1) {
+        this.nextButtonRef.focus();
+      } else if (page === pageCount) {
+        this.previousButtonRef.focus();
+      }
       this.setState({
-        currentPage: page,
-        pageButtonSelected: true
+        currentPage: page
       });
       this.props.onPageSelect(page);
     }
-  }
-  handlePreviousNextButtonClick(page) {
-    const {
-      pageCount
-    } = this.props;
-    if (page === 1) {
-      this.nextButtonRef.focus();
-    } else if (page === pageCount) {
-      this.previousButtonRef.focus();
+  }, {
+    key: "setPageButtonSelectedState",
+    value: function setPageButtonSelectedState(value) {
+      this.setState({
+        pageButtonSelected: value
+      });
     }
-    this.setState({
-      currentPage: page
-    });
-    this.props.onPageSelect(page);
-  }
-  setPageButtonSelectedState(value) {
-    this.setState({
-      pageButtonSelected: value
-    });
-  }
-  renderEllipsisButton() {
-    return /*#__PURE__*/React.createElement("li", {
-      className: classNames(['page-item', 'disabled']),
-      key: newId('pagination-ellipsis-')
-    }, /*#__PURE__*/React.createElement("span", {
-      className: classNames(['btn', 'page-link', 'ml-0', 'border-0'])
-    }, "..."));
-  }
-  renderPageButton(page) {
-    const {
-      buttonLabels
-    } = this.props;
-    const active = page === this.state.currentPage || null;
-    let ariaLabel = `${buttonLabels.page} ${page}`;
-    if (active) {
-      ariaLabel += `, ${buttonLabels.currentPage}`;
+  }, {
+    key: "renderEllipsisButton",
+    value: function renderEllipsisButton() {
+      return /*#__PURE__*/React.createElement("li", {
+        className: classNames(['page-item', 'disabled']),
+        key: newId('pagination-ellipsis-')
+      }, /*#__PURE__*/React.createElement("span", {
+        className: classNames(['btn', 'page-link', 'ml-0', 'border-0'])
+      }, "..."));
     }
-    return /*#__PURE__*/React.createElement("li", {
-      className: classNames(['page-item', {
-        active
-      }]),
-      key: page
-    }, /*#__PURE__*/React.createElement(Button, {
-      className: "page-link",
-      "aria-label": ariaLabel,
-      ref: element => {
-        this.pageRefs[page] = element;
-      },
-      onClick: () => {
-        this.handlePageSelect(page);
+  }, {
+    key: "renderPageButton",
+    value: function renderPageButton(page) {
+      var _this2 = this;
+      var buttonLabels = this.props.buttonLabels;
+      var active = page === this.state.currentPage || null;
+      var ariaLabel = "".concat(buttonLabels.page, " ").concat(page);
+      if (active) {
+        ariaLabel += ", ".concat(buttonLabels.currentPage);
       }
-    }, page.toString()));
-  }
-  renderPageOfCountButton() {
-    const {
-      currentPage
-    } = this.state;
-    const {
-      pageCount,
-      buttonLabels
-    } = this.props;
-    const ariaLabel = `${buttonLabels.page} ${currentPage}, ${buttonLabels.currentPage}, ${buttonLabels.pageOfCount} ${pageCount}`;
-    const label = /*#__PURE__*/React.createElement("span", null, `${currentPage} `, buttonLabels.pageOfCount, ` ${pageCount}`);
-    return /*#__PURE__*/React.createElement("li", {
-      className: classNames(['page-item', 'disabled']),
-      key: currentPage
-    }, /*#__PURE__*/React.createElement("span", {
-      className: classNames(['btn', 'page-link', 'mx-2', 'border-0']),
-      "aria-label": ariaLabel
-    }, label));
-  }
-  renderPreviousButton() {
-    const {
-      buttonLabels,
-      icons,
-      variant,
-      size,
-      pageCount
-    } = this.props;
-    const {
-      currentPage
-    } = this.state;
-    const isFirstPage = currentPage === 1;
-    const isDisabled = isFirstPage || pageCount === 0;
-    const previousPage = isFirstPage ? null : currentPage - 1;
-    const iconSize = variant !== VARIANTS.reduced && size !== 'small' || variant === VARIANTS.minimal;
-    let ariaLabel = `${buttonLabels.previous}`;
-    if (previousPage) {
-      ariaLabel += `, ${buttonLabels.page} ${previousPage}`;
+      return /*#__PURE__*/React.createElement("li", {
+        className: classNames(['page-item', {
+          active: active
+        }]),
+        key: page
+      }, /*#__PURE__*/React.createElement(Button, {
+        className: "page-link",
+        "aria-label": ariaLabel,
+        ref: function ref(element) {
+          _this2.pageRefs[page] = element;
+        },
+        onClick: function onClick() {
+          _this2.handlePageSelect(page);
+        }
+      }, page.toString()));
+    }
+  }, {
+    key: "renderPageOfCountButton",
+    value: function renderPageOfCountButton() {
+      var currentPage = this.state.currentPage;
+      var _this$props = this.props,
+        pageCount = _this$props.pageCount,
+        buttonLabels = _this$props.buttonLabels;
+      var ariaLabel = "".concat(buttonLabels.page, " ").concat(currentPage, ", ").concat(buttonLabels.currentPage, ", ").concat(buttonLabels.pageOfCount, " ").concat(pageCount);
+      var label = /*#__PURE__*/React.createElement("span", null, "".concat(currentPage, " "), buttonLabels.pageOfCount, " ".concat(pageCount));
+      return /*#__PURE__*/React.createElement("li", {
+        className: classNames(['page-item', 'disabled']),
+        key: currentPage
+      }, /*#__PURE__*/React.createElement("span", {
+        className: classNames(['btn', 'page-link', 'mx-2', 'border-0']),
+        "aria-label": ariaLabel
+      }, label));
     }
-    return /*#__PURE__*/React.createElement("li", {
-      className: classNames('page-item', {
+  }, {
+    key: "renderPreviousButton",
+    value: function renderPreviousButton() {
+      var _this3 = this;
+      var _this$props2 = this.props,
+        buttonLabels = _this$props2.buttonLabels,
+        icons = _this$props2.icons,
+        variant = _this$props2.variant,
+        size = _this$props2.size,
+        pageCount = _this$props2.pageCount;
+      var currentPage = this.state.currentPage;
+      var isFirstPage = currentPage === 1;
+      var isDisabled = isFirstPage || pageCount === 0;
+      var previousPage = isFirstPage ? null : currentPage - 1;
+      var iconSize = variant !== VARIANTS.reduced && size !== 'small' || variant === VARIANTS.minimal;
+      var ariaLabel = "".concat(buttonLabels.previous);
+      if (previousPage) {
+        ariaLabel += ", ".concat(buttonLabels.page, " ").concat(previousPage);
+      }
+      return /*#__PURE__*/React.createElement("li", {
+        className: classNames('page-item', {
+          disabled: isDisabled
+        })
+      }, variant === VARIANTS["default"] ? /*#__PURE__*/React.createElement(Button, {
+        className: "previous page-link",
+        "aria-label": ariaLabel,
+        tabIndex: isDisabled ? '-1' : undefined,
+        onClick: function onClick() {
+          _this3.handlePreviousNextButtonClick(previousPage);
+        },
+        ref: function ref(element) {
+          _this3.previousButtonRef = element;
+        },
         disabled: isDisabled
-      })
-    }, variant === VARIANTS.default ? /*#__PURE__*/React.createElement(Button, {
-      className: "previous page-link",
-      "aria-label": ariaLabel,
-      tabIndex: isDisabled ? '-1' : undefined,
-      onClick: () => {
-        this.handlePreviousNextButtonClick(previousPage);
-      },
-      ref: element => {
-        this.previousButtonRef = element;
-      },
-      disabled: isDisabled
-    }, /*#__PURE__*/React.createElement("div", null, icons.leftIcon, variant === VARIANTS.default ? buttonLabels.previous : null)) : /*#__PURE__*/React.createElement(IconButton, {
-      src: iconSize ? ArrowBackIos : ChevronLeft,
-      iconAs: Icon,
-      className: "previous page-link",
-      "aria-label": ariaLabel,
-      tabIndex: isDisabled ? '-1' : undefined,
-      onClick: () => {
-        this.handlePreviousNextButtonClick(previousPage);
-      },
-      ref: element => {
-        this.previousButtonRef = element;
-      },
-      disabled: isDisabled,
-      alt: PAGINATION_BUTTON_ICON_BUTTON_PREV_ALT
-    }));
-  }
-  renderNextButton() {
-    const {
-      buttonLabels,
-      pageCount,
-      icons,
-      variant,
-      size
-    } = this.props;
-    const {
-      currentPage
-    } = this.state;
-    const isLastPage = currentPage === pageCount;
-    const isDisabled = isLastPage || pageCount <= 1;
-    const nextPage = isLastPage ? null : currentPage + 1;
-    const iconSize = variant !== VARIANTS.reduced && size !== 'small' || variant === VARIANTS.minimal;
-    let ariaLabel = `${buttonLabels.next}`;
-    if (nextPage) {
-      ariaLabel += `, ${buttonLabels.page} ${nextPage}`;
+      }, /*#__PURE__*/React.createElement("div", null, icons.leftIcon, variant === VARIANTS["default"] ? buttonLabels.previous : null)) : /*#__PURE__*/React.createElement(IconButton, {
+        src: iconSize ? ArrowBackIos : ChevronLeft,
+        iconAs: Icon,
+        className: "previous page-link",
+        "aria-label": ariaLabel,
+        tabIndex: isDisabled ? '-1' : undefined,
+        onClick: function onClick() {
+          _this3.handlePreviousNextButtonClick(previousPage);
+        },
+        ref: function ref(element) {
+          _this3.previousButtonRef = element;
+        },
+        disabled: isDisabled,
+        alt: PAGINATION_BUTTON_ICON_BUTTON_PREV_ALT
+      }));
     }
-    return /*#__PURE__*/React.createElement("li", {
-      className: classNames('page-item', {
+  }, {
+    key: "renderNextButton",
+    value: function renderNextButton() {
+      var _this4 = this;
+      var _this$props3 = this.props,
+        buttonLabels = _this$props3.buttonLabels,
+        pageCount = _this$props3.pageCount,
+        icons = _this$props3.icons,
+        variant = _this$props3.variant,
+        size = _this$props3.size;
+      var currentPage = this.state.currentPage;
+      var isLastPage = currentPage === pageCount;
+      var isDisabled = isLastPage || pageCount <= 1;
+      var nextPage = isLastPage ? null : currentPage + 1;
+      var iconSize = variant !== VARIANTS.reduced && size !== 'small' || variant === VARIANTS.minimal;
+      var ariaLabel = "".concat(buttonLabels.next);
+      if (nextPage) {
+        ariaLabel += ", ".concat(buttonLabels.page, " ").concat(nextPage);
+      }
+      return /*#__PURE__*/React.createElement("li", {
+        className: classNames('page-item', {
+          disabled: isDisabled
+        })
+      }, variant === VARIANTS["default"] ? /*#__PURE__*/React.createElement(Button, {
+        className: "next page-link",
+        "aria-label": ariaLabel,
+        tabIndex: isDisabled ? '-1' : undefined,
+        onClick: function onClick() {
+          _this4.handlePreviousNextButtonClick(nextPage);
+        },
+        ref: function ref(element) {
+          _this4.nextButtonRef = element;
+        },
         disabled: isDisabled
-      })
-    }, variant === VARIANTS.default ? /*#__PURE__*/React.createElement(Button, {
-      className: "next page-link",
-      "aria-label": ariaLabel,
-      tabIndex: isDisabled ? '-1' : undefined,
-      onClick: () => {
-        this.handlePreviousNextButtonClick(nextPage);
-      },
-      ref: element => {
-        this.nextButtonRef = element;
-      },
-      disabled: isDisabled
-    }, /*#__PURE__*/React.createElement("div", null, variant === VARIANTS.default ? buttonLabels.next : null, icons.rightIcon)) : /*#__PURE__*/React.createElement(IconButton, {
-      src: iconSize ? ArrowForwardIos : ChevronRight,
-      iconAs: Icon,
-      className: "next page-link",
-      "aria-label": ariaLabel,
-      tabIndex: isDisabled ? '-1' : undefined,
-      onClick: () => {
-        this.handlePreviousNextButtonClick(nextPage);
-      },
-      ref: element => {
-        this.nextButtonRef = element;
-      },
-      disabled: isDisabled,
-      alt: PAGINATION_BUTTON_ICON_BUTTON_NEXT_ALT
-    }));
-  }
-  renderScreenReaderSection() {
-    const {
-      currentPage
-    } = this.state;
-    const {
-      buttonLabels,
-      pageCount
-    } = this.props;
-    const description = `${buttonLabels.page} ${currentPage}, ${buttonLabels.currentPage}, ${buttonLabels.pageOfCount} ${pageCount}`;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "sr-only",
-      "aria-live": "polite",
-      "aria-relevant": "text",
-      "aria-atomic": true
-    }, description);
-  }
-  renderPageButtons() {
-    const {
-      currentPage
-    } = this.state;
-    const {
-      pageCount,
-      maxPagesDisplayed
-    } = this.props;
-    const pages = getPaginationRange({
-      currentIndex: currentPage,
-      count: pageCount,
-      length: maxPagesDisplayed,
-      requireFirstAndLastPages: true
-    });
-    if (pageCount <= 1) {
-      return null;
+      }, /*#__PURE__*/React.createElement("div", null, variant === VARIANTS["default"] ? buttonLabels.next : null, icons.rightIcon)) : /*#__PURE__*/React.createElement(IconButton, {
+        src: iconSize ? ArrowForwardIos : ChevronRight,
+        iconAs: Icon,
+        className: "next page-link",
+        "aria-label": ariaLabel,
+        tabIndex: isDisabled ? '-1' : undefined,
+        onClick: function onClick() {
+          _this4.handlePreviousNextButtonClick(nextPage);
+        },
+        ref: function ref(element) {
+          _this4.nextButtonRef = element;
+        },
+        disabled: isDisabled,
+        alt: PAGINATION_BUTTON_ICON_BUTTON_NEXT_ALT
+      }));
+    }
+  }, {
+    key: "renderScreenReaderSection",
+    value: function renderScreenReaderSection() {
+      var currentPage = this.state.currentPage;
+      var _this$props4 = this.props,
+        buttonLabels = _this$props4.buttonLabels,
+        pageCount = _this$props4.pageCount;
+      var description = "".concat(buttonLabels.page, " ").concat(currentPage, ", ").concat(buttonLabels.currentPage, ", ").concat(buttonLabels.pageOfCount, " ").concat(pageCount);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "sr-only",
+        "aria-live": "polite",
+        "aria-relevant": "text",
+        "aria-atomic": true
+      }, description);
     }
-    return pages.map(pageIndex => {
-      if (pageIndex === ELLIPSIS) {
-        return this.renderEllipsisButton();
+  }, {
+    key: "renderPageButtons",
+    value: function renderPageButtons() {
+      var _this5 = this;
+      var currentPage = this.state.currentPage;
+      var _this$props5 = this.props,
+        pageCount = _this$props5.pageCount,
+        maxPagesDisplayed = _this$props5.maxPagesDisplayed;
+      var pages = getPaginationRange({
+        currentIndex: currentPage,
+        count: pageCount,
+        length: maxPagesDisplayed,
+        requireFirstAndLastPages: true
+      });
+      if (pageCount <= 1) {
+        return null;
       }
-      return this.renderPageButton(pageIndex + 1);
-    });
-  }
-  renderReducedPagination() {
-    const {
-      currentPage
-    } = this.state;
-    const {
-      pageCount
-    } = this.props;
-    return /*#__PURE__*/React.createElement("ul", {
-      className: "pagination"
-    }, this.renderPreviousButton(), /*#__PURE__*/React.createElement(ReducedPagination, {
-      currentPage: currentPage,
-      pageCount: pageCount,
-      handlePageSelect: this.handlePageSelect
-    }), this.renderNextButton());
-  }
-  renderMinimalPaginations() {
-    return /*#__PURE__*/React.createElement("ul", {
-      className: "pagination"
-    }, this.renderPreviousButton(), this.renderNextButton());
-  }
-  render() {
-    const {
-      variant,
-      invertColors,
-      size
-    } = this.props;
-    return /*#__PURE__*/React.createElement("nav", {
-      "aria-label": this.props.paginationLabel,
-      className: classNames(this.props.className, {
-        [`pagination-${variant}`]: variant,
-        'pagination-inverse': invertColors,
-        'pagination-small': size !== VARIANTS.default
-      })
-    }, this.renderScreenReaderSection(), variant === VARIANTS.default || variant === VARIANTS.secondary ? /*#__PURE__*/React.createElement("ul", {
-      className: "pagination"
-    }, this.renderPreviousButton(), /*#__PURE__*/React.createElement(MediaQuery, {
-      maxWidth: breakpoints.extraSmall.maxWidth
-    }, this.renderPageOfCountButton()), /*#__PURE__*/React.createElement(MediaQuery, {
-      minWidth: breakpoints.small.minWidth
-    }, this.renderPageButtons()), this.renderNextButton()) : null, variant === VARIANTS.reduced ? this.renderReducedPagination() : null, variant === VARIANTS.minimal ? this.renderMinimalPaginations() : null);
-  }
-}
+      return pages.map(function (pageIndex) {
+        if (pageIndex === ELLIPSIS) {
+          return _this5.renderEllipsisButton();
+        }
+        return _this5.renderPageButton(pageIndex + 1);
+      });
+    }
+  }, {
+    key: "renderReducedPagination",
+    value: function renderReducedPagination() {
+      var currentPage = this.state.currentPage;
+      var pageCount = this.props.pageCount;
+      return /*#__PURE__*/React.createElement("ul", {
+        className: "pagination"
+      }, this.renderPreviousButton(), /*#__PURE__*/React.createElement(ReducedPagination, {
+        currentPage: currentPage,
+        pageCount: pageCount,
+        handlePageSelect: this.handlePageSelect
+      }), this.renderNextButton());
+    }
+  }, {
+    key: "renderMinimalPaginations",
+    value: function renderMinimalPaginations() {
+      return /*#__PURE__*/React.createElement("ul", {
+        className: "pagination"
+      }, this.renderPreviousButton(), this.renderNextButton());
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames;
+      var _this$props6 = this.props,
+        variant = _this$props6.variant,
+        invertColors = _this$props6.invertColors,
+        size = _this$props6.size;
+      return /*#__PURE__*/React.createElement("nav", {
+        "aria-label": this.props.paginationLabel,
+        className: classNames(this.props.className, (_classNames = {}, _defineProperty(_classNames, "pagination-".concat(variant), variant), _defineProperty(_classNames, 'pagination-inverse', invertColors), _defineProperty(_classNames, 'pagination-small', size !== VARIANTS["default"]), _classNames))
+      }, this.renderScreenReaderSection(), variant === VARIANTS["default"] || variant === VARIANTS.secondary ? /*#__PURE__*/React.createElement("ul", {
+        className: "pagination"
+      }, this.renderPreviousButton(), /*#__PURE__*/React.createElement(MediaQuery, {
+        maxWidth: breakpoints.extraSmall.maxWidth
+      }, this.renderPageOfCountButton()), /*#__PURE__*/React.createElement(MediaQuery, {
+        minWidth: breakpoints.small.minWidth
+      }, this.renderPageButtons()), this.renderNextButton()) : null, variant === VARIANTS.reduced ? this.renderReducedPagination() : null, variant === VARIANTS.minimal ? this.renderMinimalPaginations() : null);
+    }
+  }]);
+  return Pagination;
+}(React.Component);
 Pagination.propTypes = {
   /**
    * Specifies a callback function that is executed when the