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

package/components/tab-trap/tab-trap.js

@@ -1,175 +1,125 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-
-import {isNodeInVisiblePartOfPage} from '../global/dom';
-
+import { isNodeInVisiblePartOfPage } from '../global/dom';
 import styles from './tab-trap.css';
-
 export const FOCUSABLE_ELEMENTS = 'input, button, select, textarea, a[href], *[tabindex]:not([data-trap-button]):not([data-scrollable-container])';
-
 /**
  * @name TabTrap
  */
-
 export default class TabTrap extends Component {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    trapDisabled: PropTypes.bool,
-    autoFocusFirst: PropTypes.bool,
-    focusBackOnClose: PropTypes.bool,
-    focusBackOnExit: PropTypes.bool
-  };
-
-  static defaultProps = {
-    trapDisabled: false,
-    autoFocusFirst: true,
-    focusBackOnClose: true,
-    focusBackOnExit: false
-  };
-
-  componentDidMount() {
-    this.previousFocusedNode = document.activeElement;
-
-    if (this.props.autoFocusFirst) {
-      this.focusFirst();
-    } else if (
-      !this.props.trapDisabled &&
-      (!this.node || !this.node.contains(this.previousFocusedNode))
-    ) {
-      this.trapWithoutFocus = true;
-      this.trapButtonNode.focus();
+    static propTypes = {
+        children: PropTypes.node.isRequired,
+        trapDisabled: PropTypes.bool,
+        autoFocusFirst: PropTypes.bool,
+        focusBackOnClose: PropTypes.bool,
+        focusBackOnExit: PropTypes.bool
+    };
+    static defaultProps = {
+        trapDisabled: false,
+        autoFocusFirst: true,
+        focusBackOnClose: true,
+        focusBackOnExit: false
+    };
+    componentDidMount() {
+        this.previousFocusedNode = document.activeElement;
+        if (this.props.autoFocusFirst) {
+            this.focusFirst();
+        }
+        else if (!this.props.trapDisabled &&
+            (!this.node || !this.node.contains(this.previousFocusedNode))) {
+            this.trapWithoutFocus = true;
+            this.trapButtonNode?.focus();
+        }
     }
-  }
-
-  componentWillUnmount() {
-    if (this.props.focusBackOnClose) {
-      this.restoreFocus();
+    componentWillUnmount() {
+        if (this.props.focusBackOnClose) {
+            this.restoreFocus();
+        }
     }
-  }
-
-  restoreFocus = () => {
-    const {previousFocusedNode} = this;
-    if (
-      previousFocusedNode &&
-      previousFocusedNode.focus &&
-      isNodeInVisiblePartOfPage(previousFocusedNode)
-    ) {
-      previousFocusedNode.focus({preventScroll: true});
-    }
-  };
-
-  containerRef = node => {
-    if (!node) {
-      return;
-    }
-    this.node = node;
-  };
-
-  focusElement = (first = true) => {
-    const {node} = this;
-    if (!node) {
-      return;
-    }
-
-    const tabables = [...node.querySelectorAll(FOCUSABLE_ELEMENTS)].
-      filter(item => item.tabIndex >= 0);
-
-    const toBeFocused = first ? tabables[0] : tabables[tabables.length - 1];
-
-    if (toBeFocused) {
-      toBeFocused.focus();
-    }
-  };
-
-  focusFirst = () => this.focusElement(true);
-
-  focusLast = () => this.focusElement(false);
-
-  focusLastIfEnabled = event => {
-    if (this.trapWithoutFocus) {
-      return;
-    }
-    if (this.props.focusBackOnExit) {
-      const prevFocused = event.nativeEvent.relatedTarget;
-      if (prevFocused != null && this.node != null && this.node.contains(prevFocused)) {
-        this.restoreFocus();
-      }
-    } else {
-      this.focusLast();
-    }
-  };
-
-  handleBlurIfWithoutFocus = event => {
-    if (!this.trapWithoutFocus) {
-      return;
-    }
-    this.trapWithoutFocus = false;
-
-    const newFocused = event.nativeEvent.relatedTarget;
-    if (!newFocused) {
-      return;
-    }
-
-    if (this.node.contains(newFocused)) {
-      return;
-    }
-
-    this.focusLast();
-  };
-
-  trapButtonRef = node => {
-    if (!node) {
-      return;
-    }
-
-    this.trapButtonNode = node;
-  };
-
-  render() {
-    const {
-      children,
-      trapDisabled,
-      autoFocusFirst,
-      focusBackOnClose,
-      focusBackOnExit,
-      ...restProps
-    } = this.props;
-
-    if (trapDisabled) {
-      return (
-        <div
-          ref={this.containerRef}
-          {...restProps}
-        >
+    previousFocusedNode;
+    trapWithoutFocus;
+    restoreFocus = () => {
+        const { previousFocusedNode } = this;
+        if (previousFocusedNode instanceof HTMLElement &&
+            previousFocusedNode.focus &&
+            isNodeInVisiblePartOfPage(previousFocusedNode)) {
+            previousFocusedNode.focus({ preventScroll: true });
+        }
+    };
+    node;
+    containerRef = (node) => {
+        if (!node) {
+            return;
+        }
+        this.node = node;
+    };
+    focusElement = (first = true) => {
+        const { node } = this;
+        if (!node) {
+            return;
+        }
+        const tabables = [...node.querySelectorAll(FOCUSABLE_ELEMENTS)].
+            filter(item => item.tabIndex >= 0);
+        const toBeFocused = first ? tabables[0] : tabables[tabables.length - 1];
+        if (toBeFocused) {
+            toBeFocused.focus();
+        }
+    };
+    focusFirst = () => this.focusElement(true);
+    focusLast = () => this.focusElement(false);
+    focusLastIfEnabled = (event) => {
+        if (this.trapWithoutFocus) {
+            return;
+        }
+        if (this.props.focusBackOnExit) {
+            const prevFocused = event.nativeEvent.relatedTarget;
+            if (prevFocused != null && this.node != null && prevFocused instanceof Element &&
+                this.node.contains(prevFocused)) {
+                this.restoreFocus();
+            }
+        }
+        else {
+            this.focusLast();
+        }
+    };
+    handleBlurIfWithoutFocus = (event) => {
+        if (!this.trapWithoutFocus) {
+            return;
+        }
+        this.trapWithoutFocus = false;
+        const newFocused = event.nativeEvent.relatedTarget;
+        if (!newFocused) {
+            return;
+        }
+        if (newFocused instanceof Element && this.node?.contains(newFocused)) {
+            return;
+        }
+        this.focusLast();
+    };
+    trapButtonNode;
+    trapButtonRef = (node) => {
+        if (!node) {
+            return;
+        }
+        this.trapButtonNode = node;
+    };
+    render() {
+        const { children, trapDisabled, autoFocusFirst, focusBackOnClose, focusBackOnExit, ...restProps } = this.props;
+        if (trapDisabled) {
+            return (<div ref={this.containerRef} {...restProps}>
           {children}
-        </div>
-      );
-    }
-
-    return (
-      <div
-        ref={this.containerRef}
-        {...restProps}
-      >
-        <div
-          // It never actually stays focused
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-          tabIndex={0}
-          ref={this.trapButtonRef}
-          className={styles.trapButton}
-          onFocus={this.focusLastIfEnabled}
-          onBlur={this.handleBlurIfWithoutFocus}
-          data-trap-button
-        />
+        </div>);
+        }
+        return (<div ref={this.containerRef} {...restProps}>
+        <div 
+        // It never actually stays focused
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0} ref={this.trapButtonRef} className={styles.trapButton} onFocus={this.focusLastIfEnabled} onBlur={this.handleBlurIfWithoutFocus} data-trap-button/>
         {children}
-        <div
-          // It never actually stays focused
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-          tabIndex={0}
-          onFocus={focusBackOnExit ? this.restoreFocus : this.focusFirst}
-          data-trap-button
-        />
-      </div>
-    );
-  }
+        <div 
+        // It never actually stays focused
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0} onFocus={focusBackOnExit ? this.restoreFocus : this.focusFirst} data-trap-button/>
+      </div>);
+    }
 }

