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

package/components/caret/caret.js

@@ -0,0 +1,216 @@
+import { getRect } from '../global/dom';
+/**
+ * @name Caret
+ */
+export default class Caret {
+    /**
+     * Line endings RegExp
+     * @type {RegExp}
+     */
+    static returnRE = /\r/g;
+    /**
+     * Line endings normalizer
+     * Borrowed from jQuery
+     * @see https://github.com/jquery/jquery/blob/master/src/attributes/val.js
+     * @param value {*}
+     * @return {*}
+     */
+    static normalizeNewlines(value) {
+        return typeof value === 'string' ? value.replace(this.returnRE, '') : value;
+    }
+    target;
+    constructor(target) {
+        this.target = target;
+    }
+    isContentEditable() {
+        return this.target.contentEditable === 'true';
+    }
+    /**
+     * Set focus on target if possible
+     */
+    focus() {
+        if (!document.activeElement || document.activeElement !== this.target) {
+            this.target.focus();
+        }
+    }
+    /**
+     * Get absolute caret position index
+     * @return {number}
+     */
+    getAbsolutePosition(node) {
+        let _curNode = node;
+        let curPos = 0;
+        while (_curNode != null && _curNode !== this.target) {
+            while (_curNode.previousSibling) {
+                curPos += _curNode.previousSibling.textContent?.length ?? 0;
+                _curNode = _curNode.previousSibling;
+            }
+            _curNode = _curNode.parentNode;
+        }
+        return curPos;
+    }
+    /**
+     * Get caret position index
+     * @param {Object} [params]
+     * @param {boolean} params.avoidFocus
+     * @return {number}
+     */
+    getPosition(params = {}) {
+        if (this.isContentEditable()) {
+            if (!params.avoidFocus) {
+                this.focus();
+            }
+            const selection = window.getSelection();
+            if (!selection?.rangeCount) {
+                return 0;
+            }
+            const range1 = selection.getRangeAt(0);
+            const range2 = range1.cloneRange();
+            range2.selectNodeContents(this.target);
+            range2.setEnd(range1.endContainer, range1.endOffset);
+            const _curNode = range1.startContainer;
+            if (this.target === _curNode) {
+                return range1.startOffset === 0 || _curNode.textContent == null
+                    ? 0
+                    : _curNode.textContent.length;
+            }
+            else if (!this.target.contains(_curNode)) {
+                return -1;
+            }
+            else if (!_curNode) {
+                return 'selectionStart' in this.target && this.target.selectionStart || -1;
+            }
+            const curPos = this.getAbsolutePosition(_curNode);
+            if (range1.startContainer === range1.endContainer) {
+                if (range1.startOffset === range1.endOffset) {
+                    return curPos + range1.startOffset;
+                }
+                else {
+                    return { startOffset: curPos + range1.startOffset,
+                        endOffset: curPos + range1.endOffset,
+                        position: range2.toString().length };
+                }
+            }
+            else {
+                const startOffset = curPos + range1.startOffset;
+                const endPos = this.getAbsolutePosition(range1.endContainer);
+                const endOffset = endPos + range1.endOffset;
+                return { startOffset, endOffset, position: range2.toString().length };
+            }
+        }
+        return 'selectionStart' in this.target && this.target.selectionStart || -1;
+    }
+    /**
+     * Get relative position of query
+     * @param  {Node} curNode
+     * @param {number} position
+     * @return {{_correctedPosition: number, _curNode: Node}}
+     */
+    getRelativePosition(curNode, position) {
+        let curPos = 0;
+        let _curNode = curNode;
+        const nodeTypeText = 3;
+        if (!_curNode) {
+            return { _curNode: this.target, _correctedPosition: position };
+        }
+        if (position === 0) {
+            while (_curNode.nodeType !== nodeTypeText) {
+                _curNode = _curNode.childNodes[0];
+            }
+            const _correctedPosition = position;
+            return { _curNode, _correctedPosition };
+        }
+        let i = -1;
+        if (_curNode && _curNode.nodeType !== undefined) {
+            while (curPos < position && _curNode.nodeType !== nodeTypeText) {
+                i++;
+                if (_curNode.childNodes[i] != null) {
+                    curPos += _curNode.childNodes[i].textContent?.length ?? 0;
+                    if (curPos >= position) {
+                        _curNode = _curNode.childNodes[i];
+                        curPos -= _curNode.textContent?.length ?? 0;
+                        i = -1;
+                    }
+                }
+                else {
+                    break;
+                }
+            }
+        }
+        const _correctedPosition = position - curPos;
+        return { _curNode, _correctedPosition };
+    }
+    /**
+     * Set caret position index
+     * @param  {number} position
+     * @return {number}
+     */
+    setPosition(position) {
+        const isContentEditable = this.isContentEditable();
+        let correctedPosition;
+        let curNode = this.target && this.target.childNodes[0];
+        if (position !== undefined) {
+            if (typeof position === 'object') {
+                const range = new Range();
+                const start = this.getRelativePosition(curNode, position.startOffset);
+                range.setStart(start._curNode, start._correctedPosition);
+                const end = this.getRelativePosition(curNode, position.endOffset);
+                range.setEnd(end._curNode, end._correctedPosition);
+                correctedPosition = range;
+            }
+            else if (position === -1) {
+                const value = isContentEditable
+                    ? this.target.textContent
+                    : Caret.normalizeNewlines('value' in this.target ? this.target.value : undefined);
+                correctedPosition = value?.length ?? 0;
+            }
+            else {
+                const { _curNode, _correctedPosition } = this.getRelativePosition(curNode, position);
+                curNode = _curNode;
+                correctedPosition = _correctedPosition;
+            }
+        }
+        if (isContentEditable) {
+            this.focus();
+            try {
+                if (correctedPosition instanceof Range) {
+                    window.getSelection()?.removeAllRanges();
+                    window.getSelection()?.addRange(correctedPosition);
+                }
+                else {
+                    window.getSelection()?.collapse(curNode || this.target, correctedPosition);
+                }
+            }
+            catch (e) {
+                // Do nothing
+            }
+        }
+        else if ('setSelectionRange' in this.target && typeof correctedPosition === 'number') {
+            this.target.setSelectionRange(correctedPosition, correctedPosition);
+        }
+        return correctedPosition;
+    }
+    /**
+     * Get caret position in pixels
+     * @return {number}
+     */
+    getOffset() {
+        let offset = 0;
+        let range;
+        try {
+            // Both statements may throw
+            range = window.getSelection()?.getRangeAt(0).cloneRange();
+            range?.setStart(range.startContainer, range.startOffset - 1);
+        }
+        catch (e) {
+            return offset;
+        }
+        if (range && range.endOffset !== 0 && range.toString() !== '') {
+            offset =
+                getRect(range).right -
+                    getRect(this.target).left -
+                    (range.startContainer instanceof HTMLElement && range.startContainer.offsetLeft || 0);
+        }
+        return offset;
+    }
+}

