@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/icon-ng/icon-ng.js

@@ -1,89 +0,0 @@
-import angular from 'angular';
-
-import {Color} from '../icon/icon__constants';
-import TemplateNg from '../template-ng/template-ng';
-import styles from '../icon/icon.css';
-
-/**
- * @name Icon Ng
- */
-
-const angularModule = angular.module('Ring.icon', [TemplateNg]);
-const BASE64_PREFIX = 'data:image/svg+xml;base64,';
-
-angularModule.directive('rgIcon', function rgIconDirective() {
-  return {
-    restrict: 'E',
-    scope: {
-      glyph: '@',
-      loading: '=?',
-      color: '@?',
-      size: '@?',
-      height: '@?',
-      width: '@?'
-    },
-    template: `<span class="${styles.icon}" rg-template="normalizedGlyph" rg-template-class="${styles.glyph}"></span>`,
-    controller: $scope => {
-      function decodeBase64IfNeeded(glyph) {
-        // This hack allows passing SVG content as string from angular templates like
-        // <rg-icon glyph="data:image/svg+xml;base64,PHN2ZyB4bWx...></rg-icon>
-        const isEncoded = glyph.indexOf(BASE64_PREFIX) === 0;
-        return isEncoded ? window.atob(glyph.replace(BASE64_PREFIX, '')) : glyph;
-      }
-
-      $scope.$watch('glyph', value => {
-        if (!value) {
-          return;
-        }
-        $scope.normalizedGlyph = decodeBase64IfNeeded(value);
-      });
-    },
-    link: function link(scope, iElement, iAttrs) {
-      iAttrs.$addClass('ring-icon'); // TODO: We keep this class for now for compatibility reasons (styles overrides)
-
-      scope.$watch('loading', value => {
-        if (value) {
-          iAttrs.$addClass(styles.loading);
-        } else {
-          iAttrs.$removeClass(styles.loading);
-        }
-      });
-
-      scope.$watch(() => scope.color && Color[scope.color] && styles[Color[scope.color]],
-        (colorClass, prevColorClass) => {
-          if (colorClass) {
-            iAttrs.$addClass(colorClass);
-
-            // Remove previous class, but don't remove initial one
-            if (prevColorClass && prevColorClass !== colorClass) {
-              iAttrs.$removeClass(prevColorClass);
-            }
-          }
-        }
-      );
-
-      scope.$watchGroup(['size', 'width', 'height'], ([size, width, height]) => {
-        const svgNode = iElement[0].querySelector('svg');
-        if (!svgNode) {
-          return;
-        }
-
-        if (size && !width && !height) {
-          const sizeString = `${size}px`;
-          const style = `width: ${sizeString}; height: ${sizeString};`;
-          svgNode.setAttribute('style', style);
-          return;
-        }
-
-        if (width) {
-          svgNode.setAttribute('style', `width: ${width}px;`);
-        }
-        if (height) {
-          svgNode.setAttribute('style', `height: ${height}px;`);
-        }
-      });
-    }
-  };
-});
-
-export default angularModule.name;

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

@@ -1,34 +0,0 @@
-import angular from 'angular';
-
-import checkmarkIcon from '@jetbrains/icons/checkmark';
-import warningIcon from '@jetbrains/icons/warning';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import IconNG from './icon-ng';
-
-export default {
-  title: 'Legacy Angular/Icon Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Icon.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [IconNG]).controller('testCtrl', function ctrl() {
-    this.icon = checkmarkIcon;
-    this.error = warningIcon;
-  });
-
-  return `
-      <div ng-controller="testCtrl as ctrl">
-        <rg-icon glyph="{{ctrl.icon}}"></rg-icon>
-        <rg-icon glyph="{{ctrl.icon}}" color="MAGENTA"></rg-icon>
-        <rg-icon glyph="{{ctrl.icon}}" color="{{'BLUE'}}" loading="true"></rg-icon>
-      </div>
-    `;
-};
-
-basic.storyName = 'Icon Ng';

package/components/input/input-legacy.css

