@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/island/content.js

@@ -1,141 +1,99 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import createResizeDetector from 'element-resize-detector';
-
 import scheduleRAF from '../global/schedule-raf';
-
 import styles from './island.css';
-import {ScrollHandlerContext} from './adaptive-island-hoc';
-
+import { ScrollHandlerContext } from './adaptive-island-hoc';
 const scheduleScrollAction = scheduleRAF();
-const noop = () => {};
+const noop = () => { };
 const END_DISTANCE = 16;
-
 class Content extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    scrollableWrapperClassName: PropTypes.string,
-    fade: PropTypes.bool,
-    bottomBorder: PropTypes.bool,
-    onScroll: PropTypes.func,
-    onScrollToBottom: PropTypes.func
-  };
-
-  static defaultProps = {
-    fade: true,
-    bottomBorder: false,
-    onScroll: noop,
-    onScrollToBottom: noop
-  };
-
-  state = {
-    scrolledToTop: true,
-    scrolledToBottom: false
-  };
-
-  componentWillUnmount() {
-    this.scrollableNode = null;
-    if (!this.wrapperNode) {
-      return;
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string,
+        scrollableWrapperClassName: PropTypes.string,
+        fade: PropTypes.bool,
+        bottomBorder: PropTypes.bool,
+        onScroll: PropTypes.func,
+        onScrollToBottom: PropTypes.func
+    };
+    static defaultProps = {
+        fade: true,
+        bottomBorder: false,
+        onScroll: noop,
+        onScrollToBottom: noop
+    };
+    state = {
+        scrolledToTop: true,
+        scrolledToBottom: false
+    };
+    componentWillUnmount() {
+        this.scrollableNode = null;
+        if (!this.wrapperNode) {
+            return;
+        }
+        this.resizeDetector.removeAllListeners(this.wrapperNode);
     }
-    this.resizeDetector.removeAllListeners(this.wrapperNode);
-  }
-
-  resizeDetector = createResizeDetector({strategy: 'scroll'});
-
-  setWrapper = node => {
-    if (!node) {
-      return;
-    }
-    this.wrapperNode = node;
-    this.resizeDetector.listenTo(node, this.calculateScrollPosition);
-  };
-
-  calculateScrollPosition = () => scheduleScrollAction(() => {
-    const {scrollableNode} = this;
-    if (!scrollableNode) {
-      return;
-    }
-    const {scrollTop, scrollHeight, offsetHeight} = scrollableNode;
-    const scrolledToTop = scrollTop === 0;
-    const scrolledToBottom = offsetHeight + scrollTop >= scrollHeight - END_DISTANCE;
-
-    if (scrolledToBottom) {
-      this.props.onScrollToBottom();
-    }
-
-    this.setState({scrolledToTop, scrolledToBottom});
-  });
-
-  onScroll = () => {
-    this.props.onScroll(this.scrollableNode);
-    this.calculateScrollPosition();
-  };
-
-  setScrollableNodeAndCalculatePosition = node => {
-    if (!node) {
-      return;
-    }
-    this.scrollableNode = node;
-    this.calculateScrollPosition();
-  };
-
-  render() {
-    const {
-      children, className, bottomBorder, scrollableWrapperClassName,
-      onScroll, onScrollToBottom, fade, ...restProps
-    } = this.props;
-    const {scrolledToTop, scrolledToBottom} = this.state;
-
-    const classes = classNames(styles.content, className, {
-      [styles.contentWithTopFade]: fade && !scrolledToTop,
-      [styles.contentWithBottomFade]: fade && !scrolledToBottom,
-      [styles.withTransparentBottomBorder]: bottomBorder,
-      [styles.withBottomBorder]: bottomBorder && !scrolledToBottom
+    resizeDetector = createResizeDetector({ strategy: 'scroll' });
+    wrapperNode;
+    setWrapper = (node) => {
+        if (!node) {
+            return;
+        }
+        this.wrapperNode = node;
+        this.resizeDetector.listenTo(node, this.calculateScrollPosition);
+    };
+    calculateScrollPosition = () => scheduleScrollAction(() => {
+        const { scrollableNode } = this;
+        if (!scrollableNode) {
+            return;
+        }
+        this.props.onScroll(scrollableNode);
+        const { scrollTop, scrollHeight, offsetHeight } = scrollableNode;
+        const scrolledToTop = scrollTop === 0;
+        const scrolledToBottom = offsetHeight + scrollTop >= scrollHeight - END_DISTANCE;
+        if (scrolledToBottom) {
+            this.props.onScrollToBottom?.();
+        }
+        this.setState({ scrolledToTop, scrolledToBottom });
     });
-
-    const scrollableWrapperClasses = classNames(
-      styles.scrollableWrapper,
-      scrollableWrapperClassName
-    );
-
-    return (
-      <div
-        {...restProps}
-        data-test="ring-island-content"
-        className={classes}
-      >
-        <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}
-        >
-          {fade && (
-            <div ref={this.setWrapper}>
+    scrollableNode;
+    setScrollableNodeAndCalculatePosition = (node) => {
+        if (!node) {
+            return;
+        }
+        this.scrollableNode = node;
+        this.calculateScrollPosition();
+    };
+    render() {
+        const { children, className, bottomBorder, scrollableWrapperClassName, onScroll, onScrollToBottom, fade, ...restProps } = this.props;
+        const { scrolledToTop, scrolledToBottom } = this.state;
+        const classes = classNames(styles.content, className, {
+            [styles.contentWithTopFade]: fade && !scrolledToTop,
+            [styles.contentWithBottomFade]: fade && !scrolledToBottom,
+            [styles.withTransparentBottomBorder]: bottomBorder,
+            [styles.withBottomBorder]: bottomBorder && !scrolledToBottom
+        });
+        const scrollableWrapperClasses = classNames(styles.scrollableWrapper, scrollableWrapperClassName);
+        return (<div {...restProps} data-test="ring-island-content" className={classes}>
+        <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.calculateScrollPosition : noop}>
+          {fade && (<div ref={this.setWrapper}>
               {children}
-            </div>
-          )}
+            </div>)}
 
           {!fade && children}
         </div>
-      </div>
-    );
-  }
+      </div>);
+    }
 }
