@jetbrains/ring-ui 5.0.156 → 5.0.158

package/components/control-label/control-label.css

@@ -4,7 +4,7 @@
   margin-bottom: calc(var(--ring-unit) * 0.5);
 }
 
-.primaryLabel {
+.formLabel {
   color: var(--ring-text-color);
 
   font-size: var(--ring-font-size);

package/components/control-label/control-label.d.ts

@@ -1,7 +1,7 @@
 import React, { LabelHTMLAttributes } from 'react';
 export declare enum LabelType {
     SECONDARY = "secondary",
-    PRIMARY = "primary"
+    FORM = "form"
 }
 interface ControlLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     disabled?: boolean;

package/components/control-label/control-label.js

@@ -5,11 +5,11 @@ import styles from './control-label.css';
 export var LabelType;
 (function (LabelType) {
     LabelType["SECONDARY"] = "secondary";
-    LabelType["PRIMARY"] = "primary";
+    LabelType["FORM"] = "form";
 })(LabelType || (LabelType = {}));
 const classNameByType = {
     [LabelType.SECONDARY]: styles.secondaryLabel,
-    [LabelType.PRIMARY]: styles.primaryLabel
+    [LabelType.FORM]: styles.formLabel
 };
 export const ControlLabel = ({ children, type = LabelType.SECONDARY, disabled, ...rest }) => (<label className={classNames(styles.label, classNameByType[type], {
         [styles.disabledLabel]: disabled

package/components/select/select__popup.d.ts

@@ -2,6 +2,7 @@
  * @description Displays a popup with select's options.
  */
 import React, { CSSProperties, PureComponent, ReactNode, SyntheticEvent } from 'react';
+import PropTypes from 'prop-types';
 import { IconType } from '../icon/icon';
 import Popup from '../popup/popup';
 import { Directions } from '../popup/position';
@@ -9,6 +10,7 @@ import List, { SelectHandlerParams } from '../list/list';
 import Caret from '../caret/caret';
 import { ListDataItem } from '../list/consts';
 import { ShortcutsMap } from '../shortcuts/core';
+import { TagAttrs } from '../tag/tag';
 import { SelectItem } from './select';
 export type FilterFn<T> = (itemToCheck: SelectItem<T>, checkString: string, data: readonly SelectItem<T>[]) => boolean;
 export interface Filter<T = unknown> {
@@ -33,6 +35,7 @@ export interface TagsReset {
 }
 export interface Tags {
     reset?: TagsReset | null | undefined;
+    customTagComponent?: (tag: TagAttrs) => ReactNode;
 }
 export interface SelectPopupProps<T = unknown> {
     data: readonly ListDataItem<T>[];
@@ -106,6 +109,39 @@ export default class SelectPopup<T = unknown> extends PureComponent<SelectPopupP
     getFilter(): React.JSX.Element | null;
     handleRemoveTag: (arg: ListDataItem<T>) => (event: SyntheticEvent) => void;
     handleTagClick: (arg: ListDataItem<T>) => () => void;
+    getCustomTag(tags: Tags | boolean | null): ((tag: Pick<Pick<import("../tag/tag").TagProps, keyof import("../tag/tag").TagProps> & Pick<PropTypes.InferProps<{
+        onRemove: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        rgTagIcon: PropTypes.Requireable<NonNullable<PropTypes.ReactComponentLike | null | undefined>>;
+        icon: PropTypes.Requireable<string>;
+        avatar: PropTypes.Requireable<string>;
+        rgTagTitle: PropTypes.Requireable<string>;
+        readOnly: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        focused: PropTypes.Requireable<boolean>;
+        angled: PropTypes.Requireable<boolean>;
+        backgroundColor: PropTypes.Requireable<string>;
+        textColor: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        render: PropTypes.Requireable<(...args: any[]) => any>;
+    }>, never> & Pick<import("../tag/tag").TagProps, never>, never> & {
+        className?: string | null | undefined;
+        children?: React.ReactNode;
+        onClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
+        icon?: string | undefined;
+        disabled?: boolean | undefined;
+        avatar?: string | null | undefined;
+        readOnly?: boolean | undefined;
+        focused?: boolean | undefined;
+        render?: ((props: import("../tag/tag").TagRenderProps) => React.ReactNode) | undefined;
+        onRemove?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
+        rgTagIcon?: string | IconType | null | undefined;
+        rgTagTitle?: string | undefined;
+        angled?: boolean | null | undefined;
+        textColor?: string | undefined;
+        backgroundColor?: string | undefined;
+    } & {}) => React.ReactNode) | undefined;
     getTags(): false | React.JSX.Element;
     getFilterWithTags(): React.JSX.Element | null;
     getBottomLine(): "" | React.JSX.Element | null;

package/components/select/select__popup.js

@@ -196,9 +196,15 @@ export default class SelectPopup extends PureComponent {
             });
         }
     });
+    getCustomTag(tags) {
+        if (tags !== null && typeof tags !== 'boolean') {
+            return tags.customTagComponent;
+        }
+        return undefined;
+    }
     getTags() {
         return Array.isArray(this.props.selected) && (<div>
-        <TagsList tags={this.props.selected} activeIndex={this.state.tagsActiveIndex} handleRemove={this.handleRemoveTag} handleClick={this.handleTagClick} disabled={this.props.disabled}/>
+        <TagsList tags={this.props.selected} activeIndex={this.state.tagsActiveIndex} handleRemove={this.handleRemoveTag} handleClick={this.handleTagClick} disabled={this.props.disabled} customTagComponent={this.getCustomTag(this.props.tags)}/>
       </div>);
     }
     getFilterWithTags() {