@jetbrains/ring-ui 5.1.23 → 5.1.24

package/components/storage/storage.d.ts

@@ -0,0 +1,18 @@
+export interface StorageConfig {
+    type?: 'local' | 'session' | null | undefined;
+    cookieName?: string | null | undefined;
+    checkDelay?: number | null | undefined;
+}
+export interface StorageInterface {
+    get<T>(name: string): Promise<T | null>;
+    set<T>(name: string, value: T | null): Promise<T | null>;
+    remove(name: string): Promise<void>;
+    each<R>(callback: (item: string, value: unknown) => R | Promise<R>): Promise<R[]>;
+    on<T>(name: string, callback: (value: T | null) => void): () => void;
+}
+export interface StorageClass {
+    new (config?: StorageConfig | undefined): StorageInterface;
+    QUOTA?: number;
+}
+declare const ActualStorage: StorageClass;
+export default ActualStorage;

package/components/storage/storage.js

@@ -0,0 +1,22 @@
+import LocalStorage from './storage__local';
+import FallbackStorage from './storage__fallback';
+/**
+ * @name Storage
+ */
+/**
+ * @constructor
+ * @extends {LocalStorage}
+ */
+let Storage = LocalStorage;
+// Using try/catch here because of IE10+ protected mode and other browsers' quirks
+// See https://github.com/Modernizr/Modernizr/blob/master/feature-detects/storage/localstorage.js
+try {
+    const temp = 'testStorage';
+    localStorage.setItem(temp, temp);
+    localStorage.removeItem(temp);
+}
+catch (e) {
+    Storage = FallbackStorage;
+}
+const ActualStorage = Storage;
+export default ActualStorage;

package/components/storage/storage__fallback.d.ts

@@ -0,0 +1,79 @@
+import { StorageInterface, StorageConfig } from './storage';
+/**
+ * @prop {string} cookieName
+ *
+ * @param {{cookieName: string}} config
+ * @param {{checkDelay: number}} config
+ * @param {{type: string}} config
+ * @return {FallbackStorage}
+ * @constructor
+ */
+export default class FallbackStorage implements StorageInterface {
+    static DEFAULT_COOKIE_NAME: string;
+    static DEFAULT_SESSION_COOKIE_NAME: string;
+    static DEFAULT_CHECK_DELAY: number;
+    static COOKIE_EXPIRES: number;
+    /**
+     * Maximum storage size
+     * @see http://browsercookielimits.squawky.net/
+     * @type {number}
+     */
+    static QUOTA: number;
+    /**
+     * @param {string} name
+     * @param {string} value
+     * @param {number} days
+     * @private
+     */
+    private static _createCookie;
+    /**
+     *
+     * @param {string} name
+     * @return {string}
+     * @private
+     */
+    private static _readCookie;
+    cookieName: string;
+    checkDelay: number;
+    expires: number | null;
+    constructor(config?: StorageConfig);
+    /**
+     * @return {Promise}
+     * @private
+     */
+    private _read;
+    /**
+     * @param data
+     * @return {Promise}
+     * @private
+     */
+    private _write;
+    /**
+     * @param {string} key
+     * @return {Promise}
+     */
+    get(key: string): Promise<any>;
+    /**
+     * @param {string} key
+     * @param {object} value
+     * @return {Promise}
+     */
+    set<T>(key: string, value: T | null): Promise<T | null>;
+    /**
+     * @param {string} key
+     * @return {Promise}
+     */
+    remove(key: string): Promise<void>;
+    /**
+     *
+     * @param {function(string, value)} callback
+     * @return {Promise}
+     */
+    each<R>(callback: (item: string, value: unknown) => R | Promise<R>): Promise<Awaited<R>[]>;
+    /**
+     * @param {string} key
+     * @param {Function} callback
+     * @return {Function}
+     */
+    on<T>(key: string, callback: (value: T | null) => void): () => void;
+}

package/components/storage/storage__fallback.js

