@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

package/dist/pager/pager.d.ts

@@ -19,7 +19,7 @@ export interface PagerProps {
     disablePageSizeSelector: boolean;
     openTotal: boolean;
     canLoadLastPageWithOpenTotal: boolean;
-    translations: PagerTranslations;
+    translations?: PagerTranslations | null | undefined;
     loader: boolean;
     loaderNavigation: boolean;
     onPageSizeChange: (size: number) => void;
@@ -40,18 +40,13 @@ export default class Pager extends PureComponent<PagerProps> {
         disablePageSizeSelector: boolean;
         openTotal: boolean;
         canLoadLastPageWithOpenTotal: boolean;
-        translations: {
-            perPage: string;
-            firstPage: string;
-            lastPage: string;
-            nextPage: string;
-            previousPage: string;
-        };
         loader: boolean;
         loaderNavigation: boolean;
         onPageSizeChange: () => void;
         onLoadPage: () => void;
     };
+    static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
+    context: React.ContextType<typeof Pager.contextType>;
     getSelectOptions(): {
         selected: SelectItem<PagerSizeItem> | undefined;
         data: SelectItem<PagerSizeItem>[];
@@ -62,7 +57,7 @@ export default class Pager extends PureComponent<PagerProps> {
     handleNextClick: () => void;
     handlePageChange: (arg: number) => (event: React.MouseEvent) => void;
     handleLoadMore: (arg: number) => () => void;
-    getButton(page: number, content: ReactNode, key?: number, active?: boolean): JSX.Element;
+    getButton(page: number, content: ReactNode, key?: number, active?: boolean): React.JSX.Element;
     getClickProps(onClick: (e: React.MouseEvent) => void): {
         onPlainLeftClick?: undefined;
         onClick?: undefined;
@@ -73,11 +68,11 @@ export default class Pager extends PureComponent<PagerProps> {
         onClick: (e: React.MouseEvent) => void;
         onPlainLeftClick?: undefined;
     };
-    getPageSizeSelector(): false | JSX.Element;
-    getPagerLinks(): JSX.Element;
+    getPageSizeSelector(): false | React.JSX.Element;
+    getPagerLinks(): React.JSX.Element;
     generateHref(page: number): string | undefined;
-    getPagerContent(): JSX.Element;
-    render(): JSX.Element;
+    getPagerContent(): React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export type PagerAttrs = JSX.LibraryManagedAttributes<typeof Pager, PagerProps>;
 export {};

package/dist/pager/pager.js

@@ -1,4 +1,8 @@
-import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass, f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.array.find.js';
+import 'core-js/modules/es.object.to-string.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -11,19 +15,35 @@ import Select from '../select/select.js';
 import memoize from '../global/memoize.js';
 import Link from '../link/link.js';
 import Icon from '../icon/icon.js';
-import 'focus-visible';
+import { I18nContext } from '../i18n/i18n-context.js';
 import '@jetbrains/icons/chevron-10px';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../icon/icon__constants.js';
 import 'util-deprecate';
-import '../_helpers/icon.js';
-import '../icon/icon__svg.js';
+import '../_helpers/icon__svg.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/es.string.starts-with.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.map.js';
+import 'core-js/modules/es.string.iterator.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.js';
+import 'core-js/modules/es.string.split.js';
 import '../global/data-tests.js';
-import '../button-group/caption.js';
-import '../_helpers/button-group.js';
-import '../_helpers/button-toolbar.js';
+import 'core-js/modules/es.array.reduce.js';
+import 'core-js/modules/es.object.entries.js';
+import '../_helpers/caption.js';
+import 'core-js/modules/es.array.index-of.js';
+import 'core-js/modules/es.string.trim.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.object.keys.js';
+import 'core-js/modules/es.object.assign.js';
+import 'core-js/modules/es.object.values.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/close-12px';
 import 'deep-equal';
@@ -32,22 +52,34 @@ import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
+import 'core-js/modules/es.string.match.js';
 import '../global/dom.js';
+import 'core-js/modules/es.set.js';
 import '../avatar/fallback-avatar.js';
+import 'core-js/modules/es.number.constructor.js';
+import 'core-js/modules/es.array.from.js';
 import '../global/get-uid.js';
+import 'core-js/modules/es.regexp.to-string.js';
 import '../popup/popup.js';
 import 'react-dom';
 import '../global/schedule-raf.js';
 import '../shortcuts/shortcuts.js';
 import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
+import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.array.find-index.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
 import '../list/list.js';
+import 'core-js/modules/es.symbol.js';
+import 'core-js/modules/es.symbol.description.js';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
 import 'react-virtualized/dist/es/WindowScroller';
@@ -56,238 +88,275 @@ import 'memoize-one';
 import '../global/create-stateful-context.js';
 import '../list/list__link.js';
 import '../_helpers/list.js';
-import '../_helpers/link.js';
 import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-14px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
-import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';
 import '../list/list__title.js';
 import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
-import '../input/input.js';
 import '../_helpers/input.js';
-import '../input/input-label.js';
+import '../control-label/control-label.js';
 import '../global/rerender-hoc.js';
 import '../global/react-render-adapter.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';
 import '@jetbrains/icons/search';
 import '../loader-inline/loader-inline.js';
-import '../_helpers/loader-inline.js';
 import '../shortcuts/shortcuts-hoc.js';
 import '../tags-list/tags-list.js';
 import '../tag/tag.js';
 import '../caret/caret.js';
 import '../text/text.js';
 import '../_helpers/select__filter.js';
+import '../i18n/i18n.js';
 
-var modules_1a5f0d42 = {"unit":"8px","light":"light_rui_2db7","pager":"pager_rui_2db7","links":"links_rui_2db7","link":"link_rui_2db7","linkDisabled":"linkDisabled_rui_2db7"};
+var modules_1a5f0d42 = {"unit":"i__const_unit_0","light":"light_rui_2ac4","pager":"pager_rui_2db7","links":"links_rui_2db7","link":"link_rui_2db7","linkDisabled":"linkDisabled_rui_2db7"};
 
-class Pager extends PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "handlePageSizeChange", item => {
+var Pager = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Pager, _PureComponent);
+  var _super = _createSuper(Pager);
+  function Pager() {
+    var _this;
+    _classCallCheck(this, Pager);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "handlePageSizeChange", function (item) {
       if (item != null) {
-        this.props.onPageSizeChange(item.key);
+        _this.props.onPageSizeChange(item.key);
       }
     });
-    _defineProperty(this, "handlePrevClick", () => {
-      const {
-        currentPage
-      } = this.props;
+    _defineProperty(_assertThisInitialized(_this), "handlePrevClick", function () {
+      var currentPage = _this.props.currentPage;
       if (currentPage !== 1) {
-        const prevPage = currentPage - 1;
-        this.props.onPageChange?.(prevPage);
+        var _this$props$onPageCha, _this$props;
+        var prevPage = currentPage - 1;
+        (_this$props$onPageCha = (_this$props = _this.props).onPageChange) === null || _this$props$onPageCha === void 0 ? void 0 : _this$props$onPageCha.call(_this$props, prevPage);
       }
     });
-    _defineProperty(this, "handleNextClick", () => {
-      const {
-        currentPage,
-        onLoadPage
-      } = this.props;
-      const nextPage = currentPage + 1;
-      const total = this.getTotalPages();
+    _defineProperty(_assertThisInitialized(_this), "handleNextClick", function () {
+      var _this$props2 = _this.props,
+        currentPage = _this$props2.currentPage,
+        onLoadPage = _this$props2.onLoadPage;
+      var nextPage = currentPage + 1;
+      var total = _this.getTotalPages();
       if (currentPage !== total) {
-        this.props.onPageChange?.(nextPage);
-      } else if (this.props.openTotal) {
+        var _this$props$onPageCha2, _this$props3;
+        (_this$props$onPageCha2 = (_this$props3 = _this.props).onPageChange) === null || _this$props$onPageCha2 === void 0 ? void 0 : _this$props$onPageCha2.call(_this$props3, nextPage);
+      } else if (_this.props.openTotal) {
         onLoadPage(nextPage);
       }
     });
-    _defineProperty(this, "handlePageChange", memoize(i => event => {
-      this.props.onPageChange?.(i, event);
-    }));
-    _defineProperty(this, "handleLoadMore", memoize(i => () => {
-      this.props.onLoadPage(i);
+    _defineProperty(_assertThisInitialized(_this), "handlePageChange", memoize(function (i) {
+      return function (event) {
+        var _this$props$onPageCha3, _this$props4;
+        (_this$props$onPageCha3 = (_this$props4 = _this.props).onPageChange) === null || _this$props$onPageCha3 === void 0 ? void 0 : _this$props$onPageCha3.call(_this$props4, i, event);
+      };
     }));
-  }
-  getSelectOptions() {
-    const {
-      pageSize,
-      pageSizes
-    } = this.props;
-    const data = pageSizes.map(size => ({
-      key: size,
-      label: `${size} ${this.props.translations.perPage}`
+    _defineProperty(_assertThisInitialized(_this), "handleLoadMore", memoize(function (i) {
+      return function () {
+        _this.props.onLoadPage(i);
+      };
     }));
-    const selected = data.find(it => it.key === pageSize);
-    return {
-      selected,
-      data
-    };
-  }
-  getTotalPages() {
-    const {
-      total,
-      pageSize
-    } = this.props;
-    return Math.ceil(total / pageSize);
-  }
-  getButton(page, content, key, active) {
-    return /*#__PURE__*/React.createElement(Button, _extends({
-      href: this.generateHref(page),
-      key: key,
-      active: active,
-      disabled: this.props.loader && !active && !this.props.loaderNavigation,
-      loader: this.props.loader && active
-    }, this.getClickProps(this.handlePageChange(page))), content);
+    return _this;
   }
-  getClickProps(onClick) {
-    const {
-      hrefFunc,
-      onPageChange
-    } = this.props;
-    if (!onPageChange) {
-      return {};
-    } else if (hrefFunc) {
+  _createClass(Pager, [{
+    key: "getSelectOptions",
+    value: function getSelectOptions() {
+      var _this2 = this;
+      var _this$props5 = this.props,
+        pageSize = _this$props5.pageSize,
+        pageSizes = _this$props5.pageSizes;
+      var translate = this.context.translate;
+      var data = pageSizes.map(function (size) {
+        var _this2$props$translat, _this2$props$translat2;
+        return {
+          key: size,
+          label: "".concat(size, " ").concat((_this2$props$translat = (_this2$props$translat2 = _this2.props.translations) === null || _this2$props$translat2 === void 0 ? void 0 : _this2$props$translat2.perPage) !== null && _this2$props$translat !== void 0 ? _this2$props$translat : translate('perPage'))
+        };
+      });
+      var selected = data.find(function (it) {
+        return it.key === pageSize;
+      });
       return {
-        onPlainLeftClick: onClick
-      };
-    } else {
-      return {
-        onClick
+        selected: selected,
+        data: data
       };
     }
-  }
-  getPageSizeSelector() {
-    const selectOptions = this.getSelectOptions();
-    return !this.props.disablePageSizeSelector && /*#__PURE__*/React.createElement("div", {
-      "data-test": "ring-pager-page-size-selector",
-      style: {
-        float: 'right'
+  }, {
+    key: "getTotalPages",
+    value: function getTotalPages() {
+      var _this$props6 = this.props,
+        total = _this$props6.total,
+        pageSize = _this$props6.pageSize;
+      return Math.ceil(total / pageSize);
+    }
+  }, {
+    key: "getButton",
+    value: function getButton(page, content, key, active) {
+      return /*#__PURE__*/React.createElement(Button, _extends({
+        href: this.generateHref(page),
+        key: key,
+        active: active,
+        disabled: this.props.loader && !active && !this.props.loaderNavigation,
+        loader: this.props.loader && active
+      }, this.getClickProps(this.handlePageChange(page))), content);
+    }
+  }, {
+    key: "getClickProps",
+    value: function getClickProps(onClick) {
+      var _this$props7 = this.props,
+        hrefFunc = _this$props7.hrefFunc,
+        onPageChange = _this$props7.onPageChange;
+      if (!onPageChange) {
+        return {};
+      } else if (hrefFunc) {
+        return {
+          onPlainLeftClick: onClick
+        };
+      } else {
+        return {
+          onClick: onClick
+        };
       }
-    }, /*#__PURE__*/React.createElement(Select, {
-      data: selectOptions.data,
-      selected: selectOptions.selected,
-      onSelect: this.handlePageSizeChange,
-      type: Select.Type.INLINE,
-      disabled: this.props.loader
-    }));
-  }
-  getPagerLinks() {
-    const prevLinkAvailable = this.props.currentPage !== 1;
-    const nextLinkAvailable = this.props.openTotal || this.props.currentPage !== this.getTotalPages();
-    const nextIcon = /*#__PURE__*/React.createElement(Icon, {
-      glyph: chevronRightIcon,
-      key: "icon"
-    });
-    const prevIcon = /*#__PURE__*/React.createElement(Icon, {
-      glyph: chevronLeftIcon,
-      key: "icon"
-    });
-    const prevText = this.props.translations.previousPage;
-    const nextText = this.props.translations.nextPage;
-    const nextLinkContent = WrapText => [/*#__PURE__*/React.createElement("span", {
-      key: "text"
-    }, /*#__PURE__*/React.createElement(WrapText, null, nextText)), nextIcon];
-    const prevLinkContent = WrapText => [prevIcon, /*#__PURE__*/React.createElement("span", {
-      key: "text"
-    }, /*#__PURE__*/React.createElement(WrapText, null, prevText))];
-    const prevLinkHref = this.generateHref(this.props.currentPage - 1);
-    const nextLinkHref = this.generateHref(this.props.currentPage + 1);
-    const disabledLinkClasses = classNames({
-      [modules_1a5f0d42.link]: true,
-      [modules_1a5f0d42.linkDisabled]: true
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      className: modules_1a5f0d42.links
-    }, prevLinkAvailable && (!this.props.loader || this.props.loaderNavigation) ? /*#__PURE__*/React.createElement(Link, _extends({
-      href: prevLinkHref,
-      className: modules_1a5f0d42.link
-    }, this.getClickProps(this.handlePrevClick)), prevLinkContent) : /*#__PURE__*/React.createElement("span", {
-      className: disabledLinkClasses
-    }, prevIcon, /*#__PURE__*/React.createElement("span", {
-      key: "text"
-    }, prevText)), nextLinkAvailable && (!this.props.loader || this.props.loaderNavigation) ? /*#__PURE__*/React.createElement(Link, _extends({
-      href: nextLinkHref,
-      className: modules_1a5f0d42.link
-    }, this.getClickProps(this.handleNextClick)), nextLinkContent) : /*#__PURE__*/React.createElement("span", {
-      className: disabledLinkClasses
-    }, /*#__PURE__*/React.createElement("span", {
-      key: "text"
-    }, nextText), nextIcon));
-  }
-  generateHref(page) {
-    if (this.props.hrefFunc === undefined) {
-      return undefined;
     }
-    const pageSize = this.props.disablePageSizeSelector ? undefined : this.props.pageSize;
-    return this.props.hrefFunc(page, pageSize);
-  }
-  getPagerContent() {
-    const {
-      currentPage,
-      visiblePagesLimit
-    } = this.props;
-    const totalPages = this.getTotalPages();
-    if (totalPages < this.props.currentPage) {
-      this.props.onPageChange?.(totalPages);
+  }, {
+    key: "getPageSizeSelector",
+    value: function getPageSizeSelector() {
+      var selectOptions = this.getSelectOptions();
+      return !this.props.disablePageSizeSelector && /*#__PURE__*/React.createElement("div", {
+        "data-test": "ring-pager-page-size-selector",
+        style: {
+          float: 'right'
+        }
+      }, /*#__PURE__*/React.createElement(Select, {
+        data: selectOptions.data,
+        selected: selectOptions.selected,
+        onSelect: this.handlePageSizeChange,
+        type: Select.Type.INLINE,
+        disabled: this.props.loader
+      }));
     }
-    let start = 1;
-    let end = totalPages;
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    if (totalPages >= visiblePagesLimit + 6) {
-      const leftHalfFrameSize = Math.ceil(visiblePagesLimit / 2) - 1;
-      const rightHalfFrameSize = visiblePagesLimit - leftHalfFrameSize - 1;
-      start = currentPage - leftHalfFrameSize;
-      end = currentPage + rightHalfFrameSize;
-      if (start < 1) {
-        const tail = 1 - start;
-        start += tail;
-        end += tail;
+  }, {
+    key: "getPagerLinks",
+    value: function getPagerLinks() {
+      var _this$props$translati, _this$props$translati2, _this$props$translati3, _this$props$translati4, _classNames;
+      var translate = this.context.translate;
+      var prevLinkAvailable = this.props.currentPage !== 1;
+      var nextLinkAvailable = this.props.openTotal || this.props.currentPage !== this.getTotalPages();
+      var nextIcon = /*#__PURE__*/React.createElement(Icon, {
+        glyph: chevronRightIcon,
+        key: "icon"
+      });
+      var prevIcon = /*#__PURE__*/React.createElement(Icon, {
+        glyph: chevronLeftIcon,
+        key: "icon"
+      });
+      var prevText = (_this$props$translati = (_this$props$translati2 = this.props.translations) === null || _this$props$translati2 === void 0 ? void 0 : _this$props$translati2.previousPage) !== null && _this$props$translati !== void 0 ? _this$props$translati : translate('previousPage');
+      var nextText = (_this$props$translati3 = (_this$props$translati4 = this.props.translations) === null || _this$props$translati4 === void 0 ? void 0 : _this$props$translati4.nextPage) !== null && _this$props$translati3 !== void 0 ? _this$props$translati3 : translate('nextPage');
+      var nextLinkContent = function nextLinkContent(WrapText) {
+        return [/*#__PURE__*/React.createElement("span", {
+          key: "text"
+        }, /*#__PURE__*/React.createElement(WrapText, null, nextText)), nextIcon];
+      };
+      var prevLinkContent = function prevLinkContent(WrapText) {
+        return [prevIcon, /*#__PURE__*/React.createElement("span", {
+          key: "text"
+        }, /*#__PURE__*/React.createElement(WrapText, null, prevText))];
+      };
+      var prevLinkHref = this.generateHref(this.props.currentPage - 1);
+      var nextLinkHref = this.generateHref(this.props.currentPage + 1);
+      var disabledLinkClasses = classNames((_classNames = {}, _defineProperty(_classNames, modules_1a5f0d42.link, true), _defineProperty(_classNames, modules_1a5f0d42.linkDisabled, true), _classNames));
+      return /*#__PURE__*/React.createElement("div", {
+        className: modules_1a5f0d42.links
+      }, prevLinkAvailable && (!this.props.loader || this.props.loaderNavigation) ? /*#__PURE__*/React.createElement(Link, _extends({
+        href: prevLinkHref,
+        className: modules_1a5f0d42.link
+      }, this.getClickProps(this.handlePrevClick)), prevLinkContent) : /*#__PURE__*/React.createElement("span", {
+        className: disabledLinkClasses
+      }, prevIcon, /*#__PURE__*/React.createElement("span", {
+        key: "text"
+      }, prevText)), nextLinkAvailable && (!this.props.loader || this.props.loaderNavigation) ? /*#__PURE__*/React.createElement(Link, _extends({
+        href: nextLinkHref,
+        className: modules_1a5f0d42.link
+      }, this.getClickProps(this.handleNextClick)), nextLinkContent) : /*#__PURE__*/React.createElement("span", {
+        className: disabledLinkClasses
+      }, /*#__PURE__*/React.createElement("span", {
+        key: "text"
+      }, nextText), nextIcon));
+    }
+  }, {
+    key: "generateHref",
+    value: function generateHref(page) {
+      if (this.props.hrefFunc === undefined) {
+        return undefined;
+      }
+      var pageSize = this.props.disablePageSizeSelector ? undefined : this.props.pageSize;
+      return this.props.hrefFunc(page, pageSize);
+    }
+  }, {
+    key: "getPagerContent",
+    value: function getPagerContent() {
+      var _this$props$translati5, _this$props$translati6, _this$props$translati7, _this$props$translati8;
+      var _this$props8 = this.props,
+        currentPage = _this$props8.currentPage,
+        visiblePagesLimit = _this$props8.visiblePagesLimit;
+      var totalPages = this.getTotalPages();
+      var translate = this.context.translate;
+      if (totalPages < this.props.currentPage) {
+        var _this$props$onPageCha4, _this$props9;
+        (_this$props$onPageCha4 = (_this$props9 = this.props).onPageChange) === null || _this$props$onPageCha4 === void 0 ? void 0 : _this$props$onPageCha4.call(_this$props9, totalPages);
       }
-      if (end > totalPages) {
-        const tail = end - totalPages;
-        start -= tail;
-        end -= tail;
+      var start = 1;
+      var end = totalPages;
+      if (totalPages >= visiblePagesLimit) {
+        var leftHalfFrameSize = Math.ceil(visiblePagesLimit / 2) - 1;
+        var rightHalfFrameSize = visiblePagesLimit - leftHalfFrameSize - 1;
+        start = currentPage - leftHalfFrameSize;
+        end = currentPage + rightHalfFrameSize;
+        if (start < 1) {
+          var tail = 1 - start;
+          start += tail;
+          end += tail;
+        }
+        if (end > totalPages) {
+          var _tail = end - totalPages;
+          start -= _tail;
+          end -= _tail;
+        }
+        if (start < 1) {
+          start += 1 - start;
+        }
       }
-      if (start < 1) {
-        start += 1 - start;
+      var buttons = [];
+      for (var i = start; i <= end; i++) {
+        buttons.push(this.getButton(i, i, i, i === currentPage));
       }
+      var lastPageButtonAvailable = end < totalPages && !this.props.openTotal || this.props.openTotal && this.props.canLoadLastPageWithOpenTotal;
+      return /*#__PURE__*/React.createElement("div", null, this.getPagerLinks(), /*#__PURE__*/React.createElement(ButtonToolbar, null, start > 1 && this.getButton(1, (_this$props$translati5 = (_this$props$translati6 = this.props.translations) === null || _this$props$translati6 === void 0 ? void 0 : _this$props$translati6.firstPage) !== null && _this$props$translati5 !== void 0 ? _this$props$translati5 : translate('firstPage')), /*#__PURE__*/React.createElement(ButtonGroup, null, start > 1 && this.getButton(start - 1, '...'), buttons, end < totalPages && this.getButton(end + 1, '...'), end === totalPages && this.props.openTotal && /*#__PURE__*/React.createElement(Button, _extends({
+        href: this.generateHref(end + 1),
+        disabled: this.props.loader
+      }, this.getClickProps(this.handleLoadMore(end + 1))), '...')), lastPageButtonAvailable && this.getButton(this.props.openTotal ? -1 : totalPages, (_this$props$translati7 = (_this$props$translati8 = this.props.translations) === null || _this$props$translati8 === void 0 ? void 0 : _this$props$translati8.lastPage) !== null && _this$props$translati7 !== void 0 ? _this$props$translati7 : translate('lastPage'))), this.getPageSizeSelector());
     }
-    const buttons = [];
-    for (let i = start; i <= end; i++) {
-      buttons.push(this.getButton(i, i, i, i === currentPage));
+  }, {
+    key: "render",
+    value: function render() {
+      var classes = classNames(modules_1a5f0d42.pager, this.props.className);
+      return /*#__PURE__*/React.createElement("div", {
+        "data-test": "ring-pager",
+        className: classes
+      }, this.getTotalPages() > 1 || this.props.openTotal ? this.getPagerContent() : this.getPageSizeSelector());
     }
-    const lastPageButtonAvailable = end < totalPages && !this.props.openTotal || this.props.openTotal && this.props.canLoadLastPageWithOpenTotal;
-    return /*#__PURE__*/React.createElement("div", null, this.getPagerLinks(), /*#__PURE__*/React.createElement(ButtonToolbar, null, start > 1 && this.getButton(1, this.props.translations.firstPage), /*#__PURE__*/React.createElement(ButtonGroup, null, start > 1 && this.getButton(start - 1, '...'), buttons, end < totalPages && this.getButton(end + 1, '...'), end === totalPages && this.props.openTotal && /*#__PURE__*/React.createElement(Button, _extends({
-      href: this.generateHref(end + 1),
-      disabled: this.props.loader
-    }, this.getClickProps(this.handleLoadMore(end + 1))), '...')), lastPageButtonAvailable && this.getButton(this.props.openTotal ? -1 : totalPages, this.props.translations.lastPage)), this.getPageSizeSelector());
-  }
-  render() {
-    const classes = classNames(modules_1a5f0d42.pager, this.props.className);
-    return /*#__PURE__*/React.createElement("div", {
-      "data-test": "ring-pager",
-      className: classes
-    }, this.getTotalPages() > 1 || this.props.openTotal ? this.getPagerContent() : this.getPageSizeSelector());
-  }
-}
+  }]);
+  return Pager;
+}(PureComponent);
 _defineProperty(Pager, "defaultProps", {
   currentPage: 1,
   pageSize: 50,
@@ -297,18 +366,12 @@ _defineProperty(Pager, "defaultProps", {
   disablePageSizeSelector: false,
   openTotal: false,
   canLoadLastPageWithOpenTotal: false,
-  translations: {
-    perPage: 'per page',
-    firstPage: 'First page',
-    lastPage: 'Last page',
-    nextPage: 'Next page',
-    previousPage: 'Previous'
-  },
   loader: false,
   loaderNavigation: false,
-  onPageSizeChange: () => {},
-  onLoadPage: () => {}
+  onPageSizeChange: function onPageSizeChange() {},
+  onLoadPage: function onLoadPage() {}
 });
+_defineProperty(Pager, "contextType", I18nContext);
 Pager.propTypes = {
   total: PropTypes.number.isRequired,
   currentPage: PropTypes.number,

package/dist/panel/panel.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, PureComponent } from 'react';
+import React, { HTMLAttributes, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 /**
  * @name Panel
@@ -8,5 +8,5 @@ export default class Panel extends PureComponent<HTMLAttributes<HTMLElement>> {
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }