@jetbrains/ring-ui 4.1.6 → 5.0.0-beta.3

package/components/global/conic-gradient.js

@@ -1,31 +1,21 @@
-/* global ConicGradient */
 import 'conic-gradient';
-
 import memoize from './memoize';
 import supportsCss from './supports-css';
-
-const conicGradient = memoize(({stops, size}) => (
-  supportsCss('background-image: conic-gradient(white, black)')
+const conicGradient = memoize(({ stops, size }) => (supportsCss('background-image: conic-gradient(white, black)')
     ? `conic-gradient(${stops})`
-    : new ConicGradient({stops, size})
-));
-
-export default stops => conicGradient(stops).toString();
-
+    : new ConicGradient({ stops, size })));
+export default (stops) => conicGradient(stops).toString();
 export const conicGradientWithMask = (mask, stops, size) => {
-  const gradient = conicGradient({stops, size});
-
-  if (!mask.supports && gradient instanceof ConicGradient) {
-    Object.defineProperty(gradient, 'svg', {
-      value: gradient.svg.replace('<image ', `
-        ${mask.svgDefs}    
+    const gradient = conicGradient({ stops, size });
+    if (!mask.supports && gradient instanceof ConicGradient) {
+        Object.defineProperty(gradient, 'svg', {
+            value: gradient.svg.replace('<image ', `
+        ${mask.svgDefs}
         <image mask="url(#${mask.maskId})" `)
-    });
-  }
-
-  return {
-    ...mask.css,
-    'background-image': gradient.toString()
-  };
+        });
+    }
+    return {
+        ...mask.css,
+        'background-image': gradient.toString()
+    };
 };
-

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

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+declare 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): JSX.Element;
+        propTypes: {
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        };
+        displayName: string;
+    };
+    useUpdate: (value: T, skipUpdate?: boolean | undefined) => void;
+    Updater: React.MemoExoticComponent<{
+        ({ value, skipUpdate }: UpdaterProps<T>): null;
+        displayName: string;
+    }>;
+};
+export {};

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

@@ -1,46 +1,38 @@
-import React, {createContext, memo, useContext, useEffect, useState} from 'react';
+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}>
+    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)
-  };
+      </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 @@
+declare 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

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

@@ -1,105 +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);
+    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};
-
+const rectStub = { top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 };
 export function getRect(node) {
-  if (node instanceof Range || isMounted(node)) {
-    const {top, right, bottom, left, width, height} = node.getBoundingClientRect();
-    return {top, right, bottom, left, width, height};
-  } else {
-    return Object.assign({}, rectStub);
-  }
+    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;
+    return 'devicePixelRatio' in window ? window.devicePixelRatio : 1;
 }
-
 export function getWindowHeight() {
-  return window.innerHeight;
+    return window.innerHeight;
 }
-
 export function getWindowWidth() {
-  return window.innerWidth;
+    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);
+    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;
+    return (document.documentElement && document.documentElement.scrollTop) ||
+        document.body.scrollTop;
 }
-
 export function getDocumentScrollLeft() {
-  return (document.documentElement && document.documentElement.scrollLeft) ||
-    document.body.scrollLeft;
+    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 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 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);
-  });
+    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));
+    const rootStyle = document.documentElement.style;
+    Object.keys(properties).
+        forEach(key => rootStyle.removeProperty(key));
 }
-
 export class Listeners {
-  _all = new Set();
-
-  add(el, event, handler, useCapture) {
-    el.addEventListener(event, handler, useCapture);
-    const dispatchFn = () => el.removeEventListener(event, handler, useCapture);
-    this._all.add(dispatchFn);
-    return dispatchFn;
-  }
-
-  remove(fn) {
-    fn();
-    this._all.delete(fn);
-  }
-
-  removeAll() {
-    this._all.forEach(fn => this.remove(fn));
-  }
+    _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();
-  }
+    if (e.preventDefault) {
+        e.preventDefault();
+    }
 }

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

@@ -0,0 +1,18 @@
+import { ComponentType, Ref } from 'react';
+export interface FocusSensorOuterProps<T extends HTMLElement> {
+    focused?: boolean | undefined;
+    autofocus?: boolean | undefined;
+    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;
+}
+declare type RestProps<P, T extends HTMLElement> = Omit<P, keyof FocusSensorAddProps<T>>;
+export declare 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

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

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

@@ -0,0 +1,5 @@
+/** https://github.com/bevacqua/fuzzysearch + highlighting with Markdown */
+export default function fuzzyHighlight(needle: string, haystack: string, caseSensitive?: boolean): {
+    matched: boolean;
+    highlight: string;
+};