@carbon/react 1.15.0-rc.0 → 1.16.0-rc.0

package/lib/components/Pagination/Pagination.js

@@ -10,293 +10,316 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var iconsReact = require('@carbon/icons-react');
+var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var cx = require('classnames');
-var iconsReact = require('@carbon/icons-react');
 var Select = require('../Select/Select.js');
 var SelectItem = require('../SelectItem/SelectItem.js');
 var array = require('../../tools/array.js');
-var Button = require('../Button/Button.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var index = require('../IconButton/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["backwardText", "className", "forwardText", "id", "itemsPerPageText", "itemRangeText", "pageRangeText", "pageSize", "pageSizes", "itemText", "pageText", "pageNumberText", "pagesUnknown", "isLastPage", "disabled", "pageInputDisabled", "pageSizeInputDisabled", "totalItems", "onChange", "page", "size", "forwardedRef"];
-var instanceId = 0;
+var _CaretLeft, _CaretRight;
+
+var _excluded = ["backwardText", "className", "disabled", "forwardText", "id", "isLastPage", "itemText", "itemRangeText", "itemsPerPageText", "onChange", "pageNumberText", "pageRangeText", "page", "pageInputDisabled", "pageSize", "pageSizeInputDisabled", "pageSizes", "pageText", "pagesUnknown", "size", "totalItems"];
 
-var mapPageSizesToObject = function mapPageSizesToObject(sizes) {
+function mapPageSizesToObject(sizes) {
   return _rollupPluginBabelHelpers["typeof"](sizes[0]) === 'object' && sizes[0] !== null ? sizes : sizes.map(function (size) {
     return {
       text: size,
       value: size
     };
   });
-};
-
-var Pagination = /*#__PURE__*/function (_Component) {
-  _rollupPluginBabelHelpers.inherits(Pagination, _Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(Pagination);
-
-  function Pagination(props) {
-    var _this;
-
-    _rollupPluginBabelHelpers.classCallCheck(this, Pagination);
+}
+
+function renderSelectItems(total) {
+  var counter = 1;
+  var itemArr = [];
+
+  while (counter <= total) {
+    itemArr.push( /*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
+      key: counter,
+      value: counter,
+      text: String(counter)
+    }));
+    counter++;
+  }
 
-    _this = _super.call(this, props);
+  return itemArr;
+}
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleSizeChange", function (evt) {
-      var pageSize = Number(evt.target.value);
+function getPageSize(pageSizes, pageSize) {
+  if (pageSize) {
+    var hasSize = pageSizes.find(function (size) {
+      return pageSize === size.value;
+    });
 
-      _this.setState({
-        pageSize: pageSize,
-        page: 1
-      });
+    if (hasSize) {
+      return pageSize;
+    }
+  }
 
-      _this.props.onChange({
-        page: 1,
-        pageSize: pageSize
-      });
-    });
+  return pageSizes[0].value;
+}
+
+var Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pagination(_ref, ref) {
+  var _cx, _cx2, _cx3;
+
+  var _ref$backwardText = _ref.backwardText,
+      backwardText = _ref$backwardText === void 0 ? 'Previous page' : _ref$backwardText,
+      customClassName = _ref.className,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$forwardText = _ref.forwardText,
+      forwardText = _ref$forwardText === void 0 ? 'Next page' : _ref$forwardText,
+      id = _ref.id,
+      _ref$isLastPage = _ref.isLastPage,
+      isLastPage = _ref$isLastPage === void 0 ? false : _ref$isLastPage,
+      _ref$itemText = _ref.itemText,
+      itemText = _ref$itemText === void 0 ? function (min, max) {
+    return "".concat(min, "\u2013").concat(max, " items");
+  } : _ref$itemText,
+      _ref$itemRangeText = _ref.itemRangeText,
+      itemRangeText = _ref$itemRangeText === void 0 ? function (min, max, total) {
+    return "".concat(min, "\u2013").concat(max, " of ").concat(total, " items");
+  } : _ref$itemRangeText,
+      _ref$itemsPerPageText = _ref.itemsPerPageText,
+      itemsPerPageText = _ref$itemsPerPageText === void 0 ? 'Items per page:' : _ref$itemsPerPageText,
+      onChange = _ref.onChange;
+      _ref.pageNumberText;
+      var _ref$pageRangeText = _ref.pageRangeText,
+      pageRangeText = _ref$pageRangeText === void 0 ? function (_current, total) {
+    return "of ".concat(total, " ").concat(total === 1 ? 'page' : 'pages');
+  } : _ref$pageRangeText,
+      _ref$page = _ref.page,
+      controlledPage = _ref$page === void 0 ? 1 : _ref$page,
+      pageInputDisabled = _ref.pageInputDisabled,
+      controlledPageSize = _ref.pageSize,
+      pageSizeInputDisabled = _ref.pageSizeInputDisabled,
+      controlledPageSizes = _ref.pageSizes,
+      _ref$pageText = _ref.pageText,
+      pageText = _ref$pageText === void 0 ? function (page) {
+    return "page ".concat(page);
+  } : _ref$pageText,
+      _ref$pagesUnknown = _ref.pagesUnknown,
+      pagesUnknown = _ref$pagesUnknown === void 0 ? false : _ref$pagesUnknown,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      totalItems = _ref.totalItems,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var inputId = useId.useFallbackId(id);
+  var backBtnRef = React.useRef(null);
+  var forwardBtnRef = React.useRef(null);
+
+  var _useState = React.useState(function () {
+    return mapPageSizesToObject(controlledPageSizes);
+  }),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      pageSizes = _useState2[0],
+      setPageSizes = _useState2[1];
+
+  var _useState3 = React.useState(controlledPageSizes),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      prevPageSizes = _useState4[0],
+      setPrevPageSizes = _useState4[1];
+
+  var _useState5 = React.useState(controlledPage),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      page = _useState6[0],
+      setPage = _useState6[1];
+
+  var _useState7 = React.useState(controlledPage),
+      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+      prevControlledPage = _useState8[0],
+      setPrevControlledPage = _useState8[1];
+
+  var _useState9 = React.useState(function () {
+    return getPageSize(pageSizes, controlledPageSize);
+  }),
+      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+      pageSize = _useState10[0],
+      setPageSize = _useState10[1];
+
+  var _useState11 = React.useState(controlledPageSize),
+      _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
+      prevControlledPageSize = _useState12[0],
+      setPrevControlledPageSize = _useState12[1];
+
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--pagination"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--pagination--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+  var totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
+  var backButtonDisabled = disabled || page === 1;
+  var backButtonClasses = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--pagination__button"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--pagination__button--backward"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--pagination__button--no-index"), backButtonDisabled), _cx2));
+  var forwardButtonDisabled = disabled || page === totalPages;
+  var forwardButtonClasses = cx__default["default"]((_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--pagination__button"), true), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--pagination__button--forward"), true), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--pagination__button--no-index"), forwardButtonDisabled), _cx3));
+  var selectItems = renderSelectItems(totalPages); // Sync state with props
+
+  if (controlledPage !== prevControlledPage) {
+    setPage(controlledPage);
+    setPrevControlledPage(controlledPage);
+  }
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handlePageChange", function (evt) {
-      _this.setState({
-        page: evt.target.value
-      });
-    });
+  if (controlledPageSize !== prevControlledPageSize) {
+    setPageSize(getPageSize(pageSizes, controlledPageSize));
+    setPrevControlledPageSize(controlledPageSize);
+  }
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handlePageInputChange", function (evt) {
-      var page = Number(evt.target.value);
+  if (!array.equals(controlledPageSizes, prevPageSizes)) {
+    var _pageSizes = mapPageSizesToObject(controlledPageSizes);
 
-      if (page > 0 && page <= Math.max(Math.ceil(_this.props.totalItems / _this.state.pageSize), 1)) {
-        _this.setState({
-          page: page
-        });
+    var hasPageSize = _pageSizes.find(function (size) {
+      return size.value === pageSize;
+    }); // Reset page to 1 if the current pageSize is not included in the new page
+    // sizes
 
-        _this.props.onChange({
-          page: page,
-          pageSize: _this.state.pageSize
-        });
-      }
-    });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "incrementPage", function () {
-      var page = _this.state.page + 1;
+    if (!hasPageSize) {
+      setPage(1);
+    }
 
-      _this.setState({
-        page: page
-      });
+    setPageSizes(_pageSizes);
+    setPrevPageSizes(controlledPageSizes);
+  }
 
-      _this.props.onChange({
-        page: page,
-        pageSize: _this.state.pageSize
-      });
-    });
+  function handleSizeChange(event) {
+    var pageSize = Number(event.target.value);
+    var changes = {
+      pageSize: pageSize,
+      page: 1
+    };
+    setPage(changes.page);
+    setPageSize(changes.pageSize);
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "decrementPage", function () {
-      var page = _this.state.page - 1;
+    if (onChange) {
+      onChange(changes);
+    }
+  }
 
-      _this.setState({
-        page: page
-      });
+  function handlePageInputChange(event) {
+    var page = Number(event.target.value);
 
-      _this.props.onChange({
-        page: page,
-        pageSize: _this.state.pageSize
-      });
-    });
+    if (page > 0 && page <= Math.max(Math.ceil(totalItems / pageSize), 1)) {
+      setPage(page);
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "renderSelectItems", function (total) {
-      var counter = 1;
-      var itemArr = [];
-
-      while (counter <= total) {
-        itemArr.push( /*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
-          key: counter,
-          value: counter,
-          text: String(counter)
-        }));
-        counter++;
+      if (onChange) {
+        onChange({
+          page: page,
+          pageSize: pageSize
+        });
       }
+    }
+  }
 
-      return itemArr;
-    });
+  function incrementPage() {
+    var nextPage = page + 1;
+    setPage(nextPage); // when the increment button reaches the last page,
+    // the icon button becomes disabled and the focus shifts to `main`
+    // this presents an a11y problem for keyboard & screen reader users
+    // instead, we want the focus to shift to the other pagination btn
 
-    var _this$props = _this.props,
-        _pageSizes = _this$props.pageSizes,
-        _page = _this$props.page,
-        _pageSize = _this$props.pageSize;
-    var pageSizes = mapPageSizesToObject(_pageSizes);
-    _this.state = {
-      page: _page,
-      pageSize: _pageSize && pageSizes.some(function (sizeObj) {
-        return _pageSize === sizeObj.value;
-      }) ? _pageSize : pageSizes[0].value,
-      prevPageSizes: pageSizes,
-      prevPage: _page,
-      prevPageSize: _pageSize
-    };
-    _this.uniqueId = ++instanceId;
-    return _this;
-  }
+    if (nextPage === totalPages) {
+      backBtnRef.current.focus();
+    }
 
-  _rollupPluginBabelHelpers.createClass(Pagination, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props2 = this.props,
-          backwardText = _this$props2.backwardText,
-          className = _this$props2.className,
-          forwardText = _this$props2.forwardText,
-          id = _this$props2.id,
-          itemsPerPageText = _this$props2.itemsPerPageText,
-          itemRangeText = _this$props2.itemRangeText,
-          pageRangeText = _this$props2.pageRangeText;
-          _this$props2.pageSize;
-          var _pageSizes = _this$props2.pageSizes,
-          itemText = _this$props2.itemText,
-          pageText = _this$props2.pageText;
-          _this$props2.pageNumberText;
-          var pagesUnknown = _this$props2.pagesUnknown,
-          isLastPage = _this$props2.isLastPage,
-          disabled = _this$props2.disabled,
-          pageInputDisabled = _this$props2.pageInputDisabled,
-          pageSizeInputDisabled = _this$props2.pageSizeInputDisabled,
-          totalItems = _this$props2.totalItems;
-          _this$props2.onChange;
-          _this$props2.page;
-          var size = _this$props2.size,
-          forwardedRef = _this$props2.forwardedRef,
-          other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props2, _excluded);
-
-      return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, function (prefix) {
-        var classNames = cx__default["default"]("".concat(prefix, "--pagination"), className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--pagination--").concat(size), size));
-        var inputId = id || _this2.uniqueId;
-        var _this2$state = _this2.state,
-            statePage = _this2$state.page,
-            statePageSize = _this2$state.pageSize;
-        var totalPages = Math.max(Math.ceil(totalItems / statePageSize), 1);
-        var backButtonDisabled = disabled || statePage === 1;
-        var backButtonClasses = cx__default["default"]("".concat(prefix, "--pagination__button"), "".concat(prefix, "--pagination__button--backward"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--pagination__button--no-index"), backButtonDisabled));
-        var forwardButtonDisabled = disabled || statePage === totalPages;
-        var forwardButtonClasses = cx__default["default"]("".concat(prefix, "--pagination__button"), "".concat(prefix, "--pagination__button--forward"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--pagination__button--no-index"), forwardButtonDisabled));
-
-        var selectItems = _this2.renderSelectItems(totalPages);
-
-        var pageSizes = mapPageSizesToObject(_pageSizes);
-        return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-          className: classNames,
-          ref: forwardedRef
-        }, other), /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "".concat(prefix, "--pagination__left")
-        }, /*#__PURE__*/React__default["default"].createElement("label", {
-          id: "".concat(prefix, "-pagination-select-").concat(inputId, "-count-label"),
-          className: "".concat(prefix, "--pagination__text"),
-          htmlFor: "".concat(prefix, "-pagination-select-").concat(inputId)
-        }, itemsPerPageText), /*#__PURE__*/React__default["default"].createElement(Select["default"], {
-          id: "".concat(prefix, "-pagination-select-").concat(inputId),
-          className: "".concat(prefix, "--select__item-count"),
-          labelText: "",
-          hideLabel: true,
-          noLabel: true,
-          inline: true,
-          onChange: _this2.handleSizeChange,
-          disabled: pageSizeInputDisabled || disabled,
-          value: statePageSize
-        }, pageSizes.map(function (sizeObj) {
-          return /*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
-            key: sizeObj.value,
-            value: sizeObj.value,
-            text: String(sizeObj.text)
-          });
-        })), /*#__PURE__*/React__default["default"].createElement("span", {
-          className: "".concat(prefix, "--pagination__text ").concat(prefix, "--pagination__items-count")
-        }, pagesUnknown ? itemText(statePageSize * (statePage - 1) + 1, statePage * statePageSize) : itemRangeText(Math.min(statePageSize * (statePage - 1) + 1, totalItems), Math.min(statePage * statePageSize, totalItems), totalItems))), /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "".concat(prefix, "--pagination__right")
-        }, /*#__PURE__*/React__default["default"].createElement(Select["default"], {
-          id: "".concat(prefix, "-pagination-select-").concat(inputId, "-right"),
-          className: "".concat(prefix, "--select__page-number"),
-          labelText: "Page number, of ".concat(totalPages, " pages"),
-          inline: true,
-          hideLabel: true,
-          onChange: _this2.handlePageInputChange,
-          value: statePage,
-          disabled: pageInputDisabled || disabled
-        }, selectItems), /*#__PURE__*/React__default["default"].createElement("span", {
-          className: "".concat(prefix, "--pagination__text")
-        }, pagesUnknown ? pageText(statePage) : pageRangeText(statePage, totalPages)), /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "".concat(prefix, "--pagination__control-buttons")
-        }, /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-          kind: "ghost",
-          className: backButtonClasses,
-          hasIconOnly: true,
-          renderIcon: iconsReact.CaretLeft,
-          iconDescription: backwardText,
-          tooltipAlignment: "center",
-          tooltipPosition: "top",
-          onClick: _this2.decrementPage,
-          disabled: backButtonDisabled
-        }), /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-          kind: "ghost",
-          className: forwardButtonClasses,
-          hasIconOnly: true,
-          renderIcon: iconsReact.CaretRight,
-          iconDescription: forwardText,
-          tooltipAlignment: "end",
-          tooltipPosition: "top",
-          onClick: _this2.incrementPage,
-          disabled: forwardButtonDisabled || isLastPage
-        }))));
+    if (onChange) {
+      onChange({
+        page: nextPage,
+        pageSize: pageSize,
+        backBtnRef: backBtnRef
       });
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(_ref, state) {
-      var _pageSizes = _ref.pageSizes,
-          page = _ref.page,
-          pageSize = _ref.pageSize;
-      var prevPageSizes = state.prevPageSizes,
-          prevPage = state.prevPage,
-          prevPageSize = state.prevPageSize,
-          currentPage = state.page,
-          currentPageSize = state.pageSize;
-      var pageSizes = mapPageSizesToObject(_pageSizes);
-      var pageSizesValues = pageSizes.map(function (sizeObj) {
-        return sizeObj.value;
-      });
-      var prevPageSizesValues = prevPageSizes.map(function (sizeObj) {
-        return sizeObj.value;
-      });
-      var pageSizesChanged = !array.equals(pageSizesValues, prevPageSizesValues);
+  }
 
-      if (pageSizesChanged && !pageSizes.some(function (sizeObj) {
-        return pageSize === sizeObj.value;
-      })) {
-        pageSize = pageSizes[0].value;
-      }
+  function decrementPage() {
+    var nextPage = page - 1;
+    setPage(nextPage); // when the decrement button reaches the first page,
+    // the icon button becomes disabled and the focus shifts to `main`
+    // this presents an a11y problem for keyboard & screen reader users
+    // instead, we want the focus to shift to the other pagination btn
 
-      var pageChanged = page !== prevPage;
-      var pageSizeChanged = pageSize !== prevPageSize;
-      return !pageSizesChanged && !pageChanged && !pageSizeChanged ? null : {
-        page: pageSizeChanged && 1 || pageChanged && page || currentPage,
-        pageSize: pageSizeChanged ? pageSize : currentPageSize,
-        prevPageSizes: pageSizes,
-        prevPage: page,
-        prevPageSize: pageSize
-      };
+    if (nextPage === 1) {
+      forwardBtnRef.current.focus();
     }
-  }]);
 
