@jetbrains/ring-ui 4.1.4 → 5.0.0-beta.1

package/components/storage/storage__local.js

@@ -1,115 +1,119 @@
 import alert from '../alert-service/alert-service';
-
 /**
  * @return {LocalStorage}
  * @param {{type: string}} config Set to "session" to use sessionStorage
  * @constructor
  */
 export default class LocalStorage {
-  static async safePromise(resolver) {
-    try {
-      return await new Promise(resolver);
-    } catch (e) {
-      if (e && e.name === 'NS_ERROR_FILE_CORRUPTED') {
-        alert.error('Sorry, it looks like your browser storage is corrupted. ' +
-        'Please clear your storage by going to Tools -> Clear Recent History -> Cookies' +
-        ' and setting time range to "Everything". This will remove the corrupted browser storage across all sites.');
-      }
-      throw e;
-    }
-  }
-
-  constructor(config = {}) {
-    this.storageType = config.type === 'session' ? 'sessionStorage' : 'localStorage';
-  }
-
-  /**
-   * @param {string} name
-   * @return {Promise}
-   */
-  get(name) {
-    return this.constructor.safePromise(resolve => {
-      const value = window[this.storageType].getItem(name);
-      try {
-        resolve(JSON.parse(value));
-      } catch (e) {
-        resolve(value);
-      }
-    });
-  }
-
-  /**
-   * @param {string} name
-   * @param {object} value
-   * @return {Promise}
-   */
-  set(name, value) {
-    return this.constructor.safePromise(resolve => {
-      window[this.storageType].setItem(name, JSON.stringify(value));
-      resolve(value);
-    });
-  }
-
-  /**
-   * @param {string} name
-   * @return {Promise}
-   */
-  remove(name) {
-    const storageType = this.storageType;
-
-    return this.constructor.safePromise(resolve => {
-      if (window[storageType].hasOwnProperty(name)) {
-        window[storageType].removeItem(name);
-      }
-      resolve();
-    });
-  }
-
-  /**
-   * @param callback
-   * @return {Promise}
-   */
-  each(callback) {
-    const storageType = this.storageType;
-
-    return this.constructor.safePromise(resolve => {
-      const promises = [];
-
-      for (const item in window[storageType]) {
-        if (window[storageType].hasOwnProperty(item)) {
-          let value = window[storageType].getItem(item);
-          try {
-            value = JSON.parse(value);
-          } catch (e) {
-            // Do nothing
-          }
-
-          promises.push(Promise.resolve(callback(item, value)));
-        }
-      }
-
-      resolve(Promise.all(promises));
-    });
-  }
-
-  /**
-   * @param {string} name
-   * @param {Function} callback
-   * @return {Function}
-   */
-  on(name, callback) {
-    function handleStorage(e) {
-      if (e.key === name) {
+    static async safePromise(resolver) {
         try {
-          callback(JSON.parse(e.newValue));
-        } catch (err) {
-          callback(e.newValue);
+            return await new Promise(resolver);
+        }
+        catch (e) {
+            if (e instanceof Error && e.name === 'NS_ERROR_FILE_CORRUPTED') {
+                alert.error('Sorry, it looks like your browser storage is corrupted. ' +
+                    'Please clear your storage by going to Tools -> Clear Recent History -> Cookies' +
+                    ' and setting time range to "Everything". This will remove the corrupted browser storage across all sites.');
+            }
+            throw e;
+        }
+    }
+    storageType;
+    constructor(config = {}) {
+        this.storageType = config.type === 'session' ? 'sessionStorage' : 'localStorage';
+    }
+    /**
+     * @param {string} name
+     * @return {Promise}
+     */
+    get(name) {
+        return LocalStorage.safePromise(resolve => {
+            const value = window[this.storageType].getItem(name);
+            if (value != null) {
+                try {
+                    resolve(JSON.parse(value));
+                }
+                catch (e) {
+                    resolve(value);
+                }
+            }
+            else {
+                resolve(value);
+            }
+        });
+    }
+    /**
+     * @param {string} name
+     * @param {object} value
+     * @return {Promise}
+     */
+    set(name, value) {
+        return LocalStorage.safePromise(resolve => {
+            window[this.storageType].setItem(name, JSON.stringify(value));
+            resolve(value);
+        });
+    }
+    /**
+     * @param {string} name
+     * @return {Promise}
+     */
+    remove(name) {
+        const storageType = this.storageType;
+        return LocalStorage.safePromise(resolve => {
+            if (window[storageType].hasOwnProperty(name)) {
+                window[storageType].removeItem(name);
+            }
+            resolve();
+        });
+    }
+    /**
+     * @param callback
+     * @return {Promise}s
+     */
+    each(callback) {
+        const storageType = this.storageType;
+        return LocalStorage.safePromise(resolve => {
+            const promises = [];
+            for (const item in window[storageType]) {
+                if (window[storageType].hasOwnProperty(item)) {
+                    const value = window[storageType].getItem(item);
+                    let resolvedValue = null;
+                    if (value != null) {
+                        try {
+                            resolvedValue = JSON.parse(value);
+                        }
+                        catch (e) {
+                            resolvedValue = value;
+                        }
+                    }
+                    promises.push(Promise.resolve(callback(item, resolvedValue)));
+                }
+            }
+            resolve(Promise.all(promises));
+        });
+    }
+    /**
+     * @param {string} name
+     * @param {Function} callback
+     * @return {Function}
+     */
+    on(name, callback) {
+        function handleStorage(e) {
+            if (e.key === name) {
+                if (e.newValue != null) {
+                    try {
+                        callback(JSON.parse(e.newValue));
+                    }
+                    catch (err) {
+                        callback(e.newValue);
+                    }
+                }
+                else {
+                    callback(e.newValue);
+                }
+            }
         }
-      }
+        window.addEventListener('storage', handleStorage, false);
+        return () => window.removeEventListener('storage', handleStorage, false);
     }
-
-    window.addEventListener('storage', handleStorage, false);
-
-    return () => window.removeEventListener('storage', handleStorage, false);
-  }
 }

package/components/tab-trap/tab-trap.d.ts

@@ -0,0 +1,43 @@
+import React, { Component, ReactNode, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export declare const FOCUSABLE_ELEMENTS = "input, button, select, textarea, a[href], *[tabindex]:not([data-trap-button]):not([data-scrollable-container])";
+export interface TabTrapProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    trapDisabled: boolean;
+    autoFocusFirst: boolean;
+    focusBackOnClose: boolean;
+    focusBackOnExit: boolean;
+}
+/**
+ * @name TabTrap
+ */
+export default class TabTrap extends Component<TabTrapProps> {
+    static propTypes: {
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        trapDisabled: PropTypes.Requireable<boolean>;
+        autoFocusFirst: PropTypes.Requireable<boolean>;
+        focusBackOnClose: PropTypes.Requireable<boolean>;
+        focusBackOnExit: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        trapDisabled: boolean;
+        autoFocusFirst: boolean;
+        focusBackOnClose: boolean;
+        focusBackOnExit: boolean;
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    previousFocusedNode?: Element | null;
+    trapWithoutFocus?: boolean;
+    restoreFocus: () => void;
+    node?: HTMLElement | null;
+    containerRef: (node: HTMLElement | null) => void;
+    focusElement: (first?: boolean) => void;
+    focusFirst: () => void;
+    focusLast: () => void;
+    focusLastIfEnabled: (event: React.FocusEvent) => void;
+    handleBlurIfWithoutFocus: (event: React.FocusEvent) => void;
+    trapButtonNode?: HTMLElement | null;
+    trapButtonRef: (node: HTMLElement | null) => void;
+    render(): JSX.Element;
+}

package/components/tab-trap/tab-trap.jsx

@@ -0,0 +1,125 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+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();
+        }
+    }
+    componentWillUnmount() {
+        if (this.props.focusBackOnClose) {
+            this.restoreFocus();
+        }
+    }
+    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/>
+        {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>);
+    }
+}

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.jsx

