@jetbrains/ring-ui 6.0.35 → 6.0.37

package/components/checkbox/checkbox.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import checkmarkIcon from '@jetbrains/icons/checkmark-12px';
@@ -6,6 +6,7 @@ import minusIcon from '@jetbrains/icons/remove-12px';
 import Icon from '../icon/icon';
 import { refObject } from '../global/prop-types';
 import composeRefs from '../global/composeRefs';
+import ControlHelp from '../control-help/control-help';
 import styles from './checkbox.css';
 /**
  * @name Checkbox
@@ -55,18 +56,23 @@ export default class Checkbox extends PureComponent {
         this.input = el;
     };
     render() {
-        const { children, label, className, containerClassName, containerStyle, cellClassName, labelClassName, indeterminate, inputRef, ...restProps } = this.props;
+        const { children, label, className, containerClassName, containerStyle, cellClassName, labelClassName, indeterminate, inputRef, help, ...restProps } = this.props;
         const classes = classNames(styles.input, className);
         const containerClasses = classNames(styles.checkbox, containerClassName);
         const cellClasses = classNames(styles.cell, cellClassName);
         const labelClasses = classNames(styles.label, labelClassName);
         return (<label className={containerClasses} style={containerStyle} data-test="ring-checkbox">
         <input {...restProps} data-checked={restProps.checked} ref={composeRefs(this.inputRef, inputRef)} type="checkbox" className={classes}/>
-        <span className={cellClasses}>
-          <Icon glyph={checkmarkIcon} className={styles.check}/>
-          <Icon glyph={minusIcon} className={styles.minus}/>
+        <div className={styles.cellWrapper}>
+          <span className={cellClasses}>
+            <Icon glyph={checkmarkIcon} className={styles.check}/>
+            <Icon glyph={minusIcon} className={styles.minus}/>
+          </span>
+        </div>
+        <span className={labelClasses}>
+          {label || children}
+          {help && <ControlHelp>{help}</ControlHelp>}
         </span>
-        <span className={labelClasses}>{label || children}</span>
       </label>);
     }
 }

package/components/code/code.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="highlight.js" />
-import React, { PureComponent, Ref } from 'react';
+import { PureComponent, Ref } from 'react';
 import PropTypes from 'prop-types';
 import highlight from 'highlight.js/lib/core';
 declare function noop(): void;
@@ -37,8 +36,8 @@ export default class Code extends PureComponent<CodeProps> {
     code?: HTMLElement | null;
     highlight(): Promise<void>;
     get codeRef(): HTMLElement | null | undefined;
-    get initCodeRef(): React.RefObject<HTMLElement> | ((ref: HTMLElement | null) => void);
-    render(): React.JSX.Element;
+    get initCodeRef(): import("react").RefObject<HTMLElement> | ((ref: HTMLElement | null) => void);
+    render(): import("react").JSX.Element;
 }
 declare const code: (strings: TemplateStringsArray, ...interpolations: unknown[]) => void;
 export { code, highlight };

package/components/code/code.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import highlight from 'highlight.js/lib/core';

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

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
+import * as React from 'react';
 type Props = {
     minHeight?: number;
     className?: string;

package/components/collapse/collapse-content.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef, useContext, useMemo } from 'react';
+import { useState, useEffect, useRef, useContext, useMemo } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
 import { getRect } from '../global/dom';

package/components/collapse/collapse-context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface CollapseContextInterface {
     collapsed: boolean;
     duration: number;

package/components/collapse/collapse-control.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 type ChildrenFunction = (collapsed: boolean) => React.ReactElement;
 type Props = {
     children: ChildrenFunction | React.ReactElement;

package/components/collapse/collapse-control.js

@@ -1,4 +1,5 @@
-import React, { useMemo, useContext, cloneElement } from 'react';
+import { useMemo, useContext, cloneElement } from 'react';
+import * as React from 'react';
 import dataTests from '../global/data-tests';
 import { CollapseContext } from './collapse-context';
 import { COLLAPSE_CONTROL_TEST_ID } from './consts';

package/components/collapse/collapse.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
+import * as React from 'react';
 type Props = {
     onChange?: (collapsed: boolean) => void;
     duration?: number;

package/components/collapse/collapse.js

@@ -1,4 +1,5 @@
-import React, { useCallback, useId, useState } from 'react';
+import { useCallback, useId, useState } from 'react';
+import * as React from 'react';
 import { CollapseContext } from './collapse-context';
 import { BASE_ANIMATION_DURATION } from './consts';
 /**

package/components/confirm/confirm.d.ts

@@ -1,4 +1,5 @@
-import React, { PureComponent, ReactNode } from 'react';
+import { PureComponent, ReactNode } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 export interface ConfirmProps {
     text: string;

package/components/confirm/confirm.js

@@ -1,4 +1,5 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import Dialog from '../dialog/dialog';
 import Button from '../button/button';

package/components/confirm-service/confirm-service.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import Confirm from '../confirm/confirm';
 import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';

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

@@ -1,4 +1,4 @@
-import React, { Component, HTMLAttributes } from 'react';
+import { 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(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export { default as Sidebar } from './sidebar';

package/components/content-layout/content-layout.js

@@ -1,4 +1,4 @@
-import React, { cloneElement, Component } from 'react';
+import { Children, cloneElement, Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Sidebar from './sidebar';
@@ -28,7 +28,7 @@ export default class ContentLayout extends Component {
             [styles.contentLayoutResponsive]: responsive
         });
         const contentClasses = classNames(styles.contentLayoutContent, contentClassName);
-        const childrenArray = React.Children.toArray(children);
+        const childrenArray = Children.toArray(children);
         const sidebarChild = childrenArray.filter((child) => child != null && typeof child === 'object' && 'type' in child && child.type === Sidebar)[0];
         const sidebar = sidebarChild && cloneElement(sidebarChild, {
             contentNode: this.state.contentNode

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

@@ -1,4 +1,4 @@
-import React, { Component, HTMLAttributes } from 'react';
+import { 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(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/content-layout/sidebar.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Waypoint } from 'react-waypoint';

package/components/contenteditable/contenteditable.d.ts

@@ -1,4 +1,4 @@
-import React, { Component, HTMLAttributes, Ref } from 'react';
+import { 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(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }
 type ContentEditableBaseAttrs = JSX.LibraryManagedAttributes<typeof ContentEditableBase, ContentEditableBaseProps>;
 export type ContentEditableProps = Omit<ContentEditableBaseAttrs, '__html'>;
 declare const ContentEditable: {
-    ({ children, ...props }: ContentEditableProps): React.JSX.Element;
+    ({ children, ...props }: ContentEditableProps): import("react").JSX.Element;
     propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         disabled: PropTypes.Requireable<boolean>;

package/components/contenteditable/contenteditable.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { renderToStaticMarkup } from 'react-dom/server';
 /**

package/components/control-help/control-help.css

@@ -0,0 +1,8 @@
+@import "../global/variables.css";
+
+.help {
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+}

package/components/control-help/control-help.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+type ControlHelpProps = HTMLAttributes<HTMLDivElement>;
+export default function ControlHelp({ className, ...restProps }: ControlHelpProps): import("react").JSX.Element;
+export {};

package/components/control-help/control-help.js

@@ -0,0 +1,5 @@
+import classNames from 'classnames';
+import styles from './control-help.css';
+export default function ControlHelp({ className, ...restProps }) {
+    return <div className={classNames(className, styles.help)} {...restProps}/>;
+}

package/components/control-label/control-label.d.ts

@@ -1,4 +1,5 @@
-import React, { LabelHTMLAttributes } from 'react';
+import { LabelHTMLAttributes } from 'react';
+import * as React from 'react';
 export declare enum LabelType {
     SECONDARY = "secondary",
     FORM = "form"

package/components/control-label/control-label.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './control-label.css';

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

@@ -1,7 +1,7 @@
 /**
   * @name Data List
   */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { FocusSensorOuterProps } from '../global/focus-sensor-hoc';
 import { SelectionShortcutsAddProps, SelectionShortcutsOuterProps } from '../table/selection-shortcuts-hoc';
 import { DisableHoverAddProps } from '../table/disable-hover-hoc';
