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

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

@@ -1,65 +1,49 @@
 import React from 'react';
-import {render} from 'react-dom';
-
+import { render } from 'react-dom';
 import Confirm from '../confirm/confirm';
-
 /**
  * @name Confirm Service
  */
-
 export const containerElement = document.createElement('div');
-
 /**
  * Renders Confirm into virtual node to skip maintaining container
  */
 function renderConfirm(props) {
-  render(<Confirm {...props}/>, containerElement);
+    render(<Confirm {...props}/>, containerElement);
 }
-
-export default function confirm({
-  text,
-  description,
-  confirmLabel = 'OK',
-  rejectLabel = 'Cancel',
-  cancelIsDefault,
-  onBeforeConfirm
-}) {
-  return new Promise((resolve, reject) => {
-    const props = {
-      text,
-      description,
-      confirmLabel,
-      rejectLabel,
-      cancelIsDefault,
-      show: true,
-
-      onConfirm: () => {
-        if (onBeforeConfirm) {
-          renderConfirm({...props, inProgress: true});
-          return Promise.resolve(onBeforeConfirm()).
-            then(() => {
-              renderConfirm({...props, show: false});
-              resolve();
-            }).
-            catch(err => {
-              renderConfirm({...props, show: false});
-              reject(err);
-            });
-        }
-        renderConfirm({...props, show: false});
-        return resolve();
-      },
-
-      onReject: () => {
-        renderConfirm({...props, show: false});
-        reject(new Error('Confirm(@jetbrains/ring-ui): null exception'));
-      }
-    };
-
-    renderConfirm(props);
-  });
+export default function confirm({ text, description, confirmLabel = 'OK', rejectLabel = 'Cancel', cancelIsDefault, onBeforeConfirm }) {
+    return new Promise((resolve, reject) => {
+        const props = {
+            text,
+            description,
+            confirmLabel,
+            rejectLabel,
+            cancelIsDefault,
+            show: true,
+            onConfirm: () => {
+                if (onBeforeConfirm) {
+                    renderConfirm({ ...props, inProgress: true });
+                    return Promise.resolve(onBeforeConfirm()).
+                        then(() => {
+                        renderConfirm({ ...props, show: false });
+                        resolve();
+                    }).
+                        catch(err => {
+                        renderConfirm({ ...props, show: false });
+                        reject(err);
+                    });
+                }
+                renderConfirm({ ...props, show: false });
+                return resolve();
+            },
+            onReject: () => {
+                renderConfirm({ ...props, show: false });
+                reject(new Error('Confirm(@jetbrains/ring-ui): null exception'));
+            }
+        };
+        renderConfirm(props);
+    });
 }
-
 export function hideConfirm() {
-  renderConfirm({text: '', show: false});
+    renderConfirm({ text: '', show: false });
 }

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

@@ -0,0 +1,26 @@
+import { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface ContentLayoutProps extends HTMLAttributes<HTMLElement> {
+    responsive: boolean;
+    contentClassName?: string | null | undefined;
+}
+/**
+ * @name Content Layout
+ */
+export default class ContentLayout extends Component<ContentLayoutProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        contentClassName: PropTypes.Requireable<string>;
+        responsive: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        responsive: boolean;
+    };
+    state: {
+        contentNode: null;
+    };
+    saveContentNode: (contentNode: HTMLElement | null) => void;
+    render(): JSX.Element;
+}
+export { default as Sidebar } from './sidebar';

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