@@ -0,0 +1,16 @@
+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>);
+    }
+}

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.jsx

@@ -0,0 +1,32 @@
+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
+        };
+        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}/>);
+        }
+    };
+}

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.jsx

@@ -0,0 +1,56 @@
+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: () => { }
+    };
+    sortable;
+    sorted;
+    onClick = () => {
+        if (this.sortable) {
+            const { column, onSort, sortOrder } = this.props;
+            onSort({ column, order: !(this.sorted && sortOrder) });
+        }
+    };
+    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)}>
+        {/* 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}>
+            <Icon glyph={glyph} className={style.icon}/>
+          </span>)}
+      </th>);
+    }
+}

package/components/table/header.d.ts

@@ -0,0 +1,60 @@
+import { ChangeEventHandler, PureComponent, SyntheticEvent } from 'react';
+import PropTypes from 'prop-types';
+import { Waypoint } from 'react-waypoint';
+import { Column, SortParams } from './header-cell';
+export interface HeaderProps {
+    columns: readonly Column[];
+    selectable: boolean;
+    draggable: boolean;
+    checked: boolean;
+    sticky: boolean;
+    topStickOffset: string;
+    onSort: (params: SortParams) => void;
+    onCheckboxChange: ChangeEventHandler<HTMLInputElement>;
+    sortKey: string;
+    sortOrder: boolean;
+    caption?: string | null | undefined;
+    checkboxDisabled?: boolean | undefined;
+}
+export default class Header extends PureComponent<HeaderProps> {
+    static propTypes: {
+        caption: PropTypes.Requireable<string>;
+        selectable: PropTypes.Requireable<boolean>;
+        draggable: PropTypes.Requireable<boolean>;
+        checked: PropTypes.Requireable<boolean>;
+        checkboxDisabled: PropTypes.Requireable<boolean>;
+        sticky: PropTypes.Requireable<boolean>;
+        topStickOffset: PropTypes.Requireable<string>;
+        onCheckboxChange: PropTypes.Requireable<(...args: any[]) => any>;
+        columns: PropTypes.Validator<any[]>;
+        onSort: PropTypes.Requireable<(...args: any[]) => any>;
+        sortKey: PropTypes.Requireable<string>;
+        sortOrder: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        selectable: boolean;
+        draggable: boolean;
+        checked: boolean;
+        sticky: boolean;
+        topStickOffset: string;
+        onSort: () => void;
+        onCheckboxChange: () => void;
+        sortKey: string;
+        sortOrder: boolean;
+    };
+    state: {
+        fixed: boolean;
+        headerWidth: undefined;
+        widths: never[];
+    };
+    id: string;
+    onCheckboxFocus: (event: SyntheticEvent<HTMLElement>) => void;
+    private _columnsRowNode?;
+    storeColumnsRowNode: (node: HTMLElement | null) => void;
+    onScrollIn: () => void;
+    onScrollOut: ({ currentPosition }: Waypoint.CallbackArgs) => void;
+    calculateColumnsWidths(columnsRowNode: HTMLElement | null | undefined): void;
+    createCells(widths?: never[]): JSX.Element[];
+    render(): JSX.Element;
+}
+export declare type HeaderAttrs = JSX.LibraryManagedAttributes<typeof Header, HeaderProps>;