@semcore/pagination 16.1.12 → 17.0.0-prerelease.17

package/lib/cjs/Pagination.js

@@ -1,288 +1,276 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
+var _baseComponents = require("@semcore/base-components");
 var _button = _interopRequireWildcard(require("@semcore/button"));
 var _i18nEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/i18nEnhance"));
 var _uniqueID = _interopRequireDefault(require("@semcore/core/lib/utils/uniqueID"));
-var _flexBox = require("@semcore/flex-box");
 var _m = _interopRequireDefault(require("@semcore/icon/ChevronDoubleLeft/m"));
 var _inputNumber = _interopRequireDefault(require("@semcore/input-number"));
-var _tooltip = require("@semcore/tooltip");
 var _typography = require("@semcore/typography");
 var _react = _interopRequireDefault(require("react"));
 var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
-var _excluded = ["styles", "getI18nText", "totalPages", "isLastOrSingle", "children"];
 /*!__reshadow-styles__:"./style/pagination.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SPagination_2y4s9_gg_{justify-content:flex-start;align-items:center}.___SPagination_2y4s9_gg_.__withGap_2y4s9_gg_{gap:var(--intergalactic-spacing-4x, 16px)}.___SPagination_2y4s9_gg_.__withGap_2y4s9_gg_._size_l_2y4s9_gg_{gap:var(--intergalactic-spacing-5x, 20px)}.___SNextPage_2y4s9_gg_,.___SPrevPage_2y4s9_gg_{align-self:center;margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNextPage_2y4s9_gg_._size_l_2y4s9_gg_,.___SPrevPage_2y4s9_gg_._size_l_2y4s9_gg_{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SLabel_2y4s9_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SLabel_2y4s9_gg_:not(:first-child){margin-left:var(--intergalactic-spacing-4x, 16px)}.___SLabel_2y4s9_gg_._size_l_2y4s9_gg_:not(:first-child){margin-left:var(--intergalactic-spacing-5x, 20px)}.___STotalPages_2y4s9_gg_{align-self:center;line-height:normal;color:var(--intergalactic-text-link, #006dca)}.___STotalPagesLabel_2y4s9_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-1x, 4px);color:var(--intergalactic-text-primary, #191b23)}.___STotalLastPages_2y4s9_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-primary, #191b23)}.___STotalLastPages_2y4s9_gg_._size_l_2y4s9_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SPageInput_2y4s9_gg_{max-width:68px;margin-left:var(--intergalactic-spacing-1x, 4px)}.___SPageInput_2y4s9_gg_._size_l_2y4s9_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPageInput_2y4s9_gg_:focus-within .___SPageInputAddon_2y4s9_gg_{opacity:1;clip:initial;position:static}.___SPageInputAddon_2y4s9_gg_{opacity:0;clip:rect(1px,1px,1px,1px);position:absolute}.___SLabel_2y4s9_gg_,.___STotalPagesLabel_2y4s9_gg_,.___STotalPages_2y4s9_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SLabel_2y4s9_gg_._size_l_2y4s9_gg_,.___STotalPagesLabel_2y4s9_gg_._size_l_2y4s9_gg_,.___STotalPages_2y4s9_gg_._size_l_2y4s9_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}", /*__inner_css_end__*/"2y4s9_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SPagination_4tsjh_gg_{justify-content:flex-start;align-items:center}.___SPagination_4tsjh_gg_.__withGap_4tsjh_gg_{gap:var(--intergalactic-spacing-4x, 16px)}.___SPagination_4tsjh_gg_.__withGap_4tsjh_gg_._size_l_4tsjh_gg_{gap:var(--intergalactic-spacing-5x, 20px)}.___SNextPage_4tsjh_gg_,.___SPrevPage_4tsjh_gg_{align-self:center;margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNextPage_4tsjh_gg_._size_l_4tsjh_gg_,.___SPrevPage_4tsjh_gg_._size_l_4tsjh_gg_{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SLabel_4tsjh_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SLabel_4tsjh_gg_:not(:first-child){margin-left:var(--intergalactic-spacing-4x, 16px)}.___SLabel_4tsjh_gg_._size_l_4tsjh_gg_:not(:first-child){margin-left:var(--intergalactic-spacing-5x, 20px)}.___STotalPages_4tsjh_gg_{align-self:center;line-height:normal;color:var(--intergalactic-text-link, #006dca)}.___STotalPagesLabel_4tsjh_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-1x, 4px);color:var(--intergalactic-text-primary, #191b23)}.___STotalLastPages_4tsjh_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-primary, #191b23)}.___STotalLastPages_4tsjh_gg_._size_l_4tsjh_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SPageInput_4tsjh_gg_{max-width:68px;margin-left:var(--intergalactic-spacing-1x, 4px)}.___SPageInput_4tsjh_gg_._size_l_4tsjh_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPageInput_4tsjh_gg_:focus-within .___SPageInputAddon_4tsjh_gg_{opacity:1;clip:initial;position:static}.___SPageInputAddon_4tsjh_gg_{opacity:0;clip:rect(1px,1px,1px,1px);position:absolute}.___SLabel_4tsjh_gg_,.___STotalPagesLabel_4tsjh_gg_,.___STotalPages_4tsjh_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SLabel_4tsjh_gg_._size_l_4tsjh_gg_,.___STotalPagesLabel_4tsjh_gg_._size_l_4tsjh_gg_,.___STotalPages_4tsjh_gg_._size_l_4tsjh_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}", /*__inner_css_end__*/"4tsjh_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SPagination": "___SPagination_2y4s9_gg_",
