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

package/components/query-assist/query-assist__suggestions.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { ListDataItem } from '../list/consts';
+export interface QueryAssistSuggestion {
+    description: string;
+    group: string;
+    icon?: string | undefined;
+    option: string;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
+    className?: string | undefined;
+    matchingStart?: number;
+    matchingEnd?: number;
+    caret?: number;
+    completionStart?: number;
+    completionEnd?: number;
+}
+export interface SuggestionItem {
+    data?: QueryAssistSuggestion;
+}
+export default class QueryAssistSuggestions {
+    static createKey(suggestion: QueryAssistSuggestion): string;
+    static renderLabel(suggestion: QueryAssistSuggestion): JSX.Element;
+    static renderGroupSeparator(suggestion: QueryAssistSuggestion, prevSuggestion: string): {
+        key: string;
+        description: string;
+        rgItemType: import("../list/consts").Type;
+    } | null;
+    static renderList(suggestions: readonly QueryAssistSuggestion[], suggestionRenderer: (suggestion: QueryAssistSuggestion) => ListDataItem<SuggestionItem>): ListDataItem<SuggestionItem>[];
+}

package/components/query-assist/query-assist__suggestions.js

@@ -1,100 +1,60 @@
 import React from 'react';
-
 import List from '../list/list';
-
 import styles from './query-assist.css';
-
 const ICON_ID_LENGTH = 44;
