fix: Pagination component's range and page text for no items

src/components/Pagination/Pagination-test.js

@@ -173,6 +173,13 @@ describe('Pagination', () => {
         expect(label.text()).toBe('1 of 10 pages');
       });
 
+      it('should render ranges and pages for no items', () => {
+        const pager = mount(<Pagination pageSizes={[5, 10]} totalItems={0} />);
+        const labels = pager.find('.bx--pagination__text');
+        expect(labels.at(1).text()).toBe('0-0 of 0 items');
+        expect(labels.at(2).text()).toBe('1 of 1 pages');
+      });
+
       it('should have two buttons for navigation', () => {
         const buttons = right.find('.bx--pagination__button');
         expect(buttons.length).toBe(2);

src/components/Pagination/Pagination.js

@@ -106,7 +106,8 @@ export default class Pagination extends Component {
       // used for case when page # is 0 or empty. For other cases
       // existing props will be used.
       page >= 0 &&
-      page <= Math.ceil(this.props.totalItems / this.state.pageSize)
+      page <=
+        Math.max(Math.ceil(this.props.totalItems / this.state.pageSize), 1)
     ) {
       this.setState({ page }, () => this.pageInputDebouncer(this.state.page));
     }
@@ -138,7 +139,7 @@ export default class Pagination extends Component {
       return itemText(pageSize * (page - 1) + 1, page * pageSize);
     } else if (page > 0) {
       return itemRangeText(
-        pageSize * (page - 1) + 1,
+        Math.min(pageSize * (page - 1) + 1, totalItems),
         Math.min(page * pageSize, totalItems),
         totalItems
       );
@@ -159,7 +160,7 @@ export default class Pagination extends Component {
     if (pagesUnknown) {
       return pageText(page);
     } else if (page > 0) {
-      return pageRangeText(page, Math.ceil(totalItems / pageSize));
+      return pageRangeText(page, Math.max(Math.ceil(totalItems / pageSize), 1));
     }
     return defaultPageText(Math.ceil(totalItems / pageSize));
   };
@@ -192,6 +193,7 @@ export default class Pagination extends Component {
 
     const statePage = this.state.page;
     const statePageSize = this.state.pageSize;
+    const totalPages = Math.max(Math.ceil(totalItems / statePageSize), 1);
     const classNames = classnames('bx--pagination', className);
     const inputId = id || this.uniqueId;
 
@@ -240,9 +242,7 @@ export default class Pagination extends Component {
             className="bx--pagination__button bx--pagination__button--forward"
             onClick={this.incrementPage}
             disabled={
-              this.props.disabled ||
-              statePage === Math.ceil(totalItems / statePageSize) ||
-              isLastPage
+              this.props.disabled || statePage === totalPages || isLastPage
             }>
             <Icon
               className="bx--pagination__button-icon"

src/components/PaginationV2/PaginationV2-test.js

@@ -207,6 +207,15 @@ describe('Pagination', () => {
         expect(label.text()).toBe('1 of 10 pages');
       });
 
+      it('should render ranges and pages for no items', () => {
+        const pager = mount(
+          <PaginationV2 pageSizes={[5, 10]} totalItems={0} />
+        );
+        const labels = pager.find('.bx--pagination__text');
+        expect(labels.at(1).text()).toBe('\u00a0|\u00a0\u00a00-0 of 0 items');
+        expect(labels.at(2).text()).toBe('1 of 1 pages');
+      });
+
       it('should have two buttons for navigation', () => {
         const buttons = right.find('.bx--pagination__button');
         expect(buttons.length).toBe(2);

src/components/PaginationV2/PaginationV2.js

@@ -165,7 +165,8 @@ export default class PaginationV2 extends Component {
     const page = Number(evt.target.value);
     if (
       page > 0 &&
-      page <= Math.ceil(this.props.totalItems / this.state.pageSize)
+      page <=
+        Math.max(Math.ceil(this.props.totalItems / this.state.pageSize), 1)
     ) {
       this.setState({ page });
       this.props.onChange({ page, pageSize: this.state.pageSize });
@@ -231,7 +232,7 @@ export default class PaginationV2 extends Component {
       }
     );
     const inputId = id || this.uniqueId;
-    const totalPages = Math.ceil(totalItems / statePageSize);
+    const totalPages = Math.max(Math.ceil(totalItems / statePageSize), 1);
     const selectItems = this.renderSelectItems(totalPages);
 
     return (
@@ -260,7 +261,7 @@ export default class PaginationV2 extends Component {
                   statePage * statePageSize
                 )
               : itemRangeText(
-                  statePageSize * (statePage - 1) + 1,
+                  Math.min(statePageSize * (statePage - 1) + 1, totalItems),
                   Math.min(statePage * statePageSize, totalItems),
                   totalItems
                 )}
@@ -270,7 +271,7 @@ export default class PaginationV2 extends Component {
           <span className="bx--pagination__text">
             {pagesUnknown
               ? pageText(statePage)
-              : pageRangeText(statePage, Math.ceil(totalItems / statePageSize))}
+              : pageRangeText(statePage, totalPages)}
           </span>
           <button
             className={backButtonClasses}
@@ -297,9 +298,7 @@ export default class PaginationV2 extends Component {
             className="bx--pagination__button bx--pagination__button--forward"
             onClick={this.incrementPage}
             disabled={
-              this.props.disabled ||
-              statePage === Math.ceil(totalItems / statePageSize) ||
-              isLastPage
+              this.props.disabled || statePage === totalPages || isLastPage
             }>
             <Icon
               className="bx--pagination__button-icon"