-  "__SLabel": "___SLabel_2y4s9_gg_",
-  "_size_l": "_size_l_2y4s9_gg_",
-  "__STotalPages": "___STotalPages_2y4s9_gg_",
-  "__STotalPagesLabel": "___STotalPagesLabel_2y4s9_gg_",
-  "__SPageInput": "___SPageInput_2y4s9_gg_",
-  "__SPageInputAddon": "___SPageInputAddon_2y4s9_gg_",
-  "_withGap": "__withGap_2y4s9_gg_",
-  "__SNextPage": "___SNextPage_2y4s9_gg_",
-  "__SPrevPage": "___SPrevPage_2y4s9_gg_",
-  "__STotalLastPages": "___STotalLastPages_2y4s9_gg_"
+  "__SPagination": "___SPagination_4tsjh_gg_",
+  "__SLabel": "___SLabel_4tsjh_gg_",
+  "_size_l": "_size_l_4tsjh_gg_",
+  "__STotalPages": "___STotalPages_4tsjh_gg_",
+  "__STotalPagesLabel": "___STotalPagesLabel_4tsjh_gg_",
+  "__SPageInput": "___SPageInput_4tsjh_gg_",
+  "__SPageInputAddon": "___SPageInputAddon_4tsjh_gg_",
+  "_withGap": "__withGap_4tsjh_gg_",
+  "__SNextPage": "___SNextPage_4tsjh_gg_",
+  "__SPrevPage": "___SPrevPage_4tsjh_gg_",
+  "__STotalLastPages": "___STotalLastPages_4tsjh_gg_"
 });
