@jetbrains/ring-ui 5.0.137 → 5.0.139

package/components/input/input.js

@@ -6,6 +6,7 @@ import { refObject } from '../global/prop-types';
 import Button from '../button/button';
 import getUID from '../global/get-uid';
 import Icon from '../icon/icon';
+import { I18nContext } from '../i18n/i18n-context';
 import composeRefs from '../global/composeRefs';
 import { ControlsHeightContext } from '../global/controls-height';
 import styles from './input.css';
@@ -27,10 +28,7 @@ class Input extends PureComponent {
         size: Size.M,
         onChange: noop,
         inputRef: noop,
-        enableShortcuts: ['esc'],
-        translations: {
-            clear: 'Clear input'
-        }
+        enableShortcuts: ['esc']
     };
     state = {
         empty: true
@@ -120,18 +118,20 @@ class Input extends PureComponent {
             'aria-label': typeof label === 'string' && label ? label : placeholder,
             'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null
         };
-        return (<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.clear} data-test="ring-input-clear" className={styles.clear} icon={closeIcon} onClick={this.clear}/>)}
-          {afterInput}
-        </div>
-        {error && <div className={styles.errorText}>{error}</div>}
-      </div>);
+        return (<I18nContext.Consumer>
+        {({ 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?.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>}
+          </div>)}
+      </I18nContext.Consumer>);
     }
 }
 export { Input };

package/components/message/message.d.ts

@@ -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;

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 @@ 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 @@ 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>);
     }
 }
 export default Message;

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>[];

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';
 class Pager extends PureComponent {
     static defaultProps = {
@@ -24,23 +25,18 @@ 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 @@ 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,6 +145,7 @@ 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);
         }
@@ -182,7 +180,8 @@ 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, '...')}
@@ -194,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.lastPage)}
+          {lastPageButtonAvailable && this.getButton(this.props.openTotal ? -1 : totalPages, this.props.translations?.lastPage ?? translate('lastPage'))}
         </ButtonToolbar>
 
         {this.getPageSizeSelector()}

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

@@ -19,6 +19,7 @@ import Icon from '../icon/icon';
 import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
 import { Size } from '../input/input';
 import inputStyles from '../input/input.css';
+import { I18nContext } from '../i18n/i18n-context';
 import QueryAssistSuggestions from './query-assist__suggestions';
 import styles from './query-assist.css';
 const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING +
@@ -166,11 +167,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({ query }, { prevQuery }) {
         const nextState = { prevQuery: query };
@@ -775,12 +772,14 @@ class QueryAssist extends Component {
         const actions = [...(this.props.actions || [])];
         const renderClear = this.props.clear && !!this.state.query;
         if (renderClear) {
-            actions.push(<Button icon={closeIcon} key={'clearAction'} className={styles.clear} title={this.props.translations.clearTitle} ref={this.clearRef} onClick={this.clearQuery} data-test="query-assist-clear-icon"/>);
+            actions.push(<I18nContext.Consumer key={'clearAction'}>
+          {({ 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;
     }
     render() {
-        const { glass, 'data-test': dataTest, className, useCustomItemRender, huge, size } = this.props;
+        const { glass, 'data-test': dataTest, className, useCustomItemRender, huge, size, translations } = this.props;
         const renderPlaceholder = !!this.props.placeholder && this.state.placeholderEnabled;
         const renderLoader = this.props.loader !== false && this.state.loading;
         const renderGlass = glass && !renderLoader;
@@ -803,36 +802,38 @@ class QueryAssist extends Component {
             [styles.withoutGlass]: !glass || (!renderLoader && huge)
         });
         return (<ControlsHeightContext.Provider value={ControlsHeight.M}>
-        <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}/>)}
+        <I18nContext.Consumer>
+          {({ 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={this.props.translations.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,
-                    [styles.loaderActive]: renderLoader
-                })} ref={this.loaderRef}>
-              <LoaderInline />
-            </div>)}
+              {renderLoader && (<div className={classNames(styles.icon, styles.loader, {
+                        [styles.loaderOnTheRight]: !glass && !huge,
+                        [styles.loaderActive]: renderLoader
+                    })} ref={this.loaderRef}>
+                  <LoaderInline />
+                </div>)}
 
-          <ContentEditable aria-label={this.props.translations.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>
+              <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>
 
-          {renderPlaceholder && (<button type="button" className={placeholderStyles} ref={this.placeholderRef} onClick={this.handleCaretMove} data-test="query-assist-placeholder">
-              {this.props.placeholder}
-            </button>)}
+              {renderPlaceholder && (<button type="button" className={placeholderStyles} ref={this.placeholderRef} onClick={this.handleCaretMove} data-test="query-assist-placeholder">
+                  {this.props.placeholder}
+                </button>)}
 
-          {actions.length
-                ? (<div data-test="ring-query-assist-actions" className={styles.actions}>{actions}</div>)
-                : null}
+              {actions.length
+                    ? (<div data-test="ring-query-assist-actions" className={styles.actions}>{actions}</div>)
+                    : null}
 
-          <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)}/>
+              <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={this.props.translations.searchTitle} onClick={this.handleApply} ref={this.glassRef} data-test="query-assist-search-icon"/>
+              {glass && huge && (<div className={styles.rightSearchButton} data-test="query-assist-search-button">
+                  <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>)}
-        </div>
+        </I18nContext.Consumer>
       </ControlsHeightContext.Provider>);
     }
 }

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