-
-const ContentWrapper = props => (
-  <ScrollHandlerContext.Consumer>
+const ContentWrapper = (props) => (<ScrollHandlerContext.Consumer>
     {onScroll => {
-      const addProps = onScroll != null ? {onScroll, bottomBorder: true} : {};
-      return <Content {...props} {...addProps}/>;
+        const addProps = onScroll != null ? { onScroll, bottomBorder: true } : {};
+        return <Content {...props} {...addProps}/>;
     }}
-  </ScrollHandlerContext.Consumer>
-);
-
+  </ScrollHandlerContext.Consumer>);
 export default ContentWrapper;

package/components/island/header.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+export interface IslandHeaderProps extends HTMLAttributes<HTMLElement> {
+    wrapWithTitle?: boolean | undefined;
+    border?: boolean | null | undefined;
+    phase?: number | undefined;
+}
+declare const HeaderWrapper: (props: IslandHeaderProps) => JSX.Element;
+export default HeaderWrapper;

package/components/island/header.js

@@ -1,102 +1,78 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
-import {interpolateLinear} from '../global/linear-function';
-
+import { interpolateLinear } from '../global/linear-function';
 import styles from './island.css';
-import {PhaseContext} from './adaptive-island-hoc';
-
+import { PhaseContext } from './adaptive-island-hoc';
 const Start = {
-  FONT_SIZE: 24,
-  LINE_HEIGHT: 28,
-  PADDING: 16
+    FONT_SIZE: 24,
+    LINE_HEIGHT: 28,
+    PADDING_TOP: 24,
+    PADDING_BOTTOM: 0,
+    X: 0,
+    Y: 0,
+    SPACING: 0
 };