-var PaginationRoot = /*#__PURE__*/function (_Component) {
-  function PaginationRoot() {
-    var _this;
-    (0, _classCallCheck2["default"])(this, PaginationRoot);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2["default"])(this, PaginationRoot, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "nextPageButtonRef", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])(_this, "prevPageButtonRef", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])(_this, "state", {
+class PaginationRoot extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "nextPageButtonRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(this, "prevPageButtonRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(this, "state", {
       // Crutch, so as not to take out `dirtyCurrentPage` in props
       dirtyCurrentPage: undefined
     });
-    (0, _defineProperty2["default"])(_this, "pageInputAddonRef", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])(_this, "returnLostFocusTo", function (ref) {
-      requestAnimationFrame(function () {
-        var _ref$current;
-        (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+    (0, _defineProperty2.default)(this, "pageInputAddonRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(this, "returnLostFocusTo", ref => {
+      requestAnimationFrame(() => {
+        ref.current?.focus();
       });
     });
-    (0, _defineProperty2["default"])(_this, "handlePageChange", function (currentPage) {
+    (0, _defineProperty2.default)(this, "handlePageChange", currentPage => {
       currentPage = Number(currentPage);
       if (Number.isNaN(currentPage)) {
         return;
       }
-      _this.handlers.currentPage(currentPage);
-      _this.setState({
+      this.handlers.currentPage(currentPage);
+      this.setState({
         dirtyCurrentPage: undefined
       });
     });
-    (0, _defineProperty2["default"])(_this, "handlePageValueChange", function (value) {
-      var dirtyCurrentPage = _this.state.dirtyCurrentPage;
+    (0, _defineProperty2.default)(this, "handlePageValueChange", value => {
+      const {
+        dirtyCurrentPage
+      } = this.state;
       if (Number.isNaN(Number(value))) {
         value = dirtyCurrentPage;
       }
-      _this.setState({
+      this.setState({
         dirtyCurrentPage: value
       });
     });
-    (0, _defineProperty2["default"])(_this, "handlePageValueBlur", function () {
-      setTimeout(function () {
-        if (_this.pageInputAddonRef.current !== document.activeElement) {
-          var currentPage = _this.asProps.currentPage;
-          _this.setState({
+    (0, _defineProperty2.default)(this, "handlePageValueBlur", () => {
+      setTimeout(() => {
+        if (this.pageInputAddonRef.current !== document.activeElement) {
+          const {
+            currentPage
+          } = this.asProps;
+          this.setState({
             dirtyCurrentPage: currentPage
           });
         }
       }, 0);
     });
-    (0, _defineProperty2["default"])(_this, "getDirtyCurrentPage", function () {
-      var dirtyCurrentPage = _this.state.dirtyCurrentPage;
-      var totalPages = _this.asProps.totalPages;
-      var finalValue = dirtyCurrentPage > totalPages ? totalPages : dirtyCurrentPage;
+    (0, _defineProperty2.default)(this, "getDirtyCurrentPage", () => {
+      const {
+        dirtyCurrentPage
+      } = this.state;
+      const {
+        totalPages
+      } = this.asProps;
+      const finalValue = dirtyCurrentPage > totalPages ? totalPages : dirtyCurrentPage;
       return finalValue <= 0 ? 1 : finalValue;
     });
-    /** @deprecated */
-    (0, _defineProperty2["default"])(_this, "handlePageInputIconClick", function () {
-      var dirtyCurrentPage = _this.getDirtyCurrentPage();
-      _this.handlePageChange(dirtyCurrentPage);
-    });
-    (0, _defineProperty2["default"])(_this, "handlePageInputKeyDown", function (event) {
+    (0, _defineProperty2.default)(this, "handlePageInputKeyDown", event => {
       if (event.key !== 'Enter') return;
-      var dirtyCurrentPage = _this.getDirtyCurrentPage();
-      _this.handlePageChange(dirtyCurrentPage);
+      const dirtyCurrentPage = this.getDirtyCurrentPage();
+      this.handlePageChange(dirtyCurrentPage);
     });
-    (0, _defineProperty2["default"])(_this, "getFirstPageProps", function () {
-      var _this$asProps = _this.asProps,
-        currentPage = _this$asProps.currentPage,
-        getI18nText = _this$asProps.getI18nText,
-        size = _this$asProps.size;
-      var disabled = currentPage <= 1;
+    (0, _defineProperty2.default)(this, "getFirstPageProps", () => {
+      const {
+        currentPage,
+        getI18nText,
+        size
+      } = this.asProps;
+      const disabled = currentPage <= 1;
       return {
-        disabled: disabled,
-        onClick: function onClick() {
-          _this.handlePageChange(1);
-          _this.returnLostFocusTo(_this.nextPageButtonRef);
+        disabled,
+        onClick: () => {
+          this.handlePageChange(1);
+          this.returnLostFocusTo(this.nextPageButtonRef);
         },
-        getI18nText: getI18nText,
-        size: size
+        getI18nText,
+        size
       };
     });
-    (0, _defineProperty2["default"])(_this, "getPrevPageProps", function () {
-      var _this$asProps2 = _this.asProps,
-        currentPage = _this$asProps2.currentPage,
-        getI18nText = _this$asProps2.getI18nText,
-        size = _this$asProps2.size;
-      var disabled = currentPage <= 1;
+    (0, _defineProperty2.default)(this, "getPrevPageProps", () => {
+      const {
+        currentPage,
+        getI18nText,
+        size
+      } = this.asProps;
+      const disabled = currentPage <= 1;
       return {
-        currentPage: currentPage,
-        disabled: disabled,
-        onClick: function onClick() {
-          var followingPage = currentPage - 1;
-          _this.handlePageChange(followingPage);
+        currentPage,
+        disabled,
+        onClick: () => {
+          const followingPage = currentPage - 1;
+          this.handlePageChange(followingPage);
           if (followingPage <= 1) {
-            _this.returnLostFocusTo(_this.nextPageButtonRef);
+            this.returnLostFocusTo(this.nextPageButtonRef);
           }
         },
-        getI18nText: getI18nText,
-        ref: _this.prevPageButtonRef,
-        size: size
+        getI18nText,
+        ref: this.prevPageButtonRef,
+        size
       };
     });
-    (0, _defineProperty2["default"])(_this, "getNextPageProps", function () {
-      var _this$asProps3 = _this.asProps,
-        currentPage = _this$asProps3.currentPage,
-        totalPages = _this$asProps3.totalPages,
-        getI18nText = _this$asProps3.getI18nText,
-        size = _this$asProps3.size;
-      var disabled = currentPage >= totalPages;
+    (0, _defineProperty2.default)(this, "getNextPageProps", () => {
+      const {
+        currentPage,
+        totalPages,
+        getI18nText,
+        size
+      } = this.asProps;
+      const disabled = currentPage >= totalPages;
       return {
-        currentPage: currentPage,
-        disabled: disabled,
-        onClick: function onClick() {
-          var followingPage = currentPage + 1;
-          _this.handlePageChange(followingPage);
+        currentPage,
+        disabled,
+        onClick: () => {
+          const followingPage = currentPage + 1;
+          this.handlePageChange(followingPage);
           if (followingPage >= totalPages) {
-            _this.returnLostFocusTo(_this.prevPageButtonRef);
+            this.returnLostFocusTo(this.prevPageButtonRef);
           }
         },
-        getI18nText: getI18nText,
-        ref: _this.nextPageButtonRef,
-        size: size
+        getI18nText,
+        ref: this.nextPageButtonRef,
+        size
       };
     });
-    (0, _defineProperty2["default"])(_this, "getPageInputProps", function () {
-      var _this$asProps4 = _this.asProps,
-        getI18nText = _this$asProps4.getI18nText,
-        locale = _this$asProps4.locale,
-        size = _this$asProps4.size;
+    (0, _defineProperty2.default)(this, "getPageInputProps", () => {
+      const {
+        getI18nText,
+        locale,
+        size
+      } = this.asProps;
       return {
-        getI18nText: getI18nText,
-        locale: locale,
-        size: size,
-        paginationInputId: _this.paginationInputId
+        getI18nText,
+        locale,
+        size,
+        paginationInputId: this.paginationInputId
       };
     });
-    /** @deprecated */
-    (0, _defineProperty2["default"])(_this, "getPageInputAddonProps", function () {
+    (0, _defineProperty2.default)(this, "getPageInputAddonProps", () => {
       return {
-        onClick: _this.handlePageInputIconClick,
-        ref: _this.pageInputAddonRef,
-        onBlur: _this.handlePageValueBlur
+        ref: this.pageInputAddonRef,
+        onBlur: this.handlePageValueBlur
       };
     });
-    (0, _defineProperty2["default"])(_this, "getPageInputValueProps", function () {
-      var dirtyCurrentPage = _this.state.dirtyCurrentPage;
-      var _this$asProps5 = _this.asProps,
-        currentPage = _this$asProps5.currentPage,
-        totalPages = _this$asProps5.totalPages,
-        getI18nText = _this$asProps5.getI18nText,
-        size = _this$asProps5.size;
+    (0, _defineProperty2.default)(this, "getPageInputValueProps", () => {
+      const {
+        dirtyCurrentPage
+      } = this.state;
+      const {
+        currentPage,
+        totalPages,
+        getI18nText,
+        size
+      } = this.asProps;
       return {
         min: 1,
         max: totalPages,
         disabled: totalPages === 1,
         value: dirtyCurrentPage === undefined ? currentPage : dirtyCurrentPage,
-        onBlur: _this.handlePageValueBlur,
-        onChange: _this.handlePageValueChange,
-        onKeyDown: _this.handlePageInputKeyDown,
-        getI18nText: getI18nText,
-        size: size,
-        id: _this.paginationInputId
+        onBlur: this.handlePageValueBlur,
+        onChange: this.handlePageValueChange,
+        onKeyDown: this.handlePageInputKeyDown,
+        getI18nText,
+        size,
+        id: this.paginationInputId
       };
     });
-    (0, _defineProperty2["default"])(_this, "getTotalPagesProps", function () {
-      var _this$asProps6 = _this.asProps,
-        currentPage = _this$asProps6.currentPage,
-        totalPages = _this$asProps6.totalPages,
-        getI18nText = _this$asProps6.getI18nText,
-        locale = _this$asProps6.locale,
-        size = _this$asProps6.size;
-      var formatter = new Intl.NumberFormat(locale, {
+    (0, _defineProperty2.default)(this, "getTotalPagesProps", () => {
+      const {
+        currentPage,
+        totalPages,
+        getI18nText,
+        locale,
+        size
+      } = this.asProps;
+      const formatter = new Intl.NumberFormat(locale, {
         style: 'decimal'
       });
       return {
-        totalPages: totalPages,
+        totalPages,
         children: formatter.format(totalPages),
         isLastOrSingle: currentPage === totalPages,
-        onClick: function onClick() {
-          _this.handlePageChange(totalPages);
-          _this.returnLostFocusTo(_this.prevPageButtonRef);
+        onClick: () => {
+          this.handlePageChange(totalPages);
+          this.returnLostFocusTo(this.prevPageButtonRef);
         },
-        getI18nText: getI18nText,
-        size: size
+        getI18nText,
+        size
       };
     });
-    return _this;
   }
-  (0, _inherits2["default"])(PaginationRoot, _Component);
-  return (0, _createClass2["default"])(PaginationRoot, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      return {
-        totalPages: null,
-        currentPage: null
-      };
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.currentPage !== undefined && prevProps.currentPage !== this.asProps.currentPage) {
-        this.setState({
-          dirtyCurrentPage: undefined
-        });
-      }
-    }
-  }, {
-    key: "paginationInputId",
-    get: function get() {
-      var uid = this.asProps.uid;
-      return "pagination-input-".concat(uid);
+  uncontrolledProps() {
+    return {
+      totalPages: null,
+      currentPage: null
+    };
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.currentPage !== undefined && prevProps.currentPage !== this.asProps.currentPage) {
+      this.setState({
+        dirtyCurrentPage: undefined
+      });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps,
-        _ref9;
-      var SPagination = _flexBox.Flex;
-      var _this$asProps7 = this.asProps,
-        Children = _this$asProps7.Children,
-        hasChildren = _this$asProps7.children,
-        getI18nText = _this$asProps7.getI18nText,
-        currentPage = _this$asProps7.currentPage,
-        _this$asProps7$totalP = _this$asProps7.totalPages,
-        totalPages = _this$asProps7$totalP === void 0 ? 1 : _this$asProps7$totalP;
-      return _ref9 = (0, _core.sstyled)(this.asProps.styles), /*#__PURE__*/_react["default"].createElement(SPagination, _ref9.cn("SPagination", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+  }
+  get paginationInputId() {
+    const {
+      uid
+    } = this.asProps;
+    return `pagination-input-${uid}`;
+  }
+  render() {
+    var _ref = this.asProps,
+      _ref9;
+    const SPagination = _baseComponents.Flex;
+    const {
+      Children,
+      children: hasChildren,
+      getI18nText,
+      currentPage,
+      totalPages = 1
+    } = this.asProps;
+    return _ref9 = (0, _core.sstyled)(this.asProps.styles), /*#__PURE__*/_react.default.createElement(SPagination, _ref9.cn("SPagination", {
+      ...(0, _core.assignProps)({
         "flexWrap": 'wrap',
         "withGap": !hasChildren,
         "tag": 'nav',
         "aria-label": getI18nText('pagination')
-      }, _ref))), hasChildren ? /*#__PURE__*/_react["default"].createElement(Children, _ref9.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, totalPages === 1 ? null : /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref9.cn("Flex", {}), /*#__PURE__*/_react["default"].createElement(Pagination.FirstPage, null), /*#__PURE__*/_react["default"].createElement(Pagination.PrevPage, null), /*#__PURE__*/_react["default"].createElement(Pagination.NextPage, null)), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref9.cn("Flex", {
-        "alignItems": 'center'
-      }), /*#__PURE__*/_react["default"].createElement(Pagination.PageInput, null), /*#__PURE__*/_react["default"].createElement(Pagination.TotalPages, null))), /*#__PURE__*/_react["default"].createElement(_flexBox.ScreenReaderOnly, _ref9.cn("ScreenReaderOnly", {
-        "aria-live": 'polite',
-        "role": 'status'
-      }), getI18nText('pageInputLabel'), ' ', currentPage));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(PaginationRoot, "displayName", 'Pagination');
-(0, _defineProperty2["default"])(PaginationRoot, "defaultProps", function () {
+      }, _ref)
+    }), hasChildren ? /*#__PURE__*/_react.default.createElement(Children, _ref9.cn("Children", {})) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, totalPages === 1 ? null : /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, _ref9.cn("Flex", {}), /*#__PURE__*/_react.default.createElement(Pagination.FirstPage, null), /*#__PURE__*/_react.default.createElement(Pagination.PrevPage, null), /*#__PURE__*/_react.default.createElement(Pagination.NextPage, null)), /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, _ref9.cn("Flex", {
+      "alignItems": 'center'
+    }), /*#__PURE__*/_react.default.createElement(Pagination.PageInput, null), /*#__PURE__*/_react.default.createElement(Pagination.TotalPages, null))), /*#__PURE__*/_react.default.createElement(_baseComponents.ScreenReaderOnly, _ref9.cn("ScreenReaderOnly", {
+      "aria-live": 'polite',
+      "role": 'status'
+    }), getI18nText('pageInputLabel'), ' ', currentPage));
+  }
+}
+(0, _defineProperty2.default)(PaginationRoot, "displayName", 'Pagination');
+(0, _defineProperty2.default)(PaginationRoot, "defaultProps", () => {
   return {
     defaultCurrentPage: 1,
     defaultTotalPages: 1,
@@ -291,175 +279,150 @@ var PaginationRoot = /*#__PURE__*/function (_Component) {
     size: 'm'
   };
 });
-(0, _defineProperty2["default"])(PaginationRoot, "style", style);
-(0, _defineProperty2["default"])(PaginationRoot, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages), (0, _uniqueID["default"])()]);
-var FirstPage = /*#__PURE__*/function (_Component2) {
-  function FirstPage() {
-    (0, _classCallCheck2["default"])(this, FirstPage);
-    return (0, _callSuper2["default"])(this, FirstPage, arguments);
+(0, _defineProperty2.default)(PaginationRoot, "style", style);
+(0, _defineProperty2.default)(PaginationRoot, "enhance", [(0, _i18nEnhance.default)(_intergalacticDynamicLocales.localizedMessages), (0, _uniqueID.default)()]);
+class FirstPage extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "buttonRef", /*#__PURE__*/_react.default.createRef());
   }
-  (0, _inherits2["default"])(FirstPage, _Component2);
-  return (0, _createClass2["default"])(FirstPage, [{
-    key: "render",
-    value: function render() {
-      var _ref2 = this.asProps;
-      var getI18nText = this.asProps.getI18nText;
-      return /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _core.assignProps)({
-        "aria-label": getI18nText('firstPage')
-      }, _ref2));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(FirstPage, "defaultProps", function (props) {
-  var hintContent = props.getI18nText('firstPage');
-  return {
-    children: /*#__PURE__*/_react["default"].createElement(_button["default"].Addon, {
-      tag: _tooltip.Hint,
-      title: hintContent,
-      timeout: [250, 50],
-      __excludeProps: ['aria-label']
-    }, /*#__PURE__*/_react["default"].createElement(_m["default"], null))
-  };
-});
-var PrevPage = /*#__PURE__*/function (_Component3) {
-  function PrevPage() {
-    (0, _classCallCheck2["default"])(this, PrevPage);
-    return (0, _callSuper2["default"])(this, PrevPage, arguments);
+  render() {
+    var _ref2 = this.asProps;
+    const {
+      getI18nText,
+      Children,
+      children,
+      disabled
+    } = this.asProps;
+    const hintContent = getI18nText('firstPage');
+    const isAdvanced = children !== undefined;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, (0, _core.assignProps)({
+      "aria-label": getI18nText('firstPage'),
+      "ref": this.buttonRef
+    }, _ref2), isAdvanced ? /*#__PURE__*/_react.default.createElement(Children, null) : /*#__PURE__*/_react.default.createElement(_button.default.Addon, {
+      tag: _m.default
+    })), !isAdvanced && /*#__PURE__*/_react.default.createElement(_baseComponents.Hint, {
+      triggerRef: this.buttonRef,
+      timeout: [250, 50]
+    }, hintContent));
   }
-  (0, _inherits2["default"])(PrevPage, _Component3);
-  return (0, _createClass2["default"])(PrevPage, [{
-    key: "render",
-    value: function render() {
-      var _ref3 = this.asProps,
-        _ref0;
-      var SPrevPage = _button["default"];
-      return _ref0 = (0, _core.sstyled)(this.asProps.styles), /*#__PURE__*/_react["default"].createElement(SPrevPage, _ref0.cn("SPrevPage", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref3))));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(PrevPage, "defaultProps", function (props) {
-  return {
-    children: props.getI18nText('prevPageLabel')
-  };
-});
-var NextPage = /*#__PURE__*/function (_Component4) {
-  function NextPage() {
-    (0, _classCallCheck2["default"])(this, NextPage);
-    return (0, _callSuper2["default"])(this, NextPage, arguments);
+}
+class PrevPage extends _core.Component {
+  render() {
+    var _ref3 = this.asProps,
+      _ref0;
+    const SPrevPage = _button.default;
+    return _ref0 = (0, _core.sstyled)(this.asProps.styles), /*#__PURE__*/_react.default.createElement(SPrevPage, _ref0.cn("SPrevPage", {
+      ...(0, _core.assignProps)({}, _ref3)
+    }));
   }
-  (0, _inherits2["default"])(NextPage, _Component4);
-  return (0, _createClass2["default"])(NextPage, [{
-    key: "render",
-    value: function render() {
-      var _ref4 = this.asProps,
-        _ref1;
-      var SNextPage = _button["default"];
-      return _ref1 = (0, _core.sstyled)(this.asProps.styles), /*#__PURE__*/_react["default"].createElement(SNextPage, _ref1.cn("SNextPage", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+}
+(0, _defineProperty2.default)(PrevPage, "defaultProps", props => ({
+  children: props.getI18nText('prevPageLabel')
+}));
+class NextPage extends _core.Component {
+  render() {
+    var _ref4 = this.asProps,
+      _ref1;
+    const SNextPage = _button.default;
+    return _ref1 = (0, _core.sstyled)(this.asProps.styles), /*#__PURE__*/_react.default.createElement(SNextPage, _ref1.cn("SNextPage", {
+      ...(0, _core.assignProps)({
         "use": 'primary',
         "theme": 'info'
-      }, _ref4))));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(NextPage, "defaultProps", function (props) {
-  return {
-    children: props.getI18nText('nextPageLabel')
-  };
-});
-var TotalPages = /*#__PURE__*/function (_Component5) {
-  function TotalPages() {
-    (0, _classCallCheck2["default"])(this, TotalPages);
-    return (0, _callSuper2["default"])(this, TotalPages, arguments);
+      }, _ref4)
+    }));
   }
-  (0, _inherits2["default"])(TotalPages, _Component5);
-  return (0, _createClass2["default"])(TotalPages, [{
-    key: "render",
-    value: function render() {
-      var _ref5 = this.asProps,
-        _ref10;
-      var STotalPages = _button.ButtonLink;
-      var STotalPagesLabel = _typography.Text;
-      var STotalLastPages = _typography.Text;
-      var _this$asProps8 = this.asProps,
-        styles = _this$asProps8.styles,
-        getI18nText = _this$asProps8.getI18nText,
-        totalPages = _this$asProps8.totalPages,
-        isLastOrSingle = _this$asProps8.isLastOrSingle,
-        children = _this$asProps8.children,
-        other = (0, _objectWithoutProperties2["default"])(_this$asProps8, _excluded);
-      var textSize = other.size === 'l' ? '300' : '200';
-      return _ref10 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(STotalPagesLabel, _ref10.cn("STotalPagesLabel", {
-        "size": textSize
-      }), getI18nText('totalPagesLabel')), isLastOrSingle ? /*#__PURE__*/_react["default"].createElement(STotalLastPages, _ref10.cn("STotalLastPages", (0, _objectSpread2["default"])({
-        "size": textSize,
+}
+(0, _defineProperty2.default)(NextPage, "defaultProps", props => ({
+  children: props.getI18nText('nextPageLabel')
+}));
+class TotalPages extends _core.Component {
+  render() {
+    var _ref5 = this.asProps,
+      _ref10;
+    const STotalPages = _button.ButtonLink;
+    const STotalPagesLabel = _typography.Text;
+    const STotalLastPages = _typography.Text;
+    const {
+      styles,
+      getI18nText,
+      totalPages,
+      isLastOrSingle,
+      children,
+      ...other
+    } = this.asProps;
+    const textSize = other.size === 'l' ? '300' : '200';
+    return _ref10 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(STotalPagesLabel, _ref10.cn("STotalPagesLabel", {
+      "size": textSize
+    }), getI18nText('totalPagesLabel')), isLastOrSingle ? /*#__PURE__*/_react.default.createElement(STotalLastPages, _ref10.cn("STotalLastPages", {
+      "size": textSize,
+      "aria-label": getI18nText('lastPage', {
+        lastPageNumber: totalPages
+      }),
+      ...other
+    }), children) : /*#__PURE__*/_react.default.createElement(STotalPages, _ref10.cn("STotalPages", {
+      ...(0, _core.assignProps)({
         "aria-label": getI18nText('lastPage', {
           lastPageNumber: totalPages
         })
-      }, other)), children) : /*#__PURE__*/_react["default"].createElement(STotalPages, _ref10.cn("STotalPages", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-        "aria-label": getI18nText('lastPage', {
-          lastPageNumber: totalPages
-        })
-      }, _ref5)))));
-    }
-  }]);
-}(_core.Component);
-var PageInputValue = function PageInputValue(props) {
+      }, _ref5)
+    })));
+  }
+}
+function PageInputValue(props) {
   var _ref6 = arguments[0],
     _ref11;
-  var SPageInputValue = _inputNumber["default"].Value;
-  return _ref11 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SPageInputValue, _ref11.cn("SPageInputValue", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "onBlur": function onBlur() {
-      return false;
-    }
-  }, _ref6))));
-};
-var PageInputAddon = function PageInputAddon(props) {
+  const SPageInputValue = _inputNumber.default.Value;
+  return _ref11 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react.default.createElement(SPageInputValue, _ref11.cn("SPageInputValue", {
+    ...(0, _core.assignProps)({
+      "onBlur": () => false
+    }, _ref6)
+  }));
+}
+function PageInputAddon(props) {
   var _ref7 = arguments[0],
     _ref12;
-  var SPageInputAddon = _inputNumber["default"].Addon;
-  return _ref12 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SPageInputAddon, _ref12.cn("SPageInputAddon", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref7))));
-};
-var PageInput = /*#__PURE__*/function (_Component6) {
-  function PageInput() {
-    (0, _classCallCheck2["default"])(this, PageInput);
-    return (0, _callSuper2["default"])(this, PageInput, arguments);
-  }
-  (0, _inherits2["default"])(PageInput, _Component6);
-  return (0, _createClass2["default"])(PageInput, [{
-    key: "render",
-    value: function render() {
-      var _ref8 = this.asProps,
-        _ref13;
-      var SPageInput = _inputNumber["default"];
-      var SLabel = _typography.Text;
-      var _this$asProps9 = this.asProps,
-        Children = _this$asProps9.Children,
-        getI18nText = _this$asProps9.getI18nText,
-        styles = _this$asProps9.styles,
-        locale = _this$asProps9.locale,
-        size = _this$asProps9.size,
-        paginationInputId = _this$asProps9.paginationInputId;
-      return _ref13 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SLabel, _ref13.cn("SLabel", {
-        "tag": 'label',
-        "htmlFor": paginationInputId,
-        "size": size
-      }), getI18nText('pageInputLabel')), /*#__PURE__*/_react["default"].createElement(SPageInput, _ref13.cn("SPageInput", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+  const SPageInputAddon = _inputNumber.default.Addon;
+  return _ref12 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react.default.createElement(SPageInputAddon, _ref12.cn("SPageInputAddon", {
+    ...(0, _core.assignProps)({}, _ref7)
+  }));
+}
+class PageInput extends _core.Component {
+  render() {
+    var _ref8 = this.asProps,
+      _ref13;
+    const SPageInput = _inputNumber.default;
+    const SLabel = _typography.Text;
+    const {
+      Children,
+      getI18nText,
+      styles,
+      locale,
+      size,
+      paginationInputId
+    } = this.asProps;
+    return _ref13 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SLabel, _ref13.cn("SLabel", {
+      "tag": 'label',
+      "htmlFor": paginationInputId,
+      "size": size
+    }), getI18nText('pageInputLabel')), /*#__PURE__*/_react.default.createElement(SPageInput, _ref13.cn("SPageInput", {
+      ...(0, _core.assignProps)({
         "controlsLength": Children.origin ? undefined : 2,
         "locale": locale
-      }, _ref8))), Children.origin ? /*#__PURE__*/_react["default"].createElement(Children, _ref13.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(Pagination.PageInput.Value, null)));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(PageInput, "enhance", [(0, _uniqueID["default"])()]);
-var Pagination = (0, _core.createComponent)(PaginationRoot, {
-  PrevPage: PrevPage,
-  NextPage: NextPage,
-  FirstPage: FirstPage,
-  TotalPages: TotalPages,
+      }, _ref8)
+    }), Children.origin ? /*#__PURE__*/_react.default.createElement(Children, _ref13.cn("Children", {})) : /*#__PURE__*/_react.default.createElement(Pagination.PageInput.Value, null)));
+  }
+}
+(0, _defineProperty2.default)(PageInput, "enhance", [(0, _uniqueID.default)()]);
+const Pagination = (0, _core.createComponent)(PaginationRoot, {
+  PrevPage,
+  NextPage,
+  FirstPage,
+  TotalPages,
   PageInput: [PageInput, {
     Value: PageInputValue,
     Addon: PageInputAddon
   }]
 });
-var _default = exports["default"] = Pagination;
+var _default = exports.default = Pagination;
 //# sourceMappingURL=Pagination.js.map