@@ -1,125 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-/*
-Input
-
- Markup:
- <input class="{$modifiers} ring-input" type="text" placeholder="placeholder">
-
- :disabled            - Disabled state, also available as the `.ring-input_disabled` class name.
- :active              - Active state, also available as the `.ring-input_active` class name.
- :focus               - Focus state, also available as the `.ring-input_focus` class name.
- .ring-input_correct  - The entered value is correct.
- .ring-input_error    - The entered value is incorrect.
- */
-
-:global(.ring-input) {
-  /* .heightS */
-  --ring-input-padding-block: 1px;
-  --ring-input-padding-inline: unit;
-  --ring-input-padding-start: var(--ring-input-padding-inline);
-  --ring-input-padding-end: var(--ring-input-padding-inline);
-
-  /* stylelint-disable order/properties-order */
-
-  box-sizing: border-box;
-
-  font: inherit;
-  font-size: var(--ring-font-size);
-  line-height: var(--ring-line-height);
-
-  width: 100%;
-
-  margin: 0;
-  padding-top: var(--ring-input-padding-block);
-  padding-right: var(--ring-input-padding-end);
-  padding-bottom: var(--ring-input-padding-block);
-  padding-left: var(--ring-input-padding-start);
-
-  transition: border-color var(--ring-ease);
-
-  color: var(--ring-text-color);
-  border: 1px solid var(--ring-borders-color);
-  border-radius: var(--ring-border-radius);
-  outline: none;
-  background-color: var(--ring-content-background-color);
-
-  caret-color: var(--ring-main-color);
-
-  /* stylelint-enable order/properties-order */
-
-  [dir="rtl"] & {
-    padding-right: var(--ring-input-padding-start);
-    padding-left: var(--ring-input-padding-end);
-  }
-
-  &:hover {
-    transition: none;
-
-    border-color: var(--ring-border-hover-color);
-  }
-
-  .error & {
-    border-color: var(--ring-icon-error-color);
-  }
-
-  &:focus {
-    transition: none;
-
-    border-color: var(--ring-main-color);
-  }
-
-  &[disabled] {
-    color: var(--ring-disabled-color);
-    border-color: var(--ring-border-disabled-color);
-    background-color: var(--ring-disabled-background-color);
-
-    -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
-  }
-
-  /*
-    Kill yellow/blue webkit autocomplete
-    https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
-  */
-  &:-webkit-autofill {
-    &,
-    &:hover,
-    &:focus {
-      transition: background-color 50000s ease-in-out 0s;
-    }
-  }
-}
-
-:global(.ring-input_error) {
-  border-color: var(--ring-icon-error-color);
-}
-
-:global(.ring-input_filter-popup) {
-  width: 100%;
-  min-width: 200px;
-}
-
-:global(.ring-input.ring-input:disabled),
-:global(.ring-input.ring-input[disabled]),
-:global(.ring-input.ring-input_disabled) {
-  color: var(--ring-disabled-color);
-  border-color: var(--ring-border-disabled-color);
-  background-color: var(--ring-disabled-background-color);
-
-  -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
-}
-
-:global(textarea.ring-input) {
-  box-sizing: border-box;
-
-  min-height: calc(8 * unit);
-
-  resize: none;
-}
-
-/* https://stackoverflow.com/questions/7144843/extra-space-under-textarea-differs-along-browsers */
-:global(.ring-input::placeholder) {
-  color: var(--ring-disabled-color);
-}

package/components/input/input.css

