@jetbrains/ring-ui 5.0.137 → 5.0.139

package/components/auth/auth__core.d.ts

@@ -77,7 +77,7 @@ export interface AuthConfig extends TokenValidatorConfig {
     checkBackendIsUp: () => Promise<unknown>;
     onBackendDown: (params: BackendDownParams) => () => void;
     defaultExpiresIn: number;
-    translations: AuthTranslations;
+    translations?: AuthTranslations | null | undefined;
     userParams?: RequestParams | undefined;
     waitForRedirectTimeout: number;
 }

package/components/auth/auth__core.js

@@ -2,6 +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, getTranslationsWithFallback, translate } from '../i18n/i18n';
 import AuthStorage from './storage';
 import AuthResponseParser from './response-parser';
 import AuthRequestBuilder from './request-builder';
@@ -42,19 +43,7 @@ const DEFAULT_CONFIG = {
     onBackendDown: () => () => { },
     defaultExpiresIn: DEFAULT_EXPIRES_TIMEOUT,
     waitForRedirectTimeout: DEFAULT_WAIT_FOR_REDIRECT_TIMEOUT,
-    translations: {
-        login: 'Log in',
-        loginTo: 'Log in to %serviceName%',
-        cancel: 'Cancel',
-        tryAgainLabel: 'Try again',
-        postpone: 'Postpone',
-        youHaveLoggedInAs: 'You have logged in as another user: %userName%',
-        applyChange: 'Apply change',
-        backendIsNotAvailable: 'Connection lost',
-        checkAgain: 'try again',
-        nothingHappensLink: 'Click here if nothing happens',
-        errorMessage: 'There may be a problem with your network connection. Make sure that you are online and'
-    }
+    translations: null
 };
 class Auth {
     static DEFAULT_CONFIG = DEFAULT_CONFIG;
@@ -131,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);
+            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
@@ -491,6 +480,7 @@ class Auth {
     _showAuthDialog({ nonInteractive, error, canCancel, onTryAgain } = {}) {
         const { embeddedLogin, onPostponeLogout, translations } = this.config;
         const cancelable = this.user?.guest || canCancel;
+        const actualTranslations = translations ?? getTranslations();
         this._createInitDeferred();
         const closeDialog = () => {
             /* eslint-disable @typescript-eslint/no-use-before-define */
@@ -530,11 +520,11 @@ class Auth {
         };
         const hide = this._authDialogService?.({
             ...this._service,
-            loginCaption: translations.login,
-            loginToCaption: translations.loginTo,
-            confirmLabel: translations.login,
-            tryAgainLabel: translations.tryAgainLabel,
-            cancelLabel: cancelable ? translations.cancel : translations.postpone,
+            loginCaption: actualTranslations.login,
+            loginToCaption: actualTranslations.loginTo,
+            confirmLabel: actualTranslations.login,
+            tryAgainLabel: actualTranslations.tryAgainLabel,
+            cancelLabel: cancelable ? actualTranslations.cancel : actualTranslations.postpone,
             errorMessage: this._extractErrorMessage(error, true),
             onConfirm,
             onCancel,
@@ -558,12 +548,14 @@ class Auth {
         };
         const hide = this._authDialogService?.({
             ...this._service,
-            title: translations.youHaveLoggedInAs.replace('%userName%', newUser.name ?? ''),
-            loginCaption: translations.login,
-            loginToCaption: translations.loginTo,
-            confirmLabel: translations.applyChange,
-            tryAgainLabel: translations.tryAgainLabel,
-            cancelLabel: translations.postpone,
+            title: translations?.youHaveLoggedInAs ?? translate('youHaveLoggedInAs').
+                replace('%userName%', newUser.name ?? '').
+                replace('{{userName}}', newUser.name ?? ''),
+            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();
@@ -623,7 +615,10 @@ class Auth {
                 done();
                 reject(new Error('Auth(@jetbrains/ring-ui): postponed by user'));
             };
-            const hide = onBackendDown({ onCheckAgain, onPostpone, backendError, translations });
+            const hide = onBackendDown({
+                onCheckAgain, onPostpone, backendError,
+                translations: translations ?? getTranslationsWithFallback()
+            });
             window.addEventListener('online', onCheckAgain);
             function networkWatchdog() {
                 if (navigator && navigator.onLine) {

package/components/auth-dialog/auth-dialog.js

@@ -68,7 +68,9 @@ class AuthDialog extends Component {
         const { show, className, errorMessage, serviceImage, serviceName, loginCaption, loginToCaption, confirmLabel, cancelLabel, tryAgainLabel, onConfirm, onCancel, onTryAgain } = this.props;
         const { retrying } = this.state;
         const defaultTitle = serviceName ? loginToCaption : loginCaption;
-        const title = (this.props.title || defaultTitle).replace('%serviceName%', serviceName ?? '');
+        const title = (this.props.title || defaultTitle).
+            replace('%serviceName%', serviceName ?? '').
+            replace('{{serviceName}}', serviceName ?? '');
         return (<Dialog label={title} data-test="ring-auth-dialog" className={className} contentClassName={classNames(className, styles.dialog)} onEscPress={this.onEscPress} show={show} trapFocus>
         <Content>
           <div className={styles.content}>

package/components/date-picker/date-input.js

@@ -89,7 +89,9 @@ class DateInput extends React.PureComponent {
                 case 'time':
                     return timePlaceholder || translations.addTime;
                 default:
-                    return translations.selectName.replace('%name%', name);
+                    return translations.selectName.
+                        replace('%name%', name).
+                        replace('{{name}}', name);
             }
         })();
         const classes = classNames(styles.filter, styles[`${name}Input`], divider && styles[`${name}InputWithDivider`], 'ring-js-shortcuts');

package/components/editable-heading/editable-heading.css

@@ -22,6 +22,7 @@
   padding: 0;
 
   cursor: pointer;
+  user-select: text;
 
   text-align: inherit;
 
@@ -33,7 +34,8 @@
 
   font-size: inherit;
 
-  @nest .disabled & {
+  @nest .disabled &,
+  .selectionMode & {
     user-select: text;
 
     border-radius: 0;
@@ -43,7 +45,8 @@
     outline: 1px solid var(--ring-border-hover-color);
   }
 
-  @nest .disabled &:focus {
+  @nest .disabled &:focus,
+  .selectionMode &:focus {
     outline: none;
   }
 
@@ -51,7 +54,8 @@
     background-color: var(--ring-hover-background-color);
   }
 
-  @nest .disabled &:hover {
+  @nest .disabled &:hover,
+  .selectionMode &:hover {
     cursor: initial;
 
     background-color: initial;

package/components/editable-heading/editable-heading.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import Heading, { Levels } from '../heading/heading';
 import Button from '../button/button';
@@ -17,6 +17,8 @@ export const EditableHeading = (props) => {
     }, ...restProps } = props;
     const [shortcutsScope] = React.useState(getUID('ring-editable-heading-'));
     const [isInFocus, setIsInFocus] = React.useState(false);
+    const [isMouseDown, setIsMouseDown] = React.useState(false);
+    const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);
     const hasError = error !== undefined;
     const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
     const isCancelDisabled = isSaving;
@@ -36,16 +38,27 @@ export const EditableHeading = (props) => {
         [styles.isEditing]: isEditing,
         [styles.error]: hasError,
         [styles.disabled]: disabled,
-        [styles.multiline]: multiline
+        [styles.multiline]: multiline,
+        [styles.selectionMode]: isInSelectionMode
     });
     const headingClasses = classNames(styles.heading, headingClassName, styles[`size${size}`]);
     const inputClasses = classNames('ring-js-shortcuts', styles.input, inputStyles[`size${size}`], styles[`level${level}`], inputClassName);
-    const onHeadingClick = React.useCallback(() => {
-        if (disabled) {
-            return undefined;
+    const onHeadingMouseDown = React.useCallback(() => {
+        setIsMouseDown(true);
+    }, []);
+    const onMouseMove = React.useCallback(() => {
+        if (!isMouseDown) {
+            return;
         }
-        return onEdit();
-    }, [disabled, onEdit]);
+        setIsInSelectionMode(true);
+    }, [isMouseDown]);
+    const onMouseUp = React.useCallback(() => {
+        if (isMouseDown && !isInSelectionMode && !disabled) {
+            onEdit();
+        }
+        setIsMouseDown(false);
+        setIsInSelectionMode(false);
+    }, [isMouseDown, isInSelectionMode, disabled, onEdit]);
     const onInputFocus = React.useCallback((e) => {
         setIsInFocus(true);
         onFocus?.(e);
@@ -54,6 +67,14 @@ export const EditableHeading = (props) => {
         setIsInFocus(false);
         onBlur?.(e);
     }, [onBlur]);
+    useEffect(() => {
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+        return () => {
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+        };
+    });
     return (<>
       <div className={classes}>
         {!disabled && isEditing
@@ -62,7 +83,7 @@ export const EditableHeading = (props) => {
 
               <input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur}/>
             </>)
-            : (<button type="button" className={styles.headingWrapperButton} onClick={onHeadingClick}>
+            : (<button type="button" className={styles.headingWrapperButton} onMouseDown={onHeadingMouseDown}>
               <Heading className={headingClasses} level={level} data-test={dataTest}>{children}</Heading>
             </button>)}
 

package/components/global/react-render-adapter.js

@@ -1,36 +1,21 @@
-// Allows overriding ReactDOM.render when using React 18:
-// import * as client from 'react-dom/client'
-// import {setClient} from '@jetbrains/ring-ui/components/global/react-render-adapter'
-//
-// setClient(client)
-import {
-  render as legacyRender,
-  unmountComponentAtNode as legacyUnmountComponentAtNode,
-  hydrate as legacyHydrate
-} from 'react-dom';
-
+import { render as legacyRender, unmountComponentAtNode as legacyUnmountComponentAtNode, hydrate as legacyHydrate } from 'react-dom';
 /* eslint-disable import/no-mutable-exports */
 export let render = legacyRender;
 export let unmountComponentAtNode = legacyUnmountComponentAtNode;
 export let hydrate = legacyHydrate;
-/* eslint-enable */
-
-export function setClient({createRoot, hydrateRoot}) {
-  const roots = new WeakMap();
-
-  render = (element, container) => {
-    let root = roots.get(container);
-    if (root == null) {
-      root = createRoot(container);
-      roots.set(container, root);
-    }
-    root.render(element);
-  };
-
-  unmountComponentAtNode = container => roots.get(container)?.unmount();
-
-  hydrate = (element, container) => {
-    const root = hydrateRoot(container, element);
-    roots.set(container, root);
-  };
+export function setClient({ createRoot, hydrateRoot }) {
+    const roots = new WeakMap();
+    render = (element, container) => {
+        let root = roots.get(container);
+        if (root == null) {
+            root = createRoot(container);
+            roots.set(container, root);
+        }
+        root.render(element);
+    };
+    unmountComponentAtNode = container => roots.get(container)?.unmount();
+    hydrate = (element, container) => {
+        const root = hydrateRoot(container, element);
+        roots.set(container, root);
+    };
 }

package/components/header/profile.d.ts

@@ -15,7 +15,7 @@ export interface ProfileTranslations {
 export interface ProfileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
     closeOnSelect: boolean;
     renderPopupItems: (items: ListDataItem[]) => readonly ListDataItem[];
-    translations: ProfileTranslations;
+    translations?: ProfileTranslations | null | undefined;
     size: Size;
     renderGuest: (props: ProfileProps) => ReactNode;
     hasUpdates?: boolean | null | undefined;
@@ -67,6 +67,8 @@ export default class Profile extends PureComponent<ProfileProps> {
         renderGuest: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: ProfileProps;
+    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

@@ -5,6 +5,7 @@ import Avatar, { Size } from '../avatar/avatar';
 import Button from '../button/button';
 import DropdownMenu from '../dropdown-menu/dropdown-menu';
 import PopupMenu from '../popup-menu/popup-menu';
+import { I18nContext } from '../i18n/i18n-context';
 import { isTruthy } from '../global/typescript-utils';
 import styles from './header.css';
 const rgItemType = PopupMenu.ListProps.Type.LINK;
@@ -48,17 +49,20 @@ class Profile extends PureComponent {
     static defaultProps = {
         closeOnSelect: true,
         renderPopupItems: items => items,
-        translations: {},
         size: Size.Size32,
-        renderGuest: ({ loading, onLogin, className, translations }) => (<div className={classNames(styles.profileEmpty, className)}>
-        <Button primary data-test="ring-header-login-button" disabled={loading} loader={loading} onClick={onLogin}>
-          {translations.login || 'Log in...'}
-        </Button>
-      </div>)
+        renderGuest: ({ loading, onLogin, className, translations }) => (<I18nContext.Consumer>
+        {({ translate }) => (<div className={classNames(styles.profileEmpty, className)}>
+            <Button primary data-test="ring-header-login-button" disabled={loading} loader={loading} onClick={onLogin}>
+              {translations?.login ?? translate('login')}
+            </Button>
+          </div>)}
+      </I18nContext.Consumer>)
     };
+    static contextType = I18nContext;
     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 { translate } = this.context;
         if (!user) {
             return (<div {...props} className={classNames(styles.profileEmpty, className)}>
           <Avatar size={size} round={round}/>
@@ -76,32 +80,32 @@ class Profile extends PureComponent {
         const items = [
             showApplyChangedUser && {
                 rgItemType,
-                label: translations.applyChangedUser || 'Apply changed user',
+                label: translations?.applyChangedUser ?? translate('applyChangedUser'),
                 className: styles.profileMenuItem,
                 onClick: onRevertPostponement
             },
             showLogIn && {
                 rgItemType,
-                label: translations.login || 'Log in',
+                label: translations?.login ?? translate('login'),
                 className: styles.profileMenuItem,
                 onClick: onRevertPostponement
             },
             {
                 rgItemType: PopupMenu.ListProps.Type.LINK,
-                label: translations.profile || 'Profile',
+                label: translations?.profile ?? translate('profile'),
                 target: '_self',
                 href: profileUrl,
                 LinkComponent
             },
             showSwitchUser && {
                 rgItemType,
-                label: translations.switchUser || 'Switch user',
+                label: translations?.switchUser ?? translate('switchUser'),
                 className: styles.profileMenuItem,
                 onClick: onSwitchUser
             },
             showLogOut && {
                 rgItemType,
-                label: translations.logout || 'Log out',
+                label: translations?.logout ?? translate('logout'),
                 onClick: onLogout
             }
         ].filter(isTruthy);

package/components/i18n/README.md

@@ -0,0 +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

@@ -0,0 +1,13 @@
+import React from 'react';
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,59 @@
+import defaultMessages from './messages.json';
+export type MessagesStrict = typeof defaultMessages;
+export type Messages = Partial<MessagesStrict>;
+export declare function setTranslations(newMessages: Messages): void;
+export declare function getTranslations(): Partial<{
+    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;
+}>;
+export declare function getTranslationsWithFallback(): MessagesStrict;
+export declare function translate(key: keyof MessagesStrict): string;

package/components/i18n/i18n.js

@@ -0,0 +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/i18n/messages.json

@@ -0,0 +1,53 @@
+{
+  "login": "Log in",
+  "logout": "Log out",
+  "loginTo": "Log in to {{serviceName}}",
+  "ok": "OK",
+  "cancel": "Cancel",
+  "tryAgainLabel": "Try again",
+  "postpone": "Postpone",
+  "youHaveLoggedInAs": "You have logged in as another user: {{userName}}",
+  "applyChange": "Apply change",
+  "backendIsNotAvailable": "Connection lost",
+  "checkAgain": "try again",
+  "nothingHappensLink": "Click here if nothing happens",
+  "errorMessage": "There may be a problem with your network connection. Make sure that you are online and",
+  "applyChangedUser": "Apply changed user",
+  "profile": "Profile",
+  "switchUser": "Switch user",
+  "addFirstDate": "Add first date",
+  "addSecondDate": "Add second date",
+  "addTime": "Add time",
+  "selectName": "Select {{name}}",
+  "setDate": "Set a date",
+  "setDateTime": "Set date and time",
+  "setPeriod": "Set a period",
+  "clear": "Clear input",
+  "gotIt": "Got it",
+  "dismiss": "Dismiss",
+  "perPage": "per page",
+  "firstPage": "First page",
+  "lastPage": "Last page",
+  "nextPage": "Next page",
+  "previousPage": "Previous",
+  "searchTitle": "Search",
+  "clearTitle": "Clear search input",
+  "userAgreement": "User Agreement",
+  "accept": "Accept",
+  "decline": "Decline",
+  "close": "Close",
+  "scrollToAccept": "View the entire agreement to continue",
+  "remindLater": "Remind me later",
+  "filterItems": "Filter items",
+  "selectOption": "Select an option",
+  "progress": "Progress",
+  "loading": "Loading...",
+  "noOptionsFound": "No options found",
+  "banned": "banned",
+  "online": "online",
+  "offline": "offline",
+  "copyToClipboard": "Copy email to clipboard",
+  "copiedToClipboard": "Email was copied to clipboard",
+  "copingToClipboardError": "Failed to copy to clipboard",
+  "unverified": "Unverified"
+}

package/components/input/input.d.ts

@@ -28,7 +28,7 @@ export interface InputBaseProps {
     icon?: string | ComponentType | null | undefined;
     height?: ControlsHeight | undefined;
     afterInput?: ReactNode;
-    translations: InputTranslations;
+    translations?: InputTranslations | null | undefined;
 }
 type Override<D, S> = Omit<D, keyof S> & S;
 export type InputSpecificProps = Override<InputHTMLAttributes<HTMLInputElement>, InputBaseProps> & {
@@ -46,9 +46,6 @@ export declare class Input extends PureComponent<InputProps> {
         onChange: typeof noop;
         inputRef: typeof noop;
         enableShortcuts: string[];
-        translations: {
-            clear: string;
-        };
     };
     state: {
         empty: boolean;