@@ -20,7 +20,7 @@ export interface DataListBaseProps<T extends SelectionItem> {
 type FocusableProps<T extends SelectionItem> = DataListBaseProps<T> & DisableHoverAddProps & FocusSensorOuterProps<HTMLDivElement> & SelectionShortcutsAddProps<T>;
 export type DataListContainerProps<T extends SelectionItem> = DataListBaseProps<T> & FocusSensorOuterProps<HTMLDivElement> & SelectionShortcutsOuterProps<T>;
 export default class DataListContainer<T extends SelectionItem> extends Component<DataListContainerProps<T>> {
-    static propTypes: React.WeakValidationMap<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<SelectionItem, FocusableProps<SelectionItem>>> | undefined;
+    static propTypes: import("react").WeakValidationMap<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<SelectionItem, FocusableProps<SelectionItem>>> | undefined;
     DataList: {
         new (props: import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>): {
             state: {
@@ -30,17 +30,17 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             componentWillUnmount(): void;
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
-            render(): React.JSX.Element;
+            render(): import("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;
+            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;
             readonly props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>;
             refs: {
-                [key: string]: React.ReactInstance;
+                [key: string]: import("react").ReactInstance;
             };
             shouldComponentUpdate?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextState: Readonly<{}>, nextContext: any): boolean;
-            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-            getSnapshotBeforeUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>): any;
+            componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>): any | null;
             componentDidUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>, snapshot?: any): void;
             componentWillMount?(): void;
             UNSAFE_componentWillMount?(): void;
@@ -57,17 +57,17 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             componentWillUnmount(): void;
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
-            render(): React.JSX.Element;
+            render(): import("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;
+            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;
             readonly props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>;
             refs: {
-                [key: string]: React.ReactInstance;
+                [key: string]: import("react").ReactInstance;
             };
             shouldComponentUpdate?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextState: Readonly<{}>, nextContext: any): boolean;
-            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-            getSnapshotBeforeUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>): any;
+            componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>): any | null;
             componentDidUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>, snapshot?: any): void;
             componentWillMount?(): void;
             UNSAFE_componentWillMount?(): void;
