@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

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

@@ -0,0 +1,29 @@
+import React from '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): React.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

@@ -0,0 +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 = 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
+            };
+        }
+        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/radio/radio.css

@@ -0,0 +1,122 @@
+@import "../global/variables.css";
+
+.radio {
+  position: relative;
+
+  display: flex;
+  flex-direction: row;
+
+  padding: 2px 0;
+
+  text-align: left;
+
+  color: var(--ring-text-color);
+  outline: none;
+
+  &:hover .circle {
+    transition: none;
+
+    border-color: var(--ring-border-hover-color);
+  }
+}
+
+.circle {
+  position: relative;
+  top: 2px;
+
+  flex-shrink: 0;
+
+  box-sizing: border-box;
+  width: calc(2 * var(--ring-unit));
+  height: calc(2 * var(--ring-unit));
+
+  user-select: none;
+  transition: border-color var(--ring-ease), box-shadow var(--ring-ease);
+  pointer-events: none;
+
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-unit);
+  background-color: var(--ring-content-background-color);
+
+  &::after {
+    position: absolute;
+    top: 3px;
+    left: 3px;
+
+    width: var(--ring-unit);
+    height: var(--ring-unit);
+
+    content: "";
+
+    transition: opacity var(--ring-fast-ease), transform var(--ring-fast-ease);
+
+    transform: scale(0);
+
+    opacity: 0;
+
+    border-radius: calc(var(--ring-unit) / 2);
+    background-color: var(--ring-main-color);
+  }
+}
+
+.input {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+  margin: 0;
+
+  cursor: pointer;
+
+  opacity: 0;
+
+  &[disabled] + .circle {
+    border-color: var(--ring-border-disabled-color);
+    background-color: var(--ring-disabled-background-color);
+  }
+
+  &:checked + .circle {
+    border-color: var(--ring-main-color);
+
+    /* stylelint-disable-next-line selector-max-specificity */
+    &::after {
+      transition: none;
+
+      transform: scale(1);
+
+      opacity: 1;
+    }
+  }
+
+  &:focus + .circle,
+  &.focus + .circle {
+    border-color: var(--ring-border-hover-color);
+    box-shadow: 0 0 0 1px var(--ring-border-hover-color);
+  }
+
+  &[disabled] {
+    pointer-events: none;
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &[disabled]:checked + .circle {
+    border-color: var(--ring-border-selected-disabled-color);
+
+    /* stylelint-disable-next-line selector-max-specificity */
+    &::after {
+      background-color: var(--ring-border-selected-disabled-color);
+    }
+  }
+
+  &[disabled] ~ .label {
+    color: var(--ring-disabled-color);
+  }
+}
+
+.label {
+  margin-left: var(--ring-unit);
+
+  line-height: var(--ring-line-height);
+}

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<NonNullable<string | number | boolean | null | undefined>>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+    static Item: React.ForwardRefExoticComponent<import("./radio__item").RadioItemProps & React.RefAttributes<import("./radio__item").Radio>>;
+    uid: string;
+    render(): React.JSX.Element;
+}

package/components/radio/radio.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import getUID from '../global/get-uid';
+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 }}>
+        {this.props.children}
+      </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(): React.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

@@ -0,0 +1,41 @@
+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-');
+    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>);
+    }
+}
+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 != null ? () => onChange(props.value) : undefined} {...props}/>)}
+    </RadioContext.Consumer>);
+});
+RadioItem.propTypes = Radio.propTypes;
+export default RadioItem;

package/components/select/select-popup.css

@@ -0,0 +1,103 @@
+@import "../global/variables.css";
+
+.filterWithTags {
+  overflow: hidden;
+
+  margin: calc(var(--ring-unit) * 2) var(--ring-unit) 0;
+  padding: 3px;
+
+  text-align: left;
+
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
+
+  & .filterWrapper {
+    padding-right: 0;
+    padding-left: 0;
+
+    border-bottom: none;
+  }
+
+  &:hover {
+    border-color: var(--ring-border-hover-color);
+  }
+}
+
+.filterWithTagsFocused,
+.filterWithTagsFocused.filterWithTagsFocused:hover {
+  border-color: var(--ring-main-color);
+}
+
+.filterWithTagsInput {
+  padding: 0;
+
+  border: none;
+}
+
+.filter {
+  flex-grow: 1;
+
+  width: 0;
+}
+
+.popup {
+  overscroll-behavior: contain;
+}
+
+.filterWrapper {
+  position: relative;
+
+  display: flex;
+
+  margin: 0;
+  padding-right: var(--ring-unit);
+  padding-left: calc(var(--ring-unit) * 5.5);
+
+  border-bottom: 1px solid var(--ring-borders-color);
+
+  [dir="rtl"] & {
+    padding-right: calc(var(--ring-unit) * 5.5);
+    padding-left: var(--ring-unit);
+  }
+}
+
+.filterIcon {
+  position: absolute;
+  top: 7px;
+  left: calc(var(--ring-unit) * 2);
+
+  color: var(--ring-icon-color);
+
+  [dir="rtl"] & {
+    right: calc(var(--ring-unit) * 2);
+    left: auto;
+  }
+}
+
+.bottomLine {
+  text-align: center;
+
+  &.bottomLineOverItem {
+    position: relative;
+
+    z-index: var(--ring-fixed-z-index);
+
+    margin-top: -36px;
+
+    background-color: var(--ring-content-background-color);
+  }
+}
+
+.message {
+  display: inline-block;
+
+  margin: var(--ring-unit) 0;
+  padding: 0 calc(2 * var(--ring-unit));
+}
+
+.selectAll {
+  display: flex;
+  justify-content: space-between;
+
+  padding: 8px 16px 0;
+}

