@jetbrains/ring-ui 5.0.138 → 5.0.140

package/components/alert/alert.d.ts

@@ -108,6 +108,6 @@ export default class Alert extends PureComponent<AlertProps, State> {
      */
     private _getIcon;
     storeAlertRef: (node: HTMLDivElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export { default as Container } from './container';

package/components/alert-service/alert-service.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { AlertProps, AlertType } from '../alert/alert';
 export interface AlertItem extends Partial<Omit<AlertProps, 'children'>> {
     key: string | number;
@@ -12,7 +12,7 @@ declare class AlertService {
     showingAlerts: AlertItem[];
     containerElement: HTMLDivElement;
     _getShowingAlerts(): AlertItem[];
-    renderAlertContainer(alerts: readonly AlertItem[]): JSX.Element;
+    renderAlertContainer(alerts: readonly AlertItem[]): React.JSX.Element;
     /**
      * Renders alert container into virtual node to skip maintaining container
      */

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/auth-dialog/auth-dialog.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 /**
  * @name Auth Dialog
@@ -56,5 +56,5 @@ export default class AuthDialog extends Component<AuthDialogProps> {
     componentWillUnmount(): void;
     onEscPress: () => void;
     onRetryPress: () => Promise<void>;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/avatar/avatar.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, ImgHTMLAttributes } from 'react';
+import React, { PureComponent, ImgHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 /**
  * @name Avatar
@@ -47,6 +47,6 @@ export default class Avatar extends PureComponent<AvatarProps> {
     };
     handleError: () => void;
     handleSuccess: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type AvatarAttrs = JSX.LibraryManagedAttributes<typeof Avatar, AvatarProps>;

package/components/avatar/fallback-avatar.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Size } from './avatar';
 export interface FallbackAvatarProps {
@@ -5,7 +6,7 @@ export interface FallbackAvatarProps {
     size: Size;
     round: boolean | null | undefined;
 }
-declare function FallbackAvatar({ username, size, round }: FallbackAvatarProps): JSX.Element;
+declare function FallbackAvatar({ username, size, round }: FallbackAvatarProps): React.JSX.Element;
 declare namespace FallbackAvatar {
     var propTypes: {
         username: PropTypes.Validator<string>;

package/components/badge/badge.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, HTMLAttributes } from 'react';
+import React, { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export interface BadgeProps extends HTMLAttributes<HTMLElement> {
     gray?: boolean | null | undefined;
@@ -20,5 +20,5 @@ export default class Badge extends PureComponent<BadgeProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'data-test': PropTypes.Requireable<string>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/button/button.d.ts

@@ -59,7 +59,7 @@ export declare class Button extends PureComponent<ButtonProps> {
     static contextType: React.Context<ControlsHeight>;
     context: React.ContextType<typeof ControlsHeightContext>;
     buttonRef: React.RefObject<HTMLButtonElement>;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export { Size as IconSize };
 export type ContainerProps<T extends ButtonProps> = JSX.LibraryManagedAttributes<typeof Button, T>;

package/components/button-group/button-group.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, HTMLAttributes } from 'react';
+import React, { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import Caption from './caption';
 export interface ButtonGroupProps extends HTMLAttributes<HTMLElement> {
@@ -13,6 +13,6 @@ export default class ButtonGroup extends PureComponent<ButtonGroupProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export { Caption };

package/components/button-group/caption.d.ts

@@ -1,8 +1,8 @@
-import { PureComponent, HTMLAttributes } from 'react';
+import React, { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export default class Caption extends PureComponent<HTMLAttributes<HTMLElement>> {
     static propTypes: {
         className: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/button-set/button-set.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, HTMLAttributes } from 'react';
+import React, { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export interface ButtonSetProps extends HTMLAttributes<HTMLElement> {
     'data-test'?: string | null | undefined;
@@ -12,5 +12,5 @@ export default class ButtonSet extends PureComponent<ButtonSetProps> {
         className: PropTypes.Requireable<string>;
         'data-test': PropTypes.Requireable<string>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/button-toolbar/button-toolbar.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, HTMLAttributes } from 'react';
+import React, { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export interface ButtonToolbarProps extends HTMLAttributes<HTMLElement> {
     'data-test'?: string | null | undefined;
@@ -12,5 +12,5 @@ export default class ButtonToolbar extends PureComponent<ButtonToolbarProps> {
         className: PropTypes.Requireable<string>;
         'data-test': PropTypes.Requireable<string>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, InputHTMLAttributes, CSSProperties, Ref } from 'react';
+import React, { PureComponent, InputHTMLAttributes, CSSProperties, Ref } from 'react';
 import PropTypes from 'prop-types';
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string | null | undefined;
@@ -41,5 +41,5 @@ export default class Checkbox extends PureComponent<CheckboxProps> {
     componentDidUpdate(prevProps: CheckboxProps): void;
     input?: HTMLInputElement | null;
     inputRef: (el: HTMLInputElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/code/code.d.ts

@@ -37,7 +37,7 @@ export default class Code extends PureComponent<CodeProps> {
     highlight(): Promise<void>;
     get codeRef(): HTMLElement | null | undefined;
     get initCodeRef(): React.RefObject<HTMLElement> | ((ref: HTMLElement | null) => void);
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 declare const code: (strings: TemplateStringsArray, ...interpolations: unknown[]) => void;
 export { code, highlight };

package/components/confirm/confirm.d.ts

@@ -43,6 +43,6 @@ export default class Confirm extends PureComponent<ConfirmProps> {
         onReject: () => void;
     };
     onEscPress: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type ConfirmAttributes = JSX.LibraryManagedAttributes<typeof Confirm, ConfirmProps>;

package/components/content-layout/content-layout.d.ts

@@ -1,4 +1,4 @@
-import { Component, HTMLAttributes } from 'react';
+import React, { Component, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export interface ContentLayoutProps extends HTMLAttributes<HTMLElement> {
     responsive: boolean;
@@ -21,6 +21,6 @@ export default class ContentLayout extends Component<ContentLayoutProps> {
         contentNode: null;
     };
     saveContentNode: (contentNode: HTMLElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export { default as Sidebar } from './sidebar';

package/components/content-layout/sidebar.d.ts

@@ -1,4 +1,4 @@
-import { Component, HTMLAttributes } from 'react';
+import React, { Component, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { Waypoint } from 'react-waypoint';
 export interface SidebarProps extends HTMLAttributes<HTMLElement> {
@@ -27,5 +27,5 @@ export default class Sidebar extends Component<SidebarProps> {
     shouldUseFixation(): boolean;
     shouldFixateBottom(): boolean;
     sidebarRef: (node: HTMLElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/contenteditable/contenteditable.d.ts

@@ -1,4 +1,4 @@
-import { Component, HTMLAttributes, Ref } from 'react';
+import React, { Component, HTMLAttributes, Ref } from 'react';
 import PropTypes from 'prop-types';
 /**
  * @name ContentEditable
@@ -28,12 +28,12 @@ declare class ContentEditableBase extends Component<ContentEditableBaseProps> {
     };
     shouldComponentUpdate(nextProps: ContentEditableBaseProps): boolean;
     componentDidUpdate(prevProps: ContentEditableBaseProps): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 type ContentEditableBaseAttrs = JSX.LibraryManagedAttributes<typeof ContentEditableBase, ContentEditableBaseProps>;
 export type ContentEditableProps = Omit<ContentEditableBaseAttrs, '__html'>;
 declare const ContentEditable: {
-    ({ children, ...props }: ContentEditableProps): JSX.Element;
+    ({ children, ...props }: ContentEditableProps): React.JSX.Element;
     propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         disabled: PropTypes.Requireable<boolean>;

package/components/data-list/data-list.d.ts

@@ -30,7 +30,7 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             componentWillUnmount(): void;
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
-            render(): JSX.Element;
+            render(): React.JSX.Element;
             context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
@@ -57,7 +57,7 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             componentWillUnmount(): void;
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
-            render(): JSX.Element;
+            render(): React.JSX.Element;
             context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
@@ -80,6 +80,6 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
         defaultProps: Partial<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>> | undefined;
         contextType?: React.Context<any> | undefined;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/components/data-list/data-list.mock.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { SelectionItem } from '../table/selection';
 export interface Item extends SelectionItem {
     title: ReactNode;
@@ -11,6 +11,6 @@ export declare const moreItems: {
     id: number;
     selectable: boolean;
     collapsible: boolean;
-    title: JSX.Element;
+    title: React.JSX.Element;
 }[];
 export default items;

package/components/data-list/item.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, ReactNode } from 'react';
+import React, { PureComponent, ReactNode } from 'react';
 import Selection, { SelectionItem } from '../table/selection';
 export declare enum moreLessButtonStates {
     UNUSED = 0,
@@ -45,6 +45,6 @@ export default class Item<T extends SelectionItem> extends PureComponent<ItemPro
     onShowLess: () => void;
     onFocus: () => void;
     onSelect: (selected: boolean) => void;
-    renderItem: (model: T, parentShift: number) => JSX.Element;
-    render(): JSX.Element;
+    renderItem: (model: T, parentShift: number) => React.JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/data-list/title.d.ts

@@ -20,7 +20,7 @@ declare class Title extends PureComponent<TitleProps> {
     onCheckboxFocus: () => void;
     onCheckboxChange: () => void;
     toggleSelection(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 declare const _default: React.ComponentType<import("../global/focus-sensor-hoc").FocusSensorProps<TitleProps, HTMLDivElement, typeof Title>>;
 export default _default;

package/components/date-picker/consts.d.ts

@@ -27,10 +27,10 @@ export declare const HALF = 0.5;
 export declare const dateType: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
 export declare function parseTime(time: string): string | null;
 export interface DateInputTranslations {
-    addFirstDate: string;
-    addSecondDate: string;
-    addTime: string;
-    selectName: string;
+    addFirstDate?: string;
+    addSecondDate?: string;
+    addTime?: string;
+    selectName?: string;
 }
 export interface DateSpecificPopupProps {
     withTime?: false | undefined;
@@ -66,7 +66,7 @@ export interface DatePopupBaseProps {
     to?: Date | number | string | null | undefined;
     minDate?: string | null | undefined;
     maxDate?: string | null | undefined;
-    translations: DateInputTranslations;
+    translations?: DateInputTranslations | null | undefined;
     fromPlaceholder?: string | null | undefined;
     toPlaceholder?: string | null | undefined;
     timePlaceholder?: string | null | undefined;

package/components/date-picker/date-input.d.ts

@@ -36,22 +36,13 @@ export default class DateInput extends React.PureComponent<DateInputProps> {
         onClear: PropTypes.Requireable<(...args: any[]) => any>;
         locale: PropTypes.Requireable<object>;
     };
-    static defaultProps: {
-        fromPlaceholder: null;
-        toPlaceholder: null;
-        timePlaceholder: null;
-        translations: {
-            addFirstDate: string;
-            addSecondDate: string;
-            addTime: string;
-            selectName: string;
-        };
-    };
     componentDidUpdate(prevProps: DateInputProps): void;
+    static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
+    context: React.ContextType<typeof DateInput.contextType>;
     input?: HTMLInputElement | null;
     inputRef: (el: HTMLInputElement | null) => void;
     updateInput({ text, active }: UpdateInputConfig): void;
     handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleKeyDown: (e: React.KeyboardEvent) => false | void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Input from '../input/input';
 import { ControlsHeight } from '../global/controls-height';
+import { I18nContext } from '../i18n/i18n-context';
 import { dateType } from './consts';
 import styles from './date-picker.css';
 class DateInput extends React.PureComponent {
@@ -26,23 +27,13 @@ class DateInput extends React.PureComponent {
         onClear: PropTypes.func,
         locale: PropTypes.object
     };
-    static defaultProps = {
-        fromPlaceholder: null,
-        toPlaceholder: null,
-        timePlaceholder: null,
-        translations: {
-            addFirstDate: 'Add first date',
-            addSecondDate: 'Add second date',
-            addTime: 'Add time',
-            selectName: 'Select %name%'
-        }
-    };
     componentDidUpdate(prevProps) {
         const { hidden, text, active } = this.props;
         if (!hidden && prevProps.hidden || text !== prevProps.text || active !== prevProps.active) {
             this.updateInput({ text, active });
         }
     }
+    static contextType = I18nContext;
     input;
     inputRef = (el) => {
         this.input = el;
@@ -67,6 +58,7 @@ class DateInput extends React.PureComponent {
     handleKeyDown = (e) => e.key === 'Enter' && this.props.onConfirm();
     render() {
         const { active, divider, text, time, name, hoverDate, date, displayFormat, translations, onActivate, onClear, fromPlaceholder, toPlaceholder, timePlaceholder, locale } = this.props;
+        const { translate } = this.context;
         let displayText = '';
         if (active && hoverDate) {
             displayText = displayFormat(hoverDate, locale);
@@ -83,13 +75,13 @@ class DateInput extends React.PureComponent {
         const placeholder = (() => {
             switch (name) {
                 case 'from':
-                    return fromPlaceholder || translations.addFirstDate;
+                    return fromPlaceholder || (translations?.addFirstDate ?? translate('addFirstDate'));
                 case 'to':
-                    return toPlaceholder || translations.addSecondDate;
+                    return toPlaceholder || (translations?.addSecondDate ?? translate('addSecondDate'));
                 case 'time':
-                    return timePlaceholder || translations.addTime;
+                    return timePlaceholder || (translations?.addTime ?? translate('addTime'));
                 default:
-                    return translations.selectName.
+                    return (translations?.selectName ?? translate('selectName')).
                         replace('%name%', name).
                         replace('{{name}}', name);
             }

package/components/date-picker/date-picker.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import type { Locale } from 'date-fns';
 import Popup from '../popup/popup';
@@ -17,14 +17,14 @@ export type DatePickerProps = Omit<DatePopupProps, 'translations' | 'parseDateIn
     inline: boolean;
     popupClassName?: string | null | undefined;
     dropdownProps?: DropdownAttrs;
-    translations: DatePickerTranslations;
+    translations?: DatePickerTranslations | null | undefined;
     displayMonthFormat: (date: Date, locale: Locale | undefined) => string;
     displayDayFormat: (date: Date, locale: Locale | undefined) => string;
     displayTimeFormat: (date: Date, locale: Locale | undefined) => string;
     applyTimeInput: (date: Date, time: string | null | undefined) => Date;
-    datePlaceholder: string;
-    dateTimePlaceholder: string;
-    rangePlaceholder: string;
+    datePlaceholder?: string;
+    dateTimePlaceholder?: string;
+    rangePlaceholder?: string;
     disabled?: boolean | null | undefined;
     parseDateInput: (input: string | null | undefined) => Date | null;
     size?: Size;
@@ -62,6 +62,8 @@ export default class DatePicker extends PureComponent<DatePickerProps> {
         size: PropTypes.Requireable<Size>;
     };
     static defaultProps: DatePickerProps;
+    static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
+    context: React.ContextType<typeof DatePicker.contextType>;
     handleChange: (change: DatePickerChange | Date | null | undefined) => void;
     clear: () => void;
     popup?: Popup | null;
@@ -70,6 +72,6 @@ export default class DatePicker extends PureComponent<DatePickerProps> {
     parse: (arg: string | number | Date | null | undefined) => Date | null;
     formatTime(): string | null;
     getAnchorText: () => string;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type DatePickerAttrs = JSX.LibraryManagedAttributes<typeof DatePicker, DatePickerProps>;

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

@@ -17,11 +17,11 @@ import Icon from '../icon';
 import Button from '../button/button';
 import Link from '../link/link';
 import { Size } from '../input/input';
+import { I18nContext } from '../i18n/i18n-context';
 import DatePopup from './date-popup';
 import { dateType } from './consts';
 import styles from './date-picker.css';
 import formats from './formats';
-import DateInput from './date-input';
 const PopupComponent = ({ hidden = false, className, popupRef, onClear, datePopupProps, onComplete, ...restProps }) => (<Popup hidden={hidden} keepMounted className={className} ref={popupRef} directions={[
         Popup.PopupProps.Directions.BOTTOM_RIGHT,
         Popup.PopupProps.Directions.BOTTOM_LEFT,
@@ -84,17 +84,9 @@ class DatePicker extends PureComponent {
         displayMonthFormat: (date, locale) => (date ? formatDate(date, 'd MMM', { locale }) : ''),
         displayDayFormat: (date, locale) => (date ? formatDate(date, 'd', { locale }) : ''),
         displayTimeFormat: (date, locale) => (date ? formatDate(date, 'HH:mm', { locale }) : ''),
-        datePlaceholder: 'Set a date',
-        dateTimePlaceholder: 'Set date and time',
-        rangePlaceholder: 'Set a period',
         minDate: null,
         maxDate: null,
         onChange() { },
-        translations: {
-            setDate: 'Set a date',
-            setDateTime: 'Set date and time',
-            setPeriod: 'Set a period'
-        },
         applyTimeInput(date, timeString) {
             const [hours, minutes] = timeString?.split(':').map(Number) ?? [];
             return minutes != null ? set(date, { hours, minutes }) : date;
@@ -113,6 +105,7 @@ class DatePicker extends PureComponent {
             return null;
         }
     };
+    static contextType = I18nContext;
     handleChange = (change) => {
         const { onChange, withTime, applyTimeInput } = this.props;
         const adjustedChange = withTime && !(change instanceof Date) && change?.date != null
@@ -154,16 +147,19 @@ class DatePicker extends PureComponent {
     }
     getAnchorText = () => {
         const { range, datePlaceholder, dateTimePlaceholder, rangePlaceholder, withTime, displayFormat, displayMonthFormat, displayDayFormat, translations, locale } = this.props;
+        const { translate } = this.context;
         const date = this.parse(this.props.date);
         const from = this.parse(this.props.from);
         const to = this.parse(this.props.to);
         const time = this.formatTime();
         if (!range && !withTime) {
-            return date ? displayFormat(date, locale) : (datePlaceholder ?? translations.setDate);
+            return date
+                ? displayFormat(date, locale)
+                : (datePlaceholder ?? translations?.setDate ?? translate('setDate'));
         }
         else if (!range && withTime) {
             if (!date && !time) {
-                return dateTimePlaceholder ?? translations.setDateTime;
+                return dateTimePlaceholder ?? translations?.setDateTime ?? translate('setDateTime');
             }
             else {
                 return `${date && displayFormat(date, locale) || '—'}, ${time || '—'}`;
@@ -190,7 +186,7 @@ class DatePicker extends PureComponent {
             return `— ${displayFormat(to, locale)}`;
         }
         else {
-            return rangePlaceholder ?? translations.setPeriod;
+            return rangePlaceholder ?? translations?.setPeriod ?? translate('setPeriod');
         }
     };
     render() {
@@ -212,9 +208,7 @@ class DatePicker extends PureComponent {
               </Button>)} {...dropdownProps}>
         <PopupComponent className={popupClassName} popupRef={this.popupRef} onClear={clear ? this.clear : null} datePopupProps={{
                 ...datePopupProps,
-                // We want to provide translations further down to DateInput.
-                // Yet we should pass at least DateInput default translations not to have them empty.
-                translations: Object.assign({}, DateInput.defaultProps.translations, translations),
+                translations,
                 onChange: this.handleChange,
                 parseDateInput: this.parse,
                 time: this.formatTime()

package/components/date-picker/date-popup.d.ts

@@ -52,5 +52,5 @@ export default class DatePopup extends Component<DatePopupProps, DatePopupState>
     selectHandler: (date: Date) => void;
     handleScroll: (scrollDate: number) => void;
     onClear: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/date-picker/day.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { MonthsProps } from './consts';
 export interface DayProps extends MonthsProps {
@@ -26,5 +26,5 @@ export default class Day extends Component<DayProps> {
     inRange: (range: [Date, Date] | null) => boolean | null;
     isDisabled: (date: Date) => boolean;
     parse(text: string | null | undefined): Date | null;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/date-picker/month-names.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import { MonthsProps } from './consts';
-declare function MonthNames(props: MonthsProps): JSX.Element;
+declare function MonthNames(props: MonthsProps): React.JSX.Element;
 declare namespace MonthNames {
     var propTypes: {
         scrollDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;

package/components/date-picker/month-slider.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { LinearFunction } from '../global/linear-function';
 import { MonthsProps } from './consts';
@@ -24,6 +24,6 @@ export default class MonthSlider extends PureComponent<MonthSliderProps> {
     onMouseDown: () => void;
     onMouseUp: () => void;
     onMouseMove: (e: MouseEvent) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/components/date-picker/month.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import { MonthsProps } from './consts';
 export interface MonthProps extends MonthsProps {
     month: Date;
 }
-declare function Month(props: MonthProps): JSX.Element;
+declare function Month(props: MonthProps): React.JSX.Element;
 declare namespace Month {
     var propTypes: {
         month: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;