-  return Pagination;
-}(React.Component);
+    if (onChange) {
+      onChange({
+        page: nextPage,
+        pageSize: pageSize,
+        forwardBtnRef: forwardBtnRef
+      });
+    }
+  }
 
-_rollupPluginBabelHelpers.defineProperty(Pagination, "propTypes", {
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: className,
+    ref: ref
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--pagination__left")
+  }, /*#__PURE__*/React__default["default"].createElement("label", {
+    id: "".concat(prefix, "-pagination-select-").concat(inputId, "-count-label"),
+    className: "".concat(prefix, "--pagination__text"),
+    htmlFor: "".concat(prefix, "-pagination-select-").concat(inputId)
+  }, itemsPerPageText), /*#__PURE__*/React__default["default"].createElement(Select["default"], {
+    id: "".concat(prefix, "-pagination-select-").concat(inputId),
+    className: "".concat(prefix, "--select__item-count"),
+    labelText: "",
+    hideLabel: true,
+    noLabel: true,
+    inline: true,
+    onChange: handleSizeChange,
+    disabled: pageSizeInputDisabled || disabled,
+    value: pageSize
+  }, pageSizes.map(function (sizeObj) {
+    return /*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
+      key: sizeObj.value,
+      value: sizeObj.value,
+      text: String(sizeObj.text)
+    });
+  })), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--pagination__text ").concat(prefix, "--pagination__items-count")
+  }, pagesUnknown ? itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--pagination__right")
+  }, /*#__PURE__*/React__default["default"].createElement(Select["default"], {
+    id: "".concat(prefix, "-pagination-select-").concat(inputId, "-right"),
+    className: "".concat(prefix, "--select__page-number"),
+    labelText: "Page number, of ".concat(totalPages, " pages"),
+    inline: true,
+    hideLabel: true,
+    onChange: handlePageInputChange,
+    value: page,
+    disabled: pageInputDisabled || disabled
+  }, selectItems), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--pagination__text")
+  }, pagesUnknown ? pageText(page) : pageRangeText(page, totalPages)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--pagination__control-buttons")
+  }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+    align: "top",
+    disabled: backButtonDisabled,
+    kind: "ghost",
+    className: backButtonClasses,
+    label: backwardText,
+    onClick: decrementPage,
+    ref: backBtnRef
+  }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretLeft, null))), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+    align: "top-right",
+    disabled: forwardButtonDisabled || isLastPage,
+    kind: "ghost",
+    className: forwardButtonClasses,
+    label: forwardText,
+    onClick: incrementPage,
+    ref: forwardBtnRef
+  }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretRight, null))))));
+});
+Pagination.propTypes = {
   /**
    * The description for the backward icon.
    */
@@ -394,7 +417,7 @@ _rollupPluginBabelHelpers.defineProperty(Pagination, "propTypes", {
   pagesUnknown: PropTypes__default["default"].bool,
 
   /**
-   * Specify the size of the Pagination. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   * Specify the size of the Pagination.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
 
@@ -402,29 +425,7 @@ _rollupPluginBabelHelpers.defineProperty(Pagination, "propTypes", {
    * The total number of items.
    */
   totalItems: PropTypes__default["default"].number
-});
-
-_rollupPluginBabelHelpers.defineProperty(Pagination, "defaultProps", {
-  backwardText: 'Previous page',
-  itemRangeText: function itemRangeText(min, max, total) {
-    return "".concat(min, "\u2013").concat(max, " of ").concat(total, " items");
-  },
-  forwardText: 'Next page',
-  itemsPerPageText: 'Items per page:',
-  pageNumberText: 'Page Number',
-  pageRangeText: function pageRangeText(current, total) {
-    return "of ".concat(total, " ").concat(total === 1 ? 'page' : 'pages');
-  },
-  disabled: false,
-  page: 1,
-  pagesUnknown: false,
-  isLastPage: false,
-  itemText: function itemText(min, max) {
-    return "".concat(min, "\u2013").concat(max, " items");
-  },
-  pageText: function pageText(page) {
-    return "page ".concat(page);
-  }
-});
+};
+var Pagination$1 = Pagination;
 
-exports["default"] = Pagination;
+exports["default"] = Pagination$1;

package/lib/components/Pagination/index.js

@@ -9,30 +9,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FeatureFlags = require('@carbon/feature-flags');
-var Pagination$1 = require('./Pagination.js');
-var Pagination = require('./next/Pagination.js');
+var Pagination = require('./Pagination.js');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
 
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var index = FeatureFlags__namespace.enabled('enable-v11-release') ? Pagination["default"] : Pagination$1["default"];
-
-exports["default"] = index;
+exports["default"] = Pagination["default"];