@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/global/dom.examples.ts

@@ -0,0 +1,43 @@
+import {getStyles, getRect, getPixelRatio, getWindowHeight} from './dom';
+
+export default {
+  title: 'Utilities/DOM',
+
+  parameters: {
+    notes: 'A collection of DOM utilities.',
+    hermione: {skip: true}
+  }
+};
+
+export const basic = () => {
+  const node = document.createElement('div');
+
+  node.innerHTML = `
+      <div id="rect-target" style="min-width: 200px"></div>
+      <div id="report"></div>
+    `;
+
+  function calc() {
+    const rectTarget = node.querySelector('#rect-target');
+    if (rectTarget != null) {
+      rectTarget.innerHTML = `
+        Element min-width = ${getStyles(rectTarget).minWidth} <br/>
+        Element rect = ${JSON.stringify(getRect(rectTarget))} <br/>
+      `;
+    }
+
+    const report = node.querySelector('#report');
+    if (report != null) {
+      report.innerHTML = `
+       Pixel ratio = ${getPixelRatio()} <br/>
+       Window height = ${getWindowHeight()} <br/>
+      `;
+    }
+  }
+
+  setTimeout(calc);
+
+  return node;
+};
+
+basic.storyName = 'DOM';

package/components/global/dom.test.ts

@@ -0,0 +1,99 @@
+import {getRect, getStyles, isMounted} from './dom';
+
+const nodes: Node[] = [];
+
+function create(tag = 'div') {
+  return document.createElement(tag);
+}
+
+function attach<T extends Node>(node: T) {
+  nodes.push(node);
+  return document.body.insertBefore(node, document.body.firstChild);
+}
+
+afterEach(() => {
+  let node;
+  while ((node = nodes.pop())) {
+    if (node.parentNode) {
+      node.parentNode.removeChild(node);
+    }
+  }
+});
+
+describe('DOM', () => {
+  describe('isMounted', () => {
+    it('should return true for the document', () => {
+      isMounted(document).should.equal(true);
+    });
+
+    it('should return true for an element attached to DOM', () => {
+      const element = attach(create());
+      isMounted(element).should.equal(true);
+    });
+
+    it('should return false for an element that\'s not attached to DOM', () => {
+      const element = create();
+      isMounted(element).should.equal(false);
+    });
+
+    it('should return true for textNode attached to DOM', () => {
+      const textNode = attach(document.createTextNode('Lorem ipsum dolor sit amet.'));
+      isMounted(textNode).should.equal(true);
+    });
+
+    it('should return false for textNode that\'s not attached to DOM', () => {
+      const textNode = document.createTextNode('Lorem ipsum dolor sit amet.');
+      isMounted(textNode).should.equal(false);
+    });
+  });
+
+  describe('getStyles', () => {
+    it('should return css-property that has been set via setAttribute(\'style\')', () => {
+      const element = attach(create());
+      element.setAttribute('style', 'width: 100px;');
+
+      getStyles(element).width.should.equal('100px');
+    });
+
+    it('should return css-property that has been set via style-attribute', () => {
+      const element = attach(create());
+      element.style.width = '100px';
+
+      getStyles(element).width.should.equal('100px');
+    });
+
+    it('should return css-property that has been set before mounting the node', () => {
+      const element = attach(create());
+      element.style.width = '100px';
+
+      getStyles(element).width.should.equal('100px');
+    });
+  });
+
+  describe('getRect', () => {
+    const style = 'position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; padding: 3px; margin: 4px; border: 2px solid;';
+
+    it('should return DOMRect-like object for an element', () => {
+      const element = attach(create());
+      element.setAttribute('style', style);
+
+      getRect(element).should.
+        deep.equal({top: 14, right: 124, bottom: 124, left: 14, width: 110, height: 110});
+    });
+
+    it('should return DOMRect-like stub for unmounted element', () => {
+      const element = create();
+      element.setAttribute('style', style);
+
+      getRect(element).should.
+        deep.equal({top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0});
+    });
+
+    it('should return DOMRect-like object for a range', () => {
+      const range = document.createRange();
+      range.selectNode(document.body);
+
+      getRect(range).should.have.all.keys(['top', 'right', 'bottom', 'left', 'width', 'height']);
+    });
+  });
+});

package/components/global/dom.ts

