@instructure/ui-pagination 8.51.0 → 8.51.1-snapshot-5

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.51.1-snapshot-5](https://github.com/instructure/instructure-ui/compare/v8.51.0...v8.51.1-snapshot-5) (2024-01-10)
+
+
+### Features
+
+* **ui-pagination:** refactor Pagination and expand its API for easy config-based usage ([19b928b](https://github.com/instructure/instructure-ui/commit/19b928bd58212dfd2c9cc8b2a550d504bb3df0bc))
+
+
+
+
+
 # [8.51.0](https://github.com/instructure/instructure-ui/compare/v8.50.0...v8.51.0) (2023-12-14)
 
 **Note:** Version bump only for package @instructure/ui-pagination

package/es/Pagination/__new-tests__/Pagination.test.js

@@ -0,0 +1,182 @@
+var _Pagination, _Pagination2, _Pagination3, _Pagination4, _Pagination5, _Pagination6, _Pagination7, _Pagination8, _Pagination9, _Pagination10, _Pagination11;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Pagination } from '../index';
+describe('<Pagination />', () => {
+  describe('with minimal config', () => {
+    it('should render the correct pages - 1', () => {
+      const _render = render(_Pagination || (_Pagination = /*#__PURE__*/React.createElement(Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 9
+        }))),
+        container = _render.container;
+      expect(container.firstChild).toHaveTextContent('12...9Next Page');
+    });
+    it('should render the correct pages - 2', () => {
+      const _render2 = render(_Pagination2 || (_Pagination2 = /*#__PURE__*/React.createElement(Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 9,
+          currentPage: 5
+        }))),
+        container = _render2.container;
+      expect(container.firstChild).toHaveTextContent('Previous Page1...456...9Next Page');
+    });
+    it('should render the correct pages - 3', () => {
+      const _render3 = render(_Pagination3 || (_Pagination3 = /*#__PURE__*/React.createElement(Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 9,
+          currentPage: 5,
+          siblingCount: 1,
+          boundaryCount: 3
+        }))),
+        container = _render3.container;
+      expect(container.firstChild).toHaveTextContent('Previous Page123456789Next Page');
+    });
+    it('should render the correct pages - 4', () => {
+      const _render4 = render(_Pagination4 || (_Pagination4 = /*#__PURE__*/React.createElement(Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 9,
+          currentPage: 5,
+          siblingCount: 1,
+          boundaryCount: 2
+        }))),
+        container = _render4.container;
+      expect(container.firstChild).toHaveTextContent('Previous Page12...456...89Next Page');
+    });
+    it('should render the correct pages - 5', () => {
+      const _render5 = render(_Pagination5 || (_Pagination5 = /*#__PURE__*/React.createElement(Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 9,
+          currentPage: 5,
+          siblingCount: 100
+        }))),
+        container = _render5.container;
+      expect(container.firstChild).toHaveTextContent('Previous Page123456789Next Page');
+    });
+    it('should render the correct pages - 6', () => {
+      const _render6 = render(_Pagination6 || (_Pagination6 = /*#__PURE__*/React.createElement(Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 9,
+          currentPage: 5,
+          boundaryCount: 100
+        }))),
+        container = _render6.container;
+      expect(container.firstChild).toHaveTextContent('Previous Page123456789Next Page');
+    });
+    it('should render the correct pages - 7', () => {
+      const _render7 = render(_Pagination7 || (_Pagination7 = /*#__PURE__*/React.createElement(Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 9,
+          currentPage: 1,
+          boundaryCount: 3,
+          siblingCount: 1
+        }))),
+        container = _render7.container;
+      expect(container.firstChild).toHaveTextContent('123...789Next Page');
+    });
+    it('should render the correct ellipsis', () => {
+      const _render8 = render(_Pagination8 || (_Pagination8 = /*#__PURE__*/React.createElement(Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 9,
+          currentPage: 1,
+          boundaryCount: 3,
+          siblingCount: 1,
+          ellipsis: "<->"
+        }))),
+        container = _render8.container;
+      expect(container.firstChild).toHaveTextContent('123<->789Next Page');
+    });
+    it('should render custom buttons', () => {
+      const pageMap = ['A-G', 'H-J', 'K-M', 'N-Q', 'R-Z'];
+      const _render9 = render( /*#__PURE__*/React.createElement(Pagination, {
+          variant: "full",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 5,
+          currentPage: 1,
+          renderPageIndicator: page => pageMap[page - 1]
+        })),
+        container = _render9.container;
+      expect(container.firstChild).toHaveTextContent('A-GH-JK-MN-QR-Z');
+    });
+    it('should render huge "totalPageNumber"s properly', () => {
+      const _render10 = render(_Pagination9 || (_Pagination9 = /*#__PURE__*/React.createElement(Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 1000000000000000,
+          currentPage: 5678
+        }))),
+        container = _render10.container;
+      expect(container.firstChild).toHaveTextContent('Previous Page1...567756785679...1000000000000000Next Page');
+    });
+    it('should render first and last buttons', () => {
+      const _render11 = render(_Pagination10 || (_Pagination10 = /*#__PURE__*/React.createElement(Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          labelFirst: "First Page",
+          labelLast: "Last Page",
+          totalPageNumber: 100,
+          currentPage: 5,
+          withFirstAndLastButton: true
+        }))),
+        container = _render11.container;
+      expect(container.firstChild).toHaveTextContent('First PagePrevious Page1...456...100Next PageLast Page');
+    });
+    it('should render every page if boundary and sibling counts are big enough', () => {
+      const _render12 = render(_Pagination11 || (_Pagination11 = /*#__PURE__*/React.createElement(Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 10,
+          currentPage: 1,
+          siblingCount: 5,
+          boundaryCount: 4
+        }))),
+        container = _render12.container;
+      expect(container.firstChild).toHaveTextContent('12345678910Next Page');
+    });
+  });
+});

