@jetbrains/ring-ui 5.0.0-beta.2 → 5.0.0-beta.22

package/components/input-ng/input-ng.js

@@ -8,7 +8,6 @@ import closeIcon from '@jetbrains/icons/close';
 
 import RingAngularComponent from '../global/ring-angular-component';
 import styles from '../input/input.css';
-import Theme from '../global/theme';
 import ButtonNg from '../button-ng/button-ng';
 
 import styleOverrides from './input-ng.css';
@@ -33,7 +32,6 @@ class RingInputComponent extends RingAngularComponent {
     label: '@',
     hint: '@',
     size: '@',
-    theme: '@',
     disabled: '@',
     active: '<',
     error: '@',
@@ -84,9 +82,9 @@ class RingInputComponent extends RingAngularComponent {
 
   getContainerClasses() {
     return classNames(
-      styles.container,
-      styles[this.theme || Theme.LIGHT],
+      styles.outerContainer,
       this.size ? [styles[`size${this.size}`]] : null,
+      styles.heightS,
       {
         [styles.active]: this.active,
         [styles.error]: this.error != null,
@@ -103,56 +101,54 @@ class RingInputComponent extends RingAngularComponent {
   data-test="ring-input-container"
   ng-class="$ctrl.getContainerClasses()"
 >
-  <input
-    aria-label="{{$ctrl.label || $ctrl.placeholder}}"
-    type="text"
-    data-test="ring-input"
-    class="${styles.input}"
-    name="{{$ctrl.name}}"
-    ng-if="!$ctrl.multiline"
-    placeholder="{{$ctrl.placeholder}}"
-    ng-model="$ctrl.value"
-    ng-required="$ctrl.required"
-    ng-disabled="$ctrl.disabled"
-    ng-minlength="$ctrl.ngMinlength"
-    ng-maxlength="$ctrl.ngMaxlength"
-    ng-change="$ctrl.onInputChange()"
-    ng-keyup="$ctrl.onKeyUp()"
-  />
-
-  <textarea
-    aria-label="{{$ctrl.label || $ctrl.placeholder}}"
-    data-test="ring-input"
-    ng-if="$ctrl.multiline"
-    class="${styles.input}"
-    rows="1"
-    name="{{$ctrl.name}}"
-    placeholder="{{$ctrl.placeholder}}"
-    ng-model="$ctrl.value"
-    ng-required="$ctrl.required"
-    ng-disabled="$ctrl.disabled"
-    ng-minlength="$ctrl.ngMinlength"
-    ng-maxlength="$ctrl.ngMaxlength"
-    ng-change="$ctrl.onInputChange()"
-    ng-keyup="$ctrl.onKeyUp()"
-  ></textarea>
-
-  <rg-button
-    ng-if="$ctrl.clearable"
-    data-test="ring-input-clear"
-    class="${styles.clear} ${styleOverrides.clear}"
-    icon="{{:: $ctrl.closeIcon}}"
-    ng-click="$ctrl.onClear()"
-  ></rg-button>
-
   <label
     ng-if="!$ctrl.borderless"
     class="${styles.label}"
   >{{$ctrl.label}}</label>
+  <div class="${styles.container}">
+    <input
+      aria-label="{{$ctrl.label || $ctrl.placeholder}}"
+      type="text"
+      data-test="ring-input"
+      class="${styles.input}"
+      name="{{$ctrl.name}}"
+      ng-if="!$ctrl.multiline"
+      placeholder="{{$ctrl.placeholder}}"
+      ng-model="$ctrl.value"
+      ng-required="$ctrl.required"
+      ng-disabled="$ctrl.disabled"
+      ng-minlength="$ctrl.ngMinlength"
+      ng-maxlength="$ctrl.ngMaxlength"
+      ng-change="$ctrl.onInputChange()"
+      ng-keyup="$ctrl.onKeyUp()"
+    />
+
+    <textarea
+      aria-label="{{$ctrl.label || $ctrl.placeholder}}"
+      data-test="ring-input"
+      ng-if="$ctrl.multiline"
+      class="${styles.input}"
+      rows="1"
+      name="{{$ctrl.name}}"
+      placeholder="{{$ctrl.placeholder}}"
+      ng-model="$ctrl.value"
+      ng-required="$ctrl.required"
+      ng-disabled="$ctrl.disabled"
+      ng-minlength="$ctrl.ngMinlength"
+      ng-maxlength="$ctrl.ngMaxlength"
+      ng-change="$ctrl.onInputChange()"
+      ng-keyup="$ctrl.onKeyUp()"
+    ></textarea>
+
+    <rg-button
+      ng-if="$ctrl.clearable"
+      data-test="ring-input-clear"
+      class="${styles.clear} ${styleOverrides.clear}"
+      icon="{{:: $ctrl.closeIcon}}"
+      ng-click="$ctrl.onClear()"
+    ></rg-button>
+  </div>
 
-  <div ng-if="!$ctrl.borderless" class="${styles.underline}"></div>
-  <div ng-if="!$ctrl.borderless" class="${styles.focusUnderline}"></div>
-  <div ng-if="!$ctrl.borderless" class="${styles.errorUnderline}"></div>
   <div ng-if="!$ctrl.borderless && $ctrl.error" class="${styles.errorText} ${styleOverrides.errorText}">{{$ctrl.error}}</div>
 </div>
   `;

package/components/island/adaptive-island-hoc.d.ts

@@ -5,16 +5,14 @@ export declare const ScrollHandlerContext: React.Context<ScrollHandler | null>;
 export default function adaptiveIslandHOC<P>(ComposedComponent: ComponentType<P>): {
     new (props: P | Readonly<P>): {
         state: {
-            phase: number;
+            phase: null;
         };
         onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<P> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<P>;
         refs: {
             [key: string]: React.ReactInstance;
         };
@@ -33,16 +31,14 @@ export default function adaptiveIslandHOC<P>(ComposedComponent: ComponentType<P>
     };
     new (props: P, context: any): {
         state: {
-            phase: number;
+            phase: null;
         };
         onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<P> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<P>;
         refs: {
             [key: string]: React.ReactInstance;
         };

package/components/island/{adaptive-island-hoc.jsx → adaptive-island-hoc.js}

@@ -8,11 +8,11 @@ export default function adaptiveIslandHOC(ComposedComponent) {
     return class AdaptiveIsland extends Component {
         static propTypes = ComposedComponent.propTypes;
         state = {
-            phase: 0
+            phase: null
         };
         onContentScroll = ({ scrollTop, scrollHeight, clientHeight }) => {
             if (scrollHeight - clientHeight >=
-                interpolateLinear(TITLE_RESIZE_THRESHOLD, TITLE_RESIZE_END, this.state.phase)) {
+                interpolateLinear(TITLE_RESIZE_THRESHOLD, TITLE_RESIZE_END, this.state.phase ?? 0)) {
                 const phase = Math.min(1, scrollTop / TITLE_RESIZE_END);
                 this.setState({ phase });
             }

package/components/island/content.d.ts

@@ -1,4 +1,6 @@
-import { HTMLAttributes } from 'react';
+import React, { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import createResizeDetector from 'element-resize-detector';
 export interface IslandContentProps extends Omit<HTMLAttributes<HTMLElement>, 'onScroll'> {
     fade?: boolean | null | undefined;
     onScrollToBottom?: (() => void) | null | undefined;
@@ -8,5 +10,34 @@ export interface IslandContentInnerProps extends IslandContentProps {
     onScroll: (node: HTMLElement) => void;
     bottomBorder: boolean;
 }
-declare const ContentWrapper: (props: IslandContentProps) => JSX.Element;
+declare class Content extends Component<IslandContentInnerProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        scrollableWrapperClassName: PropTypes.Requireable<string>;
+        fade: PropTypes.Requireable<boolean>;
+        bottomBorder: PropTypes.Requireable<boolean>;
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        onScrollToBottom: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        fade: boolean;
+        bottomBorder: boolean;
+        onScroll: () => void;
+        onScrollToBottom: () => void;
+    };
+    state: {
+        scrolledToTop: boolean;
+        scrolledToBottom: boolean;
+    };
+    componentWillUnmount(): void;
+    resizeDetector: createResizeDetector.Erd;
+    wrapperNode?: HTMLElement | null;
+    setWrapper: (node: HTMLElement | null) => void;
+    calculateScrollPosition: () => void;
+    scrollableNode?: HTMLElement | null;
+    setScrollableNodeAndCalculatePosition: (node: HTMLElement | null) => void;
+    render(): JSX.Element;
+}
+declare const ContentWrapper: React.ForwardRefExoticComponent<IslandContentProps & React.RefAttributes<Content>>;
 export default ContentWrapper;

package/components/island/{content.jsx → content.js}

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { forwardRef, Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import createResizeDetector from 'element-resize-detector';
@@ -49,6 +49,7 @@ class Content extends Component {
         if (!scrollableNode) {
             return;
         }
+        this.props.onScroll(scrollableNode);
         const { scrollTop, scrollHeight, offsetHeight } = scrollableNode;
         const scrolledToTop = scrollTop === 0;
         const scrolledToBottom = offsetHeight + scrollTop >= scrollHeight - END_DISTANCE;
@@ -57,12 +58,6 @@ class Content extends Component {
         }
         this.setState({ scrolledToTop, scrolledToBottom });
     });
-    onScroll = () => {
-        if (this.scrollableNode != null) {
-            this.props.onScroll(this.scrollableNode);
-        }
-        this.calculateScrollPosition();
-    };
     scrollableNode;
     setScrollableNodeAndCalculatePosition = (node) => {
         if (!node) {
@@ -85,7 +80,7 @@ class Content extends Component {
         <div 
         // it has to be focusable because it can be scrollable
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0} data-scrollable-container className={scrollableWrapperClasses} ref={this.setScrollableNodeAndCalculatePosition} onScroll={fade ? this.onScroll : noop}>
+        tabIndex={0} data-scrollable-container className={scrollableWrapperClasses} ref={this.setScrollableNodeAndCalculatePosition} onScroll={fade ? this.calculateScrollPosition : noop}>
           {fade && (<div ref={this.setWrapper}>
               {children}
             </div>)}
@@ -95,10 +90,11 @@ class Content extends Component {
       </div>);
     }
 }
-const ContentWrapper = (props) => (<ScrollHandlerContext.Consumer>
+const ContentWrapper = forwardRef((props, ref) => (<ScrollHandlerContext.Consumer>
     {onScroll => {
         const addProps = onScroll != null ? { onScroll, bottomBorder: true } : {};
-        return <Content {...props} {...addProps}/>;
+        return <Content {...props} {...addProps} ref={ref}/>;
     }}
-  </ScrollHandlerContext.Consumer>);
+  </ScrollHandlerContext.Consumer>));
+ContentWrapper.displayName = 'ContentWrapper';
 export default ContentWrapper;

package/components/island/{header.jsx → header.js}

@@ -7,15 +7,17 @@ import { PhaseContext } from './adaptive-island-hoc';
 const Start = {
     FONT_SIZE: 24,
     LINE_HEIGHT: 28,
-    PADDING: 16,
+    PADDING_TOP: 24,
+    PADDING_BOTTOM: 0,
     X: 0,
     Y: 0,
     SPACING: 0
 };
 const End = {
     FONT_SIZE: 13,
-    LINE_HEIGHT: 28,
-    PADDING: 0,
+    LINE_HEIGHT: 20,
+    PADDING_TOP: 16,
+    PADDING_BOTTOM: 8,
     // Compensation
     X: 0.4,
     Y: 0.1,
@@ -44,7 +46,8 @@ class Header extends Component {
         const headerStyle = phase != null
             ? {
                 lineHeight: `${this.style('LINE_HEIGHT')}px`,
-                paddingTop: this.style('PADDING')
+                paddingTop: this.style('PADDING_TOP'),
+                paddingBottom: this.style('PADDING_BOTTOM')
             }
             : undefined;
         const scaleFont = phase != null && this.style('FONT_SIZE') / Start.FONT_SIZE;

package/components/island/island.css

@@ -22,13 +22,15 @@
 }
 
 .header {
-  composes: withTransparentBottomBorder;
-
   box-sizing: border-box;
   width: 100%;
-  padding: 0 calc(unit * 4);
+  padding: calc(unit * 2) calc(unit * 4) unit;
+
+  transition: border-bottom-color 0.1s;
+
+  border-bottom: 1px solid transparent;
 
-  line-height: 28px;
+  line-height: 24px;
 }
 
 .withBottomBorder.withBottomBorder {
@@ -54,7 +56,8 @@
 }
 
 .narrowIsland .header {
-  padding: 0 calc(unit * 2);
+  padding-right: calc(unit * 2);
+  padding-left: calc(unit * 2);
 }
 
 .content {

package/components/island/island.d.ts

@@ -21,16 +21,14 @@ export default class Island extends Component<IslandProps> {
 export declare const AdaptiveIsland: {
     new (props: IslandProps | Readonly<IslandProps>): {
         state: {
-            phase: number;
+            phase: null;
         };
         onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<IslandProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<IslandProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<IslandProps>;
         refs: {
             [key: string]: React.ReactInstance;
         };
@@ -49,16 +47,14 @@ export declare const AdaptiveIsland: {
     };
     new (props: IslandProps, context: any): {
         state: {
-            phase: number;
+            phase: null;
         };
         onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<IslandProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<IslandProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<IslandProps>;
         refs: {
             [key: string]: React.ReactInstance;
         };

package/components/island-legacy/island-legacy.css

@@ -63,7 +63,7 @@
   color: var(--ring-secondary-color);
 
   border-left: 1px solid var(--ring-disabled-color);
-  text-shadow: var(--ring-dark-text-color) 0 0 1px;
+  text-shadow: var(--ring-white-text-color) 0 0 1px;
 
   font-size: var(--ring-font-size-smaller);
 }

package/components/link/clickableLink.d.ts

@@ -13,7 +13,7 @@ export default class ClickableLink extends PureComponent<ClickableLinkProps> {
         onConditionalClick: PropTypes.Requireable<(...args: any[]) => any>;
         activeClassName: PropTypes.Requireable<string>;
         href: PropTypes.Validator<string>;
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     };
     onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void;
     render(): JSX.Element;

package/components/link/link.css

@@ -1,8 +1,6 @@
 @import "../global/variables.css";
 
 .link {
-  composes: link from "../alert/alert.css"; /* To override link stiles inside alert */
-
   cursor: pointer;
   transition: color var(--ring-fast-ease);
 

package/components/link/link.d.ts

@@ -20,14 +20,12 @@ export interface LinkBaseProps {
 export declare type LinkProps<P extends ClickableLinkProps = ClickableLinkProps> = Omit<P, keyof LinkBaseProps> & LinkBaseProps;
 export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent: ComponentType<P> | string): {
     new (props: LinkProps<P> | Readonly<LinkProps<P>>): {
-        getChildren(): React.ReactNode;
+        getChildren(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<LinkProps<P>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<LinkProps<P>>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -46,14 +44,12 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
         UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: LinkProps<P>, context: any): {
-        getChildren(): React.ReactNode;
+        getChildren(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<LinkProps<P>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<LinkProps<P>>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -78,7 +74,7 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
         inherit: PropTypes.Requireable<boolean>;
         pseudo: PropTypes.Requireable<boolean>;
         hover: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Requireable<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray | ((...args: any[]) => any)>;
         'data-test': PropTypes.Requireable<string>;
         href: PropTypes.Requireable<string>;
         onPlainLeftClick: PropTypes.Requireable<(...args: any[]) => any>;
@@ -88,14 +84,12 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
 };
 declare const _default: {
     new (props: LinkProps<ClickableLinkProps> | Readonly<LinkProps<ClickableLinkProps>>): {
-        getChildren(): React.ReactNode;
+        getChildren(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<ClickableLinkProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<LinkProps<ClickableLinkProps>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<LinkProps<ClickableLinkProps>>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -114,14 +108,12 @@ declare const _default: {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: LinkProps<ClickableLinkProps>, context: any): {
-        getChildren(): React.ReactNode;
+        getChildren(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<ClickableLinkProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<LinkProps<ClickableLinkProps>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<LinkProps<ClickableLinkProps>>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -146,7 +138,7 @@ declare const _default: {
         inherit: PropTypes.Requireable<boolean>;
         pseudo: PropTypes.Requireable<boolean>;
         hover: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Requireable<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray | ((...args: any[]) => any)>;
         'data-test': PropTypes.Requireable<string>;
         href: PropTypes.Requireable<string>;
         onPlainLeftClick: PropTypes.Requireable<(...args: any[]) => any>;

package/components/list/consts.d.ts

@@ -1,6 +1,7 @@
 import React, { ComponentType, ReactNode, SyntheticEvent } from 'react';
 import { LinkProps } from '../link/link';
 import { IconType, Size } from '../icon/icon';
+import { ClickableLinkProps } from '../link/clickableLink';
 /**
  * @enum {number}
  */
@@ -52,8 +53,9 @@ export declare type ListDataItem<T = unknown> = T & Partial<Omit<LinkProps, 'onC
     tagName?: keyof JSX.IntrinsicElements | null | undefined;
     selectedLabel?: string | null | undefined;
     originalModel?: never;
-    LinkComponent?: ComponentType<LinkProps> | string | null | undefined;
+    LinkComponent?: ComponentType<ClickableLinkProps> | string | null | undefined;
     template?: ReactNode | ((props: ListDataItemProps<T>) => ReactNode);
+    custom?: boolean | null | undefined;
     onClick?: ((item: ListDataItem<T>, event: Event | SyntheticEvent) => void) | null | undefined;
     onMouseUp?: ((item: ListDataItem<T>, event: Event | SyntheticEvent) => void) | null | undefined;
 };

package/components/list/list.css

@@ -30,6 +30,7 @@
   padding: 0 calc(unit * 2) 1px;
 
   text-align: right;
+  white-space: nowrap;
 
   color: var(--ring-secondary-color);
   border-top: 1px solid var(--ring-line-color);

package/components/list/list.d.ts

@@ -9,6 +9,7 @@ import { WindowScrollerChildProps } from 'react-virtualized/dist/es/WindowScroll
 import { ShortcutsMap } from '../shortcuts/core';
 import ListHint from './list__hint';
 import { Dimension, ListDataItem, ListDataItemProps, Type } from './consts';
+export type { ListDataItem };
 declare function noop(): void;
 /**
  * @param {Type} listItemType
@@ -135,6 +136,8 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     shouldComponentUpdate(nextProps: ListProps<T>, nextState: ListState<T>): boolean;
     componentDidUpdate(prevProps: ListProps<T>): void;
     componentWillUnmount(): void;
+    scheduleScrollListener: (cb: () => void) => void;
+    scheduleHoverListener: (cb: () => void) => void;
     static isItemType: typeof isItemType;
     static ListHint: typeof ListHint;
     static ListProps: {
@@ -188,4 +191,3 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     render(): JSX.Element;
 }
 export declare type ListAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof List, ListProps<T>>;
-export {};

package/components/list/{list.jsx → list.js}

@@ -25,8 +25,6 @@ import ListSeparator from './list__separator';
 import ListHint from './list__hint';
 import { DEFAULT_ITEM_TYPE, Dimension, Type } from './consts';
 import styles from './list.css';
-const scheduleScrollListener = scheduleRAF();
-const scheduleHoverListener = scheduleRAF();
 function noop() { }
 const warnEmptyKey = deprecate(() => { }, 'No key passed for list item with non-string label. It is considered as a bad practice and has been deprecated, please provide a key.');
 /**
@@ -141,23 +139,22 @@ export default class List extends Component {
                 });
             }
         }
-        if (activeIndex == null &&
-            prevState.activeIndex == null &&
-            shouldActivateFirstItem(nextProps)) {
+        return nextState;
+    }
+    componentDidMount() {
+        document.addEventListener('mousemove', this.onDocumentMouseMove);
+        document.addEventListener('keydown', this.onDocumentKeyDown, true);
+        const { data, activeIndex } = this.props;
+        if (activeIndex == null && shouldActivateFirstItem(this.props)) {
             const firstActivatableIndex = data.findIndex(isActivatable);
             if (firstActivatableIndex >= 0) {
-                Object.assign(nextState, {
+                this.setState({
                     activeIndex: firstActivatableIndex,
                     activeItem: data[firstActivatableIndex],
                     needScrollToActive: true
                 });
             }
         }
-        return nextState;
-    }
-    componentDidMount() {
-        document.addEventListener('mousemove', this.onDocumentMouseMove);
-        document.addEventListener('keydown', this.onDocumentKeyDown, true);
     }
     shouldComponentUpdate(nextProps, nextState) {
         return nextProps !== this.props ||
@@ -175,6 +172,8 @@ export default class List extends Component {
         document.removeEventListener('mousemove', this.onDocumentMouseMove);
         document.removeEventListener('keydown', this.onDocumentKeyDown, true);
     }
+    scheduleScrollListener = scheduleRAF();
+    scheduleHoverListener = scheduleRAF();
     static isItemType = isItemType;
     static ListHint = ListHint;
     static ListProps = {
@@ -184,7 +183,7 @@ export default class List extends Component {
     virtualizedList;
     unmounted;
     container;
-    hoverHandler = memoize((index) => () => scheduleHoverListener(() => {
+    hoverHandler = memoize((index) => () => this.scheduleHoverListener(() => {
         if (this.state.disabledHover) {
             return;
         }
@@ -367,7 +366,7 @@ export default class List extends Component {
     defaultItemHeight() {
         return this.props.compact ? Dimension.COMPACT_ITEM_HEIGHT : Dimension.ITEM_HEIGHT;
     }
-    scrollEndHandler = () => scheduleScrollListener(() => {
+    scrollEndHandler = () => this.scheduleScrollListener(() => {
         const innerContainer = this.inner;
         if (innerContainer) {
             const maxScrollingPosition = innerContainer.scrollHeight;

package/components/list/{list__link.jsx → list__link.js}

@@ -10,7 +10,7 @@ import styles from './list.css';
  */
 export default class ListLink extends PureComponent {
     render() {
-        const { scrolling, 'data-test': dataTest, className, label, hover, description, rgItemType, url, onCheckboxChange, disabled, LinkComponent, compact, hoverClassName, ...restProps } = this.props;
+        const { scrolling, 'data-test': dataTest, className, label, hover, description, rgItemType, url, onCheckboxChange, disabled, LinkComponent, compact, hoverClassName, children, ...restProps } = this.props;
         const classes = classNames(styles.item, className, {
             [styles.actionLink]: !disabled,
             [styles.compact]: compact,
@@ -18,7 +18,7 @@ export default class ListLink extends PureComponent {
         });
         const Comp = LinkComponent ? linkHOC(LinkComponent) : Link;
         return (<Comp pseudo={!this.props.href} {...restProps} hover={hover && !disabled} className={classes} data-test={dataTests('ring-list-link', dataTest)}>
-        {label}
+        {label ?? children}
       </Comp>);
     }
 }