package/components/checkbox/checkbox.css

@@ -0,0 +1,146 @@
+@import "../global/variables.css";
+
+@value checkboxSize: 14px;
+
+.checkbox {
+  position: relative;
+
+  display: inline-block;
+
+  text-align: left;
+
+  color: var(--ring-text-color);
+  outline: none;
+
+  &:hover .cell {
+    transition: background-color var(--ring-ease);
+
+    border-color: var(--ring-border-hover-color);
+  }
+}
+
+.cell {
+  position: relative;
+  top: -2px;
+
+  display: inline-block;
+
+  box-sizing: border-box;
+  width: checkboxSize;
+  height: checkboxSize;
+
+  user-select: none;
+  transition: border-color var(--ring-ease), background-color var(--ring-ease), box-shadow var(--ring-ease);
+  vertical-align: middle;
+  pointer-events: none;
+
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius-small);
+  background-color: var(--ring-content-background-color);
+}
+
+.icon.icon {
+  position: absolute;
+
+  top: -1px;
+  left: -1px;
+
+  width: calc(var(--ring-unit) * 2);
+  height: calc(var(--ring-unit) * 2);
+
+  opacity: 0;
+  color: var(--ring-white-text-color);
+
+  & svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+.check {
+  composes: icon;
+}
+
+.minus {
+  composes: icon;
+}
+
+.input {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+  margin: 0;
+
+  cursor: pointer;
+
+  opacity: 0;
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &:checked + .cell,
+  &:indeterminate + .cell {
+    border-color: transparent;
+    background-color: var(--ring-main-color);
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &:checked + .cell .check {
+    opacity: 1;
+  }
+
+  &:focus-visible + .cell,
+  &.focus + .cell {
+    transition: background-color var(--ring-ease);
+
+    border-color: var(--ring-border-hover-color);
+    box-shadow: 0 0 0 1px var(--ring-border-hover-color);
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &:indeterminate + .cell .minus {
+    opacity: 1;
+  }
+
+  &[disabled] {
+    pointer-events: none;
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &[disabled][disabled] + .cell {
+    border-color: var(--ring-border-disabled-color);
+    background-color: var(--ring-disabled-background-color);
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &[disabled]:checked + .cell,
+  &[disabled]:indeterminate + .cell {
+    border-color: var(--ring-border-selected-disabled-color);
+    background-color: var(--ring-border-selected-disabled-color);
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &[disabled]:checked + .cell .check,
+  &[disabled]:indeterminate + .cell .minus {
+    color: var(--ring-disabled-background-color);
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &:indeterminate:indeterminate + .cell .check {
+    transition: none;
+
+    opacity: 0;
+  }
+
+  &[disabled] ~ .label {
+    color: var(--ring-disabled-color);
+  }
+}
+
+.label {
+  margin-left: var(--ring-unit);
+
+  line-height: normal;
+}

package/components/checkbox/checkbox.d.ts

@@ -0,0 +1,45 @@
+import React, { PureComponent, InputHTMLAttributes, CSSProperties, Ref } from 'react';
+import PropTypes from 'prop-types';
+export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string | null | undefined;
+    containerClassName?: string | null | undefined;
+    containerStyle?: CSSProperties | undefined;
+    cellClassName?: string | null | undefined;
+    labelClassName?: string | null | undefined;
+    indeterminate: boolean;
+    inputRef?: Ref<HTMLInputElement>;
+}
+/**
+ * @name Checkbox
+ */
+/**
+ * Displays a checkbox.
+ */
+export default class Checkbox extends PureComponent<CheckboxProps> {
+    static propTypes: {
+        name: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        containerClassName: PropTypes.Requireable<string>;
+        containerStyle: PropTypes.Requireable<object>;
+        cellClassName: PropTypes.Requireable<string>;
+        labelClassName: PropTypes.Requireable<string>;
+        defaultChecked: PropTypes.Requireable<boolean>;
+        checked: PropTypes.Requireable<boolean>;
+        indeterminate: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+            current: PropTypes.Validator<HTMLInputElement | null | undefined>;
+        }> | null | undefined>>;
+    };
+    static defaultProps: {
+        indeterminate: boolean;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: CheckboxProps): void;
+    input?: HTMLInputElement | null;
+    inputRef: (el: HTMLInputElement | null) => void;
+    render(): React.JSX.Element;
+}

package/components/checkbox/checkbox.js

@@ -0,0 +1,72 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import checkmarkIcon from '@jetbrains/icons/checkmark-14px';
+import minusIcon from '@jetbrains/icons/remove-14px';
+import Icon from '../icon/icon';
+import { refObject } from '../global/prop-types';
+import composeRefs from '../global/composeRefs';
+import styles from './checkbox.css';
+/**
+ * @name Checkbox
+ */
+/**
+ * Displays a checkbox.
+ */
+export default class Checkbox extends PureComponent {
+    static propTypes = {
+        name: PropTypes.string,
+        label: PropTypes.string,
+        className: PropTypes.string,
+        containerClassName: PropTypes.string,
+        containerStyle: PropTypes.object,
+        cellClassName: PropTypes.string,
+        labelClassName: PropTypes.string,
+        defaultChecked: PropTypes.bool,
+        checked: PropTypes.bool,
+        indeterminate: PropTypes.bool,
+        disabled: PropTypes.bool,
+        onChange: PropTypes.func,
+        children: PropTypes.node,
+        inputRef: PropTypes.oneOfType([
+            PropTypes.func,
+            refObject(PropTypes.instanceOf(HTMLInputElement))
+        ])
+    };
+    static defaultProps = {
+        indeterminate: false
+    };
+    componentDidMount() {
+        if (this.input != null) {
+            this.input.indeterminate = this.props.indeterminate;
+        }
+    }
+    componentDidUpdate(prevProps) {
+        const { indeterminate } = this.props;
+        if (this.input != null && indeterminate !== prevProps.indeterminate) {
+            this.input.indeterminate = this.props.indeterminate;
+        }
+    }
+    input;
+    inputRef = (el) => {
+        if (el != null) {
+            el.indeterminate = this.props.indeterminate;
+        }
+        this.input = el;
+    };
+    render() {
+        const { children, label, className, containerClassName, containerStyle, cellClassName, labelClassName, indeterminate, inputRef, ...restProps } = this.props;
+        const classes = classNames(styles.input, className);
+        const containerClasses = classNames(styles.checkbox, containerClassName);
+        const cellClasses = classNames(styles.cell, cellClassName);
+        const labelClasses = classNames(styles.label, labelClassName);
+        return (<label className={containerClasses} style={containerStyle} data-test="ring-checkbox">
+        <input {...restProps} data-checked={restProps.checked} ref={composeRefs(this.inputRef, inputRef)} type="checkbox" className={classes}/>
+        <span className={cellClasses}>
+          <Icon glyph={checkmarkIcon} className={styles.check}/>
+          <Icon glyph={minusIcon} className={styles.minus}/>
+        </span>
+        <span className={labelClasses}>{label || children}</span>
+      </label>);
+    }
+}

package/components/clipboard/clipboard-fallback.d.ts

@@ -0,0 +1,2 @@
+export declare function copyTextToClipboard(str: string): void;
+export declare function copyHTMLToClipboard(str: string): void;

package/components/clipboard/clipboard-fallback.js

@@ -0,0 +1,44 @@
+export function copyTextToClipboard(str) {
+    const el = document.createElement('textarea');
+    el.value = str;
+    el.setAttribute('readonly', '');
+    el.style.position = 'absolute';
+    el.style.left = '-9999px';
+    document.body.appendChild(el);
+    const selection = document.getSelection();
+    // Should restore previous selection
+    const selected = (selection && selection.rangeCount > 0)
+        ? selection.getRangeAt(0)
+        : false;
+    el.select();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+    if (selected && selection) {
+        selection.removeAllRanges();
+        selection.addRange(selected);
+    }
+}
+export function copyHTMLToClipboard(str) {
+    const el = document.createElement('div');
+    el.innerHTML = str;
+    el.setAttribute('readonly', '');
+    el.style.position = 'absolute';
+    el.style.left = '-9999px';
+    document.body.appendChild(el);
+    const selection = document.getSelection();
+    // Should restore previous selection
+    const selected = (selection && selection.rangeCount > 0)
+        ? selection.getRangeAt(0)
+        : false;
+    selection?.removeAllRanges();
+    const range = document.createRange();
+    range.selectNode(el);
+    selection?.addRange(range);
+    document.execCommand('copy');
+    selection?.removeAllRanges();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+    if (selected && selection) {
+        selection.addRange(selected);
+    }
+}

package/components/clipboard/clipboard.d.ts

@@ -0,0 +1,5 @@
+declare const clipboard: {
+    copyText: (text: string, successMessage?: string | undefined, errorMessage?: string | undefined, delay?: number) => Promise<void>;
+    copyHTML: (html: string, successMessage?: string | undefined, errorMessage?: string | undefined, delay?: number) => Promise<void>;
+};
+export default clipboard;

package/components/clipboard/clipboard.js

@@ -0,0 +1,41 @@
+import alertService from '../alert-service/alert-service';
+import { copyHTMLToClipboard, copyTextToClipboard } from './clipboard-fallback';
+const ALERT_DELAY = 1000;
+function getClipboardImplementation() {
+    if (navigator.clipboard && !window.isSecureContext) {
+        return {
+            copy: (text) => navigator.clipboard.writeText(text),
+            copyHTML: (html) => navigator.clipboard.write([
+                new ClipboardItem({
+                    ['text/html']: new Blob([html], { type: 'text/html' })
+                })
+            ])
+        };
+    }
+    return {
+        copy: (str) => Promise.resolve(copyTextToClipboard(str)),
+        copyHTML: (html) => Promise.resolve(copyHTMLToClipboard(html))
+    };
+}
+async function copy(text, successMessage, errorMessage, delay = ALERT_DELAY, isHtml = false) {
+    try {
+        const clipboardImpl = getClipboardImplementation();
+        const copyMethod = isHtml ? clipboardImpl.copyHTML : clipboardImpl.copy;
+        await copyMethod(text);
+        if (successMessage) {
+            alertService.successMessage(successMessage, delay);
+        }
+    }
+    catch (e) {
+        if (errorMessage) {
+            alertService.error(errorMessage, delay);
+        }
+        // eslint-disable-next-line no-console
+        console.error(e);
+    }
+}
+const clipboard = {
+    copyText: async (text, successMessage, errorMessage, delay = ALERT_DELAY) => await copy(text, successMessage, errorMessage, delay),
+    copyHTML: async (html, successMessage, errorMessage, delay = ALERT_DELAY) => await copy(html, successMessage, errorMessage, delay, true)
+};
+export default clipboard;

package/components/code/code.css

@@ -0,0 +1,29 @@
+@import "../global/variables.css";
+
+.code {
+  margin: calc(var(--ring-unit) * 2) 0;
+}
+
+/* override hljs */
+.code code {
+  display: block;
+
+  padding: calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 2);
+
+  border-radius: var(--ring-border-radius);
+  background-color: var(--ring-sidebar-background-color);
+
+  font-family: var(--ring-font-family-monospace);
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+}
+
+.inline code {
+  display: inline-block;
+
+  padding: 0 calc(var(--ring-unit) / 2);
+}
+
+.softWrap code {
+  white-space: pre-wrap;
+}

package/components/code/code.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="highlight.js" />
+import React, { PureComponent, Ref } from 'react';
+import PropTypes from 'prop-types';
+import highlight from 'highlight.js/lib/core';
+declare function noop(): void;
+export interface CodeProps {
+    code: string;
+    inline: boolean;
+    softWrap: boolean;
+    replacer: ((element: HTMLElement | null) => void);
+    className?: string | null | undefined;
+    language?: string | null | undefined;
+    codeRef?: Ref<HTMLElement> | null | undefined;
+}
+/**
+ * @name Code
+ */
+export default class Code extends PureComponent<CodeProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        code: PropTypes.Validator<string>;
+        inline: PropTypes.Requireable<boolean>;
+        softWrap: PropTypes.Requireable<boolean>;
+        language: PropTypes.Requireable<string>;
+        replacer: PropTypes.Requireable<(...args: any[]) => any>;
+        codeRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+            current: PropTypes.Requireable<Element>;
+        }> | null | undefined>>;
+    };
+    static defaultProps: {
+        inline: boolean;
+        softWrap: boolean;
+        replacer: typeof noop;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    code?: HTMLElement | null;
+    highlight(): Promise<void>;
+    get codeRef(): HTMLElement | null | undefined;
+    get initCodeRef(): React.RefObject<HTMLElement> | ((ref: HTMLElement | null) => void);
+    render(): React.JSX.Element;
+}
+declare const code: (strings: TemplateStringsArray, ...interpolations: unknown[]) => void;
+export { code, highlight };