@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/caret/caret.js

@@ -1,216 +0,0 @@
-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

@@ -1,146 +0,0 @@
-@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

@@ -1,45 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,80 +0,0 @@
-/* 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

@@ -1,61 +0,0 @@
-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

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