package/components/select/select.css

@@ -0,0 +1,235 @@
+@import "../global/variables.css";
+
+@value button-shadow from "../button/button.css";
+
+.select {
+  position: relative;
+
+  display: inline-block;
+
+  white-space: nowrap;
+
+  color: var(--ring-text-color);
+}
+
+.toolbar {
+  border-top: 1px solid var(--ring-line-color);
+}
+
+.button {
+  width: 100%;
+  padding: 0;
+
+  text-align: left;
+
+  [dir="rtl"] & {
+    text-align: right;
+    direction: ltr;
+  }
+
+  .toolbar & {
+    height: calc(4 * var(--ring-unit));
+    margin: var(--ring-unit) 0;
+  }
+
+  &.buttonSpaced {
+    padding: 0 calc(2 * var(--ring-unit));
+  }
+}
+
+.icons {
+  position: absolute;
+  top: 0;
+  right: 5px;
+  bottom: 0;
+
+  transition: color var(--ring-ease);
+
+  color: var(--ring-icon-secondary-color);
+
+  line-height: normal;
+
+  .inputMode & {
+    font-size: var(--ring-font-size);
+  }
+}
+
+.selectedIcon {
+  composes: resetButton from "../global/global.css";
+
+  position: relative;
+  top: 3px;
+
+  display: inline-block;
+
+  width: calc(2 * var(--ring-unit));
+  height: calc(2 * var(--ring-unit));
+  margin: 0 4px;
+
+  background-repeat: no-repeat;
+  background-position: center;
+
+  background-size: contain;
+}
+
+.clearIcon {
+  padding: 0 3px;
+
+  vertical-align: -2px;
+}
+
+.sizeS {
+  width: calc(var(--ring-unit) * 12);
+}
+
+.sizeM {
+  width: calc(var(--ring-unit) * 30);
+}
+
+.sizeL {
+  width: calc(var(--ring-unit) * 50);
+}
+
+.sizeFULL {
+  width: 100%;
+}
+
+.sizeAUTO {
+  max-width: 100%;
+}
+
+.buttonMode {
+  position: relative;
+
+  cursor: pointer;
+}
+
+.value {
+  composes: ellipsis from "../global/global.css";
+  composes: font from "../global/global.css";
+
+  display: inline-block;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(var(--ring-unit) * 4 + 1px);
+  padding: 0 0 3px;
+
+  cursor: pointer;
+  transition: color var(--ring-ease), border-color var(--ring-ease);
+  text-align: left;
+  vertical-align: top;
+
+  color: var(--ring-text-color);
+
+  border: none;
+  border-bottom: 1px solid var(--ring-borders-color);
+  outline: none;
+  background: transparent;
+
+  &:focus {
+    border-color: var(--ring-main-color);
+  }
+
+  &.open,
+  &:active {
+    border-color: transparent;
+  }
+
+  &::-moz-focus-inner {
+    padding: 0;
+
+    border: 0;
+    outline: 0;
+  }
+}
+
+.buttonContainer {
+  position: relative;
+
+  font-size: var(--ring-font-size);
+}
+
+.buttonValue {
+  composes: ellipsis from "../global/global.css";
+
+  display: block;
+
+  width: 100%;
+  padding-left: var(--ring-unit);
+
+  text-align: left;
+  vertical-align: calc(var(--ring-unit) * -1);
+}
+
+.buttonValue:focus-visible {
+  box-shadow: button-shadow var(--ring-main-color);
+}
+
+.buttonValueOpen.buttonValueOpen {
+  box-shadow: button-shadow var(--ring-main-color);
+}
+
+.buttonValueEmpty.buttonValueEmpty {
+  color: var(--ring-disabled-color);
+}
+
+.heightS .buttonValue {
+  font-size: var(--ring-font-size);
+}
+
+.label {
+  position: relative;
+
+  color: var(--ring-secondary-color);
+}
+
+.select:hover .value,
+.select:hover .icons,
+:focus-visible + .icons,
+.value:focus,
+.value:focus + .icons,
+.open,
+.open + .icons,
+.buttonValueOpen + .icons {
+  transition: none;
+
+  color: var(--ring-main-color);
+}
+
+.disabled {
+  pointer-events: none;
+
+  color: var(--ring-disabled-color);
+
+  & .value {
+    color: var(--ring-disabled-color);
+    border-bottom-style: dashed;
+  }
+}
+
+.avatar {
+  margin-right: 4px;
+
+  vertical-align: -5px;
+}
+
+.popup {
+  min-width: calc(var(--ring-unit) * 30);
+  max-width: calc(var(--ring-unit) * 40);
+}
+
+.chevron.chevron {
+  padding: 0 3px;
+
+  transition: none;
+  vertical-align: -1px;
+
+  color: inherit;
+}
+
+.chevronIcon.chevronIcon {
+  transition: none;
+
+  color: inherit;
+}