@@ -1,196 +0,0 @@
-@import "../global/variables.css";
-@import "../button/button.css";
-
-@value unit from "../global/global.css";
-
-.outerContainer {
-  --ring-input-icon-offset: calc(unit * 2.5);
-  --ring-input-padding-inline: unit;
-  --ring-input-background-color: var(--ring-content-background-color);
-}
-
-.borderless {
-  /* stylelint-disable-next-line length-zero-no-unit */
-  --ring-input-padding-inline: 0px;
-}
-
-.container {
-  position: relative;
-
-  box-sizing: border-box;
-
-  font-size: var(--ring-font-size);
-  line-height: var(--ring-line-height);
-
-  & * {
-    box-sizing: border-box;
-  }
-}
-
-.input {
-  --ring-input-padding-start: var(--ring-input-padding-inline);
-  --ring-input-padding-end: var(--ring-input-padding-inline);
-
-  width: 100%;
-
-  margin: 0;
-  padding-top: var(--ring-input-padding-block);
-  padding-right: var(--ring-input-padding-end);
-  padding-bottom: var(--ring-input-padding-block);
-  padding-left: var(--ring-input-padding-start);
-
-  transition: border-color var(--ring-ease);
-
-  color: var(--ring-text-color);
-  border: 1px solid var(--ring-borders-color);
-  border-radius: var(--ring-border-radius);
-  outline: none;
-  background-color: var(--ring-input-background-color);
-
-  font: inherit;
-
-  caret-color: var(--ring-main-color);
-
-  [dir="rtl"] & {
-    padding-right: var(--ring-input-padding-start);
-    padding-left: var(--ring-input-padding-end);
-  }
-
-  &:hover {
-    transition: none;
-
-    border-color: var(--ring-border-hover-color);
-  }
-
-  .error & {
-    border-color: var(--ring-icon-error-color);
-  }
-
-  &:focus {
-    transition: none;
-
-    border-color: var(--ring-main-color);
-  }
-
-  &[disabled] {
-    color: var(--ring-disabled-color);
-    border-color: var(--ring-border-disabled-color);
-    background-color: var(--ring-disabled-background-color);
-
-    -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
-  }
-
-  /*
-    Kill yellow/blue webkit autocomplete
-    https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
-  */
-  &:-webkit-autofill {
-    &,
-    &:hover,
-    &:focus {
-      transition: background-color 50000s ease-in-out 0s;
-    }
-  }
-}
-
-.borderless .input {
-  border-color: transparent;
-  background-color: transparent;
-}
-
-.withIcon .input {
-  --ring-input-padding-start: calc(var(--ring-input-padding-inline) + var(--ring-input-icon-offset));
-}
-
-.clearable .input {
-  --ring-input-padding-end: calc(var(--ring-input-padding-inline) + var(--ring-input-icon-offset));
-}
-
-.icon {
-  position: absolute;
-  top: calc(var(--ring-input-padding-block) + 1px);
-  left: var(--ring-input-padding-inline);
-
-  pointer-events: none;
-
-  color: var(--ring-icon-secondary-color);
-
-  [dir="rtl"] & {
-    right: unit;
-    left: auto;
-  }
-}
-
-.clear {
-  position: absolute;
-  top: calc(var(--ring-input-padding-block) + 2px);
-  right: var(--ring-input-padding-inline);
-
-  height: auto;
-
-  padding-right: 0;
-
-  line-height: inherit;
-
-  .empty & {
-    display: none;
-  }
-
-  [dir="rtl"] & {
-    right: auto;
-    left: unit;
-  }
-}
-
-textarea.input {
-  overflow: hidden;
-
-  box-sizing: border-box;
-
-  resize: none;
-}
-
-.input::placeholder {
-  color: var(--ring-disabled-color);
-}
-
-.input::-webkit-search-cancel-button {
-  -webkit-appearance: none;
-}
-
-.errorText {
-  margin-top: calc(unit / 2);
-
-  color: var(--ring-error-color);
-
-  font-size: var(--ring-font-size-smaller);
-  line-height: var(--ring-line-height-lowest);
-}
-
-.sizeS {
-  width: calc(unit * 12);
-}
-
-.sizeM {
-  width: calc(unit * 30);
-}
-
-.sizeL {
-  width: calc(unit * 50);
-}
-
-.sizeFULL {
-  width: 100%;
-}
-
-.heightS {
-  --ring-input-padding-block: 1px;
-}
-
-.heightM {
-  --ring-input-padding-block: 3px;
-}
-
-.heightL {
-  --ring-input-padding-block: 5px;
-}

package/components/input/input.d.ts