@@ -17,6 +17,7 @@ import getUID from '../global/get-uid';
 import rerenderHOC from '../global/rerender-hoc';
 import fuzzyHighlight from '../global/fuzzy-highlight';
 import memoize from '../global/memoize';
+import { I18nContext } from '../i18n/i18n-context';
 import { isArray } from '../global/typescript-utils';
 import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
 import inputStyles from '../input/input.css';
@@ -183,8 +184,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,
@@ -423,15 +422,19 @@ class Select extends Component {
         const anchorElement = this.props.targetElement || this.node;
         const { showPopup, 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 (<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 (<I18nContext.Consumer>
+        {({ translate }) => {
+                let message;
+                if (this.props.loading) {
+                    message = this.props.loadingMessage ?? translate('loading');
+                }
+                else if (!shownData.length) {
+                    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}/>);
+            }}
+      </I18nContext.Consumer>);
     }
     _showPopup() {
         if (!this.node) {

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

@@ -4,11 +4,11 @@ import classNames from 'classnames';
 import Input from '../input/input';
 import sniffr from '../global/sniffer';
 import { ActiveItemContext } from '../list/list';
+import { I18nContext } from '../i18n/i18n-context';
 import styles from './select-popup.css';
 function noop() { }
 class SelectFilter extends Component {
     static defaultProps = {
-        placeholder: 'Filter items',
         inputRef: noop
     };
     componentWillUnmount() {
@@ -34,7 +34,9 @@ class SelectFilter extends Component {
         const { className, listId, ...restProps } = this.props;
         const classes = classNames(styles.filter, className);
         return (<ActiveItemContext.ValueContext.Consumer>
-        {activeItemId => (<Input {...restProps} aria-owns={listId} aria-activedescendant={activeItemId} autoComplete="off" autoFocus borderless inputRef={this.inputRef} className={classes}/>)}
+        {activeItemId => (<I18nContext.Consumer>
+            {({ 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.d.ts

@@ -14,7 +14,7 @@ export interface UserAgreementTranslations {
 }
 export interface UserAgreementProps {
     text: string;
-    translations: UserAgreementTranslations;
+    translations?: UserAgreementTranslations | null | undefined;
     show: boolean;
     onAccept: () => void;
     onDecline: () => void;
@@ -46,14 +46,6 @@ export default class UserAgreement extends PureComponent<UserAgreementProps> {
         className: PropTypes.Requireable<string>;
     };
     static defaultProps: {
-        translations: {
-            userAgreement: string;
-            accept: string;
-            decline: string;
-            close: string;
-            scrollToAccept: string;
-            remindLater: string;
-        };
         show: boolean;
         onAccept: typeof noop;
         onDecline: typeof noop;

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

@@ -9,6 +9,7 @@ import { Content, Header } from '../island/island';
 import Panel from '../panel/panel';
 import Button from '../button/button';
 import Markdown from '../markdown/markdown';
+import { I18nContext } from '../i18n/i18n-context';
 import style from './user-agreement.css';
 function noop() { }
 /**
@@ -34,14 +35,6 @@ class UserAgreement extends PureComponent {
         className: PropTypes.string
     };
     static defaultProps = {
-        translations: {
-            userAgreement: 'User Agreement',
-            accept: 'Accept',
-            decline: 'Decline',
-            close: 'Close',
-            scrollToAccept: 'View the entire agreement to continue',
-            remindLater: 'Remind me later'
-        },
         show: false,
         onAccept: noop,
         onDecline: noop,
@@ -54,29 +47,37 @@ class UserAgreement extends PureComponent {
     render() {
         const { scrolledDown } = this.state;
         const { translations, onAccept, onDecline, onClose, onRemindLater, text, show, preview, className } = this.props;
-        return (<Dialog label={translations.userAgreement} show={show} className={classNames(style.agreementDialog, className)} contentClassName={style.dialogContent} trapFocus autoFocusFirst={false} data-test="user-agreement">
-        <Header>{translations.userAgreement}</Header>
-        <Content fade onScrollToBottom={this.onScrollToBottom}>
-          <Markdown>{text}</Markdown>
-        </Content>
-        {!preview && (<Panel>
-            {onRemindLater && !scrolledDown && (<div className={style.suggestion}>{translations.scrollToAccept}</div>)}
-            <Button primary disabled={!scrolledDown} onClick={onAccept} data-test="accept">
-              {translations.accept}
-            </Button>
-            <Button onClick={onDecline} autoFocus data-test="decline">
-              {translations.decline}
-            </Button>
+        return (<I18nContext.Consumer>
+        {({ 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?.scrollToAccept ?? translate('scrollToAccept')}
+                  </div>)}
+                <Button primary disabled={!scrolledDown} onClick={onAccept} data-test="accept">
+                  {translations?.accept ?? translate('accept')}
+                </Button>
+                <Button onClick={onDecline} autoFocus data-test="decline">
+                  {translations?.decline ?? translate('decline')}
+                </Button>
 
-            {!onRemindLater && !scrolledDown && (<span className={style.suggestion}>{translations.scrollToAccept}</span>)}
-            {onRemindLater && (<Button className={style.remindLaterButton} onClick={onRemindLater} data-test="later">
-                {translations.remindLater}
-              </Button>)}
-          </Panel>)}
-        {preview && (<Panel>
-            <Button onClick={onClose} autoFocus data-test="close">{translations.close}</Button>
-          </Panel>)}
-      </Dialog>);
+                {!onRemindLater && !scrolledDown && (<span className={style.suggestion}>
+                    {translations?.scrollToAccept ?? translate('scrollToAccept')}
+                  </span>)}
+                {onRemindLater && (<Button className={style.remindLaterButton} onClick={onRemindLater} data-test="later">
+                    {translations?.remindLater ?? translate('remindLater')}
+                  </Button>)}
+              </Panel>)}
+            {preview && (<Panel>
+                <Button onClick={onClose} autoFocus data-test="close">
+                  {translations?.close ?? translate('close')}
+                </Button>
+              </Panel>)}
+          </Dialog>)}
+      </I18nContext.Consumer>);
     }
 }
 export default UserAgreement;

package/components/user-card/card.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, PureComponent, ReactElement } from 'react';
+import React, { HTMLAttributes, PureComponent, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 export interface UserCardUser {
     name: string;
@@ -22,7 +22,8 @@ export interface UserCardWording {
 }
 export interface UserCardProps extends HTMLAttributes<HTMLDivElement> {
     user: UserCardUser;
-    wording: UserCardWording;
+    wording?: UserCardWording | null | undefined;
+    translations?: UserCardWording | null | undefined;
     info?: ReactElement | readonly ReactElement[] | string;
     avatarInfo?: ReactElement | readonly ReactElement[] | string;
     'data-test'?: string | null | undefined;
@@ -52,18 +53,18 @@ export default class UserCard extends PureComponent<UserCardProps> {
             copingToClipboardError: PropTypes.Requireable<string>;
             unverified: PropTypes.Requireable<string>;
         }>>;
+        translations: PropTypes.Requireable<PropTypes.InferProps<{
+            banned: PropTypes.Validator<string>;
+            online: PropTypes.Validator<string>;
+            offline: PropTypes.Validator<string>;
+            copyToClipboard: PropTypes.Requireable<string>;
+            copiedToClipboard: PropTypes.Requireable<string>;
+            copingToClipboardError: PropTypes.Requireable<string>;
+            unverified: PropTypes.Requireable<string>;
+        }>>;
     };
-    static defaultProps: {
-        wording: {
-            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 UserCard.contextType>;
     copyEmail: () => void;
     render(): JSX.Element;
 }