@@ -1,64 +1,45 @@
-import React, {cloneElement, Component} from 'react';
+import React, { cloneElement, Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import Sidebar from './sidebar';
 import styles from './content-layout.css';
-
 /**
  * @name Content Layout
  */
-
 export default class ContentLayout extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    contentClassName: PropTypes.string,
-    responsive: PropTypes.bool
-  };
-
-  static defaultProps = {
-    responsive: true
-  };
-
-  state = {};
-
-  saveContentNode = contentNode => {
-    this.setState({contentNode});
-  };
-
-  render() {
-    const {children, className, contentClassName, responsive, ...restProps} = this.props;
-
-    const classes = classNames(styles.contentLayout, className, {
-      [styles.contentLayoutResponsive]: responsive
-    });
-
-    const contentClasses = classNames(styles.contentLayoutContent, contentClassName);
-
-    const childrenArray = React.Children.toArray(children);
-    const sidebarChild = childrenArray.filter(child => child && child.type === Sidebar)[0];
-
-    const sidebar = sidebarChild && cloneElement(sidebarChild, {
-      contentNode: this.state.contentNode
-    });
-    const contentChildren = childrenArray.filter(child => child !== sidebarChild);
-
-    return (
-      <div
-        {...restProps}
-        className={classes}
-      >
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string,
+        contentClassName: PropTypes.string,
+        responsive: PropTypes.bool
+    };
+    static defaultProps = {
+        responsive: true
+    };
+    state = {
+        contentNode: null
+    };
+    saveContentNode = (contentNode) => {
+        this.setState({ contentNode });
+    };
+    render() {
+        const { children, className, contentClassName, responsive, ...restProps } = this.props;
+        const classes = classNames(styles.contentLayout, className, {
+            [styles.contentLayoutResponsive]: responsive
+        });
+        const contentClasses = classNames(styles.contentLayoutContent, contentClassName);
+        const childrenArray = React.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
+        });
+        const contentChildren = childrenArray.filter(child => child !== sidebarChild);
+        return (<div {...restProps} className={classes}>
         {sidebar}
-        <main
-          className={contentClasses}
-          ref={this.saveContentNode}
-        >
+        <main className={contentClasses} ref={this.saveContentNode}>
           {contentChildren}
         </main>
-      </div>
-    );
-  }
+      </div>);
+    }
 }
-
-export {default as Sidebar} from './sidebar';
+export { default as Sidebar } from './sidebar';

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

@@ -0,0 +1,31 @@
+import { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import { Waypoint } from 'react-waypoint';
+export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+    right?: boolean | null | undefined;
+    containerClassName?: string | null | undefined;
+    fixedClassName?: string | null | undefined;
+    contentNode?: HTMLElement | null | undefined;
+}
+export default class Sidebar extends Component<SidebarProps> {
+    static propTypes: {
+        right: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        containerClassName: PropTypes.Requireable<string>;
+        fixedClassName: PropTypes.Requireable<string>;
+        contentNode: PropTypes.Requireable<object>;
+    };
+    state: {
+        topIsOutside: boolean;
+        bottomIsOutside: boolean;
+        sidebarVisibleHeight: undefined;
+    };
+    sidebarNode?: HTMLElement | null;
+    handleTopWaypoint: ({ currentPosition }: Waypoint.CallbackArgs) => void;
+    handleBottomWaypoint: ({ currentPosition, waypointTop }: Waypoint.CallbackArgs) => void;
+    shouldUseFixation(): boolean;
+    shouldFixateBottom(): boolean;
+    sidebarRef: (node: HTMLElement | null) => void;
+    render(): JSX.Element;
+}

package/components/content-layout/sidebar.js

@@ -1,105 +1,76 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {Waypoint} from 'react-waypoint';
-
+import { Waypoint } from 'react-waypoint';
 import styles from './content-layout.css';
-
 const ABOVE = 'above';
 const INSIDE = 'inside';
