@jetbrains/ring-ui 5.0.137 → 5.0.138

package/dist/pager/pager.js

@@ -11,6 +11,7 @@ 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 { I18nContext } from '../i18n/i18n-context.js';
 import '@jetbrains/icons/chevron-10px';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';
@@ -72,6 +73,7 @@ import '../list/consts.js';
 import '../input/input.js';
 import '../_helpers/input.js';
 import '../input/input-label.js';
+import '../i18n/i18n.js';
 import '../global/rerender-hoc.js';
 import '../global/react-render-adapter.js';
 import '../global/fuzzy-highlight.js';
@@ -98,27 +100,25 @@ 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 data = pageSizes.map(size => ({
-      key: size,
-      label: `${size} ${this.props.translations.perPage}`
-    }));
+    const messages = this.context;
+    const data = pageSizes.map(size => {
+      var _this$props$translati;
+      return {
+        key: size,
+        label: `${size} ${((_this$props$translati = this.props.translations) !== null && _this$props$translati !== void 0 ? _this$props$translati : messages).perPage}`
+      };
+    });
     const selected = data.find(it => it.key === pageSize);
     return {
       selected,
@@ -207,6 +207,8 @@ class Pager extends PureComponent {
     }));
   }
   getPagerLinks() {
+    var _this$props$translati2, _this$props$translati3;
+    const messages = this.context;
     const prevLinkAvailable = this.props.currentPage !== 1;
     const nextLinkAvailable = this.props.openTotal || this.props.currentPage !== this.getTotalPages();
     const nextIcon = /*#__PURE__*/React.createElement(Icon, {
@@ -217,8 +219,8 @@ class Pager extends PureComponent {
       glyph: chevronLeftIcon,
       key: "icon"
     });
-    const prevText = this.props.translations.previousPage;
-    const nextText = this.props.translations.nextPage;
+    const prevText = ((_this$props$translati2 = this.props.translations) !== null && _this$props$translati2 !== void 0 ? _this$props$translati2 : messages).previousPage;
+    const nextText = ((_this$props$translati3 = this.props.translations) !== null && _this$props$translati3 !== void 0 ? _this$props$translati3 : messages).nextPage;
     const nextLinkContent = WrapText => [/*#__PURE__*/React.createElement("span", {
       key: "text"
     }, /*#__PURE__*/React.createElement(WrapText, null, nextText)), nextIcon];
@@ -257,11 +259,13 @@ class Pager extends PureComponent {
     return this.props.hrefFunc(page, pageSize);
   }
   getPagerContent() {
+    var _this$props$translati4, _this$props$translati5;
     const {
       currentPage,
       visiblePagesLimit
     } = this.props;
     const totalPages = this.getTotalPages();
+    const messages = this.context;
     if (totalPages < this.props.currentPage) {
       this.props.onPageChange?.(totalPages);
     }
@@ -291,10 +295,10 @@ class Pager extends PureComponent {
       buttons.push(this.getButton(i, i, i, i === currentPage));
     }
     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({
+    return /*#__PURE__*/React.createElement("div", null, this.getPagerLinks(), /*#__PURE__*/React.createElement(ButtonToolbar, null, start > 1 && this.getButton(1, ((_this$props$translati4 = this.props.translations) !== null && _this$props$translati4 !== void 0 ? _this$props$translati4 : messages).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());
+    }, this.getClickProps(this.handleLoadMore(end + 1))), '...')), lastPageButtonAvailable && this.getButton(this.props.openTotal ? -1 : totalPages, ((_this$props$translati5 = this.props.translations) !== null && _this$props$translati5 !== void 0 ? _this$props$translati5 : messages).lastPage)), this.getPageSizeSelector());
   }
   render() {
     const classes = classNames(modules_1a5f0d42.pager, this.props.className);

package/dist/pager-ng/pager-ng.js

@@ -76,6 +76,8 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 import '../input/input.js';
+import '../i18n/i18n-context.js';
+import '../i18n/i18n.js';
 import '../_helpers/input.js';
 import '../input/input-label.js';
 import '../global/rerender-hoc.js';

package/dist/permissions-ng/permissions-ng.js

@@ -57,6 +57,7 @@ import '../auth/auth__core.js';
 import '../global/listeners.js';
 import '../http/http.js';
 import '../global/promise-with-timeout.js';
+import '../i18n/i18n.js';
 import '../auth/storage.js';
 import '../storage/storage.js';
 import '../storage/storage__local.js';

package/dist/query-assist/query-assist.d.ts

@@ -40,7 +40,7 @@ export interface QueryAssistProps {
     onApplySuggestion: (suggestion: QueryAssistSuggestion, change: QueryAssistChange) => void;
     onClear: () => void;
     onFocusChange: (change: FocusChange) => void;
-    translations: QueryAssistTranslations;
+    translations?: QueryAssistTranslations | null | undefined;
     autoOpen?: boolean | null | undefined | 'force';
     caret?: number | null | undefined;
     clear?: boolean | null | undefined;
@@ -226,10 +226,6 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         onClear: typeof noop;
         onFocusChange: typeof noop;
         size: Size;
-        translations: {
-            searchTitle: string;
-            clearTitle: string;
-        };
     };
     static getDerivedStateFromProps({ query }: QueryAssistProps, { prevQuery }: QueryAssistState): Partial<QueryAssistState>;
     constructor(props: QueryAssistProps);

package/dist/query-assist/query-assist.js

@@ -19,6 +19,7 @@ import Icon from '../icon/icon.js';
 import { ControlsHeightContext, ControlsHeight } from '../global/controls-height.js';
 import { Size } from '../input/input.js';
 import { m as modules_88cfaf40 } from '../_helpers/input.js';
+import { I18nContext } from '../i18n/i18n-context.js';
 import { Q as QueryAssistSuggestions, m as modules_da7ab055 } from '../_helpers/query-assist__suggestions.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'react-dom/server';
@@ -71,6 +72,7 @@ import '../global/react-render-adapter.js';
 import '@jetbrains/icons/chevron-10px';
 import '../_helpers/button__classes.js';
 import '../input/input-label.js';
+import '../i18n/i18n.js';
 
 const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING + PopupMenu.PopupProps.Dimension.BORDER_WIDTH;
 const ngModelStateField = 'query';
@@ -216,11 +218,7 @@ class QueryAssist extends Component {
     onApplySuggestion: noop,
     onClear: noop,
     onFocusChange: noop,
-    size: Size.L,
-    translations: {
-      searchTitle: 'Search',
-      clearTitle: 'Clear search input'
-    }
+    size: Size.L
   };
   static getDerivedStateFromProps(_ref, _ref2) {
     let {
@@ -872,14 +870,18 @@ class QueryAssist extends Component {
     const actions = [...(this.props.actions || [])];
     const renderClear = this.props.clear && !!this.state.query;
     if (renderClear) {
-      actions.push( /*#__PURE__*/React.createElement(Button, {
-        icon: closeIcon,
-        key: 'clearAction',
-        className: modules_da7ab055.clear,
-        title: this.props.translations.clearTitle,
-        ref: this.clearRef,
-        onClick: this.clearQuery,
-        "data-test": "query-assist-clear-icon"
+      actions.push( /*#__PURE__*/React.createElement(I18nContext.Consumer, {
+        key: 'clearAction'
+      }, messages => {
+        var _this$props$translati;
+        return /*#__PURE__*/React.createElement(Button, {
+          icon: closeIcon,
+          className: modules_da7ab055.clear,
+          title: ((_this$props$translati = this.props.translations) !== null && _this$props$translati !== void 0 ? _this$props$translati : messages).clearTitle,
+          ref: this.clearRef,
+          onClick: this.clearQuery,
+          "data-test": "query-assist-clear-icon"
+        });
       }));
     }
     return actions;
@@ -891,7 +893,8 @@ class QueryAssist extends Component {
       className,
       useCustomItemRender,
       huge,
-      size
+      size,
+      translations
     } = this.props;
     const renderPlaceholder = !!this.props.placeholder && this.state.placeholderEnabled;
     const renderLoader = this.props.loader !== false && this.state.loading;
@@ -916,7 +919,7 @@ class QueryAssist extends Component {
     });
     return /*#__PURE__*/React.createElement(ControlsHeightContext.Provider, {
       value: ControlsHeight.M
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(I18nContext.Consumer, null, messages => /*#__PURE__*/React.createElement("div", {
       "data-test": joinDataTestAttributes('ring-query-assist', dataTest),
       className: containerClasses,
       role: "presentation",
@@ -927,7 +930,7 @@ class QueryAssist extends Component {
     }), renderGlass && !huge && /*#__PURE__*/React.createElement(Icon, {
       glyph: searchIcon,
       className: modules_da7ab055.icon,
-      title: this.props.translations.searchTitle,
+      title: (translations !== null && translations !== void 0 ? translations : messages).searchTitle,
       ref: this.glassRef,
       "data-test": "query-assist-search-icon"
     }), renderLoader && /*#__PURE__*/React.createElement("div", {
@@ -937,7 +940,7 @@ class QueryAssist extends Component {
       }),
       ref: this.loaderRef
     }, /*#__PURE__*/React.createElement(LoaderInline, null)), /*#__PURE__*/React.createElement(ContentEditable, {
-      "aria-label": this.props.translations.searchTitle,
+      "aria-label": (translations !== null && translations !== void 0 ? translations : messages).searchTitle,
       className: inputClasses,
       "data-test": "ring-query-assist-input",
       inputRef: this.inputRef,
@@ -990,11 +993,11 @@ class QueryAssist extends Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       glyph: searchIcon,
       className: modules_da7ab055.rightSearchIcon,
-      title: this.props.translations.searchTitle,
+      title: (translations !== null && translations !== void 0 ? translations : messages).searchTitle,
       onClick: this.handleApply,
       ref: this.glassRef,
       "data-test": "query-assist-search-icon"
-    }))));
+    })))));
   }
 }
 const RerenderableQueryAssist = rerenderHOC(QueryAssist);

