@jetbrains/ring-ui 5.1.23 → 5.1.25

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 unit from "../global/global.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(unit * 2);
+  height: calc(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);
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &[disabled]:checked + .cell .check,
+  &[disabled]:indeterminate + .cell .minus {
+    color: var(--ring-icon-disabled-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: 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/checkbox-ng/checkbox-ng.js

@@ -0,0 +1,64 @@
+import angular from 'angular';
+
+import checkmarkIcon from '@jetbrains/icons/checkmark-14px';
+
+import IconNG from '../icon-ng/icon-ng';
+import proxyAttrs from '../proxy-attrs/proxy-attrs';
+
+import styles from '../checkbox/checkbox.css';
+
+/**
+ * @name Checkbox Ng
+ */
+
+const angularModule = angular.module('Ring.checkbox', [IconNG]);
+
+let idCounter = 0;
+const CHECKBOX_ID_PREFIX = 'rg-checkbox-';
+
+angularModule.directive('rgCheckbox', function rgCheckboxDirective() {
+  return {
+    restrict: 'E',
+    transclude: true,
+    replace: true,
+    template: proxyAttrs(`
+<label class="${styles.checkbox}">
+  <input
+    data-proxy-ng-disabled
+    data-proxy-ng-model
+    data-proxy-ng-change
+    data-proxy-ng-true-value
+    data-proxy-ng-false-value
+    data-proxy-name
+    data-proxy-title
+    data-proxy-aria-label
+    data-test="ring-checkbox"
+    type="checkbox"
+    class="${styles.input}"
+  />
+  <span class="${styles.cell}">
+    <rg-icon class="${styles.check}" glyph="{{:: checkmarkIcon}}" />
+  </span><span class="${styles.label}" ng-transclude></span>
+</label>
+    `),
+    link: function link(scope, iElement, attrs, controller, transcludeFn) {
+      scope.checkmarkIcon = checkmarkIcon;
+      const input = iElement[0].querySelector('input[type="checkbox"]');
+      const label = iElement[0].querySelector(`*[class~="${styles.label}"]`);
+
+      const id = CHECKBOX_ID_PREFIX + idCounter++;
+      iElement[0].setAttribute('for', id);
+      input.setAttribute('id', id);
+
+      transcludeFn(clone => {
+        if (clone.length) {
+          label.style.display = 'initial';
+        } else {
+          label.style.display = 'none';
+        }
+      });
+    }
+  };
+});
+
+export default angularModule.name;

package/components/checkbox-ng/checkbox-ng.stories.js

@@ -0,0 +1,80 @@
+/* eslint-disable angular/controller-as */
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import ButtonNG from '../button-ng/button-ng';
+
+import CheckboxNG from './checkbox-ng';
+
+export default {
+  title: 'Legacy Angular/Checkbox Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Provides an Angular wrapper for Checkbox.'
+  }
+};
+
+export const basic = () => {
+  angular.
+    module(APP_NAME, [ButtonNG, CheckboxNG]).
+    controller('MainCtrl', function controller($scope) {
+      $scope.checked = false;
+      $scope.disabled = false;
+
+      $scope.changeText = 'text will be changed on ng-change of inverted checkbox';
+
+      $scope.onNgChange = () => {
+        $scope.changeText = `ngChange appear for the inverted checkbox at ${new Date()}`;
+      };
+    });
+
+  return `
+       <div ng-controller="MainCtrl">
+         <div>Checked: {{checked}}</div>
+         <div>Disabled: {{disabled}}</div>
+         <div>
+           <rg-button id="checkButton" ng-click="checked = !checked">{{checked ? 'Uncheck' : 'Check'}} checkbox programmatically</rg-button>
+           <rg-button id="disableButton" ng-click="disabled = !disabled">{{disabled ? 'Enable' : 'Disable'}} checkbox</rg-button>
+         </div>
+         <p style="width: 300px;">
+           <rg-checkbox ng-disabled="disabled === true" ng-model="checked">Checkbox</rg-checkbox>
+         </p>
+         <p style="width: 300px;">
+           <rg-checkbox ng-disabled="disabled === true" ng-model="checked" ng-change="onNgChange()">Inverted checkbox</rg-checkbox>
+           <div>{{ changeText }}</div>
+         </p>
+       </div>
+    `;
+};
+
+basic.storyName = 'basic';
+
+export const withCustomTrueFalseValues = () => {
+  angular.module(APP_NAME, [CheckboxNG]);
+
+  return `
+       <div>
+         <div>Checked: {{checked}}</div>
+         <p style="width: 300px;">
+           <rg-checkbox ng-model="checked" ng-true-value="'The TRUE value'" ng-false-value="'The FALSE value'">Checkbox</rg-checkbox>
+         </p>
+       </div>
+    `;
+};
+
+withCustomTrueFalseValues.storyName = 'with custom true-false values';
+withCustomTrueFalseValues.parameters = {hermione: {skip: true}};
+
+export const disabled = () => {
+  angular.module(APP_NAME, [CheckboxNG]);
+
+  return `
+      <p style="width: 300px;">
+        <rg-checkbox ng-disabled="true">Checkbox</rg-checkbox>
+      </p>
+    `;
+};
+
+disabled.storyName = 'disabled';

package/components/checkbox-ng/checkbox-ng.test.js

@@ -0,0 +1,61 @@
+import 'angular';
+import 'angular-mocks';
+
+import Checkbox from './checkbox-ng';
+
+describe('Checkbox Ng', () => {
+  let scope;
+  let element;
+  let iElement;
+  let $compile;
+  let $rootScope;
+
+  beforeEach(window.module(Checkbox));
+
+  /* global inject */
+  beforeEach(inject((_$rootScope_, _$compile_) => {
+    $compile = _$compile_;
+    $rootScope = _$rootScope_;
+    scope = $rootScope.$new();
+
+    const tpl = '<rg-checkbox ng-disabled="disabled" ng-model="checked">Checkbox</rg-checkbox>';
+    iElement = $compile(tpl)(scope);
+    element = iElement[0];
+    scope.$digest();
+  }));
+
+  it('should not be checked by default', () => {
+    element.should.not.contain('input:checked');
+    should.not.exist(iElement.controller('ngModel').$viewValue);
+  });
+
+  it('should have been set checked by click', () => {
+    element.querySelector('input').dispatchEvent(new MouseEvent('click'));
+    element.querySelector('input').dispatchEvent(new Event('change'));
+
+    iElement.controller('ngModel').$viewValue.should.be.true;
+  });
+
+  it('should have been set checked by ng-model', () => {
+    scope.checked = true;
+    scope.$digest();
+    element.should.contain('input:checked');
+  });
+
+  it('should have been set disabled by ng-model', () => {
+    scope.disabled = true;
+    scope.$digest();
+    element.should.contain('input:disabled');
+  });
+
+  it('label and input should have same ids', () => {
+    element.querySelector('input').id.should.equal(element.htmlFor);
+  });
+
+  it('should disable input with disabled expression constant', () => {
+    scope = $rootScope.$new();
+    element = $compile('<rg-checkbox ng-disabled="true">Checkbox</rg-checkbox>')(scope)[0];
+    scope.$digest();
+    element.querySelector('input').should.have.property('disabled');
+  });
+});

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;