@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/tags-list/tags-list.js

@@ -1,93 +1,45 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import Tag from '../tag/tag';
-
-function noop() {}
-
+function noop() { }
 /**
  * @name Tags List
  */
-
 export default class TagsList extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    tags: PropTypes.array,
-    customTagComponent: (props, propName, componentName) => {
-      if (props[propName] && !props[propName].prototype instanceof Component) {
-        return new Error(`Invalid prop ${propName} supplied to ${componentName}. Validation failed.`);
-      }
-      return null;
-    },
-    activeIndex: PropTypes.number,
-    canNotBeEmpty: PropTypes.bool,
-    disabled: PropTypes.bool,
-    handleClick: PropTypes.func,
-    handleRemove: PropTypes.func,
-    className: PropTypes.string,
-    tagClassName: PropTypes.string
-  };
-
-  static defaultProps = {
-    customTagComponent: null,
-    canNotBeEmpty: false,
-    disabled: false,
-    handleClick: noop,
-    handleRemove: noop
-  };
-
-  renderTag(tag, focusTag) {
-    const TagComponent = this.props.customTagComponent || Tag;
-    const readOnly = this.props.disabled || tag.readOnly ||
-      (this.props.canNotBeEmpty && this.props.tags.length === 1);
-
-    const {tagClassName} = this.props;
-
-    return (
-      <TagComponent
-        {...tag}
-        readOnly={readOnly}
-        disabled={this.props.disabled || tag.disabled}
-        focused={focusTag}
-        onClick={this.props.handleClick(tag)}
-        onRemove={this.props.handleRemove(tag)}
-        className={tagClassName}
-      >{tag.label}</TagComponent>
-    );
-  }
-
-  render() {
-    const {
-      children,
-      className,
-      customTagComponent,
-      canNotBeEmpty,
-      handleClick,
-      tagClassName,
-      handleRemove,
-      tags,
-      activeIndex,
-      ...props
-    } = this.props;
-    const classes = classNames(
-      'ring-js-shortcuts',
-      className
-    );
-
-    const tagsList = (this.props.tags || []).map(
-      (tag, index) => this.renderTag(tag, this.props.activeIndex === index)
-    );
-
-    return (
-      <div
-        data-test="ring-tags-list"
-        className={classes}
-        {...props}
-      >
+    static propTypes = {
+        children: PropTypes.node,
+        tags: PropTypes.array,
+        customTagComponent: PropTypes.elementType,
+        activeIndex: PropTypes.number,
+        canNotBeEmpty: PropTypes.bool,
+        disabled: PropTypes.bool,
+        handleClick: PropTypes.func,
+        handleRemove: PropTypes.func,
+        className: PropTypes.string,
+        tagClassName: PropTypes.string
+    };
+    static defaultProps = {
+        customTagComponent: null,
+        canNotBeEmpty: false,
+        disabled: false,
+        handleClick: noop,
+        handleRemove: noop
+    };
+    renderTag(tag, focusTag) {
+        const TagComponent = this.props.customTagComponent || Tag;
+        const readOnly = this.props.disabled || tag.readOnly ||
+            (this.props.canNotBeEmpty && this.props.tags.length === 1);
+        const { tagClassName } = this.props;
+        return (<TagComponent {...tag} readOnly={readOnly} disabled={this.props.disabled || tag.disabled} focused={focusTag} onClick={this.props.handleClick(tag)} onRemove={this.props.handleRemove(tag)} className={tagClassName}>{tag.label}</TagComponent>);
+    }
+    render() {
+        const { children, className, customTagComponent, canNotBeEmpty, handleClick, tagClassName, handleRemove, tags, activeIndex, ...props } = this.props;
+        const classes = classNames('ring-js-shortcuts', className);
+        const tagsList = (this.props.tags || []).map((tag, index) => this.renderTag(tag, this.props.activeIndex === index));
+        return (<div data-test="ring-tags-list" className={classes} {...props}>
         {tagsList}
         {children}
-      </div>
-    );
-  }
+      </div>);
+    }
 }

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

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import TemplateNG from '@jetbrains/ring-ui/components/template-ng/template-ng';
+import TemplateNG from './template-ng';
 
 export default {
   title: 'Legacy Angular/Template Ng',

package/components/text/text.d.ts

@@ -0,0 +1,17 @@
+import { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+    info?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+/**
+ * @name Text
+ */
+export default class Text extends Component<TextProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        info: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+    };
+    render(): JSX.Element;
+}