package/dist/query-assist-ng/query-assist-ng.js

@@ -73,6 +73,8 @@ import '@jetbrains/icons/chevron-10px';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../input/input.js';
+import '../i18n/i18n-context.js';
+import '../i18n/i18n.js';
 import '../_helpers/input.js';
 import '../input/input-label.js';
 import '../_helpers/query-assist__suggestions.js';

package/dist/select/select.d.ts

@@ -54,8 +54,8 @@ export interface BaseSelectProps<T = unknown> {
     clear: boolean;
     loading: boolean;
     disabled: boolean;
-    loadingMessage: string;
-    notFoundMessage: string;
+    loadingMessage?: string;
+    notFoundMessage?: string;
     type: Type;
     size: Size;
     hideSelected: boolean;
@@ -155,8 +155,6 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
         clear: boolean;
         loading: boolean;
         disabled: boolean;
-        loadingMessage: string;
-        notFoundMessage: string;
         type: Type;
         size: Size;
         targetElement: null;

package/dist/select/select.js

@@ -18,6 +18,7 @@ import getUID from '../global/get-uid.js';
 import rerenderHOC from '../global/rerender-hoc.js';
 import fuzzyHighlight from '../global/fuzzy-highlight.js';
 import memoize from '../global/memoize.js';
+import { I18nContext } from '../i18n/i18n-context.js';
 import { isArray } from '../global/typescript-utils.js';
 import { ControlsHeightContext, ControlsHeight } from '../global/controls-height.js';
 import { m as modules_88cfaf40 } from '../_helpers/input.js';
@@ -68,6 +69,7 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 import '../global/react-render-adapter.js';
+import '../i18n/i18n.js';
 import '@jetbrains/icons/search';
 import '../loader-inline/loader-inline.js';
 import '../_helpers/loader-inline.js';
@@ -238,8 +240,6 @@ class Select extends Component {
     clear: false,
     loading: false,
     disabled: false,
-    loadingMessage: 'Loading...',
-    notFoundMessage: 'No options found',
     type: Type.BUTTON,
     size: Size.M,
     targetElement: null,
@@ -511,49 +511,53 @@ class Select extends Component {
       shownData
     } = this.state;
     const _shownData = this._prependResetOption(shownData);
-    let message;
-    if (this.props.loading) {
-      message = this.props.loadingMessage;
-    } else if (!shownData.length) {
-      message = this.props.notFoundMessage;
-    }
-    return /*#__PURE__*/React.createElement(SelectPopup, {
-      data: _shownData,
-      message: message,
-      toolbar: showPopup && this.getToolbar(),
-      loading: this.props.loading,
-      activeIndex: this.state.selectedIndex,
-      hidden: !showPopup,
-      ref: this.popupRef,
-      maxHeight: this.props.maxHeight,
-      minWidth: this.props.minWidth,
-      directions: this.props.directions,
-      className: this.props.popupClassName,
-      style: this.props.popupStyle,
-      top: this.props.top,
-      left: this.props.left,
-      filter: this.isInputMode() ? false : this.props.filter // disable popup filter in INPUT mode
-      ,
-      multiple: this.props.multiple,
-      filterValue: this.state.filterValue,
-      anchorElement: anchorElement,
-      onCloseAttempt: this._onCloseAttempt,
-      onSelect: this._listSelectHandler,
-      onSelectAll: this._listSelectAllHandler,
-      onFilter: this._filterChangeHandler,
-      onClear: this.clearFilter,
-      onLoadMore: this.props.onLoadMore,
-      isInputMode: this.isInputMode(),
-      selected: this.state.selected,
-      tags: this.props.tags,
-      compact: this.props.compact,
-      renderOptimization: this.props.renderOptimization,
-      ringPopupTarget: this.props.ringPopupTarget,
-      disableMoveOverflow: this.props.disableMoveOverflow,
-      disableScrollToActive: this.props.disableScrollToActive,
-      dir: this.props.dir,
-      onEmptyPopupEnter: this.onEmptyPopupEnter,
-      listId: this.listId
+    return /*#__PURE__*/React.createElement(I18nContext.Consumer, null, messages => {
+      let message;
+      if (this.props.loading) {
+        var _this$props$loadingMe;
+        message = (_this$props$loadingMe = this.props.loadingMessage) !== null && _this$props$loadingMe !== void 0 ? _this$props$loadingMe : messages.loading;
+      } else if (!shownData.length) {
+        var _this$props$notFoundM;
+        message = (_this$props$notFoundM = this.props.notFoundMessage) !== null && _this$props$notFoundM !== void 0 ? _this$props$notFoundM : messages.noOptionsFound;
+      }
+      return /*#__PURE__*/React.createElement(SelectPopup, {
+        data: _shownData,
+        message: message,
+        toolbar: showPopup && this.getToolbar(),
+        loading: this.props.loading,
+        activeIndex: this.state.selectedIndex,
+        hidden: !showPopup,
+        ref: this.popupRef,
+        maxHeight: this.props.maxHeight,
+        minWidth: this.props.minWidth,
+        directions: this.props.directions,
+        className: this.props.popupClassName,
+        style: this.props.popupStyle,
+        top: this.props.top,
+        left: this.props.left,
+        filter: this.isInputMode() ? false : this.props.filter // disable popup filter in INPUT mode
+        ,
+        multiple: this.props.multiple,
+        filterValue: this.state.filterValue,
+        anchorElement: anchorElement,
+        onCloseAttempt: this._onCloseAttempt,
+        onSelect: this._listSelectHandler,
+        onSelectAll: this._listSelectAllHandler,
+        onFilter: this._filterChangeHandler,
+        onClear: this.clearFilter,
+        onLoadMore: this.props.onLoadMore,
+        isInputMode: this.isInputMode(),
+        selected: this.state.selected,
+        tags: this.props.tags,
+        compact: this.props.compact,
+        renderOptimization: this.props.renderOptimization,
+        ringPopupTarget: this.props.ringPopupTarget,
+        disableMoveOverflow: this.props.disableMoveOverflow,
+        disableScrollToActive: this.props.disableScrollToActive,
+        dir: this.props.dir,
+        onEmptyPopupEnter: this.onEmptyPopupEnter,
+        listId: this.listId
+      });
     });
   }
   _showPopup() {

package/dist/select/select__filter.d.ts

@@ -7,7 +7,6 @@ type SelectFilterProps = InputAttrs & {
 };
 export default class SelectFilter extends Component<SelectFilterProps> {
     static defaultProps: {
-        placeholder: string;
         inputRef: typeof noop;
     };
     componentWillUnmount(): void;

package/dist/select/select__filter.js

@@ -5,6 +5,7 @@ import 'classnames';
 import '../input/input.js';
 import '../global/sniffer.js';
 import '../list/list.js';
+import '../i18n/i18n-context.js';
 export { S as default } from '../_helpers/select__filter.js';
 import '@jetbrains/icons/close-12px';
 import '../global/prop-types.js';
@@ -23,6 +24,7 @@ import '../global/get-uid.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
 import '../input/input-label.js';
+import '../i18n/i18n.js';
 import 'sniffr';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';

package/dist/select/select__popup.js

@@ -66,6 +66,8 @@ import '@jetbrains/icons/close-12px';
 import '@jetbrains/icons/chevron-10px';
 import '../_helpers/button__classes.js';
 import '../input/input.js';
+import '../i18n/i18n-context.js';
+import '../i18n/i18n.js';
 import '../_helpers/input.js';
 import '../input/input-label.js';
 

package/dist/select-ng/select-ng.js

@@ -68,6 +68,8 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 import '../input/input.js';
+import '../i18n/i18n-context.js';
+import '../i18n/i18n.js';
 import '../_helpers/input.js';
 import '../input/input-label.js';
 import '../global/rerender-hoc.js';

package/dist/select-ng/select-ng__lazy.js

@@ -65,6 +65,8 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 import '../input/input.js';
+import '../i18n/i18n-context.js';
+import '../i18n/i18n.js';
 import '../_helpers/input.js';
 import '../input/input-label.js';
 import '../global/rerender-hoc.js';