-
-
 export default class QueryAssistSuggestions {
-
-  /*
-  * Pay attention that this method produces not a 100% unique key.
-  * Consider to use a unique identifier provided by a server.
-   */
-  static createKey(suggestion) {
-    const {
-      description,
-      group,
-      icon,
-      option,
-      prefix = '',
-      suffix = ''
-    } = suggestion;
-
-    return prefix + option + suffix + group + description +
-      (icon ? icon.substring(icon.length - ICON_ID_LENGTH) : '');
-  }
-
-  static renderLabel(suggestion) {
-    const {
-      className,
-      matchingStart,
-      matchingEnd,
-      option,
-      prefix = '',
-      suffix = ''
-    } = suggestion;
-
-    let wrappedOption;
-    let before = '';
-    let after = '';
-
-    if (matchingStart !== matchingEnd) {
-      before = option.substring(0, matchingStart);
-      wrappedOption = (
-        <span className={styles.highlight}>
-          {option.substring(matchingStart, matchingEnd)}
-        </span>
-      );
-      after = option.substring(matchingEnd);
-    } else {
-      wrappedOption = option;
+    /*
+    * Pay attention that this method produces not a 100% unique key.
+    * Consider to use a unique identifier provided by a server.
+     */
+    static createKey(suggestion) {
+        const { description, group, icon, option, prefix = '', suffix = '' } = suggestion;
+        return prefix + option + suffix + group + description +
+            (icon ? icon.substring(icon.length - ICON_ID_LENGTH) : '');
     }
-
-    const wrappedPrefix = prefix && <span className={styles.service}>{prefix}</span>;
-    const wrappedSuffix = suffix && <span className={styles.service}>{suffix}</span>;
-
-    return (
-      <span className={className}>
+    static renderLabel(suggestion) {
+        const { className, matchingStart = 0, matchingEnd = 0, option, prefix = '', suffix = '' } = suggestion;
+        let wrappedOption;
+        let before = '';
+        let after = '';
+        if (matchingStart !== matchingEnd) {
+            before = option.substring(0, matchingStart);
+            wrappedOption = (<span className={styles.highlight}>
+          {option.substring(matchingStart, matchingEnd)}
+        </span>);
+            after = option.substring(matchingEnd);
+        }
+        else {
+            wrappedOption = option;
+        }
+        const wrappedPrefix = prefix && <span className={styles.service}>{prefix}</span>;
+        const wrappedSuffix = suffix && <span className={styles.service}>{suffix}</span>;
+        return (<span className={className}>
         {wrappedPrefix}{before}{wrappedOption}{after}{wrappedSuffix}
-      </span>
-    );
-  }
-
-  static renderGroupSeparator(suggestion, prevSuggestion) {
-    const {group, option} = suggestion;
-    const {SEPARATOR} = List.ListProps.Type;
-
-    if (prevSuggestion !== group) {
-      return {
-        key: option + group + SEPARATOR,
-        description: group,
-        rgItemType: SEPARATOR
-      };
+      </span>);
+    }
+    static renderGroupSeparator(suggestion, prevSuggestion) {
+        const { group, option } = suggestion;
+        const { SEPARATOR } = List.ListProps.Type;
+        if (prevSuggestion !== group) {
+            return {
+                key: option + group + SEPARATOR,
+                description: group,
+                rgItemType: SEPARATOR
+            };
+        }
+        return null;
+    }
+    static renderList(suggestions, suggestionRenderer) {
+        const renderedSuggestions = [];
+        suggestions.forEach((suggestion, index, arr) => {
+            const prevSuggestionGroup = arr[index - 1] && arr[index - 1].group;
+            const groupSeparator = QueryAssistSuggestions.renderGroupSeparator(suggestion, prevSuggestionGroup);
+            if (groupSeparator) {
+                renderedSuggestions.push(groupSeparator);
+            }
+            renderedSuggestions.push(suggestionRenderer(suggestion));
+        });
+        return renderedSuggestions;
     }
-
-    return null;
-  }
-
-  static renderList(suggestions, suggestionRenderer) {
-    const renderedSuggestions = [];
-
-    suggestions.forEach((suggestion, index, arr) => {
-      const prevSuggestionGroup = arr[index - 1] && arr[index - 1].group;
-      const groupSeparator = QueryAssistSuggestions.renderGroupSeparator(
-        suggestion, prevSuggestionGroup
-      );
-
-      if (groupSeparator) {
-        renderedSuggestions.push(groupSeparator);
-      }
-
-      renderedSuggestions.push(suggestionRenderer(suggestion));
-    });
-
-    return renderedSuggestions;
-  }
-
 }

package/components/query-assist-ng/query-assist-ng.examples.js

@@ -4,9 +4,9 @@ import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
 import hubConfig from '../../.storybook/hub-config';
 
-import AuthNG from '@jetbrains/ring-ui/components/auth-ng/auth-ng';
+import AuthNG from '../auth-ng/auth-ng';
 
-import QueryAssistNG from '@jetbrains/ring-ui/components/query-assist-ng/query-assist-ng';
+import QueryAssistNG from './query-assist-ng';
 
 export default {
   title: 'Legacy Angular/Query Assist Ng',

package/components/radio/radio.css

@@ -74,11 +74,12 @@
   opacity: 0;
 
   &[disabled] + .circle {
-    border-color: var(--ring-borders-color);
+    border-color: var(--ring-border-unselected-disabled-color);
+    background-color: var(--ring-disabled-background-color);
   }
 
   &:checked + .circle {
-    border-color: var(--ring-border-hover-color);
+    border-color: var(--ring-main-color);
 
     /* stylelint-disable-next-line selector-max-specificity */
     &::after {
@@ -101,8 +102,13 @@
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
-  &[disabled]:checked + .circle::after {
-    opacity: 0.5;
+  &[disabled]:checked + .circle {
+    border-color: var(--ring-border-disabled-color);
+
+    /* stylelint-disable-next-line selector-max-specificity */
+    &::after {
+      background-color: var(--ring-border-disabled-color);
+    }
   }
 
   &[disabled] ~ .label {

package/components/radio/radio.d.ts

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { RadioProps } from './radio__item';
+/**
+ * @name Radio
+ */
+export default class Radio extends Component<RadioProps> {
+    static propTypes: {
+        name: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<string | number | boolean>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    };
+    static Item: React.ForwardRefExoticComponent<import("./radio__item").RadioItemProps & React.RefAttributes<import("./radio__item").Radio>>;
+    uid: string;
+    render(): JSX.Element;
+}

package/components/radio/radio.js

@@ -1,37 +1,27 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-
 import getUID from '../global/get-uid';
-
-import RadioItem, {RadioContext} from './radio__item';
-
+import RadioItem, { RadioContext } from './radio__item';
 /**
  * @name Radio
  */
-
 export default class Radio extends Component {
-  static propTypes = {
-    name: PropTypes.string,
-    disabled: PropTypes.bool,
-    value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.bool
-    ]),
-    onChange: PropTypes.func,
-    children: PropTypes.node.isRequired
-  };
-
-  static Item = RadioItem;
-
-  uid = getUID('ring-radio-');
-
-  render() {
-    return (
-      <RadioContext.Provider value={{name: this.uid, ...this.props}}>
+    static propTypes = {
+        name: PropTypes.string,
+        disabled: PropTypes.bool,
+        value: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number,
+            PropTypes.bool
+        ]),
+        onChange: PropTypes.func,
+        children: PropTypes.node.isRequired
+    };
+    static Item = RadioItem;
+    uid = getUID('ring-radio-');
+    render() {
+        return (<RadioContext.Provider value={{ name: this.uid, ...this.props }}>
         {this.props.children}
-      </RadioContext.Provider>
-    );
-  }
+      </RadioContext.Provider>);
+    }
 }
-

package/components/radio/radio__item.d.ts

@@ -0,0 +1,28 @@
+import React, { Component, InputHTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    value?: string | undefined;
+    onChange?: ((value: string) => void) | null | undefined;
+}
+export declare const RadioContext: React.Context<RadioProps>;
+export declare class Radio extends Component<InputHTMLAttributes<HTMLInputElement>> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        value: PropTypes.Requireable<string>;
+        name: PropTypes.Requireable<string>;
+        checked: PropTypes.Requireable<boolean>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    uid: string;
+    input?: HTMLElement | null;
+    inputRef: (el: HTMLElement | null) => void;
+    label?: HTMLElement | null;
+    labelRef: (el: HTMLElement | null) => void;
+    render(): JSX.Element;
+}
+export interface RadioItemProps extends InputHTMLAttributes<HTMLInputElement> {
+    value: string;
+}
+declare const RadioItem: React.ForwardRefExoticComponent<RadioItemProps & React.RefAttributes<Radio>>;
+export default RadioItem;

package/components/radio/radio__item.js

@@ -1,69 +1,41 @@
-import React, {Component, createContext, forwardRef} from 'react';
+import React, { Component, createContext, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import getUID from '../global/get-uid';
-
 import styles from './radio.css';
-
 export const RadioContext = createContext({});
-
 export class Radio extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-    value: PropTypes.string,
-    name: PropTypes.string,
-    checked: PropTypes.bool,
-    onChange: PropTypes.func
-  };
-
-  uid = getUID('ring-radio-item-');
-
-  inputRef = el => {
-    this.input = el;
-  };
-
-  labelRef = el => {
-    this.label = el;
-  };
-
-  render() {
-    const {className, children, ...restProps} = this.props;
-
-    const classes = classNames(styles.radio, className);
-
-    return (
-      <label ref={this.labelRef} className={classes} htmlFor={this.uid}>
-        <input
-          name={name}
-          id={this.uid}
-          {...restProps}
-          ref={this.inputRef}
-          className={styles.input}
-          type="radio"
-        />
+    static propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.node,
+        value: PropTypes.string,
+        name: PropTypes.string,
+        checked: PropTypes.bool,
+        onChange: PropTypes.func
+    };
+    uid = getUID('ring-radio-item-');
+    input;
+    inputRef = (el) => {
+        this.input = el;
+    };
+    label;
+    labelRef = (el) => {
+        this.label = el;
+    };
+    render() {
+        const { className, children, ...restProps } = this.props;
+        const classes = classNames(styles.radio, className);
+        return (<label ref={this.labelRef} className={classes} htmlFor={this.uid}>
+        <input id={this.uid} {...restProps} ref={this.inputRef} className={styles.input} type="radio"/>
         <span className={styles.circle}/>
         <span className={styles.label}>{children}</span>
-      </label>
-    );
-  }
+      </label>);
+    }
 }
