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

package/components/link/clickableLink.d.ts

@@ -16,5 +16,5 @@ export default class ClickableLink extends PureComponent<ClickableLinkProps> {
         children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
     };
     onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/link/link.css

@@ -49,7 +49,7 @@
 
   outline: none;
 
-  &:global(.focus-visible) {
+  &:focus-visible {
     box-shadow: 0 0 0 2px var(--ring-border-hover-color);
   }
 }

package/components/link/link.d.ts

@@ -1,4 +1,3 @@
-import 'focus-visible';
 import React, { ReactNode, ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import { ClickableLinkProps } from './clickableLink';
@@ -20,8 +19,8 @@ export interface LinkBaseProps {
 export type LinkProps<P extends ClickableLinkProps = ClickableLinkProps> = Omit<P, keyof LinkBaseProps> & LinkBaseProps;
 export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent: ComponentType<P> | string): {
     new (props: LinkProps<P> | Readonly<LinkProps<P>>): {
-        getChildren(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
-        render(): JSX.Element;
+        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -44,8 +43,8 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
         UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: LinkProps<P>, context: any): {
-        getChildren(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
-        render(): JSX.Element;
+        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -84,8 +83,8 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
 };
 declare const _default: {
     new (props: LinkProps<ClickableLinkProps> | Readonly<LinkProps<ClickableLinkProps>>): {
-        getChildren(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
-        render(): JSX.Element;
+        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<ClickableLinkProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -108,8 +107,8 @@ declare const _default: {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: LinkProps<ClickableLinkProps>, context: any): {
-        getChildren(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
-        render(): JSX.Element;
+        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<ClickableLinkProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;

package/components/link/link.js

@@ -1,4 +1,3 @@
-import 'focus-visible';
 import React, { PureComponent, memo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';

package/components/list/consts.js

@@ -11,16 +11,19 @@ export var Type;
     Type[Type["TITLE"] = 5] = "TITLE";
     Type[Type["MARGIN"] = 6] = "MARGIN";
 })(Type || (Type = {}));
+// TODO refactor to plain object in 6.0
 export var Dimension;
 (function (Dimension) {
     Dimension[Dimension["ITEM_PADDING"] = 16] = "ITEM_PADDING";
     Dimension[Dimension["ITEM_HEIGHT"] = 32] = "ITEM_HEIGHT";
     Dimension[Dimension["COMPACT_ITEM_HEIGHT"] = 24] = "COMPACT_ITEM_HEIGHT";
     Dimension[Dimension["SEPARATOR_HEIGHT"] = 25] = "SEPARATOR_HEIGHT";
+    // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
     Dimension[Dimension["SEPARATOR_FIRST_HEIGHT"] = 16] = "SEPARATOR_FIRST_HEIGHT";
     Dimension[Dimension["SEPARATOR_TEXT_HEIGHT"] = 18] = "SEPARATOR_TEXT_HEIGHT";
     Dimension[Dimension["TITLE_HEIGHT"] = 42] = "TITLE_HEIGHT";
     Dimension[Dimension["INNER_PADDING"] = 8] = "INNER_PADDING";
+    // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
     Dimension[Dimension["MARGIN"] = 8] = "MARGIN";
 })(Dimension || (Dimension = {}));
 export const DEFAULT_ITEM_TYPE = Type.ITEM;

package/components/list/list.css

@@ -115,7 +115,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     text-align: right;
     direction: ltr;
   }
@@ -263,7 +263,7 @@
 
   text-align: left;
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     text-align: right;
     direction: ltr;
   }

package/components/list/list.d.ts

@@ -24,7 +24,7 @@ export interface ListProps<T = unknown> {
     restoreActiveIndex: boolean;
     activateSingleItem: boolean;
     activateFirstItem: boolean;
-    onMouseOut: (e: SyntheticEvent) => void;
+    onMouseOut: (e: SyntheticEvent<HTMLElement>) => void;
     onSelect: (item: ListDataItem<T>, event: Event | SyntheticEvent, params?: SelectHandlerParams) => void;
     onScrollToBottom: () => void;
     onResize: (info: Size) => void;
@@ -49,7 +49,7 @@ export declare const ActiveItemContext: {
     ValueContext: React.Context<string | undefined>;
     UpdateContext: React.Context<(value: string | undefined) => void>;
     Provider: {
-        ({ children }: import("../global/create-stateful-context").ProviderProps): JSX.Element;
+        ({ children }: import("../global/create-stateful-context").ProviderProps): React.JSX.Element;
         propTypes: {
             children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         };
@@ -176,19 +176,19 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     getVisibleListHeight(maxHeight: number): number;
     private _deprecatedGenerateKeyFromContent;
     getId(item: ListDataItem<T> | null): string | undefined;
-    renderItem: ({ index, style, isScrolling, parent, key }: Partial<ListRowProps>) => JSX.Element;
+    renderItem: ({ index, style, isScrolling, parent, key }: Partial<ListRowProps>) => React.JSX.Element;
     addItemDataTestToProp: (props: ListDataItemProps<T>) => ListDataItemProps<T>;
     virtualizedListRef: (el: VirtualizedList | null) => void;
     containerRef: (el: HTMLElement | null) => void;
     private _inner?;
     get inner(): HTMLElement | null | undefined;
-    renderVirtualizedInner({ height, maxHeight, autoHeight, rowCount, isScrolling, onChildScroll, scrollTop, registerChild }: RenderVirtualizedInnerParams): JSX.Element;
-    renderVirtualized(maxHeight: number | null | undefined, rowCount: number): JSX.Element;
-    renderSimple(maxHeight: number | null | undefined, rowCount: number): JSX.Element;
+    renderVirtualizedInner({ height, maxHeight, autoHeight, rowCount, isScrolling, onChildScroll, scrollTop, registerChild }: RenderVirtualizedInnerParams): React.JSX.Element;
+    renderVirtualized(maxHeight: number | null | undefined, rowCount: number): React.JSX.Element;
+    renderSimple(maxHeight: number | null | undefined, rowCount: number): React.JSX.Element;
     id: string;
     shortcutsScope: string;
     shortcutsMap: ShortcutsMap;
     /** @override */
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type ListAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof List, ListProps<T>>;

package/components/list/list.js

@@ -46,6 +46,9 @@ const nonActivatableTypes = [
 function isActivatable(item) {
     return item != null && !nonActivatableTypes.includes(item.rgItemType) && !item.disabled;
 }
+function getDataHash(data) {
+    return data.map(it => `${it.key}-${it.disabled}`).join('-');
+}
 const shouldActivateFirstItem = (props) => props.activateFirstItem ||
     props.activateSingleItem && props.data.length === 1;
 export const ActiveItemContext = createStatefulContext(undefined, 'ActiveItem');
@@ -158,7 +161,7 @@ export default class List extends Component {
             this.virtualizedList.recomputeRowHeights();
         }
         if (this.props.activeIndex == null &&
-            this.props.data !== prevProps.data &&
+            getDataHash(this.props.data) !== getDataHash(prevProps.data) &&
             shouldActivateFirstItem(this.props)) {
             this.activateFirst();
         }

package/components/list/list__custom.d.ts

@@ -2,5 +2,5 @@ import React, { PureComponent } from 'react';
 import { ListDataItemProps } from './consts';
 export default class ListCustom<T> extends PureComponent<ListDataItemProps<T>> {
     handleKeyPress: (event: React.KeyboardEvent) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/list/list__hint.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, ReactNode } from 'react';
+import React, { PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 export interface ListHintProps {
     label: ReactNode;
@@ -11,5 +11,5 @@ export default class ListHint extends PureComponent<ListHintProps> {
     static propTypes: {
         label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/list/list__item.d.ts

@@ -1,8 +1,8 @@
-import { PureComponent, SyntheticEvent } from 'react';
+import React, { PureComponent, SyntheticEvent } from 'react';
 import { ListDataItemProps } from './consts';
 export default class ListItem<T> extends PureComponent<ListDataItemProps<T>> {
     id: string;
     stopBubbling: (e: SyntheticEvent) => void;
     private _isString;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/list/list__link.d.ts

@@ -1,9 +1,9 @@
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { ListDataItemProps } from './consts';
 /**
  * @constructor
  * @extends {ReactComponent}
  */
 export default class ListLink<T> extends PureComponent<ListDataItemProps<T>> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/list/list__separator.d.ts

@@ -1,5 +1,5 @@
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { ListDataItemProps } from './consts';
 export default class ListSeparator<T> extends PureComponent<ListDataItemProps<T>> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/list/list__title.d.ts

@@ -1,5 +1,5 @@
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { ListDataItemProps } from './consts';
 export default class ListTitle<T> extends PureComponent<ListDataItemProps<T>> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/loader/loader.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, PureComponent } from 'react';
+import React, { HTMLAttributes, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import LoaderCore, { LoaderCoreProps } from './loader__core';
 export interface LoaderProps extends Partial<LoaderCoreProps>, HTMLAttributes<HTMLElement> {
@@ -24,5 +24,5 @@ export default class Loader extends PureComponent<LoaderProps> {
     componentWillUnmount(): void;
     loader?: LoaderCore;
     initLoader: (el: Node | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/loader-inline/loader-inline.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, PureComponent } from 'react';
+import React, { HTMLAttributes, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 export interface LoaderInlineProps extends HTMLAttributes<HTMLDivElement> {
     'data-test'?: string | null | undefined;
@@ -12,7 +12,7 @@ declare class LoaderInline extends PureComponent<LoaderInlineProps> {
         'data-test': PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type LoaderInlineAtrrs = JSX.LibraryManagedAttributes<typeof LoaderInline, LoaderInlineProps>;
 export default LoaderInline;

package/components/loader-ng/loader-ng.js

@@ -11,7 +11,6 @@ import LoaderCore from '../loader/loader__core';
 const angularModule = angular.module('Ring.loader', []);
 
 class RgLoaderComponent extends RingAngularComponent {
-  static $inject = ['$element'];
 
   static bindings = {
     message: '@'
@@ -31,6 +30,7 @@ class RgLoaderComponent extends RingAngularComponent {
     this.loader.updateMessage(changes.message.currentValue);
   }
 }
+RgLoaderComponent.$inject = ['$element'];
 
 angularModule.component('rgLoader', RgLoaderComponent);
 

package/components/loader-screen/loader-screen.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { LoaderProps } from '../loader/loader';
 export interface LoaderScreenProps extends LoaderProps {
@@ -13,5 +13,5 @@ export default class LoaderScreen extends PureComponent<LoaderScreenProps> {
         containerClassName: PropTypes.Requireable<string>;
         message: PropTypes.Requireable<string>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/login-dialog/login-dialog.d.ts

@@ -1,4 +1,4 @@
-import { Component, ReactNode } from 'react';
+import React, { Component, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 export interface LoginDialogProps {
     onCancel: () => void;
@@ -42,6 +42,6 @@ export default class LoginDialog extends Component<LoginDialogProps> {
     showFallbackTimout?: number;
     startFallbackCountdown(): void;
     onMessage: (event: MessageEvent) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type LoginDialogAttrs = JSX.LibraryManagedAttributes<typeof LoginDialog, LoginDialogProps>;

package/components/login-dialog/service.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import { render, unmountComponentAtNode } from '../global/react-render-adapter';
+import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
 import LoginDialog from './login-dialog';
 const containerElement = document.createElement('div');
 /**
  * Renders LoginDialog into virtual node to skip maintaining container
  */
 function renderLoginDialog(props) {
-    render(<LoginDialog {...props}/>, containerElement);
+    render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+        <LoginDialog {...props}/>
+      </ControlsHeightContext.Provider>), containerElement);
 }
 function noop() { }
 export default function showAuthDialog(props = { onCancel: noop }) {

package/components/markdown/code.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { CodeProps } from 'react-markdown/lib/ast-to-react';
 export interface MarkdownCodeProps extends CodeProps {
     language?: string;
 }
-declare const MarkdownCode: ({ children, language, inline, className }: MarkdownCodeProps) => JSX.Element;
+declare const MarkdownCode: ({ children, language, inline, className }: MarkdownCodeProps) => React.JSX.Element;
 export default MarkdownCode;

package/components/markdown/heading.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import PropTypes from 'prop-types';
 import { HeadingProps } from 'react-markdown/lib/ast-to-react';
 declare const MarkdownHeading: {
-    ({ level, children }: HeadingProps): JSX.Element;
+    ({ level, children }: HeadingProps): React.JSX.Element;
     propTypes: {
         level: PropTypes.Validator<number>;
         children: PropTypes.Validator<any[]>;

package/components/markdown/link.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import PropTypes from 'prop-types';
 import { ReactMarkdownProps } from 'react-markdown/lib/complex-types';
 declare const MarkdownLink: {
-    ({ href, title, children }: JSX.IntrinsicElements['a'] & ReactMarkdownProps): JSX.Element;
+    ({ href, title, children }: JSX.IntrinsicElements['a'] & ReactMarkdownProps): React.JSX.Element;
     propTypes: {
         href: PropTypes.Requireable<string>;
         title: PropTypes.Requireable<string>;

package/components/markdown/markdown.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { Options } from 'react-markdown';
 export interface BaseMarkdownProps {
     inline?: boolean | null | undefined;
@@ -9,7 +9,7 @@ export type MarkdownProps = Options & BaseMarkdownProps;
   * @name Markdown
 */
 export default class Markdown extends PureComponent<MarkdownProps> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 declare const md: (strings: TemplateStringsArray, ...interpolations: unknown[]) => void;
 export { md };

package/components/message/message.d.ts

@@ -1,4 +1,4 @@
-import { Component, ReactNode } from 'react';
+import React, { Component, ReactNode } from 'react';
 import Popup, { PopupAttrs } from '../popup/popup';
 import { Directions } from '../popup/popup.consts';
 import { IconType } from '../icon/icon';
@@ -11,7 +11,7 @@ export interface MessageTranslations {
 export interface MessageProps {
     icon: string | IconType | null;
     directions: readonly Directions[];
-    translations: MessageTranslations;
+    translations?: MessageTranslations | null | undefined;
     theme: Theme;
     title?: string | null | undefined;
     children?: ReactNode;
@@ -34,10 +34,6 @@ export default class Message extends Component<MessageProps> {
     static defaultProps: {
         icon: string;
         directions: Directions[];
-        translations: {
-            gotIt: string;
-            dismiss: string;
-        };
         theme: Theme;
     };
     state: MessageState;
@@ -53,7 +49,7 @@ export default class Message extends Component<MessageProps> {
     node?: HTMLElement | null;
     popupRef: (el: Popup | null) => void;
     getTailOffset(): number;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type MessageAttrs = JSX.LibraryManagedAttributes<typeof Message, MessageProps>;
 export {};

package/components/message/message.js

@@ -6,6 +6,7 @@ import Popup from '../popup/popup';
 import { Directions } from '../popup/popup.consts';
 import Icon from '../icon/icon';
 import Button from '../button/button';
+import { I18nContext } from '../i18n/i18n-context';
 import Theme, { ThemeProvider, WithThemeClasses } from '../global/theme';
 import darkStyles from '../global/variables_dark.css';
 import styles from './message.css';
@@ -52,10 +53,6 @@ export default class Message extends Component {
             Directions.RIGHT_TOP, Directions.RIGHT_BOTTOM, Directions.RIGHT_CENTER,
             Directions.LEFT_TOP, Directions.LEFT_BOTTOM, Directions.LEFT_CENTER
         ],
-        translations: {
-            gotIt: 'Got it',
-            dismiss: 'Dismiss'
-        },
         theme: Theme.DARK
     };
     state = {};
@@ -96,19 +93,23 @@ export default class Message extends Component {
             ? [this.props.direction]
             : this.props.directions;
         const { direction } = this.state;
-        return (<WithThemeClasses theme={theme}>
-        {themeClasses => (<Popup ref={this.popupRef} hidden={false} directions={popupDirections} className={classNames(classes, themeClasses)} offset={UNIT * 2} onDirectionChange={this._onDirectionChange} {...popupProps}>
-            <ThemeProvider theme={theme} passToPopups>
-              {direction && (<div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>)}
+        return (<I18nContext.Consumer>
+        {({ translate }) => (<WithThemeClasses theme={theme}>
+            {themeClasses => (<Popup ref={this.popupRef} hidden={false} directions={popupDirections} className={classNames(classes, themeClasses)} offset={UNIT * 2} onDirectionChange={this._onDirectionChange} {...popupProps}>
+                <ThemeProvider theme={theme} passToPopups>
+                  {direction && (<div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>)}
 
-              {icon && <Icon className={styles.icon} glyph={icon}/>}
-              {title && <h1 data-test="rgMessageTitle" className={styles.title}>{title}</h1>}
-              {children && <div className={styles.description}>{children}</div>}
-              {(onClose || buttonProps) && (<Button className={styles.button} onClick={onClose} primary {...buttonProps}>{translations.gotIt}</Button>)}
-              {onDismiss && <Button onClick={onDismiss} text>{translations.dismiss}</Button>}
-            </ThemeProvider>
-          </Popup>)}
-      </WithThemeClasses>);
+                  {icon && <Icon className={styles.icon} glyph={icon}/>}
+                  {title && <h1 data-test="rgMessageTitle" className={styles.title}>{title}</h1>}
+                  {children && <div className={styles.description}>{children}</div>}
+                  {(onClose || buttonProps) && (<Button className={styles.button} onClick={onClose} primary {...buttonProps}>{translations?.gotIt ?? translate('gotIt')}</Button>)}
+                  {onDismiss && (<Button onClick={onDismiss} text>
+                      {translations?.dismiss ?? translate('dismiss')}
+                    </Button>)}
+                </ThemeProvider>
+              </Popup>)}
+          </WithThemeClasses>)}
+      </I18nContext.Consumer>);
     }
 }
 Message.propTypes = {

package/components/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/components/pager/pager.js

@@ -13,6 +13,7 @@ import Select from '../select/select';
 import memoize from '../global/memoize';
 import Link from '../link/link';
 import Icon from '../icon/icon';
+import { I18nContext } from '../i18n/i18n-context';
 import style from './pager.css';
 export default class Pager extends PureComponent {
     static defaultProps = {
@@ -24,23 +25,18 @@ export default class Pager extends PureComponent {
         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: () => { }
     };
+    static contextType = I18nContext;
     getSelectOptions() {
         const { pageSize, pageSizes } = this.props;
+        const { translate } = this.context;
         const data = pageSizes.map(size => ({
             key: size,
-            label: `${size} ${this.props.translations.perPage}`
+            label: `${size} ${this.props.translations?.perPage ?? translate('perPage')}`
         }));
         const selected = data.find(it => it.key === pageSize);
         return { selected, data };
@@ -103,13 +99,14 @@ export default class Pager extends PureComponent {
         </div>);
     }
     getPagerLinks() {
+        const { translate } = this.context;
         const prevLinkAvailable = this.props.currentPage !== 1;
         const nextLinkAvailable = this.props.openTotal ||
             this.props.currentPage !== this.getTotalPages();
         const nextIcon = (<Icon glyph={chevronRightIcon} key="icon"/>);
         const prevIcon = (<Icon glyph={chevronLeftIcon} key="icon"/>);
-        const prevText = this.props.translations.previousPage;
-        const nextText = this.props.translations.nextPage;
+        const prevText = this.props.translations?.previousPage ?? translate('previousPage');
+        const nextText = this.props.translations?.nextPage ?? translate('nextPage');
         const nextLinkContent = (WrapText) => [
             <span key="text"><WrapText>{nextText}</WrapText></span>,
             nextIcon
@@ -148,13 +145,13 @@ export default class Pager extends PureComponent {
     getPagerContent() {
         const { currentPage, visiblePagesLimit } = this.props;
         const totalPages = this.getTotalPages();
+        const { translate } = this.context;
         if (totalPages < this.props.currentPage) {
             this.props.onPageChange?.(totalPages);
         }
         let start = 1;
         let end = totalPages;
-        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-        if (totalPages >= visiblePagesLimit + 6) {
+        if (totalPages >= visiblePagesLimit) {
             const leftHalfFrameSize = Math.ceil(visiblePagesLimit / 2) - 1;
             const rightHalfFrameSize = visiblePagesLimit - leftHalfFrameSize - 1;
             start = currentPage - leftHalfFrameSize;
@@ -183,7 +180,8 @@ export default class Pager extends PureComponent {
         {this.getPagerLinks()}
 
         <ButtonToolbar>
-          {start > 1 && this.getButton(1, this.props.translations.firstPage)}
+          {start > 1 &&
+                this.getButton(1, this.props.translations?.firstPage ?? translate('firstPage'))}
 
           <ButtonGroup>
             {start > 1 && this.getButton(start - 1, '...')}
@@ -195,7 +193,7 @@ export default class Pager extends PureComponent {
             {end === totalPages && this.props.openTotal && (<Button href={this.generateHref(end + 1)} disabled={this.props.loader} {...this.getClickProps(this.handleLoadMore(end + 1))}>{'...'}</Button>)}
           </ButtonGroup>
 
-          {lastPageButtonAvailable && this.getButton(this.props.openTotal ? -1 : totalPages, this.props.translations.lastPage)}
+          {lastPageButtonAvailable && this.getButton(this.props.openTotal ? -1 : totalPages, this.props.translations?.lastPage ?? translate('lastPage'))}
         </ButtonToolbar>
 
         {this.getPageSizeSelector()}

package/components/panel/panel.css

@@ -16,7 +16,7 @@
     display: none;
   }
 
-  & button {
+  & > button:not(:last-child) {
     margin-right: unit;
   }
 }

package/components/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;
 }