@jetbrains/ring-ui 5.0.138 → 5.0.139

package/components/auth/auth__core.js

@@ -2,7 +2,7 @@ import { fixUrl, getAbsoluteBaseURL } from '../global/url';
 import Listeners from '../global/listeners';
 import HTTP from '../http/http';
 import promiseWithTimeout from '../global/promise-with-timeout';
-import { getTranslations } from '../i18n/i18n';
+import { getTranslations, getTranslationsWithFallback, translate } from '../i18n/i18n';
 import AuthStorage from './storage';
 import AuthResponseParser from './response-parser';
 import AuthRequestBuilder from './request-builder';
@@ -120,7 +120,7 @@ class Auth {
         }
         this._backgroundFlow = new BackgroundFlow(this._requestBuilder, this._storage, backgroundRefreshTimeout);
         if (this.config.EmbeddedLoginFlow) {
-            this._embeddedFlow = new this.config.EmbeddedLoginFlow(this._requestBuilder, this._storage, this.config.translations ?? getTranslations());
+            this._embeddedFlow = new this.config.EmbeddedLoginFlow(this._requestBuilder, this._storage, this.config.translations ?? getTranslationsWithFallback());
         }
         const API_BASE = this.config.serverUri + Auth.API_PATH;
         const fetchConfig = config.fetchCredentials