package/components/text/text.js

@@ -1,29 +1,21 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import styles from './text.css';
-
 /**
  * @name Text
  */
-
 export default class Text extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    info: PropTypes.bool,
-    className: PropTypes.string
-  };
-
-  render() {
-    const {children, className, info, ...restProps} = this.props;
-
-    const classes = classNames(styles.text, className, {
-      [styles.info]: info
-    });
-
-    return (
-      <span className={classes} {...restProps}>{children}</span>
-    );
-  }
+    static propTypes = {
+        children: PropTypes.node,
+        info: PropTypes.bool,
+        className: PropTypes.string
+    };
+    render() {
+        const { children, className, info, ...restProps } = this.props;
+        const classes = classNames(styles.text, className, {
+            [styles.info]: info
+        });
+        return (<span className={classes} {...restProps}>{children}</span>);
+    }
 }

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

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import TitleNG from '@jetbrains/ring-ui/components/title-ng/title-ng';
+import TitleNG from './title-ng';
 
 export default {
   title: 'Legacy Angular/Title Ng',

package/components/toggle/toggle.css

@@ -9,10 +9,10 @@
 .toggle {
   cursor: pointer;
 
-  &:hover {
-    & .switch {
-      background-color: var(--ring-border-hover-color);
-    }
+  &:hover .switch {
+    transition: none;
+
+    background-color: var(--ring-border-hover-color);
   }
 
   &.disabled {
@@ -21,42 +21,17 @@
 }
 
 .label {
-  margin-left: calc(unit / 2);
+  margin-left: unit;
 }
 
 .leftLabel {
-  margin-right: calc(unit / 2);
-}
-
-.light {
-  & .switch {
-    background-color: var(--ring-icon-color);
-
-    &::before {
-      background-color: var(--ring-content-background-color);
-    }
-  }
-}
-
-.dark {
-  & .switch {
-    background-color: var(--ring-hint-color);
-
-    &::before {
-      background-color: var(--ring-navigation-background-color);
-    }
-  }
+  margin-right: unit;
 }
 
 .switchWrapper {
   position: relative;
 
   display: inline-block;
-
-  width: calc(unit * 3);
-  height: calc(unit * 2);
-
-  vertical-align: -3px;
 }
 
 .input {
@@ -82,12 +57,12 @@
 
   transition: background-color timing-function duration;
 
+  background-color: var(--ring-icon-color);
+
   @nest .input:focus + & {
     box-shadow: inset 0 0 0 1px var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
   }
 
-  border-radius: unit;
-
   &::before {
     position: absolute;
     top: padding;
@@ -103,6 +78,7 @@
     transform: translateX(padding);
 
     border-radius: calc(unit * 0.75);
+    background-color: var(--ring-content-background-color);
   }
 }
 
@@ -110,8 +86,58 @@
   background-color: var(--ring-main-color);
 }
 
-.input:checked + ::before {
-  transform: translateX(calc(unit * 1.5 - padding));
+:checked:hover + .switch {
+  background-color: var(--ring-main-hover-color);
+}
+
+.size16 {
+  & .switchWrapper {
+    width: calc(unit * 3);
+    height: calc(unit * 2);
+
+    vertical-align: -3px;
+  }
+
+  & .switch {
+    border-radius: unit;
+
+    &::before {
+      width: calc(unit * 1.5);
+      height: calc(unit * 1.5);
+
+      border-radius: calc(unit * 0.75);
+    }
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  & .input:checked + ::before {
+    transform: translateX(calc(unit * 1.5 - padding));
+  }
+}
+
+.size14 {
+  & .switchWrapper {
+    width: calc(unit * 3);
+    height: 14px;
+
+    vertical-align: -2px;
+  }
+
+  & .switch {
+    border-radius: 7px;
+
+    &::before {
+      width: 10px;
+      height: 10px;
+
+      border-radius: 5px;
+    }
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  & .input:checked + ::before {
+    transform: translateX(12px);
+  }
 }
 
 .size20 {

package/components/toggle/toggle.d.ts

@@ -0,0 +1,39 @@
+import { InputHTMLAttributes, PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export declare const Size: {
+    Size14: string;
+    Size16: string;
+    Size20: string;
+};
+/**
+  * @name Toggle
+  */
+export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size: string;
+    pale?: boolean | null | undefined;
+    leftLabel?: ReactNode;
+    'data-test'?: string | null | undefined;
+}
+declare class Toggle extends PureComponent<ToggleProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        name: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+        leftLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        defaultChecked: PropTypes.Requireable<boolean>;
+        checked: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        pale: PropTypes.Requireable<boolean>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onTransitionEnd: PropTypes.Requireable<(...args: any[]) => any>;
+        size: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        size: string;
+    };
+    render(): JSX.Element;
+}
+export declare type ToggleAttrs = JSX.LibraryManagedAttributes<typeof Toggle, ToggleProps>;
+export default Toggle;

package/components/toggle/toggle.js

@@ -1,77 +1,46 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
-import {withTheme} from '../global/theme';
 import dataTests from '../global/data-tests';
-
 import styles from './toggle.css';
-
 export const Size = {
-  Size16: styles.size16,
-  Size20: styles.size20
+    Size14: styles.size14,
+    Size16: styles.size16,
+    Size20: styles.size20
 };
-
-/**
-  * @name Toggle
-  */
-
 class Toggle extends PureComponent {
-  static propTypes = {
-    children: PropTypes.node,
-    name: PropTypes.string,
-    className: PropTypes.string,
-    title: PropTypes.string,
-    leftLabel: PropTypes.node,
-    defaultChecked: PropTypes.bool,
-    checked: PropTypes.bool,
-    disabled: PropTypes.bool,
-    pale: PropTypes.bool,
-    onChange: PropTypes.func,
-    onTransitionEnd: PropTypes.func,
-    theme: PropTypes.string,
-    size: PropTypes.oneOf(Object.values(Size)),
-    'data-test': PropTypes.string
-  };
-
-  render() {
-    const {className, children, disabled, pale, title, leftLabel, theme, size = Size.Size16,
-      'data-test': dataTest, onTransitionEnd, ...restProps} = this.props;
-
-    const classes = classNames(
-      className,
-      size,
-      styles.toggle,
-      styles[theme],
-      disabled && styles.disabled
-    );
-
-    return (
-      <label
-        className={classes}
-        title={title}
-        data-test={dataTests('ring-toggle', dataTest)}
-      >
+    static propTypes = {
+        children: PropTypes.node,
+        name: PropTypes.string,
+        className: PropTypes.string,
+        title: PropTypes.string,
+        leftLabel: PropTypes.node,
+        defaultChecked: PropTypes.bool,
+        checked: PropTypes.bool,
+        disabled: PropTypes.bool,
+        pale: PropTypes.bool,
+        onChange: PropTypes.func,
+        onTransitionEnd: PropTypes.func,
+        size: PropTypes.oneOf(Object.values(Size)),
+        'data-test': PropTypes.string
+    };
+    static defaultProps = {
+        size: Size.Size14
+    };
+    render() {
+        const { className, children, disabled, pale, title, leftLabel, size = Size.Size16, 'data-test': dataTest, onTransitionEnd, ...restProps } = this.props;
+        const classes = classNames(className, size, styles.toggle, disabled && styles.disabled);
+        return (<label className={classes} title={title} data-test={dataTests('ring-toggle', dataTest)}>
         {leftLabel && <span className={styles.leftLabel}>{leftLabel}</span>}
 
         <span className={styles.switchWrapper}>
-          <input
-            data-test="ring-toggle-input"
-            {...restProps}
-            type="checkbox"
-            disabled={disabled}
-            className={styles.input}
-          />
+          <input data-test="ring-toggle-input" {...restProps} type="checkbox" disabled={disabled} className={styles.input}/>
 
-          <span
-            className={classNames(styles.switch, pale && styles.paleSwitch)}
-            onTransitionEnd={onTransitionEnd}
-          />
+          <span className={classNames(styles.switch, pale && styles.paleSwitch)} onTransitionEnd={onTransitionEnd}/>
         </span>
 
         {children && <span className={styles.label}>{children}</span>}
-      </label>
-    );
-  }
+      </label>);
+    }
 }
-export default withTheme()(Toggle);
+export default Toggle;

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

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ToggleNG from '@jetbrains/ring-ui/components/toggle-ng/toggle-ng';
+import ToggleNG from './toggle-ng';
 
 export default {
   title: 'Legacy Angular/Toggle Ng',

package/components/tooltip/tooltip.css

@@ -8,3 +8,10 @@
 
   text-align: left;
 }
+
+.long {
+  padding: unit calc(unit * 1.5);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+}

package/components/tooltip/tooltip.d.ts

@@ -0,0 +1,65 @@
+import React, { AllHTMLAttributes, Component, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import Popup, { PopupAttrs } from '../popup/popup';
+import { Listeners } from '../global/dom';
+interface Context {
+    onNestedTooltipShow: () => void;
+    onNestedTooltipHide: () => void;
+}
+declare const TooltipContext: React.Context<Context | undefined>;
+export interface TooltipProps extends Omit<AllHTMLAttributes<HTMLSpanElement>, 'title'> {
+    delay?: number | null | undefined;
+    selfOverflowOnly?: boolean | null | undefined;
+    popupProps?: Partial<PopupAttrs> | null | undefined;
+    title?: ReactNode | null | undefined;
+    'data-test'?: string | null | undefined;
+    long?: boolean | null | undefined;
+}
+/**
+ * @name Tooltip
+ */
+export default class Tooltip extends Component<TooltipProps> {
+    static propTypes: {
+        delay: PropTypes.Requireable<number>;
+        selfOverflowOnly: PropTypes.Requireable<boolean>;
+        popupProps: PropTypes.Requireable<object>;
+        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        title: string;
+        selfOverflowOnly: boolean;
+        popupProps: {};
+    };
+    state: {
+        showPopup: boolean;
+        showNestedPopup: boolean;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: TooltipProps): void;
+    componentWillUnmount(): void;
+    static PopupProps: {
+        Directions: typeof import("../popup/popup.consts").Directions;
+        Dimension: typeof import("../popup/popup.consts").Dimension;
+        MinWidth: typeof import("../popup/popup.consts").MinWidth;
+        MaxHeight: typeof import("../popup/popup.consts").MaxHeight;
+    };
+    static contextType: React.Context<Context | undefined>;
+    context: React.ContextType<typeof TooltipContext>;
+    timeout?: number;
+    listeners: Listeners;
+    containerNode?: HTMLElement | null;
+    containerRef: (el: HTMLElement | null) => void;
+    tryToShowPopup: () => void;
+    showPopup: () => void;
+    hidePopup: () => void;
+    addListeners(): void;
+    popup?: Popup | null;
+    popupRef: (el: Popup | null) => void;
+    onNestedTooltipShow: () => void;
+    onNestedTooltipHide: () => void;
+    render(): JSX.Element;
+}
+export declare type TooltipAttrs = JSX.LibraryManagedAttributes<typeof Tooltip, TooltipProps>;
+export {};