@@ -0,0 +1,181 @@
+import deepEqual from 'deep-equal';
+const DEFAULT_CHECK_DELAY = 3000;
+const COOKIE_EXPIRES = 365;
+const QUOTA = 4093;
+// eslint-disable-next-line @typescript-eslint/no-magic-numbers
+const SECONDS_IN_DAY = 24 * 60 * 60 * 1000;
+/**
+ * @prop {string} cookieName
+ *
+ * @param {{cookieName: string}} config
+ * @param {{checkDelay: number}} config
+ * @param {{type: string}} config
+ * @return {FallbackStorage}
+ * @constructor
+ */
+export default class FallbackStorage {
+    static DEFAULT_COOKIE_NAME = 'localStorage';
+    static DEFAULT_SESSION_COOKIE_NAME = 'sessionStorage';
+    static DEFAULT_CHECK_DELAY = DEFAULT_CHECK_DELAY;
+    static COOKIE_EXPIRES = COOKIE_EXPIRES;
+    /**
+     * Maximum storage size
+     * @see http://browsercookielimits.squawky.net/
+     * @type {number}
+     */
+    static QUOTA = QUOTA;
+    /**
+     * @param {string} name
+     * @param {string} value
+     * @param {number} days
+     * @private
+     */
+    static _createCookie(name, value, days) {
+        let date;
+        let expires;
+        if (days) {
+            date = new Date();
+            date.setTime(date.getTime() + (days * SECONDS_IN_DAY));
+            expires = `; expires=${date.toUTCString()}`;
+        }
+        else {
+            expires = ';';
+        }
+        document.cookie = `${name}=${value}${expires}; path=/`;
+    }
+    /**
+     *
+     * @param {string} name
+     * @return {string}
+     * @private
+     */
+    static _readCookie(name) {
+        const nameEQ = `${name}=`;
+        const cookies = document.cookie.split(';');
+        let cookie;
+        for (let i = 0; i < cookies.length; i++) {
+            cookie = cookies[i];
+            while (cookie.charAt(0) === ' ') {
+                cookie = cookie.substring(1, cookie.length);
+            }
+            if (cookie.indexOf(nameEQ) === 0) {
+                return cookie.substring(nameEQ.length, cookie.length);
+            }
+        }
+        return undefined;
+    }
+    cookieName;
+    checkDelay;
+    expires;
+    constructor(config = {}) {
+        const session = config.type === 'session';
+        this.cookieName = config.cookieName ||
+            (session
+                ? FallbackStorage.DEFAULT_SESSION_COOKIE_NAME
+                : FallbackStorage.DEFAULT_COOKIE_NAME);
+        this.checkDelay = config.checkDelay || FallbackStorage.DEFAULT_CHECK_DELAY;
+        this.expires = session ? FallbackStorage.COOKIE_EXPIRES : null;
+    }
+    /**
+     * @return {Promise}
+     * @private
+     */
+    _read() {
+        return new Promise((resolve, reject) => {
+            const rawData = FallbackStorage._readCookie(this.cookieName);
+            if (rawData != null) {
+                resolve(JSON.parse(decodeURIComponent(rawData)));
+            }
+            else {
+                reject();
+            }
+        }).catch(() => ({}));
+    }
+    /**
+     * @param data
+     * @return {Promise}
+     * @private
+     */
+    _write(data) {
+        return new Promise(resolve => {
+            const stringData = encodeURIComponent(JSON.stringify(data));
+            FallbackStorage.
+                _createCookie(this.cookieName, stringData === '{}' ? '' : stringData, this.expires);
+            return resolve(data);
+        });
+    }
+    /**
+     * @param {string} key
+     * @return {Promise}
+     */
+    get(key) {
+        return this._read().then(data => data[key] || null);
+    }
+    /**
+     * @param {string} key
+     * @param {object} value
+     * @return {Promise}
+     */
+    async set(key, value) {
+        const data = await this._read();
+        if (key) {
+            if (value != null) {
+                data[key] = value;
+            }
+            else {
+                Reflect.deleteProperty(data, key);
+            }
+        }
+        await this._write(data);
+        return value;
+    }
+    /**
+     * @param {string} key
+     * @return {Promise}
+     */
+    async remove(key) {
+        await this.set(key, null);
+    }
+    /**
+     *
+     * @param {function(string, value)} callback
+     * @return {Promise}
+     */
+    each(callback) {
+        if (typeof callback !== 'function') {
+            return Promise.reject(new Error('Callback is not a function'));
+        }
+        return this._read().then(data => {
+            const promises = [];
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    promises.push(callback(key, data[key]));
+                }
+            }
+            return Promise.all(promises);
+        });
+    }
+    /**
+     * @param {string} key
+     * @param {Function} callback
+     * @return {Function}
+     */
+    on(key, callback) {
+        let stop = false;
+        const checkForChange = (oldValue) => {
+            this.get(key).then(newValue => {
+                if (stop) {
+                    return;
+                }
+                if (!deepEqual(oldValue, newValue)) {
+                    callback(newValue);
+                }
+                window.setTimeout(() => checkForChange(oldValue), this.checkDelay);
+            });
+        };
+        this.get(key).then(checkForChange);
+        return () => {
+            stop = true;
+        };
+    }
+}

package/components/storage/storage__local.d.ts

@@ -0,0 +1,38 @@
+import { StorageInterface, StorageConfig } from './storage';
+/**
+ * @return {LocalStorage}
+ * @param {{type: string}} config Set to "session" to use sessionStorage
+ * @constructor
+ */
+export default class LocalStorage implements StorageInterface {
+    static safePromise<T>(resolver: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: unknown) => void) => void): Promise<T>;
+    storageType: 'sessionStorage' | 'localStorage';
+    constructor(config?: StorageConfig);
+    /**
+     * @param {string} name
+     * @return {Promise}
+     */
+    get<T>(name: string): Promise<T | null>;
+    /**
+     * @param {string} name
+     * @param {object} value
+     * @return {Promise}
+     */
+    set<T>(name: string, value: T): Promise<T>;
+    /**
+     * @param {string} name
+     * @return {Promise}
+     */
+    remove(name: string): Promise<void>;
+    /**
+     * @param callback
+     * @return {Promise}s
+     */
+    each<R>(callback: (item: string, value: unknown) => R | Promise<R>): Promise<R[]>;
+    /**
+     * @param {string} name
+     * @param {Function} callback
+     * @return {Function}
+     */
+    on<T>(name: string, callback: (value: T | null) => void): () => void;
+}

package/components/storage/storage__local.js

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

package/components/tab-trap/tab-trap.css

@@ -0,0 +1,6 @@
+@import "../global/variables.css";
+
+.trapButton {
+  position: absolute;
+  left: -9999px;
+}

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<NonNullable<PropTypes.ReactNodeLike>>;
+        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(): React.JSX.Element;
+}

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

@@ -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 React, { 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(): React.JSX.Element;
+}

package/components/table/cell.js

@@ -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>);
+    }
+}