@@ -76,10 +76,10 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             componentWillUpdate?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextState: Readonly<{}>, nextContext: any): void;
             UNSAFE_componentWillUpdate?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextState: Readonly<{}>, nextContext: any): void;
         };
-        propTypes: React.WeakValidationMap<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>> | undefined;
+        propTypes: import("react").WeakValidationMap<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>> | undefined;
         defaultProps: Partial<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>> | undefined;
-        contextType?: React.Context<any> | undefined;
+        contextType?: import("react").Context<any> | undefined;
     };
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export {};

package/components/data-list/data-list.js

@@ -1,7 +1,7 @@
 /**
   * @name Data List
   */
-import React, { PureComponent, Component } from 'react';
+import { PureComponent, Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import focusSensorHOC from '../global/focus-sensor-hoc';

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { 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: React.JSX.Element;
+    title: import("react").JSX.Element;
 }[];
 export default items;

package/components/data-list/data-list.mock.js

@@ -1,5 +1,3 @@
-/* eslint-disable react/jsx-no-literals */
-import React from 'react';
 import Link from '../link/link';
 import Badge from '../badge/badge';
 const items = [

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

@@ -1,4 +1,4 @@
-import React, { PureComponent, ReactNode } from 'react';
+import { 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) => React.JSX.Element;
-    render(): React.JSX.Element;
+    renderItem: (model: T, parentShift: number) => import("react").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/data-list/item.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import chevronRightIcon from '@jetbrains/icons/chevron-right';
 import chevronDownIcon from '@jetbrains/icons/chevron-down';

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

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

package/components/data-list/title.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import focusSensorHOC from '../global/focus-sensor-hoc';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DatePopupBaseProps, Field } from './consts';
 export interface UpdateInputConfig {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Input from '../input/input';

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

@@ -1,4 +1,5 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import type { Locale } from 'date-fns';
 import Popup from '../popup/popup';

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

@@ -1,4 +1,5 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { format as formatDate } from 'date-fns/format';

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

@@ -1,4 +1,5 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DatePickerChange, DatePopupBaseProps, DateSpecificPopupProps, DatePopupState, RangeSpecificPopupProps, TimeSpecificPopupProps, Field } from './consts';
 export type DatePopupProps = DatePopupBaseProps & (DateSpecificPopupProps | TimeSpecificPopupProps | RangeSpecificPopupProps);

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

@@ -1,4 +1,5 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isAfter } from 'date-fns/isAfter';
 import { isBefore } from 'date-fns/isBefore';

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

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

package/components/date-picker/day.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { addDays } from 'date-fns/addDays';

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

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

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

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { endOfMonth } from 'date-fns/endOfMonth';

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

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { 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(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export {};

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

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { addYears } from 'date-fns/addYears';

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

@@ -1,10 +1,9 @@
-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): React.JSX.Element;
+declare function Month(props: MonthProps): import("react").JSX.Element;
 declare namespace Month {
     var propTypes: {
         month: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;

package/components/date-picker/month.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { addDays } from 'date-fns/addDays';
 import { endOfMonth } from 'date-fns/endOfMonth';
 import { format } from 'date-fns/format';

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

@@ -1,7 +1,6 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { MonthsProps } from './consts';
-declare function Months(props: MonthsProps): React.JSX.Element;
+declare function Months(props: MonthsProps): import("react").JSX.Element;
 declare namespace Months {
     var propTypes: {
         onScroll: PropTypes.Requireable<(...args: any[]) => any>;

package/components/date-picker/months.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { addMonths } from 'date-fns/addMonths';
 import { getDay } from 'date-fns/getDay';

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

@@ -1,10 +1,9 @@
-import React from 'react';
 import type { Locale } from 'date-fns';
 import PropTypes from 'prop-types';
 interface WeekdaysProps {
     locale: Locale | undefined;
 }
-declare function Weekdays(props: WeekdaysProps): React.JSX.Element;
+declare function Weekdays(props: WeekdaysProps): import("react").JSX.Element;
 declare namespace Weekdays {
     var propTypes: {
         locale: PropTypes.Requireable<object>;

package/components/date-picker/weekdays.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import classNames from 'classnames';
 import { getDay } from 'date-fns/getDay';
 import { format } from 'date-fns/format';

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

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { CalendarProps } from './consts';
 interface YearsState {
@@ -18,8 +18,8 @@ export default class Years extends PureComponent<CalendarProps> {
     componentWillUnmount(): void;
     stoppedScrolling?: boolean;
     setYear(date: number): void;
-    componentRef: React.RefObject<HTMLDivElement>;
+    componentRef: import("react").RefObject<HTMLDivElement>;
     handleWheel: (e: WheelEvent) => void;
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export {};