-
 const End = {
-  FONT_SIZE: 13,
-  LINE_HEIGHT: 28,
-
-  // Compensation
-  X: 0.4,
-  Y: 0.1,
-  SPACING: 1.09
+    FONT_SIZE: 13,
+    LINE_HEIGHT: 20,
+    PADDING_TOP: 16,
+    PADDING_BOTTOM: 8,
+    // Compensation
+    X: 0.4,
+    Y: 0.1,
+    SPACING: 1.09
 };
-
 const BORDER_APPEAR_PHASE = 0.5;
-
 class Header extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    border: PropTypes.bool,
-    wrapWithTitle: PropTypes.bool,
-    phase: PropTypes.number
-  };
-
-  static defaultProps = {
-    wrapWithTitle: true
-  };
-
-  style(name) {
-    return interpolateLinear(Start[name] || 0, End[name] || 0, this.props.phase);
-  }
-
-  render() {
-    const {children, className, wrapWithTitle, border, phase, ...restProps} = this.props;
-    const classes = classNames(styles.header, className, {
-      [styles.withBottomBorder]: border || phase >= BORDER_APPEAR_PHASE
-    });
-
-
-    const headerStyle = phase != null
-      ? {
-        lineHeight: `${this.style('LINE_HEIGHT')}px`, // need to append px because number is a valid line-height value
-        paddingTop: this.style('PADDING')
-      }
-      : null;
-
-    const scaleFont = phase != null && this.style('FONT_SIZE') / Start.FONT_SIZE;
-
-    const titleStyle = (phase != null && phase < 1)
-      ? {
-        fontSize: Start.FONT_SIZE,
-        transform: `translate(${this.style('X')}px, ${this.style('Y')}px) scale(${scaleFont})`,
-        letterSpacing: this.style('SPACING')
-      }
-      : null;
-
-    return (
-      <div
-        {...restProps}
-        data-test="ring-island-header"
-        className={classes}
-        style={headerStyle}
-      >
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string,
+        border: PropTypes.bool,
+        wrapWithTitle: PropTypes.bool,
+        phase: PropTypes.number
+    };
+    static defaultProps = {
+        wrapWithTitle: true
+    };
+    style(name) {
+        return interpolateLinear(Start[name], End[name], this.props.phase ?? 0);
+    }
+    render() {
+        const { children, className, wrapWithTitle, border, phase, ...restProps } = this.props;
+        const classes = classNames(styles.header, className, {
+            [styles.withBottomBorder]: border || phase != null && phase >= BORDER_APPEAR_PHASE
+        });
+        const headerStyle = phase != null
+            ? {
+                lineHeight: `${this.style('LINE_HEIGHT')}px`,
+                paddingTop: this.style('PADDING_TOP'),
+                paddingBottom: this.style('PADDING_BOTTOM')
+            }
+            : undefined;
+        const scaleFont = phase != null && this.style('FONT_SIZE') / Start.FONT_SIZE;
+        const titleStyle = (phase != null && phase < 1)
+            ? {
+                fontSize: Start.FONT_SIZE,
+                transform: `translate(${this.style('X')}px, ${this.style('Y')}px) scale(${scaleFont})`,
+                letterSpacing: this.style('SPACING')
+            }
+            : undefined;
+        return (<div {...restProps} data-test="ring-island-header" className={classes} style={headerStyle}>
         {wrapWithTitle &&
-        (
-          <h2
-            className={styles.title}
-            style={titleStyle}
-          >
+                (<h2 className={styles.title} style={titleStyle}>
             {children}
-          </h2>
-        )}
+          </h2>)}
 
         {!wrapWithTitle && children}
 
-      </div>
-    );
-  }
+      </div>);
+    }
 }
-
-const HeaderWrapper = props => (
-  <PhaseContext.Consumer>
+const HeaderWrapper = (props) => (<PhaseContext.Consumer>
     {phase => {
-      const addProps = phase != null ? {phase} : {};
-      return <Header {...props} {...addProps}/>;
+        const addProps = phase != null ? { phase } : {};
+        return <Header {...props} {...addProps}/>;
     }}
-  </PhaseContext.Consumer>
-);
-
+  </PhaseContext.Consumer>);
 export default HeaderWrapper;

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

