@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/global/compose.d.ts

@@ -0,0 +1,7 @@
+declare function compose<A, R1, R2, R3, R4, R5, R6, R7>(f7: (a: R6) => R7, f6: (a: R5) => R6, f5: (a: R4) => R5, f4: (a: R3) => R4, f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R7;
+declare function compose<A, R1, R2, R3, R4, R5, R6>(f6: (a: R5) => R6, f5: (a: R4) => R5, f4: (a: R3) => R4, f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R6;
+declare function compose<A, R1, R2, R3, R4, R5>(f5: (a: R4) => R5, f4: (a: R3) => R4, f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R5;
+declare function compose<A, R1, R2, R3, R4>(f4: (a: R3) => R4, f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R4;
+declare function compose<A, R1, R2, R3>(f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R3;
+declare function compose<A, R1, R2>(f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R2;
+export default compose;

package/components/global/compose.js

@@ -0,0 +1,4 @@
+function compose(...funcs) {
+    return funcs.reduce((acc, func) => arg => acc(func(arg)), arg => arg);
+}
+export default compose;

package/components/global/composeRefs.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'react';
+declare const _default: <T>(...refs: (Ref<T> | undefined)[]) => (value: T | null) => void;
+export default _default;

package/components/global/composeRefs.js

@@ -0,0 +1,8 @@
+export default (...refs) => (value) => refs.forEach(ref => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref != null) {
+        ref.current = value;
+    }
+});

package/components/global/controls-height.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare enum ControlsHeight {
+    S = "S",
+    M = "M",
+    L = "L"
+}
+export declare const ControlsHeightContext: import("react").Context<ControlsHeight>;
+export declare function configureGlobalControlsHeight(value: ControlsHeight): void;
+export declare function getGlobalControlsHeight(): ControlsHeight;

package/components/global/controls-height.js

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+export var ControlsHeight;
+(function (ControlsHeight) {
+    ControlsHeight["S"] = "S";
+    ControlsHeight["M"] = "M";
+    ControlsHeight["L"] = "L";
+})(ControlsHeight || (ControlsHeight = {}));
+export const ControlsHeightContext = createContext(ControlsHeight.M);
+let globalControlsHeight = ControlsHeight.M;
+// This can be used if React Context is not applicable, for example for alertService or Auth dialog
+export function configureGlobalControlsHeight(value) {
+    globalControlsHeight = value;
+}
+export function getGlobalControlsHeight() {
+    return globalControlsHeight;
+}

package/components/global/create-stateful-context.d.ts

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+type Update<T> = (value: T) => void;
+export interface ProviderProps {
+    children: ReactNode;
+}
+export interface UpdaterProps<T> {
+    value: T;
+    skipUpdate?: boolean;
+}
+export default function createStatefulContext<T>(initialValue: T, name?: string): {
+    ValueContext: React.Context<T>;
+    UpdateContext: React.Context<Update<T>>;
+    Provider: {
+        ({ children }: ProviderProps): React.JSX.Element;
+        propTypes: {
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        };
+        displayName: string;
+    };
+    useUpdate: (value: T, skipUpdate?: boolean) => void;
+    Updater: React.MemoExoticComponent<{
+        ({ value, skipUpdate }: UpdaterProps<T>): null;
+        displayName: string;
+    }>;
+};
+export {};

package/components/global/create-stateful-context.js

@@ -0,0 +1,38 @@
+import React, { createContext, memo, useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+export default function createStatefulContext(initialValue, name = '') {
+    const ValueContext = createContext(initialValue);
+    const UpdateContext = createContext(() => { });
+    function Provider({ children }) {
+        const [value, update] = useState(initialValue);
+        return (<ValueContext.Provider value={value}>
+        <UpdateContext.Provider value={update}>
+          {children}
+        </UpdateContext.Provider>
+      </ValueContext.Provider>);
+    }
+    Provider.propTypes = {
+        children: PropTypes.node
+    };
+    Provider.displayName = `${name}Provider`;
+    function useUpdate(value, skipUpdate) {
+        const update = useContext(UpdateContext);
+        useEffect(() => {
+            if (!skipUpdate) {
+                update(value);
+            }
+        }, [update, value, skipUpdate]);
+    }
+    function Updater({ value, skipUpdate }) {
+        useUpdate(value, skipUpdate);
+        return null;
+    }
+    Updater.displayName = `${name}Updater`;
+    return {
+        ValueContext,
+        UpdateContext,
+        Provider,
+        useUpdate,
+        Updater: memo(Updater)
+    };
+}

package/components/global/data-tests.d.ts

@@ -0,0 +1,3 @@
+type AttrsMap = Record<string, boolean | null | undefined>;
+export default function joinDataTestAttributes(...attrs: Array<string | AttrsMap | null | undefined>): string;
+export {};

package/components/global/data-tests.js

@@ -0,0 +1,17 @@
+function expandMap(attrsMap) {
+    return Object.entries(attrsMap).
+        reduce((result, [key, value]) => (value ? [...result, key] : result), []);
+}
+export default function joinDataTestAttributes(...attrs) {
+    return attrs.
+        reduce((result, attr) => {
+        if (!attr) {
+            return result;
+        }
+        if (typeof attr === 'object') {
+            return [...result, ...expandMap(attr)];
+        }
+        return [...result, attr];
+    }, []).
+        join(' ');
+}

package/components/global/dom.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @name DOM
+ */
+import { SyntheticEvent } from 'react';
+import type { PropertiesHyphen } from 'csstype';
+export declare const getStyles: ((elt: Element, pseudoElt?: string | null | undefined) => CSSStyleDeclaration) & typeof getComputedStyle;
+export declare function isMounted(node: Node | Range | null | undefined): boolean;
+export interface Rect {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export declare function getRect(node: Element | Range | null | undefined): Rect;
+export declare function getPixelRatio(): number;
+export declare function getWindowHeight(): number;
+export declare function getWindowWidth(): number;
+export declare function isNodeInVisiblePartOfPage(node: Element | Range): boolean;
+export declare function getDocumentScrollTop(): number;
+export declare function getDocumentScrollLeft(): number;
+export declare const applyMethodToClasses: (method: 'add' | 'remove') => (classList: DOMTokenList, classes?: string) => void;
+export declare const addClasses: (classList: DOMTokenList, classes?: string) => void;
+export declare const removeClasses: (classList: DOMTokenList, classes?: string) => void;
+export declare const toggleClasses: (classList: DOMTokenList, classes: Record<string, boolean>) => void;
+export declare function setRootStyleProperties(properties?: PropertiesHyphen): void;
+export declare function resetRootStyleProperties(properties?: Partial<Record<keyof PropertiesHyphen, unknown>>): void;
+export declare class Listeners {
+    private _all;
+    add<K extends keyof HTMLElementEventMap>(el: HTMLElement, event: K, handler: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): () => void;
+    add<K extends keyof WindowEventMap>(el: Window, event: K, handler: (this: Window, ev: WindowEventMap[K]) => void, options?: boolean | AddEventListenerOptions): () => void;
+    add<K extends keyof DocumentEventMap>(el: Document, event: K, handler: (this: Window, ev: DocumentEventMap[K]) => void, options?: boolean | AddEventListenerOptions): () => void;
+    remove(fn: () => void): void;
+    removeAll(): void;
+}
+export declare function preventDefault(e: Event | SyntheticEvent): void;

package/components/global/dom.js

@@ -0,0 +1,83 @@
+/**
+ * @name DOM
+ */
+export const getStyles = window.getComputedStyle.bind(window);
+export function isMounted(node) {
+    if (node === document) {
+        return true;
+    }
+    return node instanceof Node && document.documentElement.contains(node.parentNode);
+}
+const rectStub = { top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 };
+export function getRect(node) {
+    if (node instanceof Range || node != null && isMounted(node)) {
+        const { top, right, bottom, left, width, height } = node.getBoundingClientRect();
+        return { top, right, bottom, left, width, height };
+    }
+    else {
+        return Object.assign({}, rectStub);
+    }
+}
+export function getPixelRatio() {
+    return 'devicePixelRatio' in window ? window.devicePixelRatio : 1;
+}
+export function getWindowHeight() {
+    return window.innerHeight;
+}
+export function getWindowWidth() {
+    return window.innerWidth;
+}
+export function isNodeInVisiblePartOfPage(node) {
+    const { top, bottom, left, right } = getRect(node);
+    return !(bottom < 0 || right < 0 || getWindowHeight() - top < 0 || getWindowWidth() - left < 0);
+}
+export function getDocumentScrollTop() {
+    return (document.documentElement && document.documentElement.scrollTop) ||
+        document.body.scrollTop;
+}
+export function getDocumentScrollLeft() {
+    return (document.documentElement && document.documentElement.scrollLeft) ||
+        document.body.scrollLeft;
+}
+export const applyMethodToClasses = (method) => (classList, classes = '') => {
+    classes.
+        split(/\s+/g).
+        filter(className => !!className).
+        forEach(className => classList[method](className));
+};
+export const addClasses = applyMethodToClasses('add');
+export const removeClasses = applyMethodToClasses('remove');
+export const toggleClasses = (classList, classes) => Object.entries(classes).forEach(([className, on]) => classList.toggle(className, on));
+export function setRootStyleProperties(properties = {}) {
+    const rootStyle = document.documentElement.style;
+    Object.entries(properties).forEach(([key, value]) => {
+        rootStyle.setProperty(key, value);
+    });
+}
+export function resetRootStyleProperties(properties = {}) {
+    const rootStyle = document.documentElement.style;
+    Object.keys(properties).
+        forEach(key => rootStyle.removeProperty(key));
+}
+export class Listeners {
+    _all = new Set();
+    add(el, event, handler, options) {
+        el.addEventListener(event, handler, options);
+        const dispatchFn = () => el.removeEventListener(event, handler, options);
+        this._all.add(dispatchFn);
+        return dispatchFn;
+    }
+    remove(fn) {
+        fn();
+        this._all.delete(fn);
+    }
+    removeAll() {
+        this._all.forEach(fn => this.remove(fn));
+    }
+}
+// Synthetic events from Combokeys#trigger are plain objects
+export function preventDefault(e) {
+    if (e.preventDefault) {
+        e.preventDefault();
+    }
+}

package/components/global/focus-sensor-hoc.d.ts

@@ -0,0 +1,19 @@
+import { ComponentType, Ref } from 'react';
+export interface FocusSensorOuterProps<T extends HTMLElement> {
+    focused?: boolean | undefined;
+    autofocus?: boolean | undefined;
+    scrollOnTableFocus?: boolean;
+    onFocus?: (() => void) | undefined;
+    onBlur?: (() => void) | undefined;
+    innerRef?: Ref<T> | null | undefined;
+}
+export interface FocusSensorAddProps<T extends HTMLElement> {
+    innerRef: Ref<T>;
+    focused: boolean;
+    onFocusReset: () => void;
+    onFocusRestore: () => void;
+}
+type RestProps<P, T extends HTMLElement> = Omit<P, keyof FocusSensorAddProps<T>>;
+export type FocusSensorProps<P extends FocusSensorAddProps<T>, T extends HTMLElement, C extends ComponentType<P>> = RestProps<JSX.LibraryManagedAttributes<C, P>, T> & FocusSensorOuterProps<T>;
+export default function focusSensorHOC<T extends HTMLElement, P extends FocusSensorAddProps<T>, C extends ComponentType<P>>(ComposedComponent: C): ComponentType<FocusSensorProps<P, T, typeof ComposedComponent>>;
+export {};

package/components/global/focus-sensor-hoc.js

@@ -0,0 +1,102 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { refObject } from './prop-types';
+import composeRefs from './composeRefs';
+function extractPropTypes({ propTypes }) {
+    if (propTypes == null) {
+        return propTypes;
+    }
+    const { innerRef, focused, onFocusReset, onFocusRestore, ...restPropTypes } = propTypes;
+    return restPropTypes;
+}
+export default function focusSensorHOC(ComposedComponent) {
+    class FocusSensor extends Component {
+        state = {
+            focused: this.props.focused
+        };
+        componentDidMount() {
+            const { props: { autofocus, scrollOnTableFocus }, node } = this;
+            node?.setAttribute('tabindex', '0');
+            if (node != null) {
+                node.style.outline = 'none';
+            }
+            document.addEventListener('focus', this.onFocusCapture, true);
+            document.addEventListener('blur', this.onBlurCapture, true);
+            if (autofocus) {
+                node?.focus({ preventScroll: !scrollOnTableFocus });
+            }
+        }
+        componentDidUpdate(prevProps) {
+            const { focused } = this.props;
+            if (focused && !prevProps.focused) {
+                this.onFocusRestore();
+            }
+            else if (!focused && prevProps.focused) {
+                this.onFocusReset();
+            }
+        }
+        componentWillUnmount() {
+            document.removeEventListener('focus', this.onFocusCapture, true);
+            document.removeEventListener('blur', this.onBlurCapture, true);
+        }
+        node;
+        _skipNextCapture = false;
+        onRefUpdate = (node) => {
+            if (node) {
+                this.node = node;
+            }
+        };
+        onFocusCapture = ({ target }) => {
+            if (this._skipNextCapture) {
+                this._skipNextCapture = false;
+                return;
+            }
+            const focused = target instanceof Node && this.node?.contains(target);
+            if (focused && !this.state.focused) {
+                this.setState({ focused: true });
+                this.props.onFocus?.();
+            }
+        };
+        onBlurCapture = ({ target }) => {
+            const { state: { focused }, node } = this;
+            if (focused) {
+                setTimeout(() => {
+                    const blurred = target instanceof Node &&
+                        node?.contains(target) && !node.contains(document.activeElement);
+                    if (blurred) {
+                        this.setState({ focused: false });
+                        this.props.onBlur?.();
+                    }
+                }, 1);
+            }
+        };
+        onFocusRestore = () => {
+            this._skipNextCapture = true;
+            this.node?.focus({ preventScroll: !this.props.scrollOnTableFocus });
+        };
+        onFocusReset = () => {
+            this.node?.blur();
+        };
+        render() {
+            const { autofocus, focused, onFocus, onBlur, innerRef, scrollOnTableFocus, ...rest } = this.props;
+            return (<ComposedComponent {...rest} innerRef={composeRefs(innerRef, this.onRefUpdate)} focused={this.state.focused} onFocusReset={this.onFocusReset} onFocusRestore={this.onFocusRestore}/>);
+        }
+    }
+    FocusSensor.propTypes = {
+        ...extractPropTypes(ComposedComponent),
+        focused: PropTypes.bool,
+        autofocus: PropTypes.bool,
+        onFocus: PropTypes.func,
+        onBlur: PropTypes.func,
+        innerRef: PropTypes.oneOfType([PropTypes.func, refObject(PropTypes.instanceOf(HTMLElement))])
+    };
+    FocusSensor.defaultProps = {
+        ...ComposedComponent.defaultProps,
+        focused: false,
+        autofocus: false,
+        scrollOnTableFocus: true,
+        onFocus: () => { },
+        onBlur: () => { }
+    };
+    return FocusSensor;
+}

package/components/global/fuzzy-highlight.d.ts

@@ -0,0 +1,11 @@
+/** https://github.com/bevacqua/fuzzysearch + highlighting with Markdown */
+type Match = {
+    from: number;
+    to: number;
+};
+export default function fuzzyHighlight(needle: string, haystack: string, caseSensitive?: boolean): {
+    matched: boolean;
+    matches: Match[];
+    highlight: string;
+};
+export {};

package/components/global/fuzzy-highlight.js

@@ -0,0 +1,58 @@
+/** https://github.com/bevacqua/fuzzysearch + highlighting with Markdown */
+export default function fuzzyHighlight(needle, haystack, caseSensitive = false) {
+    const ndl = caseSensitive ? needle : needle.toLowerCase();
+    const hstck = caseSensitive ? haystack : haystack.toLowerCase();
+    const result = (matched, matches = []) => {
+        let highlight = haystack;
+        if (matches.length > 0) {
+            highlight = '';
+            let prevMatch = { to: 0 };
+            for (const match of matches) {
+                highlight += `${haystack.slice(prevMatch.to, match.from)}**${haystack.slice(match.from, match.to)}**`;
+                prevMatch = match;
+            }
+            highlight += haystack.slice(prevMatch.to);
+        }
+        return ({ matched, matches, highlight });
+    };
+    const hlen = hstck.length;
+    const nlen = ndl.length;
+    if (nlen > hlen) {
+        return result(false);
+    }
+    if (nlen === hlen) {
+        const matched = ndl === hstck;
+        return result(matched, matched ? [{ from: 0, to: haystack.length }] : []);
+    }
+    let on = false;
+    let j = 0;
+    const matches = [];
+    let from = 0;
+    /* eslint-disable no-labels */
+    outer: for (let i = 0; i < nlen; i++) {
+        const nch = ndl[i];
+        while (j < hlen) {
+            const hch = hstck[j];
+            const match = hch === nch;
+            // Don't turn highlight on for space characters
+            const nextOn = match && /\S/.test(hch);
+            if (nextOn && !on) {
+                from = j;
+            }
+            else if (!nextOn && on) {
+                matches.push({ from, to: j });
+            }
+            j++;
+            on = nextOn;
+            if (match) {
+                continue outer;
+            }
+        }
+        return result(false);
+    }
+    /* eslint-enable */
+    if (on) {
+        matches.push({ from, to: j });
+    }
+    return result(true, matches);
+}

package/components/global/get-event-key.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function getEventKey(nativeEvent: KeyboardEvent | React.KeyboardEvent): string;

package/components/global/get-event-key.js

@@ -0,0 +1,100 @@
+const normalizeKey = {
+    Esc: 'Escape',
+    Spacebar: ' ',
+    Left: 'ArrowLeft',
+    Up: 'ArrowUp',
+    Right: 'ArrowRight',
+    Down: 'ArrowDown',
+    Del: 'Delete',
+    Win: 'OS',
+    Menu: 'ContextMenu',
+    Apps: 'ContextMenu',
+    Scroll: 'ScrollLock',
+    MozPrintableKey: 'Unidentified'
+};
+const translateToKey = {
+    8: 'Backspace',
+    9: 'Tab',
+    12: 'Clear',
+    13: 'Enter',
+    16: 'Shift',
+    17: 'Control',
+    18: 'Alt',
+    19: 'Pause',
+    20: 'CapsLock',
+    27: 'Escape',
+    32: ' ',
+    33: 'PageUp',
+    34: 'PageDown',
+    35: 'End',
+    36: 'Home',
+    37: 'ArrowLeft',
+    38: 'ArrowUp',
+    39: 'ArrowRight',
+    40: 'ArrowDown',
+    45: 'Insert',
+    46: 'Delete',
+    112: 'F1',
+    113: 'F2',
+    114: 'F3',
+    115: 'F4',
+    116: 'F5',
+    117: 'F6',
+    118: 'F7',
+    119: 'F8',
+    120: 'F9',
+    121: 'F10',
+    122: 'F11',
+    123: 'F12',
+    144: 'NumLock',
+    145: 'ScrollLock',
+    224: 'Meta'
+};
+const ENTER = 13;
+const SPACE = 32;
+function getEventCharCode(nativeEvent) {
+    let charCode;
+    const keyCode = nativeEvent.keyCode;
+    if ('charCode' in nativeEvent) {
+        charCode = nativeEvent.charCode;
+        // FF does not set `charCode` for the Enter-key, check against `keyCode`.
+        if (charCode === 0 && keyCode === ENTER) {
+            charCode = ENTER;
+        }
+    }
+    else {
+        // IE8 does not implement `charCode`, but `keyCode` has the correct value.
+        charCode = keyCode;
+    }
+    // Some non-printable keys are reported in `charCode`/`keyCode`, discard them.
+    // Must not discard the (non-)printable Enter-key.
+    if (charCode >= SPACE || charCode === ENTER) {
+        return charCode;
+    }
+    return 0;
+}
+export default function getEventKey(nativeEvent) {
+    if (nativeEvent.key) {
+        // Normalize inconsistent values reported by browsers due to
+        // implementations of a working draft specification.
+        // FireFox implements `key` but returns `MozPrintableKey` for all
+        // printable characters (normalized to `Unidentified`), ignore it.
+        const key = normalizeKey[nativeEvent.key] || nativeEvent.key;
+        if (key !== 'Unidentified') {
+            return key;
+        }
+    }
+    // Browser does not implement `key`, polyfill as much of it as we can.
+    if (nativeEvent.type === 'keypress') {
+        const charCode = getEventCharCode(nativeEvent);
+        // The enter-key is technically both printable and non-printable and can
+        // thus be captured by `keypress`, no other non-printable key should.
+        return charCode === SPACE ? 'Enter' : String.fromCharCode(charCode);
+    }
+    if (nativeEvent.type === 'keydown' || nativeEvent.type === 'keyup') {
+        // While user keyboard layout determines the actual meaning of each
+        // `keyCode` value, almost all function keys have a universal value.
+        return translateToKey[nativeEvent.keyCode] || 'Unidentified';
+    }
+    return '';
+}

package/components/global/get-uid.d.ts

@@ -0,0 +1 @@
+export default function getUID(name: string): string;

package/components/global/get-uid.js

@@ -0,0 +1,16 @@
+const idCounters = {};
+function generateSalt() {
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    return (Date.now() * Math.random()).toString(36).substring(0, 4);
+}
+const salt = generateSalt();
+export default function getUID(name) {
+    if (!name) {
+        throw Error('Argument "name" is required in getUID()');
+    }
+    if (!idCounters[name]) {
+        idCounters[name] = 0;
+    }
+    const id = String(idCounters[name]++);
+    return `${name}${id}-${salt}`;
+}