@jetbrains/ring-ui 5.0.139 → 5.0.141

package/dist/auth-dialog/auth-dialog.js

@@ -38,7 +38,7 @@ import '../link/clickableLink.js';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 
-var modules_ae521deb = {"unit":"i__const_unit_0","light":"light_rui_159b","dialog":"dialog_rui_159b","content":"content_rui_159b font_rui_8bff","button":"button_rui_159b","firstButton":"firstButton_rui_159b button_rui_159b","title":"title_rui_159b","logo":"logo_rui_159b","error":"error_rui_159b"};
+var modules_ae521deb = {"unit":"i__const_unit_0","light":"light_rui_2ac4","dialog":"dialog_rui_159b","content":"content_rui_159b font_rui_8bff","button":"button_rui_159b","firstButton":"firstButton_rui_159b button_rui_159b","title":"title_rui_159b","logo":"logo_rui_159b","error":"error_rui_159b"};
 
 class AuthDialog extends Component {
   static propTypes = {

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

@@ -7,7 +7,7 @@ import { getPixelRatio } from '../global/dom.js';
 import FallbackAvatar from './fallback-avatar.js';
 import '../global/get-uid.js';
 
-var modules_61ca8c75 = {"light":"light_rui_a03e","avatar":"avatar_rui_a03e","subavatar":"subavatar_rui_a03e","empty":"empty_rui_a03e"};
+var modules_61ca8c75 = {"light":"light_rui_2ac4","avatar":"avatar_rui_a03e","subavatar":"subavatar_rui_a03e","empty":"empty_rui_a03e"};
 
 /**
  * @name Avatar

package/dist/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/dist/avatar-editor-ng/avatar-editor-ng.js

@@ -1,6 +1,6 @@
 import angular from 'angular';
 import pencilIcon from '@jetbrains/icons/pencil';
-import messageBundleNg from '../message-bundle-ng/message-bundle-ng.js';
+import MessageBundle from '../message-bundle-ng/message-bundle-ng.js';
 import alertService from '../alert-service/alert-service.js';
 import IconNG from '../icon-ng/icon-ng.js';
 import template from './avatar-editor-ng__template.js';
@@ -47,7 +47,7 @@ import '../alert/container.js';
 import '../template-ng/template-ng.js';
 import '../global/ring-angular-component.js';
 
-const angularModule = angular.module('Ring.avatar-editor', [messageBundleNg, IconNG]);
+const angularModule = angular.module('Ring.avatar-editor', [MessageBundle, IconNG]);
 
 /**
  * @name Avatar Editor Ng

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

@@ -1,6 +1,6 @@
 import angular from 'angular';
 import chevronRightIcon from '@jetbrains/icons/chevron-right';
-import LinkModule from '../link-ng/link-ng.js';
+import LinkNG from '../link-ng/link-ng.js';
 import IconNG from '../icon-ng/icon-ng.js';
 import '../_helpers/link.js';
 import '../icon/icon__constants.js';
@@ -8,13 +8,13 @@ import '../template-ng/template-ng.js';
 import '../global/ring-angular-component.js';
 import '../_helpers/icon.js';
 
-var modules_2c17c81e = {"unit":"i__const_unit_0","light":"light_rui_91a4","breadcrumb":"breadcrumb_rui_91a4","header":"header_rui_91a4","breadcrumbSmall":"breadcrumbSmall_rui_91a4","breadcrumbElement":"breadcrumbElement_rui_91a4","active":"active_rui_91a4","elementDescription":"elementDescription_rui_91a4","separatorIcon":"separatorIcon_rui_91a4"};
+var modules_2c17c81e = {"unit":"i__const_unit_0","light":"light_rui_2ac4","breadcrumb":"breadcrumb_rui_91a4","header":"header_rui_91a4","breadcrumbSmall":"breadcrumbSmall_rui_91a4","breadcrumbElement":"breadcrumbElement_rui_91a4","active":"active_rui_91a4","elementDescription":"elementDescription_rui_91a4","separatorIcon":"separatorIcon_rui_91a4"};
 
 /**
  * @name Breadcrumb Ng
  */
 
-const angularModule = angular.module('Ring.breadcrumb', [LinkModule, IconNG]);
+const angularModule = angular.module('Ring.breadcrumb', [LinkNG, IconNG]);
 angularModule.filter('breadcrumbNgChevronIcon', () => () => chevronRightIcon);
 angularModule.directive('rgBreadcrumb', function rgBreadcrumbDirective() {
   return {

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

@@ -10,7 +10,7 @@ import '../template-ng/template-ng.js';
 import '../_helpers/icon.js';
 import 'react';
 
-var modules_5f65bc62 = {"light":"light_rui_c440","ringIconDefaultColor":"ringIconDefaultColor_rui_c440","iconMarginFix":"iconMarginFix_rui_c440","transcludeSpacer":"transcludeSpacer_rui_c440","buttonWithoutIcon":"buttonWithoutIcon_rui_c440","iconNg":"iconNg_rui_c440","narrowRight":"narrowRight_rui_c440"};
+var modules_5f65bc62 = {"light":"light_rui_2ac4","ringIconDefaultColor":"ringIconDefaultColor_rui_c440","iconMarginFix":"iconMarginFix_rui_c440","transcludeSpacer":"transcludeSpacer_rui_c440","buttonWithoutIcon":"buttonWithoutIcon_rui_c440","iconNg":"iconNg_rui_c440","narrowRight":"narrowRight_rui_c440"};
 
 const {
   ringIconDefaultColor,
@@ -174,6 +174,6 @@ function createButtonDirective(tagName) {
 }
 angularModule.directive('rgButton', createButtonDirective('button'));
 angularModule.directive('rgButtonLink', createButtonDirective('a'));
-var Button = angularModule.name;
+var ButtonNG = angularModule.name;
 
-export { LOADER_BACKGROUND_SELECTOR, Button as default };
+export { LOADER_BACKGROUND_SELECTOR, ButtonNG as default };

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

@@ -7,7 +7,7 @@ import normalizeIndent from '../global/normalize-indent.js';
 import trivialTemplateTag from '../global/trivial-template-tag.js';
 import memoize from '../global/memoize.js';
 
-var modules_66c414ea = {"unit":"i__const_unit_0","light":"light_rui_7185","code":"code_rui_7185","inline":"inline_rui_7185","softWrap":"softWrap_rui_7185"};
+var modules_66c414ea = {"unit":"i__const_unit_0","light":"light_rui_2ac4","code":"code_rui_7185","inline":"inline_rui_7185","softWrap":"softWrap_rui_7185"};
 
 var modules_39cf09e8 = {"highlightContainer":"highlightContainer_rui_6e02"};
 

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

@@ -39,7 +39,7 @@ import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../_helpers/panel.js';
 
-var modules_4c9c3a3a = {"unit":"i__const_unit_0","light":"light_rui_2cda","description":"description_rui_2cda"};
+var modules_4c9c3a3a = {"unit":"i__const_unit_0","light":"light_rui_2ac4","description":"description_rui_2cda"};
 
 /**
  * @name Confirm

package/dist/confirm-ng/confirm-ng.js

@@ -1,6 +1,6 @@
 import angular from 'angular';
 import confirm from '../confirm-service/confirm-service.js';
-import messageBundleNg from '../message-bundle-ng/message-bundle-ng.js';
+import MessageBundle from '../message-bundle-ng/message-bundle-ng.js';
 import 'react';
 import '../global/react-render-adapter.js';
 import 'react-dom';
@@ -48,7 +48,7 @@ import '../_helpers/panel.js';
  * @name Confirm Ng
  */
 
-const angularModule = angular.module('Ring.confirm', [messageBundleNg]);
+const angularModule = angular.module('Ring.confirm', [MessageBundle]);
 angularModule.service('confirm', ["$q", "RingMessageBundle", function service($q, RingMessageBundle) {
   return function showConfirm(message, description, actionTitle, cancelTitle, cancelIsDefault, actionFn) {
     return $q.when(confirm({

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/date-picker/date-input.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { Input } from '../input/input.js';
 import { ControlsHeight } from '../global/controls-height.js';
+import { I18nContext } from '../i18n/i18n-context.js';
 import { dateType } from './consts.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
@@ -19,11 +20,10 @@ import '../global/memoize.js';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 import '../global/get-uid.js';
-import '../i18n/i18n-context.js';
-import '../i18n/i18n.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
 import '../input/input-label.js';
+import '../i18n/i18n.js';
 import 'date-fns/add';
 
 class DateInput extends React.PureComponent {
@@ -47,17 +47,6 @@ 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,
@@ -71,6 +60,7 @@ class DateInput extends React.PureComponent {
       });
     }
   }
+  static contextType = I18nContext;
   input;
   inputRef = el => {
     this.input = el;
@@ -114,6 +104,9 @@ class DateInput extends React.PureComponent {
       timePlaceholder,
       locale
     } = this.props;
+    const {
+      translate
+    } = this.context;
     let displayText = '';
     if (active && hoverDate) {
       displayText = displayFormat(hoverDate, locale);
@@ -125,15 +118,16 @@ class DateInput extends React.PureComponent {
       displayText = time || '';
     }
     const placeholder = (() => {
+      var _translations$addFirs, _translations$addSeco, _translations$addTime, _translations$selectN;
       switch (name) {
         case 'from':
-          return fromPlaceholder || translations.addFirstDate;
+          return fromPlaceholder || ((_translations$addFirs = translations?.addFirstDate) !== null && _translations$addFirs !== void 0 ? _translations$addFirs : translate('addFirstDate'));
         case 'to':
-          return toPlaceholder || translations.addSecondDate;
+          return toPlaceholder || ((_translations$addSeco = translations?.addSecondDate) !== null && _translations$addSeco !== void 0 ? _translations$addSeco : translate('addSecondDate'));
         case 'time':
-          return timePlaceholder || translations.addTime;
+          return timePlaceholder || ((_translations$addTime = translations?.addTime) !== null && _translations$addTime !== void 0 ? _translations$addTime : translate('addTime'));
         default:
-          return translations.selectName.replace('%name%', name).replace('{{name}}', name);
+          return ((_translations$selectN = translations?.selectName) !== null && _translations$selectN !== void 0 ? _translations$selectN : translate('selectName')).replace('%name%', name).replace('{{name}}', name);
       }
     })();
     const classes = classNames(modules_0c7b7d96.filter, modules_0c7b7d96[`${name}Input`], divider && modules_0c7b7d96[`${name}InputWithDivider`], 'ring-js-shortcuts');

package/dist/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>;