package/components/table/cell.d.ts

@@ -0,0 +1,13 @@
+import { PureComponent, TdHTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface CellProps extends TdHTMLAttributes<HTMLTableDataCellElement> {
+    'data-test'?: string | null | undefined;
+}
+export default class Cell extends PureComponent<CellProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<any>;
+        className: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    render(): JSX.Element;
+}

package/components/table/cell.js

@@ -1,26 +1,16 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import dataTests from '../global/data-tests';
-
 import style from './table.css';
-
 export default class Cell extends PureComponent {
-  static propTypes = {
-    children: PropTypes.any,
-    className: PropTypes.string,
-    'data-test': PropTypes.string
-  };
-
-  render() {
-    const classes = classNames(style.cell, this.props.className);
-    return (
-      <td
-        {...this.props}
-        className={classes}
-        data-test={dataTests('ring-table-cell', this.props['data-test'])}
-      >{this.props.children}</td>
-    );
-  }
+    static propTypes = {
+        children: PropTypes.any,
+        className: PropTypes.string,
+        'data-test': PropTypes.string
+    };
+    render() {
+        const classes = classNames(style.cell, this.props.className);
+        return (<td {...this.props} className={classes} data-test={dataTests('ring-table-cell', this.props['data-test'])}>{this.props.children}</td>);
+    }
 }