-
 const RadioItem = forwardRef(function RadioItem(props, ref) {
-  return (
-    <RadioContext.Consumer>
-      {({value, onChange, ...restContext}) => (
-        <Radio
-          ref={ref}
-          {...restContext}
-          checked={value != null ? value === props.value : undefined}
-          onChange={onChange && (() => onChange(props.value))}
-          {...props}
-        />
-      )}
-    </RadioContext.Consumer>
-  );
+    return (<RadioContext.Consumer>
+      {({ value, onChange, ...restContext }) => (<Radio ref={ref} {...restContext} checked={value != null ? value === props.value : undefined} onChange={onChange != null ? () => onChange(props.value) : undefined} {...props}/>)}
+    </RadioContext.Consumer>);
 });
 RadioItem.propTypes = Radio.propTypes;
 export default RadioItem;

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

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

package/components/save-field-ng/save-field-ng.examples.js

@@ -4,9 +4,9 @@ import angular from 'angular';
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 import hubConfig from '../../.storybook/hub-config';
 
-import QueryAssistNG from '@jetbrains/ring-ui/components/query-assist-ng/query-assist-ng';
+import QueryAssistNG from '../query-assist-ng/query-assist-ng';
 
-import SaveFieldNG from '@jetbrains/ring-ui/components/save-field-ng/save-field-ng';
+import SaveFieldNG from './save-field-ng';
 
 export default {
   title: 'Legacy Angular/Save Field Ng',

package/components/select/select-popup.css

@@ -22,7 +22,9 @@
 }
 
 .filter {
-  width: 100%;
+  flex-grow: 1;
+
+  width: 0;
 
   & input {
     font-weight: 200;
@@ -32,6 +34,8 @@
 .filterWrapper {
   position: relative;
 
+  display: flex;
+
   margin: 0;
   padding-right: unit;
   padding-left: calc(unit * 5.5);

package/components/select/select.css

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
+@value button-shadow from "../button/button.css";
 
 .select {
   position: relative;
@@ -39,8 +40,8 @@
 
 .icons {
   position: absolute;
-  top: -2px;
-  right: 0;
+  top: -3px;
+  right: calc(unit * 1.5);
 
   transition: color var(--ring-ease);
 
@@ -55,15 +56,8 @@
   }
 
   @nest .inputMode & {
-    top: 12px;
-
     font-size: var(--ring-font-size);
   }
-
-  @nest .buttonMode & {
-    top: -4px;
-    right: unit;
-  }
 }
 
 .selectedIcon {
@@ -87,10 +81,6 @@
   vertical-align: -1px;
 }
 
-.clearIcon.clearIcon > span > span {
-  color: var(--ring-icon-secondary-color);
-}
-
 .sizeS {
   width: calc(unit * 12);
 }
@@ -111,8 +101,7 @@
   max-width: 100%;
 }
 
-.buttonMode,
-.materialMode {
+.buttonMode {
   position: relative;
 
   cursor: pointer;
@@ -168,14 +157,18 @@
   display: block;
 
   width: 100%;
+  padding-left: unit;
 
   text-align: left;
   vertical-align: calc(0 - unit);
 }
 
-.buttonValueOpen {
-  border-color: var(--ring-selected-background-color);
-  background-color: var(--ring-selected-background-color);
+.buttonValue:global(.focus-visible) {
+  box-shadow: button-shadow var(--ring-main-color);
+}
+
+.buttonValueOpen.buttonValueOpen {
+  box-shadow: button-shadow var(--ring-main-color);
 }
 
 .label {
@@ -186,6 +179,7 @@
 
 .select:hover .value,
 .select:hover .icons,
+:global(.focus-visible) + .icons,
 .value:focus,
 .value:focus + .icons,
 .open,
@@ -207,23 +201,6 @@
   }
 }
 
-.selectedLabel {
-  position: absolute;
-  top: calc(unit * -1.5);
-  left: 0;
-
-  overflow: hidden;
-
-  max-width: 100%;
-
-  text-overflow: ellipsis;
-
-  color: var(--ring-secondary-color);
-
-  font-size: var(--ring-font-size-smaller);
-  line-height: var(--ring-line-height-lowest);
-}
-
 .avatar {
   margin-right: 4px;
 
@@ -236,9 +213,10 @@
 }
 
 .chevron.chevron {
-  padding: 0;
+  padding: 0 3px;
 
   transition: none;
+  vertical-align: -1px;
 
   color: inherit;
 }
@@ -249,6 +227,10 @@
   color: inherit;
 }
 
-.avatar {
+.heightS .avatar {
   vertical-align: -6px;
 }
+
+.heightS .icons {
+  top: -5px;
+}