@jetbrains/ring-ui 5.0.138 → 5.0.139

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

@@ -63,59 +63,8 @@ export default class UserCard extends PureComponent<UserCardProps> {
             unverified: PropTypes.Requireable<string>;
         }>>;
     };
-    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 UserCard.contextType>;
     copyEmail: () => void;
     render(): JSX.Element;
 }

package/components/user-card/card.js

@@ -39,16 +39,14 @@ class UserCard extends PureComponent {
     };
     static contextType = I18nContext;
     copyEmail = () => {
-        const messages = this.context;
-        const messageOverrides = this.props.wording || this.props.translations;
-        const wording = messageOverrides ?? messages;
-        clipboard.copyText(this.props.user.email || '', wording.copiedToClipboard, wording.copingToClipboardError);
+        const { translate } = this.context;
+        const wording = this.props.translations || this.props.wording;
+        clipboard.copyText(this.props.user.email || '', wording?.copiedToClipboard ?? translate('copyToClipboard'), wording?.copingToClipboardError ?? translate('copingToClipboardError'));
     };
     render() {
         const { children, info, className, user, avatarInfo, ...restProps } = this.props;
-        const messages = this.context;
-        const messageOverrides = this.props.wording || this.props.translations;
-        const wording = messageOverrides ?? messages;
+        const { translate } = this.context;
+        const wording = this.props.translations || this.props.wording;
         const classes = classNames(className, {});
         const userActiveStatusClasses = classNames(styles.userActiveStatus, user.online ? styles.online : '');
         return (<div className={classes} {...restProps}>
@@ -65,18 +63,22 @@ class UserCard extends PureComponent {
                   </Link>)}
                 {!user.href && <span className={styles.userName}>{user.name}</span>}
                 {typeof user.online === 'boolean' &&
-                (<span className={userActiveStatusClasses} title={user.online ? wording.online : wording.offline}/>)}
+                (<span className={userActiveStatusClasses} title={user.online
+                        ? (wording?.online ?? translate('online'))
+                        : (wording?.offline ?? translate('offline'))}/>)}
                 {!!info && <span className={styles.userNameInfo}>{info}</span>}
                 {user.banned &&
-                (<span className={classNames(badgeStyles.badge, badgeStyles.invalid)} title={user.banReason}>{wording.banned}</span>)}
+                (<span className={classNames(badgeStyles.badge, badgeStyles.invalid)} title={user.banReason}>{wording?.banned ?? translate('banned')}</span>)}
               </div>
               <div className={styles.userLogin}>{user.login}</div>
               {user.email && (<span className={styles.userEmailWrapper}>
                   <Link href={`mailto:${user.email}`} title={`mailto:${user.email}`} target="_blank" className={styles.userEmail}>
                     {user.email}
                   </Link>
-                  {user.unverifiedEmail && (<span className={styles.unverifiedLabel}>{wording.unverified}</span>)}
-                  <Icon title={wording.copyToClipboard} className={styles.userCopyIcon} onClick={this.copyEmail} glyph={copyIcon} size={IconSize.Size14} suppressSizeWarning/>
+                  {user.unverifiedEmail && (<span className={styles.unverifiedLabel}>
+                        {wording?.unverified ?? translate('unverified')}
+                      </span>)}
+                  <Icon title={wording?.copyToClipboard ?? translate('copyToClipboard')} className={styles.userCopyIcon} onClick={this.copyEmail} glyph={copyIcon} size={IconSize.Size14} suppressSizeWarning/>
                 </span>)}
             </div>
             {children}

package/dist/_helpers/card.js