@@ -0,0 +1,145 @@
+/**
+ * @name DOM
+ */
+
+import {SyntheticEvent} from 'react';
+import type {PropertiesHyphen} from 'csstype';
+
+export const getStyles = window.getComputedStyle.bind(window);
+
+export function isMounted(node: Node | Range | null | undefined) {
+  if (node === document) {
+    return true;
+  }
+
+  return node instanceof Node && document.documentElement.contains(node.parentNode);
+}
+
+export interface Rect {
+  top: number
+  right: number
+  bottom: number
+  left: number
+  width: number
+  height: number
+}
+
+const rectStub: Rect = {top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0};
+
+export function getRect(node: Element | Range | null | undefined): Rect {
+  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: Element | Range) {
+  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: 'add' | 'remove') => (classList: DOMTokenList, 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: DOMTokenList, classes: Record<string, boolean>) =>
+  Object.entries(classes).forEach(([className, on]) => classList.toggle(className, on));
+
+export function setRootStyleProperties(properties: PropertiesHyphen = {}) {
+  const rootStyle = document.documentElement.style;
+
+  Object.entries(properties).forEach(([key, value]) => {
+    rootStyle.setProperty(key, value);
+  });
+}
+
+export function resetRootStyleProperties(
+  properties: Partial<Record<keyof PropertiesHyphen, unknown>> = {}
+) {
+  const rootStyle = document.documentElement.style;
+
+  Object.keys(properties).
+    forEach(key => rootStyle.removeProperty(key));
+}
+
+export class Listeners {
+  private _all = new Set<() => void>();
+
+  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
+
+  add(
+    el: HTMLElement | Window | Document,
+    event: string,
+    handler: (e: Event) => void,
+    options?: boolean | AddEventListenerOptions,
+  ) {
+    el.addEventListener(event, handler, options);
+    const dispatchFn = () => el.removeEventListener(event, handler, options);
+    this._all.add(dispatchFn);
+    return dispatchFn;
+  }
+
+  remove(fn: () => void) {
+    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: Event | SyntheticEvent) {
+  if (e.preventDefault) {
+    e.preventDefault();
+  }
+}

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

@@ -0,0 +1,157 @@
+import React, {Component, ComponentType, Ref} from 'react';
+import PropTypes from 'prop-types';
+
+import {refObject} from './prop-types';
+
+import composeRefs from './composeRefs';
+
+
+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
+}
+
+function extractPropTypes<
+  T extends HTMLElement,
+  P extends FocusSensorAddProps<T>
+>({propTypes}: ComponentType<P>) {
+  if (propTypes == null) {
+    return propTypes;
+  }
+  const {innerRef, focused, onFocusReset, onFocusRestore, ...restPropTypes} = propTypes;
+  return restPropTypes;
+}
+
+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>> {
+  class FocusSensor extends Component<FocusSensorProps<P, T, typeof ComposedComponent>> {
+    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: FocusSensorProps<P, T, typeof ComposedComponent>) {
+      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?: HTMLElement | null;
+    private _skipNextCapture = false;
+
+    onRefUpdate = (node: HTMLElement | null) => {
+      if (node) {
+        this.node = node;
+      }
+    };
+
+    onFocusCapture = ({target}: FocusEvent) => {
+      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}: FocusEvent) => {
+      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 as JSX.LibraryManagedAttributes<C, P>}
+          innerRef={composeRefs(innerRef, this.onRefUpdate)}
+          focused={this.state.focused}
+          onFocusReset={this.onFocusReset}
+          onFocusRestore={this.onFocusRestore}
+        />
+      );
+    }
+  }
+  (FocusSensor as ComponentType<unknown>).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 as ComponentType<unknown>).defaultProps = {
+    ...ComposedComponent.defaultProps,
+    focused: false,
+    autofocus: false,
+    onFocus: () => {},
+    onBlur: () => {}
+  };
+  return FocusSensor;
+}

package/components/global/fuzzy-highlight.ts

@@ -0,0 +1,46 @@
+/** https://github.com/bevacqua/fuzzysearch + highlighting with Markdown */
+
+const marker = '**';
+
+export default function fuzzyHighlight(needle: string, haystack: string, caseSensitive = false) {
+  const ndl = caseSensitive ? needle : needle.toLowerCase();
+  const hstck = caseSensitive ? haystack : haystack.toLowerCase();
+  const result = (matched: boolean, highlight = haystack) => ({matched, 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 ? `${marker}${haystack}${marker}` : haystack);
+  }
+  let highlight = '';
+  let on = false;
+  let j = 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) {
+        highlight += marker;
+      }
+      highlight += haystack[j++];
+      on = nextOn;
+      if (match) {
+        continue outer;
+      }
+    }
+    return result(false);
+  }
+  /* eslint-enable */
+  if (on) {
+    highlight += marker;
+  }
+  highlight += haystack.slice(j);
+  return result(true, highlight);
+}

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

@@ -0,0 +1,113 @@
+// react-dom getEventKey function extracted
+import React from 'react';
+
+const normalizeKey: Record<string, string> = {
+  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: Record<number, string> = {
+  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: KeyboardEvent | React.KeyboardEvent) {
+  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: KeyboardEvent | React.KeyboardEvent) {
+  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.test.ts

@@ -0,0 +1,22 @@
+import getUID from './get-uid';
+
+describe('getUid', () => {
+  it('should throw an exception if the "name" argument isn\'t passed', () => {
+    // @ts-expect-error testing a wrong usage
+    () => getUID().should.throw(Error);
+  });
+
+  it('should return a unique id every time', () => {
+    const id1 = getUID('test');
+    const id2 = getUID('test');
+    const id3 = getUID('test');
+
+    id1.should.not.be.equal(id2);
+    id2.should.not.be.equal(id3);
+  });
+
+  it('should return an id having a passed prefix', () => {
+    getUID('test').should.have.string('test');
+    getUID('tset').should.have.string('tset');
+  });
+});

package/components/global/get-uid.ts

@@ -0,0 +1,15 @@
+const idCounters: Record<string, number> = {};
+
+export default function getUID(name: string) {
+  if (!name) {
+    throw Error('Argument "name" is required in getUID()');
+  }
+
+  if (!idCounters[name]) {
+    idCounters[name] = 0;
+  }
+
+  const id = String(idCounters[name]++);
+
+  return name + id;
+}

package/components/global/inject-styles.ts

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

package/components/global/linear-function.ts

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