package/es/Pagination/index.js

@@ -45,7 +45,8 @@ const childrenArray = props => {
   return Array.isArray(children) ? children : [children];
 };
 function propsHaveCompactView(props) {
-  return props.variant === 'compact' && childrenArray(props).length > 5;
+  if (props.children) return props.variant === 'compact' && childrenArray(props).length > 5;
+  return props.variant === 'compact' && props.totalPageNumber > 5;
 }
 /**
 ---
@@ -61,6 +62,7 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     this._nextButton = null;
     this._lastButton = null;
     this.ref = null;
+    this.currentPageRef = null;
     this.handleElementRef = el => {
       this.ref = el;
       if (el && typeof this.props.elementRef === 'function') {
@@ -72,6 +74,114 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         this.props.inputRef(el);
       }
     };
+    this.renderDefaultPageInput = () => {
+      const _this$props = this.props,
+        currentPage = _this$props.currentPage,
+        totalPageNumber = _this$props.totalPageNumber;
+      return jsx(PaginationPageInput, {
+        numberOfPages: totalPageNumber,
+        currentPageIndex: currentPage - 1,
+        onChange: (_e, nextPageIndex) => {
+          var _this$props$onPageCha, _this$props2;
+          return (_this$props$onPageCha = (_this$props2 = this.props).onPageChange) === null || _this$props$onPageCha === void 0 ? void 0 : _this$props$onPageCha.call(_this$props2, nextPageIndex + 1, currentPage);
+        },
+        screenReaderLabel: this.props.screenReaderLabelNumberInput,
+        label: this.props.labelNumberInput,
+        disabled: this.props.disabled,
+        inputRef: this.handleInputRef
+      });
+    };
+    this.handleNavigation = (nextIndex, previousIndex) => {
+      const onPageChange = this.props.onPageChange;
+      if (typeof onPageChange === 'function') {
+        onPageChange(nextIndex, previousIndex);
+      }
+    };
+    this.renderPagesInInterval = (from, to, currentPage) => {
+      if (to - from > 1000) throw new Error('Pagination: too many pages (more than 1000)');
+      const pages = [];
+      for (let i = from; i <= to; i++) {
+        var _this$props$renderPag, _this$props3;
+        pages.push(jsx(Pagination.Page, {
+          ref: e => i === currentPage ? this.currentPageRef = e : null,
+          key: i,
+          onClick: () => this.handleNavigation(i, currentPage),
+          current: i === currentPage
+        }, (_this$props$renderPag = (_this$props3 = this.props).renderPageIndicator) === null || _this$props$renderPag === void 0 ? void 0 : _this$props$renderPag.call(_this$props3, i, currentPage)));
+      }
+      return pages;
+    };
+    this.renderDefaultPages = () => {
+      const _this$props4 = this.props,
+        ellipsis = _this$props4.ellipsis,
+        currentPage = _this$props4.currentPage,
+        totalPageNumber = _this$props4.totalPageNumber,
+        siblingCount = _this$props4.siblingCount,
+        boundaryCount = _this$props4.boundaryCount,
+        variant = _this$props4.variant;
+      const pages = [];
+      if (totalPageNumber <= 2 * boundaryCount || totalPageNumber <= 1 + siblingCount + boundaryCount || variant === 'full') {
+        return this.renderPagesInInterval(1, totalPageNumber, currentPage);
+      }
+      if (currentPage > boundaryCount + siblingCount + 1) {
+        pages.push(this.renderPagesInInterval(1, boundaryCount, currentPage));
+        pages.push(ellipsis);
+        if (currentPage - siblingCount > totalPageNumber - boundaryCount + 1) {
+          pages.push(this.renderPagesInInterval(totalPageNumber - boundaryCount + 1, totalPageNumber, currentPage));
+          return pages;
+        }
+        pages.push(this.renderPagesInInterval(currentPage - siblingCount, currentPage, currentPage));
+      } else {
+        pages.push(this.renderPagesInInterval(1, Math.max(currentPage, boundaryCount), currentPage));
+      }
+      if (currentPage < totalPageNumber - (siblingCount + boundaryCount)) {
+        pages.push(this.renderPagesInInterval(Math.max(currentPage, boundaryCount) + 1, currentPage + siblingCount, currentPage));
+        pages.push(ellipsis);
+        pages.push(this.renderPagesInInterval(totalPageNumber - boundaryCount + 1, totalPageNumber, currentPage));
+      } else {
+        pages.push(this.renderPagesInInterval(currentPage + 1, totalPageNumber, currentPage));
+      }
+      return pages;
+    };
+    this.renderDefaultArrowButton = direction => {
+      if (!this.withFirstAndLastButton && (direction === 'first' || direction === 'last')) {
+        return null;
+      }
+      // We don't display the arrows in "compact" variant under 6 items
+      if (!(propsHaveCompactView(this.props) || this.inputMode)) {
+        return null;
+      }
+      const _this$props5 = this.props,
+        totalPageNumber = _this$props5.totalPageNumber,
+        currentPage = _this$props5.currentPage;
+      const _this$getArrowVariant = this.getArrowVariant(direction, currentPage - 1, totalPageNumber),
+        label = _this$getArrowVariant.label,
+        shouldEnableIcon = _this$getArrowVariant.shouldEnableIcon,
+        handleButtonRef = _this$getArrowVariant.handleButtonRef;
+      const disabled = this.props.disabled || !shouldEnableIcon;
+      const onClick = () => {
+        if (direction === 'first') {
+          this.handleNavigation(1, currentPage);
+        }
+        if (direction === 'prev') {
+          this.handleNavigation(Math.max(currentPage - 1, 1), currentPage);
+        }
+        if (direction === 'next') {
+          this.handleNavigation(Math.min(currentPage + 1, totalPageNumber), currentPage);
+        }
+        if (direction === 'last') {
+          this.handleNavigation(totalPageNumber, currentPage);
+        }
+      };
+      return shouldEnableIcon || this.showDisabledButtons ? jsx(PaginationArrowButton, {
+        direction: direction,
+        "data-direction": direction,
+        label: label,
+        onClick: onClick,
+        disabled: disabled,
+        buttonRef: handleButtonRef
+      }) : null;
+    };
     this._labelId = props.deterministicId();
   }
   get _root() {
@@ -102,12 +212,19 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     }
   }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    var _this$props$makeStyle, _this$props6;
+    (_this$props$makeStyle = (_this$props6 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props6);
   }
   componentDidUpdate(prevProps, _prevState, snapshot) {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    var _this$props$makeStyle2, _this$props7;
+    (_this$props$makeStyle2 = (_this$props7 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props7);
+
+    // set focus on the currently active page
+    if (this.props.currentPage !== prevProps.currentPage && document.activeElement !== this._firstButton && document.activeElement !== this._prevButton && document.activeElement !== this._nextButton && document.activeElement !== this._lastButton) {
+      var _this$currentPageRef, _this$currentPageRef$, _this$currentPageRef$2;
+      // @ts-expect-error fix typing
+      (_this$currentPageRef = this.currentPageRef) === null || _this$currentPageRef === void 0 ? void 0 : (_this$currentPageRef$ = _this$currentPageRef.ref) === null || _this$currentPageRef$ === void 0 ? void 0 : (_this$currentPageRef$2 = _this$currentPageRef$.focus) === null || _this$currentPageRef$2 === void 0 ? void 0 : _this$currentPageRef$2.call(_this$currentPageRef$);
+    }
     if (!this.props.shouldHandleFocus || !propsHaveCompactView(prevProps) && !propsHaveCompactView(this.props)) {
       return;
     } else {
@@ -157,6 +274,7 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     }, this.props.label);
   }
   renderPageInput(currentPageIndex) {
+    if (!this.props.children) return this.renderDefaultPageInput();
     return jsx(PaginationPageInput, {
       numberOfPages: this.childPages.length,
       currentPageIndex: currentPageIndex,
@@ -172,6 +290,7 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     (_this$childPages$page = (_this$childPages$page2 = this.childPages[pageIndex].props).onClick) === null || _this$childPages$page === void 0 ? void 0 : _this$childPages$page.call(_this$childPages$page2, event);
   }
   renderPages(currentPageIndex) {
+    if (!this.props.children) return this.renderDefaultPages();
     const allPages = this.childPages;
     let visiblePages = allPages;
     if (this.compactView) {
@@ -239,8 +358,8 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   }
   renderArrowButton(direction, currentPageIndex) {
     var _page$props, _page$props2;
+    if (!this.props.children) return this.renderDefaultArrowButton(direction);
     const childPages = this.childPages;
-
     // We don't display the arrows in "compact" variant under 6 items
     if (!(propsHaveCompactView(this.props) || this.inputMode)) {
       return null;
@@ -248,11 +367,11 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     if (!this.withFirstAndLastButton && (direction === 'first' || direction === 'last')) {
       return null;
     }
-    const _this$getArrowVariant = this.getArrowVariant(direction, currentPageIndex, childPages.length),
-      pageIndex = _this$getArrowVariant.pageIndex,
-      label = _this$getArrowVariant.label,
-      shouldEnableIcon = _this$getArrowVariant.shouldEnableIcon,
-      handleButtonRef = _this$getArrowVariant.handleButtonRef;
+    const _this$getArrowVariant2 = this.getArrowVariant(direction, currentPageIndex, childPages.length),
+      pageIndex = _this$getArrowVariant2.pageIndex,
+      label = _this$getArrowVariant2.label,
+      shouldEnableIcon = _this$getArrowVariant2.shouldEnableIcon,
+      handleButtonRef = _this$getArrowVariant2.handleButtonRef;
     const page = childPages[pageIndex];
     const disabled = (page === null || page === void 0 ? void 0 : (_page$props = page.props) === null || _page$props === void 0 ? void 0 : _page$props.disabled) || this.props.disabled || !shouldEnableIcon;
     const onClick = page === null || page === void 0 ? void 0 : (_page$props2 = page.props) === null || _page$props2 === void 0 ? void 0 : _page$props2.onClick;
@@ -267,7 +386,6 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   }
   render() {
     var _this$props$styles, _this$props$styles2;
-    if (!this.props.children) return null;
     const currentPageIndex = fastFindIndex(this.childPages, p => p && p.props && p.props.current);
     const passthroughProps = View.omitViewProps(omitProps(this.props, Pagination.allowedProps), Pagination);
     return jsx(View, Object.assign({}, passthroughProps, {
@@ -290,7 +408,13 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   as: 'div',
   labelNumberInput: numberOfPages => `of ${numberOfPages}`,
   screenReaderLabelNumberInput: (currentPage, numberOfPages) => `Select page (${currentPage} of ${numberOfPages})`,
-  shouldHandleFocus: true
+  shouldHandleFocus: true,
+  totalPageNumber: 0,
+  currentPage: 1,
+  siblingCount: 1,
+  boundaryCount: 1,
+  ellipsis: '...',
+  renderPageIndicator: page => page
 }, _class2.Page = PaginationButton, _class2.Navigation = PaginationArrowButton, _class2)) || _class) || _class) || _class);
 export default Pagination;
 export { Pagination, PaginationButton };

package/es/Pagination/props.js

@@ -43,7 +43,14 @@ const propTypes = {
   as: PropTypes.elementType,
   elementRef: PropTypes.func,
   inputRef: PropTypes.func,
-  shouldHandleFocus: PropTypes.bool
+  shouldHandleFocus: PropTypes.bool,
+  totalPageNumber: PropTypes.number,
+  currentPage: PropTypes.number,
+  siblingCount: PropTypes.number,
+  boundaryCount: PropTypes.number,
+  onPageChange: PropTypes.func,
+  renderPageIndicator: PropTypes.func,
+  ellipsis: PropTypes.node
 };
-const allowedProps = ['children', 'disabled', 'withFirstAndLastButton', 'showDisabledButtons', 'label', 'labelNext', 'labelPrev', 'labelFirst', 'labelLast', 'labelNumberInput', 'screenReaderLabelNumberInput', 'variant', 'margin', 'as', 'elementRef', 'inputRef', 'shouldHandleFocus'];
+const allowedProps = ['children', 'disabled', 'withFirstAndLastButton', 'showDisabledButtons', 'label', 'labelNext', 'labelPrev', 'labelFirst', 'labelLast', 'labelNumberInput', 'screenReaderLabelNumberInput', 'variant', 'margin', 'as', 'elementRef', 'inputRef', 'shouldHandleFocus', 'totalPageNumber', 'currentPage', 'onPageChange', 'siblingCount', 'boundaryCount', 'renderPageIndicator', 'ellipsis'];
 export { propTypes, allowedProps };

package/lib/Pagination/__new-tests__/Pagination.test.js

@@ -0,0 +1,184 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _Pagination, _Pagination2, _Pagination3, _Pagination4, _Pagination5, _Pagination6, _Pagination7, _Pagination8, _Pagination9, _Pagination10, _Pagination11;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('<Pagination />', () => {
+  describe('with minimal config', () => {
+    it('should render the correct pages - 1', () => {
+      const _render = (0, _react2.render)(_Pagination || (_Pagination = /*#__PURE__*/_react.default.createElement(_index.Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 9
+        }))),
+        container = _render.container;
+      expect(container.firstChild).toHaveTextContent('12...9Next Page');
+    });
+    it('should render the correct pages - 2', () => {
+      const _render2 = (0, _react2.render)(_Pagination2 || (_Pagination2 = /*#__PURE__*/_react.default.createElement(_index.Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 9,
+          currentPage: 5
+        }))),
+        container = _render2.container;
+      expect(container.firstChild).toHaveTextContent('Previous Page1...456...9Next Page');
+    });
+    it('should render the correct pages - 3', () => {
+      const _render3 = (0, _react2.render)(_Pagination3 || (_Pagination3 = /*#__PURE__*/_react.default.createElement(_index.Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 9,
+          currentPage: 5,
+          siblingCount: 1,
+          boundaryCount: 3
+        }))),
+        container = _render3.container;
+      expect(container.firstChild).toHaveTextContent('Previous Page123456789Next Page');
+    });
+    it('should render the correct pages - 4', () => {
+      const _render4 = (0, _react2.render)(_Pagination4 || (_Pagination4 = /*#__PURE__*/_react.default.createElement(_index.Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 9,
+          currentPage: 5,
+          siblingCount: 1,
+          boundaryCount: 2
+        }))),
+        container = _render4.container;
+      expect(container.firstChild).toHaveTextContent('Previous Page12...456...89Next Page');
+    });
+    it('should render the correct pages - 5', () => {
+      const _render5 = (0, _react2.render)(_Pagination5 || (_Pagination5 = /*#__PURE__*/_react.default.createElement(_index.Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 9,
+          currentPage: 5,
+          siblingCount: 100
+        }))),
+        container = _render5.container;
+      expect(container.firstChild).toHaveTextContent('Previous Page123456789Next Page');
+    });
+    it('should render the correct pages - 6', () => {
+      const _render6 = (0, _react2.render)(_Pagination6 || (_Pagination6 = /*#__PURE__*/_react.default.createElement(_index.Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 9,
+          currentPage: 5,
+          boundaryCount: 100
+        }))),
+        container = _render6.container;
+      expect(container.firstChild).toHaveTextContent('Previous Page123456789Next Page');
+    });
+    it('should render the correct pages - 7', () => {
+      const _render7 = (0, _react2.render)(_Pagination7 || (_Pagination7 = /*#__PURE__*/_react.default.createElement(_index.Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 9,
+          currentPage: 1,
+          boundaryCount: 3,
+          siblingCount: 1
+        }))),
+        container = _render7.container;
+      expect(container.firstChild).toHaveTextContent('123...789Next Page');
+    });
+    it('should render the correct ellipsis', () => {
+      const _render8 = (0, _react2.render)(_Pagination8 || (_Pagination8 = /*#__PURE__*/_react.default.createElement(_index.Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 9,
+          currentPage: 1,
+          boundaryCount: 3,
+          siblingCount: 1,
+          ellipsis: "<->"
+        }))),
+        container = _render8.container;
+      expect(container.firstChild).toHaveTextContent('123<->789Next Page');
+    });
+    it('should render custom buttons', () => {
+      const pageMap = ['A-G', 'H-J', 'K-M', 'N-Q', 'R-Z'];
+      const _render9 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Pagination, {
+          variant: "full",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 5,
+          currentPage: 1,
+          renderPageIndicator: page => pageMap[page - 1]
+        })),
+        container = _render9.container;
+      expect(container.firstChild).toHaveTextContent('A-GH-JK-MN-QR-Z');
+    });
+    it('should render huge "totalPageNumber"s properly', () => {
+      const _render10 = (0, _react2.render)(_Pagination9 || (_Pagination9 = /*#__PURE__*/_react.default.createElement(_index.Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 1000000000000000,
+          currentPage: 5678
+        }))),
+        container = _render10.container;
+      expect(container.firstChild).toHaveTextContent('Previous Page1...567756785679...1000000000000000Next Page');
+    });
+    it('should render first and last buttons', () => {
+      const _render11 = (0, _react2.render)(_Pagination10 || (_Pagination10 = /*#__PURE__*/_react.default.createElement(_index.Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          labelFirst: "First Page",
+          labelLast: "Last Page",
+          totalPageNumber: 100,
+          currentPage: 5,
+          withFirstAndLastButton: true
+        }))),
+        container = _render11.container;
+      expect(container.firstChild).toHaveTextContent('First PagePrevious Page1...456...100Next PageLast Page');
+    });
+    it('should render every page if boundary and sibling counts are big enough', () => {
+      const _render12 = (0, _react2.render)(_Pagination11 || (_Pagination11 = /*#__PURE__*/_react.default.createElement(_index.Pagination, {
+          variant: "compact",
+          labelNext: "Next Page",
+          labelPrev: "Previous Page",
+          totalPageNumber: 10,
+          currentPage: 1,
+          siblingCount: 5,
+          boundaryCount: 4
+        }))),
+        container = _render12.container;
+      expect(container.firstChild).toHaveTextContent('12345678910Next Page');
+    });
+  });
+});