@jetbrains/ring-ui 4.1.4 → 5.0.0-beta.1

package/components/button-group/caption.d.ts

@@ -0,0 +1,8 @@
+import { PureComponent, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export default class Caption extends PureComponent<HTMLAttributes<HTMLElement>> {
+    static propTypes: {
+        className: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): JSX.Element;
+}

package/components/button-group/caption.jsx

@@ -0,0 +1,14 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './button-group.css';
+export default class Caption extends PureComponent {
+    static propTypes = {
+        className: PropTypes.node
+    };
+    render() {
+        const { className } = this.props;
+        const classes = classNames(styles.caption, className);
+        return (<span {...this.props} className={classes}/>);
+    }
+}

package/components/button-group-ng/button-group-ng.examples.js

@@ -2,9 +2,9 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
+import ButtonNG from '../button-ng/button-ng';
 
-import ButtonGroupNG from '@jetbrains/ring-ui/components/button-group-ng/button-group-ng';
+import ButtonGroupNG from './button-group-ng';
 
 export default {
   title: 'Legacy Angular/Button Group Ng',

package/components/button-ng/button-ng.examples.js

@@ -5,12 +5,12 @@ import pencilIcon from '@jetbrains/icons/pencil';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import IconNG from '@jetbrains/ring-ui/components/icon-ng/icon-ng';
-import ThemeNG from '@jetbrains/ring-ui/components/theme-ng/theme-ng';
-import CheckboxNG from '@jetbrains/ring-ui/components/checkbox-ng/checkbox-ng';
-import Theme from '@jetbrains/ring-ui/components/global/theme';
+import IconNG from '../icon-ng/icon-ng';
+import ThemeNG from '../theme-ng/theme-ng';
+import CheckboxNG from '../checkbox-ng/checkbox-ng';
+import Theme from '../global/theme';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
+import ButtonNG from './button-ng';
 
 export default {
   title: 'Legacy Angular/Button Ng',

package/components/button-set/button-set.d.ts

@@ -0,0 +1,12 @@
+import { PureComponent, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Button Set
+ */
+export default class ButtonSet extends PureComponent<HTMLAttributes<HTMLElement>> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+    render(): JSX.Element;
+}

package/components/button-set/button-set.jsx

@@ -0,0 +1,19 @@
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import styles from './button-set.css';
+/**
+ * @name Button Set
+ */
+export default class ButtonSet extends PureComponent {
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string
+    };
+    render() {
+        const classes = classNames(styles.buttonSet, this.props.className);
+        return (<div {...this.props} className={classes}>
+        {this.props.children}
+      </div>);
+    }
+}

package/components/button-set-ng/button-set-ng.examples.js

@@ -2,9 +2,9 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
+import ButtonNG from '../button-ng/button-ng';
 
-import ButtonSetNG from '@jetbrains/ring-ui/components/button-set-ng/button-set-ng';
+import ButtonSetNG from './button-set-ng';
 
 export default {
   title: 'Legacy Angular/Button Set Ng',

package/components/button-toolbar/button-toolbar.d.ts

@@ -0,0 +1,12 @@
+import { PureComponent, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Button Toolbar
+*/
+export default class ButtonToolbar extends PureComponent<HTMLAttributes<HTMLElement>> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+    render(): JSX.Element;
+}

package/components/button-toolbar/button-toolbar.jsx

@@ -0,0 +1,18 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './button-toolbar.css';
+/**
+ * @name Button Toolbar
+*/
+export default class ButtonToolbar extends PureComponent {
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string
+    };
+    render() {
+        const { className } = this.props;
+        const classes = classNames(styles.buttonToolbar, className);
+        return (<div {...this.props} className={classes}/>);
+    }
+}

package/components/button-toolbar-ng/button-toolbar-ng.examples.js

@@ -2,10 +2,10 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
-import ButtonGroupNg from '@jetbrains/ring-ui/components/button-group-ng/button-group-ng';
+import ButtonNG from '../button-ng/button-ng';
+import ButtonGroupNg from '../button-group-ng/button-group-ng';
 
-import ButtonToolbarNG from '@jetbrains/ring-ui/components/button-toolbar-ng/button-toolbar-ng';
+import ButtonToolbarNG from './button-toolbar-ng';
 
 export default {
   title: 'Legacy Angular/Button Toolbar Ng',

package/components/caret/caret.d.ts

@@ -0,0 +1,66 @@
+export interface PositionParams {
+    avoidFocus?: boolean | null | undefined;
+}
+export interface Position {
+    startOffset: number;
+    endOffset: number;
+    position: number;
+}
+/**
+ * @name Caret
+ */
+export default class Caret {
+    /**
+     * Line endings RegExp
+     * @type {RegExp}
+     */
+    static returnRE: RegExp;
+    /**
+     * Line endings normalizer
+     * Borrowed from jQuery
+     * @see https://github.com/jquery/jquery/blob/master/src/attributes/val.js
+     * @param value {*}
+     * @return {*}
+     */
+    static normalizeNewlines(value: string | undefined): string | undefined;
+    target: HTMLElement | HTMLInputElement;
+    constructor(target: HTMLElement);
+    isContentEditable(): boolean;
+    /**
+     * Set focus on target if possible
+     */
+    focus(): void;
+    /**
+     * Get absolute caret position index
+     * @return {number}
+     */
+    getAbsolutePosition(node: Node): number;
+    /**
+     * Get caret position index
+     * @param {Object} [params]
+     * @param {boolean} params.avoidFocus
+     * @return {number}
+     */
+    getPosition(params?: PositionParams): number | Position;
+    /**
+     * Get relative position of query
+     * @param  {Node} curNode
+     * @param {number} position
+     * @return {{_correctedPosition: number, _curNode: Node}}
+     */
+    getRelativePosition(curNode: Node, position: number): {
+        _curNode: Node;
+        _correctedPosition: number;
+    };
+    /**
+     * Set caret position index
+     * @param  {number} position
+     * @return {number}
+     */
+    setPosition(position?: Position | number): number | Range | undefined;
+    /**
+     * Get caret position in pixels
+     * @return {number}
+     */
+    getOffset(): number;
+}

package/components/caret/caret.js

@@ -1,225 +1,216 @@
-import {getRect} from '../global/dom';
-
+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;
-  }
-
-  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();
+    /**
+     * 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;
     }
-  }
-
-  /**
-   * Get absolute caret position index
-   * @return {number}
-   */
-  getAbsolutePosition(node) {
-    let _curNode = node;
-    let curPos = 0;
-    while (_curNode !== this.target) {
-      while (_curNode.previousSibling) {
-        curPos += _curNode.previousSibling.textContent.length;
-        _curNode = _curNode.previousSibling;
-      }
-      _curNode = _curNode.parentNode;
+    target;
+    constructor(target) {
+        this.target = target;
     }
-    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 ? 0 : _curNode.textContent.length;
-      } else if (!this.target.contains(_curNode)) {
-        return -1;
-      } else if (!_curNode) {
-        return this.target.selectionStart;
-      }
-      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 this.target.selectionStart;
-  }
-
-  /**
-   * 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};
+    isContentEditable() {
+        return this.target.contentEditable === 'true';
     }
-    if (position === 0) {
-      while (_curNode.nodeType !== nodeTypeText) {
-        _curNode = _curNode.childNodes[0];
-      }
-      const _correctedPosition = position;
-      return {_curNode, _correctedPosition};
+    /**
+     * Set focus on target if possible
+     */
+    focus() {
+        if (!document.activeElement || document.activeElement !== this.target) {
+            this.target.focus();
+        }
     }
-    let i = -1;
-    if (_curNode && _curNode.nodeType !== undefined) {
-      while (curPos < position && _curNode.nodeType !== nodeTypeText) {
-        i++;
-        if (_curNode.childNodes[i] !== null && _curNode.childNodes[i]) {
-          curPos += _curNode.childNodes[i].textContent.length;
-          if (curPos >= position) {
-            _curNode = _curNode.childNodes[i];
-            curPos -= _curNode.textContent.length;
-            i = -1;
-          }
-        } else {
-          break;
+    /**
+     * 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;
     }
-    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 (position.startOffset !== undefined) {
-        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
-          : this.constructor.normalizeNewlines(this.target.value);
-        correctedPosition = value.length;
-      } else {
-        const {_curNode, _correctedPosition} = this.getRelativePosition(curNode, position);
-        curNode = _curNode;
-        correctedPosition = _correctedPosition;
-      }
+    /**
+     * 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;
     }
-
-    if (isContentEditable) {
-      this.focus();
-
-      try {
-        if (correctedPosition instanceof Range) {
-          window.getSelection().removeAllRanges();
-          window.getSelection().addRange(correctedPosition);
-        } else {
-          window.getSelection().collapse(curNode || this.target, correctedPosition);
+    /**
+     * 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;
+                }
+            }
         }
-      } catch (e) {
-        // Do nothing
-      }
-
-    } else {
-      this.target.setSelectionRange(correctedPosition, correctedPosition);
+        const _correctedPosition = position - curPos;
+        return { _curNode, _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;
+    /**
+     * 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;
     }
-
-    if (range && range.endOffset !== 0 && range.toString() !== '') {
-      offset =
-        getRect(range).right -
-        getRect(this.target).left -
-        (range.startContainer.offsetLeft || 0);
+    /**
+     * 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;
     }
-
-    return offset;
-  }
 }