@jetbrains/ring-ui 5.1.23 → 5.1.25

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}`;
+}

package/components/global/global.css

@@ -0,0 +1,107 @@
+/* https://readymag.com/artemtiunov/RingUILanguage/colours/ */
+
+/*
+Unit shouldn't be CSS custom property because it is not intended to change
+Also it won't form in FF47 https://bugzilla.mozilla.org/show_bug.cgi?id=594933
+*/
+@value unit: 8px;
+
+.clearfix {
+  &::after {
+    display: block;
+    clear: both;
+
+    content: "";
+  }
+}
+
+.font {
+  font-family: var(--ring-font-family);
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+}
+
+.font-lower {
+  composes: font;
+
+  line-height: var(--ring-line-height-lower);
+}
+
+.font-smaller {
+  composes: font-lower;
+
+  font-size: var(--ring-font-size-smaller);
+}
+
+.font-smaller-lower {
+  composes: font-smaller;
+
+  line-height: var(--ring-line-height-lowest);
+}
+
+.font-larger-lower {
+  composes: font-lower;
+
+  font-size: var(--ring-font-size-larger);
+}
+
+.font-larger {
+  composes: font-larger-lower;
+
+  line-height: var(--ring-line-height-taller);
+}
+
+/* To be used at large sizes */
+/* As close as possible to Helvetica Neue Thin (to replace Gotham) */
+.thin-font {
+  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: var(--ring-font-size);
+  font-weight: 100; /* Renders Helvetica Neue UltraLight on OS X  */
+}
+
+.monospace-font {
+  font-family: var(--ring-font-family-monospace);
+  font-size: var(--ring-font-size-smaller);
+}
+
+.ellipsis {
+  overflow: hidden;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.resetButton {
+  overflow: visible;
+
+  padding: 0;
+
+  text-align: left;
+
+  color: inherit;
+  border: 0;
+
+  background-color: transparent;
+
+  font: inherit;
+
+  &::-moz-focus-inner {
+    padding: 0;
+
+    border: 0;
+  }
+}
+
+/* Note: footer also has top margin which isn't taken into account here */
+@value footer-height: calc(unit * 8);
+
+/* Media breakpoints (minimal values) */
+@value breakpoint-small: 640px;
+@value breakpoint-middle: 960px;
+@value breakpoint-large: 1200px;
+
+/* Media queries */
+@value extra-small-screen-media: (max-width: calc(breakpoint-small - 1px));
+@value small-screen-media: (min-width: breakpoint-small) and (max-width: calc(breakpoint-middle - 1px));
+@value middle-screen-media: (min-width: breakpoint-middle) and (max-width: calc(breakpoint-large - 1px));
+@value large-screen-media: (min-width: breakpoint-large);

package/components/global/inject-styles.d.ts

@@ -0,0 +1,3 @@
+import type { PropertiesHyphen } from 'csstype';
+export declare const injectStyleSheet: (styles: string) => HTMLStyleElement;
+export declare const injectRuleSet: (selector: string, declarations: PropertiesHyphen) => HTMLStyleElement;

package/components/global/inject-styles.js

@@ -0,0 +1,12 @@
+export const injectStyleSheet = (styles) => {
+    const styleTag = document.createElement('style');
+    styleTag.setAttribute('type', 'text/css');
+    styleTag.textContent = styles;
+    document.head.appendChild(styleTag);
+    return styleTag;
+};
+export const injectRuleSet = (selector, declarations) => injectStyleSheet(`
+${selector} {
+  ${Object.entries(declarations).map(([property, value]) => `${property}: ${value};`).join(`
+  `)}
+}`);

package/components/global/linear-function.d.ts

@@ -0,0 +1,6 @@
+export interface LinearFunction {
+    y(x: number): number;
+    x(y: number): number;
+}
+export default function linearFunction(x0: number, y0: number, a: number): LinearFunction;
+export declare function interpolateLinear(x0: number, x1: number, phase: number): number;

package/components/global/linear-function.js

@@ -0,0 +1,13 @@
+export default function linearFunction(x0, y0, a) {
+    return {
+        y(x) {
+            return +y0 + (x - x0) * a;
+        },
+        x(y) {
+            return +x0 + (y - y0) / a;
+        }
+    };
+}
+export function interpolateLinear(x0, x1, phase) {
+    return linearFunction(x0, x0, phase).y(x1);
+}

package/components/global/listeners.d.ts

@@ -0,0 +1,8 @@
+export type Handler<PM extends Record<string, [unknown, unknown]>, E extends keyof PM> = (data: PM[E][0]) => PM[E][1] | Promise<PM[E][1]>;
+export default class Listeners<PM extends Record<string, [unknown, unknown]> = Record<string, [void, unknown]>> {
+    _all: Map<keyof PM, Set<Handler<PM, keyof PM>>>;
+    trigger<E extends keyof PM>(...[event, data]: PM[E][0] extends void ? [E] : [E, PM[E][0]]): Promise<PM[E][1][]>;
+    add<E extends keyof PM>(event: E, handler: Handler<PM, E>): void;
+    remove<E extends keyof PM>(event: E, handler: Handler<PM, E>): void;
+    removeAll(): void;
+}

package/components/global/listeners.js

@@ -0,0 +1,27 @@
+export default class Listeners {
+    _all = new Map();
+    trigger(...[event, data]) {
+        const handlers = this._all.get(event);
+        if (handlers) {
+            return Promise.all([...handlers].map(fn => fn(data)));
+        }
+        return Promise.resolve([]);
+    }
+    add(event, handler) {
+        let handlers = this._all.get(event);
+        if (!handlers) {
+            handlers = new Set();
+            this._all.set(event, handlers);
+        }
+        handlers.add(handler);
+    }
+    remove(event, handler) {
+        const handlers = this._all.get(event);
+        if (handlers) {
+            handlers.delete(handler);
+        }
+    }
+    removeAll() {
+        this._all = new Map();
+    }
+}

package/components/global/memoize.d.ts

@@ -0,0 +1 @@
+export default function memoize<A = void, T = void>(fn: (arg: A) => T): (arg: A) => T;

package/components/global/memoize.js

@@ -0,0 +1,15 @@
+export default function memoize(fn) {
+    const primitiveCache = new Map();
+    const objectCache = new WeakMap();
+    return function memoized(arg) {
+        const key = arg ?? '__singleValue__';
+        const cache = key instanceof Object ? objectCache : primitiveCache;
+        const cached = cache.get(key);
+        if (cached != null) {
+            return cached;
+        }
+        const value = fn(arg);
+        cache.set(key, value);
+        return value;
+    };
+}

package/components/global/normalize-indent.d.ts

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

package/components/global/normalize-indent.js

@@ -0,0 +1,30 @@
+export default function normalizeIndent(string) {
+    const nonemptyRE = /\S/;
+    const indentRE = /^\s*/;
+    const lines = string.split(/\n/g);
+    const linesCopy = [...lines];
+    //remove empty lines at the beginning and the end
+    for (const line of linesCopy) {
+        if (nonemptyRE.test(line)) {
+            break;
+        }
+        else {
+            lines.shift();
+        }
+    }
+    for (const line of linesCopy.reverse()) {
+        if (nonemptyRE.test(line)) {
+            break;
+        }
+        else {
+            lines.pop();
+        }
+    }
+    const indents = lines.
+        filter(line => nonemptyRE.test(line)).
+        map(line => line.match(indentRE)?.[0].length ?? 0);
+    const minIndent = Math.min(...indents);
+    return lines.
+        map(line => line.slice(minIndent)).
+        join('\n');
+}

package/components/global/promise-with-timeout.d.ts

@@ -0,0 +1,5 @@
+export interface PromiseWithTimeoutConfig {
+    error?: Error | null | undefined;
+    onTimeout?: () => void | undefined;
+}
+export default function promiseWithTimeout<T>(promise: Promise<T>, timeout: number, { error, onTimeout }: PromiseWithTimeoutConfig): Promise<unknown>;

package/components/global/promise-with-timeout.js

@@ -0,0 +1,11 @@
+// Useful for using fetch with timeout
+// https://github.com/github/fetch/issues/175#issuecomment-284787564
+export default function promiseWithTimeout(promise, timeout, { error, onTimeout = () => { } }) {
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            onTimeout();
+            reject(error || new Error('Timeout'));
+        }, timeout);
+        promise.then(resolve, reject);
+    });
+}

package/components/global/prop-types.d.ts

@@ -0,0 +1,4 @@
+import PropTypes from 'prop-types';
+export declare const refObject: <T>(value: PropTypes.Validator<T>) => PropTypes.Requireable<PropTypes.InferProps<{
+    current: PropTypes.Validator<T>;
+}>>;

package/components/global/prop-types.js

@@ -0,0 +1,4 @@
+import PropTypes from 'prop-types';
+export const refObject = (value) => PropTypes.shape({
+    current: value
+});