@@ -0,0 +1,82 @@
+import React, { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface IslandProps extends HTMLAttributes<HTMLElement> {
+    narrow?: boolean | null | undefined;
+    withoutPaddings?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+/**
+ * @name Island
+ */
+export default class Island extends Component<IslandProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        narrow: PropTypes.Requireable<boolean>;
+        withoutPaddings: PropTypes.Requireable<boolean>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    render(): JSX.Element;
+}
+export declare const AdaptiveIsland: {
+    new (props: IslandProps | Readonly<IslandProps>): {
+        state: {
+            phase: null;
+        };
+        onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
+        render(): JSX.Element;
+        context: any;
+        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;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<IslandProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<IslandProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<IslandProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<IslandProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: IslandProps, context: any): {
+        state: {
+            phase: null;
+        };
+        onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
+        render(): JSX.Element;
+        context: any;
+        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;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<IslandProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<IslandProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<IslandProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<IslandProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    propTypes: React.WeakValidationMap<IslandProps> | undefined;
+    contextType?: React.Context<any> | undefined;
+};
+export { default as Header } from './header';
+export { default as Content } from './content';

package/components/island/island.js

@@ -1,53 +1,31 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import dataTests from '../global/data-tests';
-
 import adaptiveIslandHOC from './adaptive-island-hoc';
-
 import styles from './island.css';
-
 /**
  * @name Island
  */
-
 export default class Island extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    narrow: PropTypes.bool,
-    withoutPaddings: PropTypes.bool,
-    'data-test': PropTypes.string
-  };
-
-  render() {
-    const {
-      children,
-      className,
-      narrow,
-      withoutPaddings,
-      'data-test': dataTest,
-      ...restProps
-    } = this.props;
-    const classes = classNames(styles.island, className, {
-      [styles.narrowIsland]: narrow,
-      [styles.withoutPaddings]: withoutPaddings
-    });
-
-    return (
-      <div
-        {...restProps}
-        className={classes}
-        data-test={dataTests('ring-island', dataTest)}
-      >
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string,
+        narrow: PropTypes.bool,
+        withoutPaddings: PropTypes.bool,
+        'data-test': PropTypes.string
+    };
+    render() {
+        const { children, className, narrow, withoutPaddings, 'data-test': dataTest, ...restProps } = this.props;
+        const classes = classNames(styles.island, className, {
+            [styles.narrowIsland]: narrow,
+            [styles.withoutPaddings]: withoutPaddings
+        });
+        return (<div {...restProps} className={classes} data-test={dataTests('ring-island', dataTest)}>
         {children}
-      </div>
-    );
-  }
+      </div>);
+    }
 }
-
 export const AdaptiveIsland = adaptiveIslandHOC(Island);
-
-export {default as Header} from './header';
-export {default as Content} from './content';
+export { default as Header } from './header';
+export { default as Content } from './content';

package/components/island-legacy/content-legacy.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import './island-legacy.css';
+export default class Content extends PureComponent<HTMLAttributes<HTMLElement>> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): JSX.Element;
+}

package/components/island-legacy/content-legacy.js

@@ -1,26 +1,17 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import './island-legacy.css';
-
 export default class Content extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node
-  };
-
-  render() {
-    const {children, className, ...restProps} = this.props;
-    const classes = classNames('ring-island__content', className);
-
-    return (
-      <div
-        {...restProps}
-        className={classes}
-      >
+    static propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { children, className, ...restProps } = this.props;
+        const classes = classNames('ring-island__content', className);
+        return (<div {...restProps} className={classes}>
         {children}
-      </div>
-    );
-  }
+      </div>);
+    }
 }

package/components/island-legacy/header-legacy.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import './island-legacy.css';
+export default class Header extends PureComponent<HTMLAttributes<HTMLElement>> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): JSX.Element;
+}