@jetbrains/ring-ui 6.0.35 → 6.0.36

package/components/list/list__hint.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import styles from './list.css';

package/components/list/list__item.d.ts

@@ -1,8 +1,8 @@
-import React, { PureComponent, SyntheticEvent } from 'react';
+import { PureComponent, SyntheticEvent } from 'react';
 import { ListDataItemProps } from './consts';
 export default class ListItem<T> extends PureComponent<ListDataItemProps<T>> {
     id: string;
     stopBubbling: (e: SyntheticEvent) => void;
     private _isString;
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/list/list__item.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
@@ -61,7 +61,7 @@ export default class ListItem extends PureComponent {
         {showCheckbox && (<div className={styles.checkboxContainer}>
             <Checkbox aria-labelledby={this.id} checked={checkbox} disabled={disabled} onChange={onCheckboxChange} onClick={this.stopBubbling}/>
           </div>)}
-        <button id={this.id} type="button" tabIndex={tabIndex} onClick={onClick} onMouseOver={onMouseOver} onMouseDown={onMouseDown} onFocus={onMouseOver} onMouseUp={onMouseUp} className={classes} style={style}>
+        <button id={this.id} type="button" tabIndex={tabIndex} onClick={onClick} onMouseOver={onMouseOver} onMouseDown={onMouseDown} onFocus={onMouseOver} onMouseUp={onMouseUp} className={classes} style={style} disabled={disabled}>
           <div className={styles.top} onMouseOut={this.stopBubbling} onBlur={this.stopBubbling}>
             {!showCheckbox && (<div className={styles.left}>
                 {leftNodes}

package/components/list/list__link.d.ts

@@ -1,9 +1,9 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import { ListDataItemProps } from './consts';
 /**
  * @constructor
  * @extends {ReactComponent}
  */
 export default class ListLink<T> extends PureComponent<ListDataItemProps<T>> {
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/list/list__link.js

@@ -1,4 +1,4 @@
-import React, { Component, PureComponent } from 'react';
+import { Component, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Link, { linkHOC } from '../link/link';

package/components/list/list__separator.d.ts

@@ -1,5 +1,5 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import { ListDataItemProps } from './consts';
 export default class ListSeparator<T> extends PureComponent<ListDataItemProps<T>> {
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/list/list__separator.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './list.css';

package/components/list/list__title.d.ts

@@ -1,5 +1,5 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import { ListDataItemProps } from './consts';
 export default class ListTitle<T> extends PureComponent<ListDataItemProps<T>> {
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/list/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 styles from './list.css';

package/components/loader/loader.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, PureComponent } from 'react';
+import { HTMLAttributes, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import LoaderCore, { LoaderCoreProps } from './loader__core';
 export interface LoaderProps extends Partial<LoaderCoreProps>, HTMLAttributes<HTMLElement> {
@@ -24,5 +24,5 @@ export default class Loader extends PureComponent<LoaderProps> {
     componentWillUnmount(): void;
     loader?: LoaderCore;
     initLoader: (el: Node | null) => void;
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/loader/loader.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import dataTests from '../global/data-tests';
 import LoaderCore from './loader__core';

package/components/loader-inline/loader-inline.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, PureComponent } from 'react';
+import { HTMLAttributes, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 export interface LoaderInlineProps extends HTMLAttributes<HTMLDivElement> {
     'data-test'?: string | null | undefined;
@@ -12,7 +12,7 @@ declare class LoaderInline extends PureComponent<LoaderInlineProps> {
         'data-test': PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export type LoaderInlineAtrrs = JSX.LibraryManagedAttributes<typeof LoaderInline, LoaderInlineProps>;
 export default LoaderInline;

package/components/loader-inline/loader-inline.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import dataTests from '../global/data-tests';

package/components/loader-screen/loader-screen.d.ts

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { LoaderProps } from '../loader/loader';
 export interface LoaderScreenProps extends LoaderProps {
@@ -13,5 +13,5 @@ export default class LoaderScreen extends PureComponent<LoaderScreenProps> {
         containerClassName: PropTypes.Requireable<string>;
         message: PropTypes.Requireable<string>;
     };
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/loader-screen/loader-screen.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Loader from '../loader/loader';

package/components/login-dialog/login-dialog.d.ts

@@ -1,4 +1,4 @@
-import React, { Component, ReactNode } from 'react';
+import { Component, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 export interface LoginDialogProps {
     onCancel: () => void;
@@ -42,6 +42,6 @@ export default class LoginDialog extends Component<LoginDialogProps> {
     showFallbackTimout?: number;
     startFallbackCountdown(): void;
     onMessage: (event: MessageEvent) => void;
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export type LoginDialogAttrs = JSX.LibraryManagedAttributes<typeof LoginDialog, LoginDialogProps>;

package/components/login-dialog/login-dialog.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import Dialog from '../dialog/dialog';
 import { Content } from '../island/island';

package/components/login-dialog/service.js

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

package/components/markdown/markdown.d.ts

@@ -1,4 +1,4 @@
-import React, { PureComponent, ReactNode } from 'react';
+import { PureComponent, ReactNode } from 'react';
 export interface MarkdownProps {
     inline?: boolean | null | undefined;
     children: ReactNode;
@@ -8,5 +8,5 @@ export interface MarkdownProps {
   * @name Markdown
 */
 export default class Markdown extends PureComponent<MarkdownProps> {
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/markdown/markdown.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import headingStyles from '../heading/heading.css';

package/components/message/message.d.ts

@@ -1,4 +1,4 @@
-import React, { Component, ReactNode } from 'react';
+import { Component, ReactNode } from 'react';
 import Popup, { PopupAttrs } from '../popup/popup';
 import { Directions } from '../popup/popup.consts';
 import { IconType } from '../icon/icon';
@@ -49,7 +49,7 @@ export default class Message extends Component<MessageProps> {
     node?: HTMLElement | null;
     popupRef: (el: Popup | null) => void;
     getTailOffset(): number;
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export type MessageAttrs = JSX.LibraryManagedAttributes<typeof Message, MessageProps>;
 export {};

package/components/message/message.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import gift from '@jetbrains/icons/gift';

package/components/pager/pager.d.ts

@@ -1,7 +1,8 @@
 /**
  * @name Pager
  */
-import React, { PureComponent, ReactNode } from 'react';
+import { PureComponent, ReactNode } from 'react';
+import * as React from 'react';
 import { SelectItem } from '../select/select';
 export interface PagerTranslations {
     perPage: string;

package/components/pager/pager.js

@@ -1,7 +1,8 @@
 /**
  * @name Pager
  */
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import chevronLeftIcon from '@jetbrains/icons/chevron-left';

package/components/panel/panel.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, PureComponent } from 'react';
+import { HTMLAttributes, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 /**
  * @name Panel
@@ -8,5 +8,5 @@ export default class Panel extends PureComponent<HTMLAttributes<HTMLElement>> {
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/panel/panel.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './panel.css';

package/components/popup/popup.d.ts

@@ -1,7 +1,8 @@
 /**
  * @name Popup
  */
-import React, { PureComponent, ReactNode, CSSProperties, SyntheticEvent } from 'react';
+import { PureComponent, ReactNode, CSSProperties, SyntheticEvent } from 'react';
+import * as React from 'react';
 import { Listeners } from '../global/dom';
 import { PositionStyles } from './position';
 import { Dimension, Directions, Display, MaxHeight, MinWidth } from './popup.consts';

package/components/popup/popup.js

@@ -1,7 +1,8 @@
 /**
  * @name Popup
  */
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
+import * as React from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';

package/components/popup/popup.target.d.ts

@@ -1,7 +1,7 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
-export declare const PopupTargetContext: React.Context<string | Element | undefined>;
+import { HTMLAttributes, ReactNode } from 'react';
+export declare const PopupTargetContext: import("react").Context<string | Element | undefined>;
 export interface PopupTargetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     id: string;
     children: ReactNode | ((target: ReactNode) => ReactNode);
 }
-export declare const PopupTarget: React.ForwardRefExoticComponent<PopupTargetProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PopupTarget: import("react").ForwardRefExoticComponent<PopupTargetProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/popup/popup.target.js

@@ -1,4 +1,4 @@
-import React, { createContext, forwardRef } from 'react';
+import { createContext, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 export const PopupTargetContext = createContext(undefined);
 export const PopupTarget = forwardRef(function PopupTarget({ id, children, ...restProps }, ref) {

package/components/popup-menu/popup-menu.d.ts

@@ -1,4 +1,4 @@
-import React, { SyntheticEvent } from 'react';
+import { SyntheticEvent } from 'react';
 import Popup, { BasePopupProps } from '../popup/popup';
 import List, { ListProps as ListPropsType } from '../list/list';
 import { ListDataItem } from '../list/consts';
@@ -61,7 +61,7 @@ export default class PopupMenu<T = unknown> extends Popup<PopupMenuProps<T>> {
     list?: List<T> | null;
     listRef: (el: List<T> | null) => void;
     /** @override */
-    getInternalContent(): React.JSX.Element;
+    getInternalContent(): import("react").JSX.Element;
 }
 export type PopupMenuAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof PopupMenu, PopupMenuProps<T>>;
 export declare const ListProps: {

package/components/popup-menu/popup-menu.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import Popup from '../popup/popup';
 import List from '../list/list';

package/components/progress-bar/progress-bar.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, PureComponent } from 'react';
+import { HTMLAttributes, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 export interface ProgressBarProps extends HTMLAttributes<HTMLElement> {
     max: number;
@@ -59,6 +59,6 @@ export default class ProgressBar extends PureComponent<ProgressBarProps> {
     progressbarWrapperRef: (el: HTMLElement | null) => void;
     progressbar?: (HTMLElement | null);
     progressbarRef: (el: HTMLElement | null) => void;
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export type ProgressBarAttrs = JSX.LibraryManagedAttributes<typeof ProgressBar, ProgressBarProps>;

package/components/progress-bar/progress-bar.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './progress-bar.css';

package/components/query-assist/query-assist.d.ts

@@ -1,4 +1,5 @@
-import React, { Component, ComponentRef, ReactNode, SyntheticEvent } from 'react';
+import { Component, ComponentRef, ReactNode, SyntheticEvent } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import Caret, { Position } from '../caret/caret';
 import PopupMenu from '../popup-menu/popup-menu';
@@ -298,7 +299,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
     shortcutsScope: string;
     shortcutsMap: ShortcutsMap;
     listShortcutsMap: ShortcutsMap;
-    renderActions(): React.ReactNode[];
+    renderActions(): ReactNode[];
     render(): React.JSX.Element;
 }
 export type QueryAssistAttrs = JSX.LibraryManagedAttributes<typeof QueryAssist, QueryAssistProps>;

package/components/query-assist/query-assist.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 debounce from 'just-debounce-it';
 import classNames from 'classnames';
@@ -366,7 +367,7 @@ export default class QueryAssist extends Component {
             }
             const diff = this.immediateState.query.length - this.state.query.length;
             const originalIndex = this.immediateState.caret - diff;
-            const ranges = [...this.state.styleRanges ?? []];
+            const ranges = [...(this.state.styleRanges ?? [])];
             const range = ranges.
                 find(r => originalIndex >= r.start && originalIndex <= r.start + r.length);
             if (range) {
@@ -826,7 +827,7 @@ export default class QueryAssist extends Component {
              onKeyUp={this.handleInput} // to handle input and key up
              onKeyDown={this.handleEnter} onPaste={this.handlePaste} spellCheck="false">{this.state.query && <span>{this.renderQuery()}</span>}</ContentEditable>
 
-              {renderPlaceholder && (<button type="button" className={placeholderStyles} ref={this.placeholderRef} onClick={this.handleCaretMove} data-test="query-assist-placeholder">
+              {renderPlaceholder && (<button type="button" className={placeholderStyles} ref={this.placeholderRef} onClick={this.handleCaretMove} data-test="query-assist-placeholder" disabled={this.props.disabled}>
                   {this.props.placeholder}
                 </button>)}
 

package/components/query-assist/query-assist__suggestions.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { ListDataItem } from '../list/consts';
 export interface QueryAssistSuggestion {
     description: string;
@@ -19,7 +19,7 @@ export interface SuggestionItem {
 }
 export default class QueryAssistSuggestions {
     static createKey(suggestion: QueryAssistSuggestion): string;
-    static renderLabel(suggestion: QueryAssistSuggestion): React.JSX.Element;
+    static renderLabel(suggestion: QueryAssistSuggestion): import("react").JSX.Element;
     static renderGroupSeparator(suggestion: QueryAssistSuggestion, prevSuggestion: string): {
         key: string;
         description: string;

package/components/query-assist/query-assist__suggestions.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import List from '../list/list';
 import styles from './query-assist.css';
 const ICON_ID_LENGTH = 44;

package/components/radio/radio.d.ts

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { RadioProps } from './radio__item';
 /**
@@ -12,7 +12,7 @@ export default class Radio extends Component<RadioProps> {
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
     };
-    static Item: React.ForwardRefExoticComponent<import("./radio__item").RadioItemProps & React.RefAttributes<import("./radio__item").Radio>>;
+    static Item: import("react").ForwardRefExoticComponent<import("./radio__item").RadioItemProps & import("react").RefAttributes<import("./radio__item").RadioItemInner>>;
     uid: string;
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/radio/radio.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import getUID from '../global/get-uid';
 import RadioItem, { RadioContext } from './radio__item';

package/components/radio/radio__item.d.ts

@@ -1,11 +1,14 @@
-import React, { Component, InputHTMLAttributes } from 'react';
+import { Component, InputHTMLAttributes, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
     value?: string | undefined;
     onChange?: ((value: string) => void) | null | undefined;
 }
-export declare const RadioContext: React.Context<RadioProps>;
-export declare class Radio extends Component<InputHTMLAttributes<HTMLInputElement>> {
+export declare const RadioContext: import("react").Context<RadioProps>;
+export interface RadioItemInnerProps extends InputHTMLAttributes<HTMLInputElement> {
+    help?: ReactNode;
+}
+export declare class RadioItemInner extends Component<RadioItemInnerProps> {
     static propTypes: {
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -19,10 +22,10 @@ export declare class Radio extends Component<InputHTMLAttributes<HTMLInputElemen
     inputRef: (el: HTMLElement | null) => void;
     label?: HTMLElement | null;
     labelRef: (el: HTMLElement | null) => void;
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }
-export interface RadioItemProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface RadioItemProps extends RadioItemInnerProps {
     value: string;
 }
-declare const RadioItem: React.ForwardRefExoticComponent<RadioItemProps & React.RefAttributes<Radio>>;
+declare const RadioItem: import("react").ForwardRefExoticComponent<RadioItemProps & import("react").RefAttributes<RadioItemInner>>;
 export default RadioItem;

package/components/radio/radio__item.js

@@ -1,10 +1,11 @@
-import React, { Component, createContext, forwardRef } from 'react';
+import { Component, createContext, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import getUID from '../global/get-uid';
+import ControlHelp from '../control-help/control-help';
 import styles from './radio.css';
 export const RadioContext = createContext({});
-export class Radio extends Component {
+export class RadioItemInner extends Component {
     static propTypes = {
         className: PropTypes.string,
         children: PropTypes.node,
@@ -23,19 +24,22 @@ export class Radio extends Component {
         this.label = el;
     };
     render() {
-        const { className, children, ...restProps } = this.props;
+        const { className, children, help, ...restProps } = this.props;
         const classes = classNames(styles.radio, className);
         return (<label ref={this.labelRef} className={classes} htmlFor={this.uid}>
         <input id={this.uid} {...restProps} ref={this.inputRef} className={styles.input} type="radio"/>
         <span className={styles.circle}/>
-        <span className={styles.label}>{children}</span>
+        <span className={styles.label}>
+          {children}
+          {help && <ControlHelp>{help}</ControlHelp>}
+        </span>
       </label>);
     }
 }
 const RadioItem = forwardRef(function RadioItem(props, ref) {
     return (<RadioContext.Consumer>
-      {({ value, onChange, ...restContext }) => (<Radio ref={ref} {...restContext} checked={value != null ? value === props.value : undefined} onChange={onChange != null ? () => onChange(props.value) : undefined} {...props}/>)}
+      {({ value, onChange, ...restContext }) => (<RadioItemInner ref={ref} {...restContext} checked={value != null ? value === props.value : undefined} onChange={onChange != null ? () => onChange(props.value) : undefined} {...props}/>)}
     </RadioContext.Consumer>);
 });
-RadioItem.propTypes = Radio.propTypes;
+RadioItem.propTypes = RadioItemInner.propTypes;
 export default RadioItem;

package/components/select/select-popup.css

@@ -97,6 +97,7 @@
 
 .selectAll {
   display: flex;
+  align-items: baseline;
   justify-content: space-between;
 
   padding: 8px 16px 0;

package/components/select/select.css

@@ -75,7 +75,7 @@
 .clearIcon {
   padding: 0 3px;
 
-  vertical-align: -2px;
+  vertical-align: -1px;
 }
 
 .sizeS {

package/components/select/select.d.ts

@@ -1,4 +1,5 @@
-import React, { ButtonHTMLAttributes, Component, ComponentType, CSSProperties, HTMLAttributes, ReactNode, Ref, RefCallback, SyntheticEvent } from 'react';
+import { ButtonHTMLAttributes, Component, ComponentType, CSSProperties, HTMLAttributes, ReactNode, Ref, RefCallback, SyntheticEvent } from 'react';
+import * as React from 'react';
 import { SelectHandlerParams } from '../list/list';
 import { Size } from '../input/input';
 import { LabelType } from '../control-label/control-label';
@@ -100,6 +101,7 @@ export interface BaseSelectProps<T = unknown> {
     popupStyle?: CSSProperties | undefined;
     top?: number | undefined;
     left?: number | undefined;
+    offset?: number | undefined;
     renderOptimization?: boolean | undefined;
     ringPopupTarget?: string | null | undefined;
     preventListOverscroll?: boolean | undefined;
@@ -199,6 +201,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
         tags: null;
         ringPopupTarget: null;
         dir: string;
+        offset: number;
     };
     static getDerivedStateFromProps<T = unknown>(nextProps: SelectProps<T>, prevState: SelectState<T>): Partial<SelectState<T>>;
     state: SelectState<T>;
@@ -229,7 +232,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     _hidePopup: (tryFocusAnchor?: boolean) => void;
     addHandler: () => void;
     getToolbar(): React.JSX.Element | null;
-    getTopbar(): React.ReactNode;
+    getTopbar(): ReactNode;
     getLowerCaseLabel: typeof getLowerCaseLabel;
     doesLabelMatch: typeof doesLabelMatch;
     getFilterFn(): FilterFn<T>;

package/components/select/select.js

@@ -1,4 +1,5 @@
-import React, { Component, Fragment } from 'react';
+import { Component, Fragment } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import chevronDownIcon from '@jetbrains/icons/chevron-down';
@@ -225,7 +226,8 @@ export default class Select extends Component {
         onReset: noop,
         tags: null,
         ringPopupTarget: null,
-        dir: 'ltr'
+        dir: 'ltr',
+        offset: 4
     };
     static getDerivedStateFromProps(nextProps, prevState) {
         const { multiple, data, type } = nextProps;
@@ -442,7 +444,7 @@ export default class Select extends Component {
                 else if (!shownData.length) {
                     message = this.props.notFoundMessage ?? translate('noOptionsFound');
                 }
-                return (<SelectPopup data={_shownData} message={message} toolbar={showPopup && this.getToolbar()} topbar={this.getTopbar()} loading={this.props.loading} activeIndex={this.state.selectedIndex} hidden={!showPopup} ref={this.popupRef} maxHeight={this.props.maxHeight} minWidth={this.props.minWidth} directions={this.props.directions} className={this.props.popupClassName} style={this.props.popupStyle} top={this.props.top} left={this.props.left} filter={this.isInputMode() ? false : this.props.filter} // disable popup filter in INPUT mode
+                return (<SelectPopup data={_shownData} message={message} toolbar={showPopup && this.getToolbar()} topbar={this.getTopbar()} loading={this.props.loading} activeIndex={this.state.selectedIndex} hidden={!showPopup} ref={this.popupRef} maxHeight={this.props.maxHeight} minWidth={this.props.minWidth} directions={this.props.directions} className={this.props.popupClassName} style={this.props.popupStyle} top={this.props.top} left={this.props.left} offset={this.props.offset} filter={this.isInputMode() ? false : this.props.filter} // disable popup filter in INPUT mode
                  filterIcon={this.props.filterIcon} filterRef={this.props.filterRef} multiple={this.props.multiple} filterValue={this.state.filterValue} anchorElement={anchorElement} onCloseAttempt={this._onCloseAttempt} onOutsideClick={this.props.onOutsideClick} onSelect={this._listSelectHandler} onSelectAll={this._listSelectAllHandler} onFilter={this._filterChangeHandler} onClear={this.clearFilter} onLoadMore={this.props.onLoadMore} isInputMode={this.isInputMode()} selected={this.state.selected} tags={this.props.tags} compact={this.props.compact} renderOptimization={this.props.renderOptimization} ringPopupTarget={this.props.ringPopupTarget} disableMoveOverflow={this.props.disableMoveOverflow} disableScrollToActive={this.props.disableScrollToActive} dir={this.props.dir} onEmptyPopupEnter={this.onEmptyPopupEnter} listId={this.listId} preventListOverscroll={this.props.preventListOverscroll}/>);
             }}
       </I18nContext.Consumer>);

package/components/select/select__filter.d.ts

@@ -1,4 +1,4 @@
-import React, { Component, RefCallback } from 'react';
+import { Component, RefCallback } from 'react';
 import { InputAttrs } from '../input/input';
 declare function noop(): void;
 type SelectFilterProps = InputAttrs & {
@@ -14,6 +14,6 @@ export default class SelectFilter extends Component<SelectFilterProps> {
     blur(): void;
     input?: HTMLInputElement | HTMLTextAreaElement | null;
     inputRef: (el: HTMLInputElement | HTMLTextAreaElement | null) => void;
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export {};

package/components/select/select__filter.js

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