@@ -43,12 +43,15 @@ class UserCard extends PureComponent {
   };
   static contextType = I18nContext;
   copyEmail = () => {
-    const messages = this.context;
-    const messageOverrides = this.props.wording || this.props.translations;
-    const wording = messageOverrides !== null && messageOverrides !== void 0 ? messageOverrides : messages;
-    clipboard.copyText(this.props.user.email || '', wording.copiedToClipboard, wording.copingToClipboardError);
+    var _wording$copiedToClip, _wording$copingToClip;
+    const {
+      translate
+    } = this.context;
+    const wording = this.props.translations || this.props.wording;
+    clipboard.copyText(this.props.user.email || '', (_wording$copiedToClip = wording?.copiedToClipboard) !== null && _wording$copiedToClip !== void 0 ? _wording$copiedToClip : translate('copyToClipboard'), (_wording$copingToClip = wording?.copingToClipboardError) !== null && _wording$copingToClip !== void 0 ? _wording$copingToClip : translate('copingToClipboardError'));
   };
   render() {
+    var _wording$online, _wording$offline, _wording$banned, _wording$unverified, _wording$copyToClipbo;
     const {
       children,
       info,
@@ -57,9 +60,10 @@ class UserCard extends PureComponent {
       avatarInfo,
       ...restProps
     } = this.props;
-    const messages = this.context;
-    const messageOverrides = this.props.wording || this.props.translations;
-    const wording = messageOverrides !== null && messageOverrides !== void 0 ? messageOverrides : messages;
+    const {
+      translate
+    } = this.context;
+    const wording = this.props.translations || this.props.wording;
     const classes = classNames(className, {});
     const userActiveStatusClasses = classNames(modules_a4196c17.userActiveStatus, user.online ? modules_a4196c17.online : '');
     return /*#__PURE__*/React.createElement("div", _extends({
@@ -85,13 +89,13 @@ class UserCard extends PureComponent {
       className: modules_a4196c17.userName
     }, user.name), typeof user.online === 'boolean' && /*#__PURE__*/React.createElement("span", {
       className: userActiveStatusClasses,
-      title: user.online ? wording.online : wording.offline
+      title: user.online ? (_wording$online = wording?.online) !== null && _wording$online !== void 0 ? _wording$online : translate('online') : (_wording$offline = wording?.offline) !== null && _wording$offline !== void 0 ? _wording$offline : translate('offline')
     }), !!info && /*#__PURE__*/React.createElement("span", {
       className: modules_a4196c17.userNameInfo
     }, info), user.banned && /*#__PURE__*/React.createElement("span", {
       className: classNames(modules_6c9187df.badge, modules_6c9187df.invalid),
       title: user.banReason
-    }, wording.banned)), /*#__PURE__*/React.createElement("div", {
+    }, (_wording$banned = wording?.banned) !== null && _wording$banned !== void 0 ? _wording$banned : translate('banned'))), /*#__PURE__*/React.createElement("div", {
       className: modules_a4196c17.userLogin
     }, user.login), user.email && /*#__PURE__*/React.createElement("span", {
       className: modules_a4196c17.userEmailWrapper
@@ -102,8 +106,8 @@ class UserCard extends PureComponent {
       className: modules_a4196c17.userEmail
     }, user.email), user.unverifiedEmail && /*#__PURE__*/React.createElement("span", {
       className: modules_a4196c17.unverifiedLabel
-    }, wording.unverified), /*#__PURE__*/React.createElement(Icon, {
-      title: wording.copyToClipboard,
+    }, (_wording$unverified = wording?.unverified) !== null && _wording$unverified !== void 0 ? _wording$unverified : translate('unverified')), /*#__PURE__*/React.createElement(Icon, {
+      title: (_wording$copyToClipbo = wording?.copyToClipboard) !== null && _wording$copyToClipbo !== void 0 ? _wording$copyToClipbo : translate('copyToClipboard'),
       className: modules_a4196c17.userCopyIcon,
       onClick: this.copyEmail,
       glyph: copyIcon,

package/dist/_helpers/select__filter.js

@@ -42,10 +42,13 @@ class SelectFilter extends Component {
       ...restProps
     } = this.props;
     const classes = classNames(modules_b607bec2.filter, className);
-    return /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, activeItemId => /*#__PURE__*/React.createElement(I18nContext.Consumer, null, messages => {
+    return /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, activeItemId => /*#__PURE__*/React.createElement(I18nContext.Consumer, null, _ref => {
       var _restProps$placeholde;
+      let {
+        translate
+      } = _ref;
       return /*#__PURE__*/React.createElement(Input, _extends({}, restProps, {
-        placeholder: (_restProps$placeholde = restProps.placeholder) !== null && _restProps$placeholde !== void 0 ? _restProps$placeholde : messages.filterItems,
+        placeholder: (_restProps$placeholde = restProps.placeholder) !== null && _restProps$placeholde !== void 0 ? _restProps$placeholde : translate('filterItems'),
         "aria-owns": listId,
         "aria-activedescendant": activeItemId,
         autoComplete: "off",

package/dist/auth/auth__core.js

@@ -2,7 +2,7 @@ import { getAbsoluteBaseURL, fixUrl } from '../global/url.js';
 import Listeners from '../global/listeners.js';
 import HTTP from '../http/http.js';
 import promiseWithTimeout from '../global/promise-with-timeout.js';
-import { getTranslations } from '../i18n/i18n.js';
+import { getTranslationsWithFallback, translate, getTranslations } from '../i18n/i18n.js';
 import AuthStorage from './storage.js';
 import AuthResponseParser from './response-parser.js';
 import AuthRequestBuilder from './request-builder.js';
@@ -180,7 +180,7 @@ class Auth {
     this._backgroundFlow = new BackgroundFlow(this._requestBuilder, this._storage, backgroundRefreshTimeout);
     if (this.config.EmbeddedLoginFlow) {
       var _this$config$translat;
-      this._embeddedFlow = new this.config.EmbeddedLoginFlow(this._requestBuilder, this._storage, (_this$config$translat = this.config.translations) !== null && _this$config$translat !== void 0 ? _this$config$translat : getTranslations());
+      this._embeddedFlow = new this.config.EmbeddedLoginFlow(this._requestBuilder, this._storage, (_this$config$translat = this.config.translations) !== null && _this$config$translat !== void 0 ? _this$config$translat : getTranslationsWithFallback());
     }
     const API_BASE = this.config.serverUri + Auth.API_PATH;
     const fetchConfig = config.fetchCredentials ? {
@@ -616,7 +616,7 @@ class Auth {
     const stopMessageListening = this._storage?.onMessage(Auth.CLOSE_WINDOW_MESSAGE, () => this._embeddedFlow?.stop());
   }
   _showUserChangedDialog(_ref) {
-    var _newUser$name, _newUser$name2;
+    var _translations$youHave, _newUser$name, _newUser$name2, _translations$login, _translations$loginTo, _translations$applyCh, _translations$tryAgai, _translations$postpon;
     let {
       newUser,
       onApply,
@@ -625,7 +625,6 @@ class Auth {
     const {
       translations
     } = this.config;
-    const actualTranslations = translations !== null && translations !== void 0 ? translations : getTranslations();
     this._createInitDeferred();
     const done = () => {
       this._initDeferred?.resolve?.();
@@ -634,12 +633,12 @@ class Auth {
     };
     const hide = this._authDialogService?.({
       ...this._service,
-      title: actualTranslations.youHaveLoggedInAs.replace('%userName%', (_newUser$name = newUser.name) !== null && _newUser$name !== void 0 ? _newUser$name : '').replace('{{userName}}', (_newUser$name2 = newUser.name) !== null && _newUser$name2 !== void 0 ? _newUser$name2 : ''),
-      loginCaption: actualTranslations.login,
-      loginToCaption: actualTranslations.loginTo,
-      confirmLabel: actualTranslations.applyChange,
-      tryAgainLabel: actualTranslations.tryAgainLabel,
-      cancelLabel: actualTranslations.postpone,
+      title: (_translations$youHave = translations?.youHaveLoggedInAs) !== null && _translations$youHave !== void 0 ? _translations$youHave : translate('youHaveLoggedInAs').replace('%userName%', (_newUser$name = newUser.name) !== null && _newUser$name !== void 0 ? _newUser$name : '').replace('{{userName}}', (_newUser$name2 = newUser.name) !== null && _newUser$name2 !== void 0 ? _newUser$name2 : ''),
+      loginCaption: (_translations$login = translations?.login) !== null && _translations$login !== void 0 ? _translations$login : translate('login'),
+      loginToCaption: (_translations$loginTo = translations?.loginTo) !== null && _translations$loginTo !== void 0 ? _translations$loginTo : translate('loginTo'),
+      confirmLabel: (_translations$applyCh = translations?.applyChange) !== null && _translations$applyCh !== void 0 ? _translations$applyCh : translate('applyChange'),
+      tryAgainLabel: (_translations$tryAgai = translations?.tryAgainLabel) !== null && _translations$tryAgai !== void 0 ? _translations$tryAgai : translate('tryAgainLabel'),
+      cancelLabel: (_translations$postpon = translations?.postpone) !== null && _translations$postpon !== void 0 ? _translations$postpon : translate('postpone'),
       onConfirm: () => {
         done();
         onApply();
@@ -706,7 +705,7 @@ class Auth {
         onCheckAgain,
         onPostpone,
         backendError,
-        translations: translations !== null && translations !== void 0 ? translations : getTranslations()
+        translations: translations !== null && translations !== void 0 ? translations : getTranslationsWithFallback()
       });
       window.addEventListener('online', onCheckAgain);
       function networkWatchdog() {

package/dist/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/dist/header/profile.js

@@ -109,8 +109,11 @@ class Profile extends PureComponent {
         className,
         translations
       } = _ref;
-      return /*#__PURE__*/React.createElement(I18nContext.Consumer, null, messages => {
+      return /*#__PURE__*/React.createElement(I18nContext.Consumer, null, _ref2 => {
         var _translations$login;
+        let {
+          translate
+        } = _ref2;
         return /*#__PURE__*/React.createElement("div", {
           className: classNames(modules_47759f5e.profileEmpty, className)
         }, /*#__PURE__*/React.createElement(Button, {
@@ -119,7 +122,7 @@ class Profile extends PureComponent {
           disabled: loading,
           loader: loading,
           onClick: onLogin
-        }, (_translations$login = translations?.login) !== null && _translations$login !== void 0 ? _translations$login : messages.login));
+        }, (_translations$login = translations?.login) !== null && _translations$login !== void 0 ? _translations$login : translate('login')));
       });
     }
   };
@@ -150,7 +153,9 @@ class Profile extends PureComponent {
       onLogin,
       ...props
     } = this.props;
-    const messages = this.context;
+    const {
+      translate
+    } = this.context;
     if (!user) {
       return /*#__PURE__*/React.createElement("div", _extends({}, props, {
         className: classNames(modules_47759f5e.profileEmpty, className)
@@ -175,28 +180,28 @@ class Profile extends PureComponent {
     }));
     const items = [showApplyChangedUser && {
       rgItemType,
-      label: (_translations$applyCh = translations?.applyChangedUser) !== null && _translations$applyCh !== void 0 ? _translations$applyCh : messages.applyChangedUser,
+      label: (_translations$applyCh = translations?.applyChangedUser) !== null && _translations$applyCh !== void 0 ? _translations$applyCh : translate('applyChangedUser'),
       className: modules_47759f5e.profileMenuItem,
       onClick: onRevertPostponement
     }, showLogIn && {
       rgItemType,
-      label: (_translations$login2 = translations?.login) !== null && _translations$login2 !== void 0 ? _translations$login2 : messages.login,
+      label: (_translations$login2 = translations?.login) !== null && _translations$login2 !== void 0 ? _translations$login2 : translate('login'),
       className: modules_47759f5e.profileMenuItem,
       onClick: onRevertPostponement
     }, {
       rgItemType: PopupMenu.ListProps.Type.LINK,
-      label: (_translations$profile = translations?.profile) !== null && _translations$profile !== void 0 ? _translations$profile : messages.profile,
+      label: (_translations$profile = translations?.profile) !== null && _translations$profile !== void 0 ? _translations$profile : translate('profile'),
       target: '_self',
       href: profileUrl,
       LinkComponent
     }, showSwitchUser && {
       rgItemType,
-      label: (_translations$switchU = translations?.switchUser) !== null && _translations$switchU !== void 0 ? _translations$switchU : messages.switchUser,
+      label: (_translations$switchU = translations?.switchUser) !== null && _translations$switchU !== void 0 ? _translations$switchU : translate('switchUser'),
       className: modules_47759f5e.profileMenuItem,
       onClick: onSwitchUser
     }, showLogOut && {
       rgItemType,
-      label: (_translations$logout = translations?.logout) !== null && _translations$logout !== void 0 ? _translations$logout : messages.logout,
+      label: (_translations$logout = translations?.logout) !== null && _translations$logout !== void 0 ? _translations$logout : translate('logout'),
       onClick: onLogout
     }].filter(isTruthy);
     return /*#__PURE__*/React.createElement(DropdownMenu, _extends({}, props, {

package/dist/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/dist/i18n/i18n-context.js

@@ -1,6 +1,24 @@
-import React from 'react';
-import { getTranslations } from './i18n.js';
+import React, { useEffect } from 'react';
+import { getTranslations, translate, setTranslations } from './i18n.js';
 
-const I18nContext = /*#__PURE__*/React.createContext(getTranslations());
+const I18nContext = /*#__PURE__*/React.createContext({
+  messages: getTranslations(),
+  translate
+});
+const I18nContextHolder = _ref => {
+  let {
+    children,
+    messages
+  } = _ref;
+  useEffect(() => {
+    setTranslations(messages);
+  }, [messages]);
+  return /*#__PURE__*/React.createElement(I18nContext.Provider, {
+    value: {
+      messages,
+      translate
+    }
+  }, children);
+};
 
-export { I18nContext };
+export { I18nContext, I18nContextHolder };

package/dist/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/dist/i18n/i18n.js

@@ -104,11 +104,33 @@ var defaultMessages = {
 };
 
 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}"`);
+}
 function setTranslations(newMessages) {
   messages = newMessages;
 }
 function getTranslations() {
   return messages;
 }
+function getTranslationsWithFallback() {
+  return {
+    ...defaultMessages,
+    ...messages
+  };
+}
+function translate(key) {
+  var _messages$key;
+  if (!(key in messages)) {
+    warnMissedKeyOnce(key);
+  }
+  return (_messages$key = messages[key]) !== null && _messages$key !== void 0 ? _messages$key : defaultMessages[key];
+}
 
-export { getTranslations, setTranslations };
+export { getTranslations, getTranslationsWithFallback, setTranslations, translate };

package/dist/input/input.js

@@ -151,32 +151,38 @@ class Input extends PureComponent {
       'aria-label': typeof label === 'string' && label ? label : placeholder,
       'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null
     };
-    return /*#__PURE__*/React.createElement(I18nContext.Consumer, null, messages => /*#__PURE__*/React.createElement("div", {
-      className: classes,
-      "data-test": "ring-input"
-    }, label && /*#__PURE__*/React.createElement(InputLabel, {
-      htmlFor: this.getId(),
-      disabled: disabled,
-      label: label
-    }), /*#__PURE__*/React.createElement("div", {
-      className: modules_88cfaf40.container
-    }, icon && /*#__PURE__*/React.createElement(Icon, {
-      glyph: icon,
-      className: modules_88cfaf40.icon
-    }), multiline ? /*#__PURE__*/React.createElement("textarea", _extends({
-      onChange: this.handleTextareaChange,
-      rows: 1
-    }, commonProps, restProps)) : /*#__PURE__*/React.createElement("input", _extends({
-      onChange: this.handleInputChange
-    }, commonProps, restProps)), clearable && !disabled && /*#__PURE__*/React.createElement(Button, {
-      title: (translations !== null && translations !== void 0 ? translations : messages).clear,
-      "data-test": "ring-input-clear",
-      className: modules_88cfaf40.clear,
-      icon: closeIcon,
-      onClick: this.clear
-    }), afterInput), error && /*#__PURE__*/React.createElement("div", {
-      className: modules_88cfaf40.errorText
-    }, error)));
+    return /*#__PURE__*/React.createElement(I18nContext.Consumer, null, _ref => {
+      var _translations$clear;
+      let {
+        translate
+      } = _ref;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes,
+        "data-test": "ring-input"
+      }, label && /*#__PURE__*/React.createElement(InputLabel, {
+        htmlFor: this.getId(),
+        disabled: disabled,
+        label: label
+      }), /*#__PURE__*/React.createElement("div", {
+        className: modules_88cfaf40.container
+      }, icon && /*#__PURE__*/React.createElement(Icon, {
+        glyph: icon,
+        className: modules_88cfaf40.icon
+      }), multiline ? /*#__PURE__*/React.createElement("textarea", _extends({
+        onChange: this.handleTextareaChange,
+        rows: 1
+      }, commonProps, restProps)) : /*#__PURE__*/React.createElement("input", _extends({
+        onChange: this.handleInputChange
+      }, commonProps, restProps)), clearable && !disabled && /*#__PURE__*/React.createElement(Button, {
+        title: (_translations$clear = translations?.clear) !== null && _translations$clear !== void 0 ? _translations$clear : translate('clear'),
+        "data-test": "ring-input-clear",
+        className: modules_88cfaf40.clear,
+        icon: closeIcon,
+        onClick: this.clear
+      }), afterInput), error && /*#__PURE__*/React.createElement("div", {
+        className: modules_88cfaf40.errorText
+      }, error));
+    });
   }
 }
 Input.propTypes = {

package/dist/link/link.js

@@ -1,5 +1,5 @@
 import { _ as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
-import React, { PureComponent, memo } from 'react';
+import React, { memo, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import memoize from '../global/memoize.js';