@@ -540,7 +540,6 @@ class Auth {
     }
     _showUserChangedDialog({ newUser, onApply, onPostpone }) {
         const { translations } = this.config;
-        const actualTranslations = translations ?? getTranslations();
         this._createInitDeferred();
         const done = () => {
             this._initDeferred?.resolve?.();
@@ -549,14 +548,14 @@ class Auth {
         };
         const hide = this._authDialogService?.({
             ...this._service,
-            title: actualTranslations.youHaveLoggedInAs.
+            title: translations?.youHaveLoggedInAs ?? translate('youHaveLoggedInAs').
                 replace('%userName%', newUser.name ?? '').
                 replace('{{userName}}', newUser.name ?? ''),
-            loginCaption: actualTranslations.login,
-            loginToCaption: actualTranslations.loginTo,
-            confirmLabel: actualTranslations.applyChange,
-            tryAgainLabel: actualTranslations.tryAgainLabel,
-            cancelLabel: actualTranslations.postpone,
+            loginCaption: translations?.login ?? translate('login'),
+            loginToCaption: translations?.loginTo ?? translate('loginTo'),
+            confirmLabel: translations?.applyChange ?? translate('applyChange'),
+            tryAgainLabel: translations?.tryAgainLabel ?? translate('tryAgainLabel'),
+            cancelLabel: translations?.postpone ?? translate('postpone'),
             onConfirm: () => {
                 done();
                 onApply();
@@ -617,7 +616,8 @@ class Auth {
                 reject(new Error('Auth(@jetbrains/ring-ui): postponed by user'));
             };
             const hide = onBackendDown({
-                onCheckAgain, onPostpone, backendError, translations: translations ?? getTranslations()
+                onCheckAgain, onPostpone, backendError,
+                translations: translations ?? getTranslationsWithFallback()
             });
             window.addEventListener('online', onCheckAgain);
             function networkWatchdog() {

package/components/header/profile.d.ts

@@ -67,59 +67,8 @@ export default class Profile extends PureComponent<ProfileProps> {
         renderGuest: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: ProfileProps;
-    static contextType: React.Context<{
-        login: string;
-        logout: string;
-        loginTo: string;
-        ok: string;
-        cancel: string;
-        tryAgainLabel: string;
-        postpone: string;
-        youHaveLoggedInAs: string;
-        applyChange: string;
-        backendIsNotAvailable: string;
-        checkAgain: string;
-        nothingHappensLink: string;
-        errorMessage: string;
-        applyChangedUser: string;
-        profile: string;
-        switchUser: string;
-        addFirstDate: string;
-        addSecondDate: string;
-        addTime: string;
-        selectName: string;
-        setDate: string;
-        setDateTime: string;
-        setPeriod: string;
-        clear: string;
-        gotIt: string;
-        dismiss: string;
-        perPage: string;
-        firstPage: string;
-        lastPage: string;
-        nextPage: string;
-        previousPage: string;
-        searchTitle: string;
-        clearTitle: string;
-        userAgreement: string;
-        accept: string;
-        decline: string;
-        close: string;
-        scrollToAccept: string;
-        remindLater: string;
-        filterItems: string;
-        selectOption: string;
-        progress: string;
-        loading: string;
-        noOptionsFound: string;
-        banned: string;
-        online: string;
-        offline: string;
-        copyToClipboard: string;
-        copiedToClipboard: string;
-        copingToClipboardError: string;
-        unverified: string;
-    }>;
+    static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
+    context: React.ContextType<typeof Profile.contextType>;
     static Size: typeof Size;
     render(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
 }

package/components/header/profile.js

@@ -51,9 +51,9 @@ class Profile extends PureComponent {
         renderPopupItems: items => items,
         size: Size.Size32,
         renderGuest: ({ loading, onLogin, className, translations }) => (<I18nContext.Consumer>
-        {messages => (<div className={classNames(styles.profileEmpty, className)}>
+        {({ translate }) => (<div className={classNames(styles.profileEmpty, className)}>
             <Button primary data-test="ring-header-login-button" disabled={loading} loader={loading} onClick={onLogin}>
-              {translations?.login ?? messages.login}
+              {translations?.login ?? translate('login')}
             </Button>
           </div>)}
       </I18nContext.Consumer>)
@@ -62,7 +62,7 @@ class Profile extends PureComponent {
     static Size = Size;
     render() {
         const { className, closeOnSelect, hasUpdates, onLogout, user, profileUrl, LinkComponent, onSwitchUser, renderPopupItems, onRevertPostponement, showApplyChangedUser, showLogIn, showLogOut, showSwitchUser, renderGuest, translations, size, round, loading, onLogin, ...props } = this.props;
-        const messages = this.context;
+        const { translate } = this.context;
         if (!user) {
             return (<div {...props} className={classNames(styles.profileEmpty, className)}>
           <Avatar size={size} round={round}/>
@@ -80,32 +80,32 @@ class Profile extends PureComponent {
         const items = [
             showApplyChangedUser && {
                 rgItemType,
-                label: translations?.applyChangedUser ?? messages.applyChangedUser,
+                label: translations?.applyChangedUser ?? translate('applyChangedUser'),
                 className: styles.profileMenuItem,
                 onClick: onRevertPostponement
             },
             showLogIn && {
                 rgItemType,
-                label: translations?.login ?? messages.login,
+                label: translations?.login ?? translate('login'),
                 className: styles.profileMenuItem,
                 onClick: onRevertPostponement
             },
             {
                 rgItemType: PopupMenu.ListProps.Type.LINK,
-                label: translations?.profile ?? messages.profile,
+                label: translations?.profile ?? translate('profile'),
                 target: '_self',
                 href: profileUrl,
                 LinkComponent
             },
             showSwitchUser && {
                 rgItemType,
-                label: translations?.switchUser ?? messages.switchUser,
+                label: translations?.switchUser ?? translate('switchUser'),
                 className: styles.profileMenuItem,
                 onClick: onSwitchUser
             },
             showLogOut && {
                 rgItemType,
-                label: translations?.logout ?? messages.logout,
+                label: translations?.logout ?? translate('logout'),
                 onClick: onLogout
             }
         ].filter(isTruthy);

package/components/i18n/README.md

@@ -1,3 +1,46 @@
 This is localisation layer, that allows to translate the app into different languages.
 
 All messages should be stored in a messages.json, using that format https://www.i18next.com/misc/json-format#i18next-json-v4
+
+### How to use
+
+1. Using your project i18n tooling, construct an object with localised messages, like:
+```
+// You can use https://ttag.js.org/ for example:
+const localised = {
+  login: t`Log in`,
+  ...
+}
+```
+
+2. Pass it to i18n singleton, using `setTranslations`. That would provide localisation to non-react components, like Auth.
+
+```
+// Your messages object should have localised strings at that moment
+const localised = {
+  login: 'Inloggen',
+  ...
+}
+
+setTranslations(localised);
+```
+
+3. Add I18nContextHolder into your root React tree. If you replace "localised" object with another one, consumers would be updated automatically.  
+
+```
+  <I18nContextHolder messages={localised}>
+    <App />
+  </I18nContextHolder>
+```  
+
+
+
+### Utilities
+
+There is some ways to automate strings extraction from messages.json. You can do:
+
+```
+npx i18next-conv -s messages.json -t messages.pot -l en --ctxSeparator "|" --compatibilityJSON v4
+```
+
+And get a .pot file, which you can merge with your other sources

package/components/i18n/i18n-context.d.ts

@@ -1,54 +1,13 @@
 import React from 'react';
-export declare const I18nContext: React.Context<{
-    login: string;
-    logout: string;
-    loginTo: string;
-    ok: string;
-    cancel: string;
-    tryAgainLabel: string;
-    postpone: string;
-    youHaveLoggedInAs: string;
-    applyChange: string;
-    backendIsNotAvailable: string;
-    checkAgain: string;
-    nothingHappensLink: string;
-    errorMessage: string;
-    applyChangedUser: string;
-    profile: string;
-    switchUser: string;
-    addFirstDate: string;
-    addSecondDate: string;
-    addTime: string;
-    selectName: string;
-    setDate: string;
-    setDateTime: string;
-    setPeriod: string;
-    clear: string;
-    gotIt: string;
-    dismiss: string;
-    perPage: string;
-    firstPage: string;
-    lastPage: string;
-    nextPage: string;
-    previousPage: string;
-    searchTitle: string;
-    clearTitle: string;
-    userAgreement: string;
-    accept: string;
-    decline: string;
-    close: string;
-    scrollToAccept: string;
-    remindLater: string;
-    filterItems: string;
-    selectOption: string;
-    progress: string;
-    loading: string;
-    noOptionsFound: string;
-    banned: string;
-    online: string;
-    offline: string;
-    copyToClipboard: string;
-    copiedToClipboard: string;
-    copingToClipboardError: string;
-    unverified: string;
-}>;
+import { type Messages } from './i18n';
+export interface I18nContextProps {
+    translate(key: keyof Messages): string;
+    messages: Messages;
+}
+export declare const I18nContext: React.Context<I18nContextProps>;
+interface I18nContextHolderProps {
+    messages: Messages;
+    children?: React.ReactNode;
+}
+export declare const I18nContextHolder: React.FC<I18nContextHolderProps>;
+export {};

package/components/i18n/i18n-context.js

@@ -1,3 +1,14 @@
-import React from 'react';
-import { getTranslations } from './i18n';
-export const I18nContext = React.createContext(getTranslations());
+import React, { useEffect } from 'react';
+import { getTranslations, setTranslations, translate } from './i18n';
+export const I18nContext = React.createContext({
+    messages: getTranslations(),
+    translate
+});
+export const I18nContextHolder = ({ children, messages }) => {
+    useEffect(() => {
+        setTranslations(messages);
+    }, [messages]);
+    return (<I18nContext.Provider value={{ messages, translate }}>
+      {children}
+    </I18nContext.Provider>);
+};

package/components/i18n/i18n.d.ts

@@ -1,7 +1,8 @@
 import defaultMessages from './messages.json';
-export type Messages = typeof defaultMessages;
+export type MessagesStrict = typeof defaultMessages;
+export type Messages = Partial<MessagesStrict>;
 export declare function setTranslations(newMessages: Messages): void;
-export declare function getTranslations(): {
+export declare function getTranslations(): Partial<{
     login: string;
     logout: string;
     loginTo: string;
@@ -53,4 +54,6 @@ export declare function getTranslations(): {
     copiedToClipboard: string;
     copingToClipboardError: string;
     unverified: string;
-};
+}>;
+export declare function getTranslationsWithFallback(): MessagesStrict;
+export declare function translate(key: keyof MessagesStrict): string;

package/components/i18n/i18n.js

@@ -1,8 +1,26 @@
 import defaultMessages from './messages.json';
 let messages = defaultMessages;
+const warned = new Set();
+function warnMissedKeyOnce(key) {
+    if (warned.has(key)) {
+        return;
+    }
+    warned.add(key);
+    // eslint-disable-next-line no-console
+    console.warn(`Missing localisation for key "${key}"`);
+}
 export function setTranslations(newMessages) {
     messages = newMessages;
 }
 export function getTranslations() {
     return messages;
 }
+export function getTranslationsWithFallback() {
+    return { ...defaultMessages, ...messages };
+}
+export function translate(key) {
+    if (!(key in messages)) {
+        warnMissedKeyOnce(key);
+    }
+    return messages[key] ?? defaultMessages[key];
+}

package/components/input/input.js

@@ -119,14 +119,14 @@ class Input extends PureComponent {
             'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null
         };
         return (<I18nContext.Consumer>
-        {messages => (<div className={classes} data-test="ring-input">
+        {({ translate }) => (<div className={classes} data-test="ring-input">
             {label && (<InputLabel htmlFor={this.getId()} disabled={disabled} label={label}/>)}
             <div className={styles.container}>
               {icon && <Icon glyph={icon} className={styles.icon}/>}
               {multiline
                     ? (<textarea onChange={this.handleTextareaChange} rows={1} {...commonProps} {...restProps}/>)
                     : (<input onChange={this.handleInputChange} {...commonProps} {...restProps}/>)}
-              {clearable && !disabled && (<Button title={(translations ?? messages).clear} data-test="ring-input-clear" className={styles.clear} icon={closeIcon} onClick={this.clear}/>)}
+              {clearable && !disabled && (<Button title={translations?.clear ?? translate('clear')} data-test="ring-input-clear" className={styles.clear} icon={closeIcon} onClick={this.clear}/>)}
               {afterInput}
             </div>
             {error && <div className={styles.errorText}>{error}</div>}

package/components/message/message.js

@@ -94,7 +94,7 @@ class Message extends Component {
             : this.props.directions;
         const { direction } = this.state;
         return (<I18nContext.Consumer>
-        {messages => (<WithThemeClasses theme={theme}>
+        {({ 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]}/>)}
@@ -102,8 +102,10 @@ class Message extends Component {
                   {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 ?? messages).gotIt}</Button>)}
-                  {onDismiss && (<Button onClick={onDismiss} text>{(translations ?? messages).dismiss}</Button>)}
+                  {(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>)}

package/components/pager/pager.d.ts

@@ -45,59 +45,8 @@ export default class Pager extends PureComponent<PagerProps> {
         onPageSizeChange: () => void;
         onLoadPage: () => void;
     };
-    static contextType: React.Context<{
-        login: string;
-        logout: string;
-        loginTo: string;
-        ok: string;
-        cancel: string;
-        tryAgainLabel: string;
-        postpone: string;
-        youHaveLoggedInAs: string;
-        applyChange: string;
-        backendIsNotAvailable: string;
-        checkAgain: string;
-        nothingHappensLink: string;
-        errorMessage: string;
-        applyChangedUser: string;
-        profile: string;
-        switchUser: string;
-        addFirstDate: string;
-        addSecondDate: string;
-        addTime: string;
-        selectName: string;
-        setDate: string;
-        setDateTime: string;
-        setPeriod: string;
-        clear: string;
-        gotIt: string;
-        dismiss: string;
-        perPage: string;
-        firstPage: string;
-        lastPage: string;
-        nextPage: string;
-        previousPage: string;
-        searchTitle: string;
-        clearTitle: string;
-        userAgreement: string;
-        accept: string;
-        decline: string;
-        close: string;
-        scrollToAccept: string;
-        remindLater: string;
-        filterItems: string;
-        selectOption: string;
-        progress: string;
-        loading: string;
-        noOptionsFound: string;
-        banned: string;
-        online: string;
-        offline: string;
-        copyToClipboard: string;
-        copiedToClipboard: string;
-        copingToClipboardError: string;
-        unverified: string;
-    }>;
+    static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
+    context: React.ContextType<typeof Pager.contextType>;
     getSelectOptions(): {
         selected: SelectItem<PagerSizeItem> | undefined;
         data: SelectItem<PagerSizeItem>[];

package/components/pager/pager.js

@@ -33,10 +33,10 @@ class Pager extends PureComponent {
     static contextType = I18nContext;
     getSelectOptions() {
         const { pageSize, pageSizes } = this.props;
-        const messages = this.context;
+        const { translate } = this.context;
         const data = pageSizes.map(size => ({
             key: size,
-            label: `${size} ${(this.props.translations ?? messages).perPage}`
+            label: `${size} ${this.props.translations?.perPage ?? translate('perPage')}`
         }));
         const selected = data.find(it => it.key === pageSize);
         return { selected, data };
@@ -99,14 +99,14 @@ class Pager extends PureComponent {
         </div>);
     }
     getPagerLinks() {
-        const messages = this.context;
+        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 ?? messages).previousPage;
-        const nextText = (this.props.translations ?? messages).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
@@ -145,7 +145,7 @@ class Pager extends PureComponent {
     getPagerContent() {
         const { currentPage, visiblePagesLimit } = this.props;
         const totalPages = this.getTotalPages();
-        const messages = this.context;
+        const { translate } = this.context;
         if (totalPages < this.props.currentPage) {
             this.props.onPageChange?.(totalPages);
         }
@@ -180,7 +180,8 @@ class Pager extends PureComponent {
         {this.getPagerLinks()}
 
         <ButtonToolbar>
-          {start > 1 && this.getButton(1, (this.props.translations ?? messages).firstPage)}
+          {start > 1 &&
+                this.getButton(1, this.props.translations?.firstPage ?? translate('firstPage'))}
 
           <ButtonGroup>
             {start > 1 && this.getButton(start - 1, '...')}
@@ -192,7 +193,7 @@ 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 ?? messages).lastPage)}
+          {lastPageButtonAvailable && this.getButton(this.props.openTotal ? -1 : totalPages, this.props.translations?.lastPage ?? translate('lastPage'))}
         </ButtonToolbar>
 
         {this.getPageSizeSelector()}

package/components/query-assist/query-assist.js

@@ -773,7 +773,7 @@ class QueryAssist extends Component {
         const renderClear = this.props.clear && !!this.state.query;
         if (renderClear) {
             actions.push(<I18nContext.Consumer key={'clearAction'}>
-          {messages => (<Button icon={closeIcon} className={styles.clear} title={(this.props.translations ?? messages).clearTitle} ref={this.clearRef} onClick={this.clearQuery} data-test="query-assist-clear-icon"/>)}
+          {({ translate }) => (<Button icon={closeIcon} className={styles.clear} title={this.props.translations?.clearTitle ?? translate('clearTitle')} ref={this.clearRef} onClick={this.clearQuery} data-test="query-assist-clear-icon"/>)}
         </I18nContext.Consumer>);
         }
         return actions;
@@ -803,10 +803,10 @@ class QueryAssist extends Component {
         });
         return (<ControlsHeightContext.Provider value={ControlsHeight.M}>
         <I18nContext.Consumer>
-          {messages => (<div data-test={dataTests('ring-query-assist', dataTest)} className={containerClasses} role="presentation" ref={this.nodeRef}>
+          {({ translate }) => (<div data-test={dataTests('ring-query-assist', dataTest)} className={containerClasses} role="presentation" ref={this.nodeRef}>
               {this.state.shortcuts && (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
 
-              {renderGlass && !huge && (<Icon glyph={searchIcon} className={styles.icon} title={(translations ?? messages).searchTitle} ref={this.glassRef} data-test="query-assist-search-icon"/>)}
+              {renderGlass && !huge && (<Icon glyph={searchIcon} className={styles.icon} title={translations?.searchTitle ?? translate('searchTitle')} ref={this.glassRef} data-test="query-assist-search-icon"/>)}
 
               {renderLoader && (<div className={classNames(styles.icon, styles.loader, {
                         [styles.loaderOnTheRight]: !glass && !huge,
@@ -815,7 +815,7 @@ class QueryAssist extends Component {
                   <LoaderInline />
                 </div>)}
 
-              <ContentEditable aria-label={(translations ?? messages).searchTitle} className={inputClasses} data-test="ring-query-assist-input" inputRef={this.inputRef} disabled={this.props.disabled} onComponentUpdate={() => this.setCaretPosition({ fromContentEditable: true })} onBlur={this.handleFocusChange} onClick={this.handleCaretMove} onCompositionStart={this.trackCompositionState} onCompositionEnd={this.trackCompositionState} onFocus={this.handleFocusChange} onInput={this.handleInput} // To support IE use the same method
+              <ContentEditable aria-label={translations?.searchTitle ?? translate('searchTitle')} className={inputClasses} data-test="ring-query-assist-input" inputRef={this.inputRef} disabled={this.props.disabled} onComponentUpdate={() => this.setCaretPosition({ fromContentEditable: true })} onBlur={this.handleFocusChange} onClick={this.handleCaretMove} onCompositionStart={this.trackCompositionState} onCompositionEnd={this.trackCompositionState} onFocus={this.handleFocusChange} onInput={this.handleInput} // To support IE use the same method
              onKeyUp={this.handleInput} // to handle input and key up
              onKeyDown={this.handleEnter} onPaste={this.handlePaste} spellCheck="false">{this.state.query && <span>{this.renderQuery()}</span>}</ContentEditable>
 
@@ -830,7 +830,7 @@ class QueryAssist extends Component {
               <PopupMenu hidden={!this.state.showPopup} onCloseAttempt={this.closePopup} ref={this.popupRef} anchorElement={this.node} keepMounted attached className={this.props.popupClassName} directions={[PopupMenu.PopupProps.Directions.BOTTOM_RIGHT]} data={useCustomItemRender ? this.state.suggestions : this.renderSuggestions()} data-test="ring-query-assist-popup" hint={this.props.hint} hintOnSelection={this.props.hintOnSelection} left={this.getPopupOffset(this.state.suggestions)} maxHeight={PopupMenu.PopupProps.MaxHeight.SCREEN} onMouseDown={this.trackPopupMouseState} onMouseUp={this.trackPopupMouseState} onSelect={item => this.handleComplete(item)}/>
 
               {glass && huge && (<div className={styles.rightSearchButton} data-test="query-assist-search-button">
-                  <Icon glyph={searchIcon} className={styles.rightSearchIcon} title={(translations ?? messages).searchTitle} onClick={this.handleApply} ref={this.glassRef} data-test="query-assist-search-icon"/>
+                  <Icon glyph={searchIcon} className={styles.rightSearchIcon} title={translations?.searchTitle ?? translate('searchTitle')} onClick={this.handleApply} ref={this.glassRef} data-test="query-assist-search-icon"/>
                 </div>)}
             </div>)}
         </I18nContext.Consumer>

package/components/select/select.js

@@ -423,13 +423,13 @@ class Select extends Component {
         const { showPopup, shownData } = this.state;
         const _shownData = this._prependResetOption(shownData);
         return (<I18nContext.Consumer>
-        {messages => {
+        {({ translate }) => {
                 let message;
                 if (this.props.loading) {
-                    message = this.props.loadingMessage ?? messages.loading;
+                    message = this.props.loadingMessage ?? translate('loading');
                 }
                 else if (!shownData.length) {
-                    message = this.props.notFoundMessage ?? messages.noOptionsFound;
+                    message = this.props.notFoundMessage ?? translate('noOptionsFound');
                 }
                 return (<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}/>);

package/components/select/select__filter.js

@@ -35,7 +35,7 @@ class SelectFilter extends Component {
         const classes = classNames(styles.filter, className);
         return (<ActiveItemContext.ValueContext.Consumer>
         {activeItemId => (<I18nContext.Consumer>
-            {messages => (<Input {...restProps} placeholder={restProps.placeholder ?? messages.filterItems} aria-owns={listId} aria-activedescendant={activeItemId} autoComplete="off" autoFocus borderless inputRef={this.inputRef} className={classes}/>)}
+            {({ translate }) => (<Input {...restProps} placeholder={restProps.placeholder ?? translate('filterItems')} aria-owns={listId} aria-activedescendant={activeItemId} autoComplete="off" autoFocus borderless inputRef={this.inputRef} className={classes}/>)}
           </I18nContext.Consumer>)}
       </ActiveItemContext.ValueContext.Consumer>);
     }

package/components/user-agreement/user-agreement.js

@@ -48,32 +48,32 @@ class UserAgreement extends PureComponent {
         const { scrolledDown } = this.state;
         const { translations, onAccept, onDecline, onClose, onRemindLater, text, show, preview, className } = this.props;
         return (<I18nContext.Consumer>
-        {messages => (<Dialog label={(translations ?? messages).userAgreement} show={show} className={classNames(style.agreementDialog, className)} contentClassName={style.dialogContent} trapFocus autoFocusFirst={false} data-test="user-agreement">
-            <Header>{(translations ?? messages).userAgreement}</Header>
+        {({ translate }) => (<Dialog label={translations?.userAgreement ?? translate('userAgreement')} show={show} className={classNames(style.agreementDialog, className)} contentClassName={style.dialogContent} trapFocus autoFocusFirst={false} data-test="user-agreement">
+            <Header>{translations?.userAgreement ?? translate('userAgreement')}</Header>
             <Content fade onScrollToBottom={this.onScrollToBottom}>
               <Markdown>{text}</Markdown>
             </Content>
             {!preview && (<Panel>
                 {onRemindLater && !scrolledDown && (<div className={style.suggestion}>
-                    {(translations ?? messages).scrollToAccept}
+                    {translations?.scrollToAccept ?? translate('scrollToAccept')}
                   </div>)}
                 <Button primary disabled={!scrolledDown} onClick={onAccept} data-test="accept">
-                  {(translations ?? messages).accept}
+                  {translations?.accept ?? translate('accept')}
                 </Button>
                 <Button onClick={onDecline} autoFocus data-test="decline">
-                  {(translations ?? messages).decline}
+                  {translations?.decline ?? translate('decline')}
                 </Button>
 
                 {!onRemindLater && !scrolledDown && (<span className={style.suggestion}>
-                    {(translations ?? messages).scrollToAccept}
+                    {translations?.scrollToAccept ?? translate('scrollToAccept')}
                   </span>)}
                 {onRemindLater && (<Button className={style.remindLaterButton} onClick={onRemindLater} data-test="later">
-                    {(translations ?? messages).remindLater}
+                    {translations?.remindLater ?? translate('remindLater')}
                   </Button>)}
               </Panel>)}
             {preview && (<Panel>
                 <Button onClick={onClose} autoFocus data-test="close">
-                  {(translations ?? messages).close}
+                  {translations?.close ?? translate('close')}
                 </Button>
               </Panel>)}
           </Dialog>)}