-
 export default class Sidebar extends Component {
-  static propTypes = {
-    right: PropTypes.bool,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    containerClassName: PropTypes.string,
-    fixedClassName: PropTypes.string,
-    contentNode: PropTypes.object
-  };
-
-  state = {
-    topIsOutside: true,
-    bottomIsOutside: true
-  };
-
-  handleTopWaypoint = ({currentPosition}) => {
-    this.setState({topIsOutside: currentPosition === ABOVE});
-  };
-
-  handleBottomWaypoint = ({currentPosition, waypointTop}) => {
-    this.setState({
-      sidebarVisibleHeight: waypointTop,
-      bottomIsOutside: currentPosition !== INSIDE
-    });
-  };
-
-  shouldUseFixation() {
-    const {contentNode} = this.props;
-    const {sidebarNode} = this;
-    if (!contentNode || !sidebarNode) {
-      return false;
+    static propTypes = {
+        right: PropTypes.bool,
+        children: PropTypes.node,
+        className: PropTypes.string,
+        containerClassName: PropTypes.string,
+        fixedClassName: PropTypes.string,
+        contentNode: PropTypes.object
+    };
+    state = {
+        topIsOutside: true,
+        bottomIsOutside: true,
+        sidebarVisibleHeight: undefined
+    };
+    sidebarNode;
+    handleTopWaypoint = ({ currentPosition }) => {
+        this.setState({ topIsOutside: currentPosition === ABOVE });
+    };
+    handleBottomWaypoint = ({ currentPosition, waypointTop }) => {
+        this.setState({
+            sidebarVisibleHeight: waypointTop,
+            bottomIsOutside: currentPosition !== INSIDE
+        });
+    };
+    shouldUseFixation() {
+        const { contentNode } = this.props;
+        const { sidebarNode } = this;
+        if (!contentNode || !sidebarNode) {
+            return false;
+        }
+        return contentNode.offsetHeight >= sidebarNode.offsetHeight;
     }
-    return contentNode.offsetHeight >= sidebarNode.offsetHeight;
-  }
-
-  shouldFixateBottom() {
-    const {topIsOutside, bottomIsOutside} = this.state;
-    return !bottomIsOutside && topIsOutside && this.shouldUseFixation();
-  }
-
-  sidebarRef = node => {
-    this.sidebarNode = node;
-  };
-
-  render() {
-    const {right, children, className, containerClassName,
-      fixedClassName, contentNode, ...restProps} = this.props;
-    const {topIsOutside, bottomIsOutside, sidebarVisibleHeight} = this.state;
-
-    const shouldFixateTop = bottomIsOutside && topIsOutside && this.shouldUseFixation();
-    const shouldFixateBottom = this.shouldFixateBottom();
-
-    const containerClasses = classNames(styles.sidebarContainer, containerClassName, {
-      [styles.sidebarContainerRight]: right
-    });
-
-    const classes = classNames(styles.sidebar, className, {
-      [styles.sidebarRight]: right,
-      [styles.sidebarFixedTop]: shouldFixateTop,
-      [styles.sidebarFixedBottom]: shouldFixateBottom,
-      [fixedClassName]: shouldFixateTop || shouldFixateBottom
-    });
-
-    const style = {
-      maxHeight: shouldFixateBottom && sidebarVisibleHeight ? `${sidebarVisibleHeight}px` : null
+    shouldFixateBottom() {
+        const { topIsOutside, bottomIsOutside } = this.state;
+        return !bottomIsOutside && topIsOutside && this.shouldUseFixation();
+    }
+    sidebarRef = (node) => {
+        this.sidebarNode = node;
     };
-
-    return (
-      <aside
-        className={containerClasses}
-        ref={this.sidebarRef}
-      >
-        <Waypoint
-          onEnter={this.handleTopWaypoint}
-          onLeave={this.handleTopWaypoint}
-        />
-
-        <div
-          {...restProps}
-          style={style}
-          className={classes}
-        >
+    render() {
+        const { right, children, className, containerClassName, fixedClassName, contentNode, ...restProps } = this.props;
+        const { topIsOutside, bottomIsOutside, sidebarVisibleHeight } = this.state;
+        const shouldFixateTop = bottomIsOutside && topIsOutside && this.shouldUseFixation();
+        const shouldFixateBottom = this.shouldFixateBottom();
+        const containerClasses = classNames(styles.sidebarContainer, containerClassName, {
+            [styles.sidebarContainerRight]: right
+        });
+        const classes = classNames(styles.sidebar, className, {
+            [styles.sidebarRight]: right,
+            [styles.sidebarFixedTop]: shouldFixateTop,
+            [styles.sidebarFixedBottom]: shouldFixateBottom,
+            [fixedClassName ?? '']: shouldFixateTop || shouldFixateBottom
+        });
+        const style = {
+            maxHeight: shouldFixateBottom && sidebarVisibleHeight ? `${sidebarVisibleHeight}px` : undefined
+        };
+        return (<aside className={containerClasses} ref={this.sidebarRef}>
+        <Waypoint onEnter={this.handleTopWaypoint} onLeave={this.handleTopWaypoint}/>
+
+        <div {...restProps} style={style} className={classes}>
           {children}
         </div>
 
         <div className={styles.bottomMarker}>
-          <Waypoint
-            onEnter={this.handleBottomWaypoint}
-            onLeave={this.handleBottomWaypoint}
-          />
+          <Waypoint onEnter={this.handleBottomWaypoint} onLeave={this.handleBottomWaypoint}/>
         </div>
-      </aside>
-    );
-  }
+      </aside>);
+    }
 }

package/components/contenteditable/contenteditable.d.ts

@@ -0,0 +1,47 @@
+import { Component, HTMLAttributes, Ref } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name ContentEditable
+ */
+declare function noop(): void;
+export interface ContentEditableBaseProps extends HTMLAttributes<HTMLElement> {
+    disabled: boolean;
+    onComponentUpdate: ((prevProps: ContentEditableBaseProps) => void);
+    inputRef?: Ref<HTMLDivElement> | null | undefined;
+    __html: string;
+}
+declare class ContentEditableBase extends Component<ContentEditableBaseProps> {
+    static propTypes: {
+        __html: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        tabIndex: PropTypes.Requireable<number>;
+        componentDidUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+        onComponentUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        inputRef: PropTypes.Requireable<object>;
+    };
+    static defaultProps: {
+        disabled: boolean;
+        tabIndex: number;
+        onInput: typeof noop;
+        onComponentUpdate: typeof noop;
+    };
+    shouldComponentUpdate(nextProps: ContentEditableBaseProps): boolean;
+    componentDidUpdate(prevProps: ContentEditableBaseProps): void;
+    render(): JSX.Element;
+}
+declare type ContentEditableBaseAttrs = JSX.LibraryManagedAttributes<typeof ContentEditableBase, ContentEditableBaseProps>;
+export declare type ContentEditableProps = Omit<ContentEditableBaseAttrs, '__html'>;
+declare const ContentEditable: {
+    ({ children, ...props }: ContentEditableProps): JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        disabled: PropTypes.Requireable<boolean>;
+        tabIndex: PropTypes.Requireable<number>;
+        componentDidUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+        onComponentUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        inputRef: PropTypes.Requireable<object>;
+    };
+};
+export default ContentEditable;

package/components/contenteditable/contenteditable.js

@@ -1,66 +1,47 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {renderToStaticMarkup} from 'react-dom/server';
-
+import { renderToStaticMarkup } from 'react-dom/server';
 /**
  * @name ContentEditable
  */
-
-function noop() {}
-
+function noop() { }
 const commonPropTypes = {
-  disabled: PropTypes.bool,
-  tabIndex: PropTypes.number,
-  componentDidUpdate: PropTypes.func,
-  onComponentUpdate: PropTypes.func,
-  className: PropTypes.string,
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    disabled: PropTypes.bool,
+    tabIndex: PropTypes.number,
+    componentDidUpdate: PropTypes.func,
+    onComponentUpdate: PropTypes.func,
+    className: PropTypes.string,
+    inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
-
 class ContentEditableBase extends Component {
-  static propTypes = {
-    ...commonPropTypes,
-    __html: PropTypes.string
-  };
-
-  static defaultProps = {
-    disabled: false,
-    tabIndex: 0,
-    onInput: noop,
-    onComponentUpdate: noop
-  };
-
-  shouldComponentUpdate(nextProps) {
-    return nextProps.disabled !== this.props.disabled ||
-      nextProps.__html !== this.props.__html;
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    this.props.onComponentUpdate(prevProps, prevState);
-  }
-
-  render() {
-    const {__html, onComponentUpdate, disabled, tabIndex, inputRef, ...props} = this.props;
-
-    return (
-      <div
-        {...props}
-        ref={inputRef}
-        disabled={disabled}
-        role="textbox"
-        tabIndex={disabled ? null : tabIndex}
-        contentEditable={!this.props.disabled}
-        dangerouslySetInnerHTML={{__html}}
-      />
-    );
-  }
+    static propTypes = {
+        ...commonPropTypes,
+        __html: PropTypes.string
+    };
+    static defaultProps = {
+        disabled: false,
+        tabIndex: 0,
+        onInput: noop,
+        onComponentUpdate: noop
+    };
+    shouldComponentUpdate(nextProps) {
+        return nextProps.disabled !== this.props.disabled ||
+            nextProps.__html !== this.props.__html;
+    }
+    componentDidUpdate(prevProps) {
+        this.props.onComponentUpdate(prevProps);
+    }
+    render() {
+        const { __html, onComponentUpdate, disabled, tabIndex, inputRef, ...props } = this.props;
+        return (<div {...props} ref={inputRef} 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        disabled={disabled} role="textbox" tabIndex={disabled ? undefined : tabIndex} contentEditable={!this.props.disabled} dangerouslySetInnerHTML={{ __html }}/>);
+    }
 }
-
-const ContentEditable = ({children, ...props}) =>
-  <ContentEditableBase {...props} __html={renderToStaticMarkup(children)}/>;
+const ContentEditable = ({ children, ...props }) => <ContentEditableBase {...props} __html={renderToStaticMarkup(children)}/>;
 ContentEditable.propTypes = {
-  ...commonPropTypes,
-  children: PropTypes.node
+    ...commonPropTypes,
+    children: PropTypes.node
 };
-
 export default ContentEditable;