package/components/table/disable-hover-hoc.d.ts

@@ -0,0 +1,68 @@
+import React, { ComponentType } from 'react';
+export interface DisableHoverAddProps {
+    disabledHover: boolean;
+}
+export declare type DisableHoverProps<P extends DisableHoverAddProps> = Omit<P, keyof DisableHoverAddProps>;
+export default function disableHoverHOC<P extends DisableHoverAddProps>(ComposedComponent: ComponentType<P>): {
+    new (props: DisableHoverProps<P> | Readonly<DisableHoverProps<P>>): {
+        state: {
+            disabledHover: boolean;
+        };
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        onMouseMove: () => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<DisableHoverProps<P>> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<DisableHoverProps<P>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<DisableHoverProps<P>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<P>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<P>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: DisableHoverProps<P>, context: any): {
+        state: {
+            disabledHover: boolean;
+        };
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        onMouseMove: () => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<DisableHoverProps<P>> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<DisableHoverProps<P>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<DisableHoverProps<P>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<P>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<P>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    propTypes: React.WeakValidationMap<P> | undefined;
+    defaultProps: Partial<P> | undefined;
+    contextType?: React.Context<any> | undefined;
+};

package/components/table/disable-hover-hoc.js

@@ -1,44 +1,32 @@
-import React, {PureComponent} from 'react';
-
+import React, { PureComponent } from 'react';
 export default function disableHoverHOC(ComposedComponent) {
-  return class DisableHover extends PureComponent {
-    static propTypes = ComposedComponent.propTypes;
-    static defaultProps = ComposedComponent.defaultProps;
-
-    state = {
-      disabledHover: false
+    return class DisableHover extends PureComponent {
+        static propTypes = ComposedComponent.propTypes;
+        static defaultProps = ComposedComponent.defaultProps;
+        state = {
+            disabledHover: false
+        };
+        componentDidMount() {
+            document.addEventListener('mousemove', this.onMouseMove);
+            document.addEventListener('keydown', this.onKeyDown, true);
+        }
+        componentWillUnmount() {
+            document.removeEventListener('mousemove', this.onMouseMove);
+            document.removeEventListener('keydown', this.onKeyDown, true);
+        }
+        onMouseMove = () => {
+            if (this.state.disabledHover) {
+                this.setState({ disabledHover: false });
+            }
+        };
+        onKeyDown = (e) => {
+            const metaKeys = [16, 17, 18, 19, 20, 91]; // eslint-disable-line @typescript-eslint/no-magic-numbers
+            if (!this.state.disabledHover && !metaKeys.includes(e.keyCode)) {
+                this.setState({ disabledHover: true });
+            }
+        };
+        render() {
+            return (<ComposedComponent {...this.props} disabledHover={this.state.disabledHover}/>);
+        }
     };
-
-    componentDidMount() {
-      document.addEventListener('mousemove', this.onMouseMove);
-      document.addEventListener('keydown', this.onKeyDown, true);
-    }
-
-    componentWillUnmount() {
-      document.removeEventListener('mousemove', this.onMouseMove);
-      document.removeEventListener('keydown', this.onKeyDown, true);
-    }
-
-    onMouseMove = () => {
-      if (this.state.disabledHover) {
-        this.setState({disabledHover: false});
-      }
-    };
-
-    onKeyDown = e => {
-      const metaKeys = [16, 17, 18, 19, 20, 91]; // eslint-disable-line no-magic-numbers
-      if (!this.state.disabledHover && !metaKeys.includes(e.keyCode)) {
-        this.setState({disabledHover: true});
-      }
-    };
-
-    render() {
-      return (
-        <ComposedComponent
-          {...this.props}
-          disabledHover={this.state.disabledHover}
-        />
-      );
-    }
-  };
 }

package/components/table/header-cell.d.ts

@@ -0,0 +1,43 @@
+import { PureComponent, ReactNode, SyntheticEvent, ThHTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface Column<T = never> {
+    id: string;
+    sortable?: boolean | null | undefined;
+    className?: string | null | undefined;
+    headerClassName?: string | null | undefined;
+    rightAlign?: boolean | null | undefined;
+    getHeaderValue?: (() => ReactNode) | null | undefined;
+    title?: ReactNode;
+    getValue?: ((item: T, column: Column) => ReactNode) | null | undefined;
+    getDataTest?: ((item: T, column: Column) => string) | null | undefined;
+}
+export interface SortParams {
+    column: Column;
+    order: boolean;
+}
+export interface HeaderCellProps extends ThHTMLAttributes<HTMLTableHeaderCellElement> {
+    column: Column;
+    onSort: (params: SortParams) => void;
+    sortKey?: string | null | undefined;
+    sortOrder?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+export default class HeaderCell extends PureComponent<HeaderCellProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<any>;
+        className: PropTypes.Requireable<string>;
+        column: PropTypes.Validator<object>;
+        onSort: PropTypes.Requireable<(...args: any[]) => any>;
+        sortKey: PropTypes.Requireable<string>;
+        sortOrder: PropTypes.Requireable<boolean>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        onSort: () => void;
+    };
+    sortable?: boolean;
+    sorted?: boolean;
+    onClick: () => void;
+    onChildrenClick(e: SyntheticEvent): void;
+    render(): JSX.Element;
+}

package/components/table/header-cell.js

@@ -1,77 +1,56 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import sortableIcon from '@jetbrains/icons/unsorted-10px';
 import sortedIcon from '@jetbrains/icons/chevron-10px';
-
 import Icon from '../icon/icon';
 import dataTests from '../global/data-tests';
-
 import style from './table.css';
-
 export default class HeaderCell extends PureComponent {
-  static propTypes = {
-    children: PropTypes.any,
-    className: PropTypes.string,
-    column: PropTypes.object.isRequired,
-    onSort: PropTypes.func,
-    sortKey: PropTypes.string,
-    sortOrder: PropTypes.bool,
-    'data-test': PropTypes.string
-  };
-
-  static defaultProps = {
-    onSort: () => {}
-  };
-
-  onClick = () => {
-    if (this.sortable) {
-      const {column, onSort, sortOrder} = this.props;
-      onSort({column, order: !(this.sorted && sortOrder)});
+    static propTypes = {
+        children: PropTypes.any,
+        className: PropTypes.string,
+        column: PropTypes.object.isRequired,
+        onSort: PropTypes.func,
+        sortKey: PropTypes.string,
+        sortOrder: PropTypes.bool,
+        'data-test': PropTypes.string
+    };
+    static defaultProps = {
+        onSort: () => { }
+    };
+    sortable;
+    sorted;
+    onClick = () => {
+        if (this.sortable) {
+            const { column, onSort, sortOrder } = this.props;
+            onSort({ column, order: !(this.sorted && sortOrder) });
+        }
+    };
+    onChildrenClick(e) {
+        e.stopPropagation();
     }
-  };
-
-  onChildrenClick(e) {
-    e.stopPropagation();
-  }
-
-  render() {
-    const {
-      className, column, onSort, sortKey, sortOrder,
-      'data-test': dataTest, ...restProps
-    } = this.props;
-
-    this.sortable = column.sortable === true;
-    this.sorted = sortKey === column.id;
-
-    const glyph = this.sorted ? sortedIcon : sortableIcon;
-
-    const classes = classNames(className, column.headerClassName, {
-      [style.headerCell]: true,
-      [style.headerCellSortable]: this.sortable,
-      [style.headerCellSorted]: this.sorted,
-      [style.sortedUp]: sortOrder && this.sorted,
-      [style.cellRight]: column.rightAlign
-    });
-
-    return (
-      <th
-        {...restProps}
-        className={classes}
-        onClick={this.onClick}
-        data-test={dataTests('ring-table-header-cell', dataTest)}
-      >
+    render() {
+        const { className, column, onSort, sortKey, sortOrder, 'data-test': dataTest, ...restProps } = this.props;
+        this.sortable = column.sortable === true;
+        this.sorted = sortKey === column.id;
+        const glyph = this.sorted ? sortedIcon : sortableIcon;
+        const classes = classNames(className, column.headerClassName, {
+            [style.headerCell]: true,
+            [style.headerCellSortable]: this.sortable,
+            [style.headerCellSorted]: this.sorted,
+            [style.sortedUp]: sortOrder && this.sorted,
+            [style.cellRight]: column.rightAlign
+        });
+        return (<th {...restProps} className={classes} onClick={this.onClick} data-test={dataTests('ring-table-header-cell', dataTest)}>
         {/* onClick only used to stop propagation */}
         <span onClick={this.onChildrenClick} role="presentation">{this.props.children}</span>
 
         {column.getHeaderValue ? column.getHeaderValue() : column.title}
 
-        {this.sortable && (
-          <span className={style.sorter}>
+        {this.sortable && (<span className={style.sorter}>
             <Icon glyph={glyph} className={style.icon}/>
-          </span>
-        )}
-      </th>
-    );
-  }
+          </span>)}
+      </th>);
+    }
 }