@jetbrains/ring-ui 5.0.77 → 5.0.79

package/components/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, InputHTMLAttributes, CSSProperties } from 'react';
+import { PureComponent, InputHTMLAttributes, CSSProperties, Ref } from 'react';
 import PropTypes from 'prop-types';
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string | null | undefined;
@@ -7,6 +7,7 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     cellClassName?: string | null | undefined;
     labelClassName?: string | null | undefined;
     indeterminate: boolean;
+    inputRef?: Ref<HTMLInputElement>;
 }
 /**
  * @name Checkbox
@@ -29,6 +30,9 @@ export default class Checkbox extends PureComponent<CheckboxProps> {
         disabled: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+            current: PropTypes.Validator<HTMLInputElement | null | undefined>;
+        }> | null | undefined>>;
     };
     static defaultProps: {
         indeterminate: boolean;

package/components/checkbox/checkbox.js

@@ -4,6 +4,8 @@ import classNames from 'classnames';
 import checkmarkIcon from '@jetbrains/icons/checkmark-14px';
 import minusIcon from '@jetbrains/icons/remove-10px';
 import Icon from '../icon/icon';
+import { refObject } from '../global/prop-types';
+import composeRefs from '../global/composeRefs';
 import styles from './checkbox.css';
 /**
  * @name Checkbox
@@ -25,7 +27,11 @@ export default class Checkbox extends PureComponent {
         indeterminate: PropTypes.bool,
         disabled: PropTypes.bool,
         onChange: PropTypes.func,
-        children: PropTypes.node
+        children: PropTypes.node,
+        inputRef: PropTypes.oneOfType([
+            PropTypes.func,
+            refObject(PropTypes.instanceOf(HTMLInputElement))
+        ])
     };
     static defaultProps = {
         indeterminate: false
@@ -49,13 +55,13 @@ export default class Checkbox extends PureComponent {
         this.input = el;
     };
     render() {
-        const { children, label, className, containerClassName, containerStyle, cellClassName, labelClassName, indeterminate, ...restProps } = this.props;
+        const { children, label, className, containerClassName, containerStyle, cellClassName, labelClassName, indeterminate, inputRef, ...restProps } = this.props;
         const classes = classNames(styles.input, className);
         const containerClasses = classNames(styles.checkbox, containerClassName);
         const cellClasses = classNames(styles.cell, cellClassName);
         const labelClasses = classNames(styles.label, labelClassName);
         return (<label className={containerClasses} style={containerStyle} data-test="ring-checkbox">
-        <input {...restProps} data-checked={restProps.checked} ref={this.inputRef} type="checkbox" className={classes}/>
+        <input {...restProps} data-checked={restProps.checked} ref={composeRefs(this.inputRef, inputRef)} type="checkbox" className={classes}/>
         <span className={cellClasses}>
           <Icon glyph={checkmarkIcon} className={styles.check}/>
           <Icon glyph={minusIcon} className={styles.minus}/>

package/components/query-assist/query-assist.css

@@ -15,6 +15,7 @@
   position: relative;
 
   display: flex;
+  align-items: center;
 
   box-sizing: border-box;
 
@@ -43,6 +44,8 @@
 }
 
 .input {
+  overflow: auto;
+
   width: 100%;
 
   margin: 0;
@@ -54,6 +57,7 @@
   cursor: text;
 
   transition: border-color var(--ring-ease);
+  white-space: nowrap;
 
   color: var(--ring-text-color);
   border: 1px solid var(--ring-borders-color);
@@ -62,6 +66,7 @@
   background: transparent;
 
   font: inherit;
+  scrollbar-width: none;
 
   caret-color: var(--ring-main-color);
 
@@ -146,16 +151,16 @@
   composes: resetButton from "../global/global.css";
 
   position: absolute;
-  top: calc(var(--ring-input-padding-block) + 1px);
   left: 1px;
 
   display: block;
-
   overflow: hidden;
 
   width: calc(100% - unit * 4);
   padding-left: var(--ring-input-padding-start);
 
+  white-space: nowrap;
+
   text-overflow: ellipsis;
 
   pointer-events: none;
@@ -169,7 +174,6 @@
 
 .actions {
   position: absolute;
-  top: calc(var(--ring-input-padding-block) - 2px);
   right: var(--ring-input-padding-inline);
 
   height: auto;
@@ -184,7 +188,6 @@
 
 .icon {
   position: absolute;
-  top: calc(var(--ring-input-padding-block) + 1px);
   left: var(--ring-input-padding-inline);
 
   color: var(--ring-icon-secondary-color);

package/components/select/select.css

@@ -48,6 +48,8 @@
 
   color: var(--ring-icon-secondary-color);
 
+  line-height: normal;
+
   @nest .inputMode & {
     font-size: var(--ring-font-size);
   }

package/components/user-card/card.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, PureComponent } from 'react';
+import { HTMLAttributes, PureComponent, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 export interface UserCardUser {
     name: string;
@@ -18,11 +18,13 @@ export interface UserCardWording {
 export interface UserCardProps extends HTMLAttributes<HTMLDivElement> {
     user: UserCardUser;
     wording: UserCardWording;
+    info?: ReactElement | readonly ReactElement[] | string;
     'data-test'?: string | null | undefined;
 }
 export default class UserCard extends PureComponent<UserCardProps> {
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        info: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         user: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
             name: PropTypes.Validator<string>;

package/components/user-card/card.js

@@ -8,6 +8,7 @@ import styles from './user-card.css';
 export default class UserCard extends PureComponent {
     static propTypes = {
         children: PropTypes.node,
+        info: PropTypes.node,
         className: PropTypes.string,
         user: PropTypes.shape({
             name: PropTypes.string.isRequired,
@@ -33,7 +34,7 @@ export default class UserCard extends PureComponent {
         }
     };
     render() {
-        const { children, className, user, wording, ...restProps } = this.props;
+        const { children, info, className, user, wording, ...restProps } = this.props;
         const classes = classNames(className, {});
         const userActiveStatusClasses = classNames(styles.userActiveStatus, user.online ? styles.online : '');
         return (<div className={classes} {...restProps}>
@@ -45,6 +46,7 @@ export default class UserCard extends PureComponent {
                   {user.name}
                 </Link>)}
               {!user.href && <span className={styles.userName}>{user.name}</span>}
+              {!!info && <span className={styles.userNameInfo}>{info}</span>}
               {user.banned &&
                 (<span className={classNames(badgeStyles.badge, badgeStyles.invalid)} title={user.banReason}>{wording.banned}</span>)}
             </div>

package/components/user-card/user-card.css

@@ -32,6 +32,13 @@
   font-weight: 600;
 }
 
+.userNameInfo {
+  display: inline-block;
+
+  margin-right: 4px;
+  margin-bottom: 3px;
+}
+
 .userActiveStatus {
   display: inline-block;
 

package/dist/_helpers/card.js

@@ -6,12 +6,13 @@ import Avatar, { Size } from '../avatar/avatar.js';
 import Link from '../link/link.js';
 import { m as modules_6c9187df } from './badge.js';
 
-var modules_a4196c17 = {"unit":"8px","light":"light_rui_6e59","userCardSpaced":"userCardSpaced_rui_6e59","userInformationContainer":"userInformationContainer_rui_6e59","userInformation":"userInformation_rui_6e59","userName":"userName_rui_6e59","userActiveStatus":"userActiveStatus_rui_6e59","online":"online_rui_6e59"};
+var modules_a4196c17 = {"unit":"8px","light":"light_rui_6e59","userCardSpaced":"userCardSpaced_rui_6e59","userInformationContainer":"userInformationContainer_rui_6e59","userInformation":"userInformation_rui_6e59","userName":"userName_rui_6e59","userNameInfo":"userNameInfo_rui_6e59","userActiveStatus":"userActiveStatus_rui_6e59","online":"online_rui_6e59"};
 
 class UserCard extends PureComponent {
   render() {
     const {
       children,
+      info,
       className,
       user,
       wording,
@@ -33,7 +34,9 @@ class UserCard extends PureComponent {
       className: modules_a4196c17.userName
     }, user.name), !user.href && /*#__PURE__*/React.createElement("span", {
       className: modules_a4196c17.userName
-    }, user.name), user.banned && /*#__PURE__*/React.createElement("span", {
+    }, user.name), !!info && /*#__PURE__*/React.createElement("span", {
+      className: modules_a4196c17.userNameInfo
+    }, info), user.banned && /*#__PURE__*/React.createElement("span", {
       className: classNames(modules_6c9187df.badge, modules_6c9187df.invalid),
       title: user.banReason
     }, wording.banned)), /*#__PURE__*/React.createElement("div", null, typeof user.online === 'boolean' && /*#__PURE__*/React.createElement("span", {
@@ -44,6 +47,7 @@ class UserCard extends PureComponent {
 }
 _defineProperty(UserCard, "propTypes", {
   children: PropTypes.node,
+  info: PropTypes.node,
   className: PropTypes.string,
   user: PropTypes.shape({
     name: PropTypes.string.isRequired,

package/dist/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, InputHTMLAttributes, CSSProperties } from 'react';
+import { PureComponent, InputHTMLAttributes, CSSProperties, Ref } from 'react';
 import PropTypes from 'prop-types';
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string | null | undefined;
@@ -7,6 +7,7 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     cellClassName?: string | null | undefined;
     labelClassName?: string | null | undefined;
     indeterminate: boolean;
+    inputRef?: Ref<HTMLInputElement>;
 }
 /**
  * @name Checkbox
@@ -29,6 +30,9 @@ export default class Checkbox extends PureComponent<CheckboxProps> {
         disabled: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        inputRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+            current: PropTypes.Validator<HTMLInputElement | null | undefined>;
+        }> | null | undefined>>;
     };
     static defaultProps: {
         indeterminate: boolean;

package/dist/checkbox/checkbox.js

@@ -5,6 +5,8 @@ import classNames from 'classnames';
 import checkmarkIcon from '@jetbrains/icons/checkmark-14px';
 import minusIcon from '@jetbrains/icons/remove-10px';
 import Icon from '../icon/icon.js';
+import { refObject } from '../global/prop-types.js';
+import composeRefs from '../global/composeRefs.js';
 import { m as modules_3199090e } from '../_helpers/checkbox.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
@@ -52,6 +54,7 @@ class Checkbox extends PureComponent {
       cellClassName,
       labelClassName,
       indeterminate,
+      inputRef,
       ...restProps
     } = this.props;
     const classes = classNames(modules_3199090e.input, className);
@@ -64,7 +67,7 @@ class Checkbox extends PureComponent {
       "data-test": "ring-checkbox"
     }, /*#__PURE__*/React.createElement("input", _extends({}, restProps, {
       "data-checked": restProps.checked,
-      ref: this.inputRef,
+      ref: composeRefs(this.inputRef, inputRef),
       type: "checkbox",
       className: classes
     })), /*#__PURE__*/React.createElement("span", {
@@ -93,7 +96,8 @@ _defineProperty(Checkbox, "propTypes", {
   indeterminate: PropTypes.bool,
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
-  children: PropTypes.node
+  children: PropTypes.node,
+  inputRef: PropTypes.oneOfType([PropTypes.func, refObject(PropTypes.instanceOf(HTMLInputElement))])
 });
 _defineProperty(Checkbox, "defaultProps", {
   indeterminate: false

package/dist/dropdown-menu/dropdown-menu.js

@@ -41,6 +41,8 @@ import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';

package/dist/header/header.js

@@ -57,6 +57,8 @@ import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';

package/dist/header/profile.js

@@ -45,6 +45,8 @@ import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';

package/dist/header/smart-profile.js

@@ -80,6 +80,8 @@ import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';

package/dist/list/list.js

@@ -41,6 +41,8 @@ import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import '../global/get-event-key.js';
 

package/dist/list/list__item.js

@@ -13,6 +13,8 @@ import '../global/dom.js';
 import '../avatar/fallback-avatar.js';
 import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';

package/dist/list/list__users-groups-source.js

@@ -40,6 +40,8 @@ import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import './list__custom.js';
 import '../global/get-event-key.js';

package/dist/pager/pager.js

@@ -61,6 +61,8 @@ import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';
@@ -69,8 +71,6 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 import '../input/input.js';
-import '../global/prop-types.js';
-import '../global/composeRefs.js';
 import '../_helpers/input.js';
 import '../input/input-label.js';
 import '../global/rerender-hoc.js';

package/dist/pager-ng/pager-ng.js

@@ -67,6 +67,8 @@ import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';
@@ -75,8 +77,6 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 import '../input/input.js';
-import '../global/prop-types.js';
-import '../global/composeRefs.js';
 import '../_helpers/input.js';
 import '../input/input-label.js';
 import '../global/rerender-hoc.js';

package/dist/popup-menu/popup-menu.js

@@ -43,6 +43,8 @@ import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';

package/dist/query-assist/query-assist.js

@@ -55,6 +55,8 @@ import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
@@ -67,10 +69,8 @@ import '../list/list__hint.js';
 import '../list/consts.js';
 import '../_helpers/loader-inline.js';
 import '../global/react-render-adapter.js';
-import '../global/composeRefs.js';
 import '@jetbrains/icons/chevron-10px';
 import '../_helpers/button__classes.js';
-import '../global/prop-types.js';
 import '../input/input-label.js';
 
 const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING + PopupMenu.PopupProps.Dimension.BORDER_WIDTH;

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

@@ -38,6 +38,8 @@ import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';

package/dist/query-assist-ng/query-assist-ng.js

@@ -57,6 +57,8 @@ import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';
@@ -67,13 +69,11 @@ import '../list/consts.js';
 import '../loader-inline/loader-inline.js';
 import '../_helpers/loader-inline.js';
 import '../global/rerender-hoc.js';
-import '../global/composeRefs.js';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-10px';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../input/input.js';
-import '../global/prop-types.js';
 import '../_helpers/input.js';
 import '../input/input-label.js';
 import '../_helpers/query-assist__suggestions.js';

package/dist/select/select.js

@@ -59,6 +59,8 @@ import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';
@@ -66,8 +68,6 @@ import '../list/list__title.js';
 import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
-import '../global/prop-types.js';
-import '../global/composeRefs.js';
 import '../global/react-render-adapter.js';
 import '@jetbrains/icons/search';
 import '../loader-inline/loader-inline.js';

package/dist/select/select__popup.js

@@ -52,6 +52,8 @@ import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';
@@ -65,8 +67,6 @@ import '@jetbrains/icons/close-12px';
 import '@jetbrains/icons/chevron-10px';
 import '../_helpers/button__classes.js';
 import '../input/input.js';
-import '../global/prop-types.js';
-import '../global/composeRefs.js';
 import '../_helpers/input.js';
 import '../input/input-label.js';
 

package/dist/select-ng/select-ng.js

@@ -60,6 +60,8 @@ import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../list/list__title.js';
@@ -67,8 +69,6 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 import '../input/input.js';
-import '../global/prop-types.js';
-import '../global/composeRefs.js';
 import '../_helpers/input.js';
 import '../input/input-label.js';
 import '../global/rerender-hoc.js';

package/dist/select-ng/select-ng__lazy.js

@@ -56,6 +56,8 @@ import '../list/list__item.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';
@@ -64,8 +66,6 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 import '../input/input.js';
-import '../global/prop-types.js';
-import '../global/composeRefs.js';
 import '../_helpers/input.js';
 import '../input/input-label.js';
 import '../global/rerender-hoc.js';