@@ -1,77 +0,0 @@
-import React, { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
-import { ControlsHeight } from '../global/controls-height';
-import { LabelType } from '../control-label/control-label';
-declare function noop(): void;
-/**
- * @name Input
- */
-declare enum Size {
-    AUTO = "Auto",
-    S = "S",
-    M = "M",
-    L = "L",
-    FULL = "FULL"
-}
-export interface InputTranslations {
-    clear: string;
-}
-export interface InputBaseProps {
-    size: Size;
-    enableShortcuts: boolean | string[];
-    children?: string | undefined;
-    inputClassName?: string | null | undefined;
-    label?: ReactNode;
-    labelType?: LabelType;
-    active?: boolean | null | undefined;
-    error?: ReactNode | null | undefined;
-    borderless?: boolean | null | undefined;
-    onClear?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | null | undefined;
-    loading?: boolean | null | undefined;
-    icon?: string | ComponentType | null | undefined;
-    height?: ControlsHeight | undefined;
-    afterInput?: ReactNode;
-    translations?: InputTranslations | null | undefined;
-}
-type Override<D, S> = Omit<D, keyof S> & S;
-export type InputSpecificProps = Override<InputHTMLAttributes<HTMLInputElement>, InputBaseProps> & {
-    multiline?: false | undefined;
-    inputRef: Ref<HTMLInputElement>;
-};
-type TextAreaSpecificProps = Override<TextareaHTMLAttributes<HTMLTextAreaElement>, InputBaseProps> & {
-    multiline: true;
-    inputRef: Ref<HTMLTextAreaElement>;
-};
-export type InputProps = InputSpecificProps | TextAreaSpecificProps;
-export declare class Input extends PureComponent<InputProps> {
-    static defaultProps: {
-        size: Size;
-        onChange: typeof noop;
-        inputRef: typeof noop;
-        enableShortcuts: string[];
-    };
-    state: {
-        empty: boolean;
-    };
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    static contextType: React.Context<ControlsHeight>;
-    frame?: number;
-    input?: HTMLInputElement | HTMLTextAreaElement | null;
-    id: string;
-    getId(): string;
-    checkValue(): void;
-    stretch(el: HTMLElement | null | undefined): void;
-    adapt(): void;
-    inputRef: (el: HTMLInputElement | HTMLTextAreaElement | null) => void;
-    clear: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    render(): React.JSX.Element;
-}
-export type ContainerProps<P extends InputProps> = JSX.LibraryManagedAttributes<typeof Input, P>;
-export type InputSpecificAttrs = ContainerProps<InputSpecificProps>;
-export type TextAreaSpecificAttrs = ContainerProps<TextAreaSpecificProps>;
-export type InputAttrs = InputSpecificAttrs | TextAreaSpecificAttrs;
-export default Input;
-export { Size };

package/components/input/input.js

@@ -1,165 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import closeIcon from '@jetbrains/icons/close-12px';
-import { refObject } from '../global/prop-types';
-import Button from '../button/button';
-import getUID from '../global/get-uid';
-import Icon from '../icon/icon';
-import { I18nContext } from '../i18n/i18n-context';
-import composeRefs from '../global/composeRefs';
-import { ControlsHeightContext } from '../global/controls-height';
-import { ControlLabel } from '../control-label/control-label';
-import styles from './input.css';
-function noop() { }
-/**
- * @name Input
- */
-var Size;
-(function (Size) {
-    Size["AUTO"] = "Auto";
-    Size["S"] = "S";
-    Size["M"] = "M";
-    Size["L"] = "L";
-    Size["FULL"] = "FULL";
-})(Size || (Size = {}));
-export class Input extends PureComponent {
-    static defaultProps = {
-        size: Size.M,
-        onChange: noop,
-        inputRef: noop,
-        enableShortcuts: ['esc']
-    };
-    state = {
-        empty: true
-    };
-    componentDidMount() {
-        this.frame = requestAnimationFrame(() => this.adapt());
-    }
-    componentDidUpdate() {
-        this.adapt();
-    }
-    componentWillUnmount() {
-        if (this.frame != null) {
-            cancelAnimationFrame(this.frame);
-        }
-    }
-    static contextType = ControlsHeightContext;
-    frame;
-    input;
-    id = getUID('ring-input-');
-    getId() {
-        return this.props.id || this.id;
-    }
-    checkValue() {
-        this.setState({
-            empty: !this.input?.value
-        });
-        if (this.props.multiline &&
-            this.input != null && this.input.scrollHeight >= this.input.clientHeight) {
-            this.stretch(this.input);
-        }
-    }
-    stretch(el) {
-        if (!el || !el.style) {
-            return;
-        }
-        el.style.height = '0'; // To know the real scrollHeight
-        el.style.height = `${el.scrollHeight + 2}px`;
-    }
-    adapt() {
-        this.checkValue();
-    }
-    inputRef = (el) => {
-        this.input = el;
-    };
-    clear = (e) => {
-        this.props.onClear && this.props.onClear(e);
-    };
-    handleInputChange = (e) => {
-        if (!this.props.multiline) {
-            this.props.onChange?.(e);
-            this.checkValue();
-        }
-    };
-    handleTextareaChange = (e) => {
-        if (this.props.multiline) {
-            this.props.onChange?.(e);
-            this.checkValue();
-        }
-    };
-    render() {
-        const { 
-        // Modifiers
-        size, active, multiline, borderless, 
-        // Props
-        label, labelType, error, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = this.context, afterInput, ...restProps } = this.props;
-        const { empty } = this.state;
-        const clearable = !!onClear;
-        const classes = classNames(className, styles.outerContainer, [styles[`size${size}`]], [styles[`height${height}`]], {
-            'ring-js-shortcuts': enableShortcuts === true,
-            [styles.active]: active,
-            [styles.error]: error != null,
-            [styles.empty]: empty,
-            [styles.noLabel]: !this.props.label,
-            [styles.withIcon]: icon != null,
-            [styles.clearable]: clearable,
-            [styles.borderless]: borderless
-        });
-        const inputClasses = classNames(styles.input, inputClassName);
-        const text = value != null ? value : children;
-        const commonProps = {
-            ref: composeRefs(this.inputRef, inputRef),
-            className: inputClasses,
-            value: text,
-            disabled,
-            id: this.getId(),
-            placeholder,
-            'aria-label': typeof label === 'string' && label ? label : placeholder,
-            'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null
-        };
-        return (<I18nContext.Consumer>
-        {({ translate }) => (<div className={classes} data-test="ring-input">
-            {label && (<ControlLabel htmlFor={this.getId()} disabled={disabled} type={labelType}>{label}</ControlLabel>)}
-            <div className={styles.container}>
-              {icon && <Icon glyph={icon} className={styles.icon}/>}
-              {multiline
-                    ? (<textarea onChange={this.handleTextareaChange} rows={1} {...commonProps} {...restProps}/>)
-                    : (<input onChange={this.handleInputChange} {...commonProps} {...restProps}/>)}
-              {clearable && !disabled && (<Button title={translations?.clear ?? translate('clear')} data-test="ring-input-clear" className={styles.clear} icon={closeIcon} onClick={this.clear}/>)}
-              {afterInput}
-            </div>
-            {error && <div className={styles.errorText}>{error}</div>}
-          </div>)}
-      </I18nContext.Consumer>);
-    }
-}
-Input.propTypes = {
-    value: PropTypes.string,
-    className: PropTypes.string,
-    inputClassName: PropTypes.string,
-    size: PropTypes.oneOf(Object.values(Size)).isRequired,
-    label: PropTypes.node,
-    active: PropTypes.bool,
-    error: PropTypes.string,
-    multiline: PropTypes.bool,
-    onChange: PropTypes.func,
-    onClear: PropTypes.func,
-    inputRef: PropTypes.oneOfType([
-        PropTypes.func,
-        refObject(PropTypes.instanceOf(HTMLInputElement)),
-        refObject(PropTypes.instanceOf(HTMLTextAreaElement))
-    ]),
-    children: PropTypes.string,
-    enableShortcuts: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.arrayOf(PropTypes.string.isRequired)
-    ]),
-    disabled: PropTypes.bool,
-    id: PropTypes.string,
-    placeholder: PropTypes.string,
-    translations: PropTypes.object,
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType])
-};
-export default Input;
-export { Size };

package/components/input-ng/input-ng.css

@@ -1,7 +0,0 @@
-.errorText {
-  height: auto;
-}
-
-.clear.clear {
-  position: absolute;
-}