@jetbrains/ring-ui 5.0.50 → 5.0.52

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

@@ -0,0 +1,10 @@
+import { PureComponent, ReactNode } from 'react';
+interface InputLabelProps {
+    htmlFor?: string;
+    disabled?: boolean;
+    label: ReactNode;
+}
+export declare class InputLabel extends PureComponent<InputLabelProps> {
+    render(): JSX.Element;
+}
+export default InputLabel;

package/components/input/input-label.js

@@ -0,0 +1,18 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './input.css';
+export class InputLabel extends PureComponent {
+    render() {
+        const { htmlFor, label, disabled } = this.props;
+        return (<label htmlFor={htmlFor} className={classNames(styles.label, {
+                [styles.disabledLabel]: disabled
+            })}>{label}</label>);
+    }
+}
+InputLabel.propTypes = {
+    label: PropTypes.node,
+    disabled: PropTypes.bool,
+    id: PropTypes.string
+};
+export default InputLabel;

package/components/input/input.js

@@ -9,6 +9,7 @@ import Icon from '../icon/icon';
 import composeRefs from '../global/composeRefs';
 import { ControlsHeightContext } from '../global/controls-height';
 import styles from './input.css';
+import { InputLabel } from './input-label';
 function noop() { }
 /**
  * @name Input
@@ -117,9 +118,7 @@ export class Input extends PureComponent {
             'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null
         };
         return (<div className={classes} data-test="ring-input">
-        {label && (<label htmlFor={this.getId()} className={classNames(styles.label, {
-                    [styles.disabledLabel]: disabled
-                })}>{label}</label>)}
+        {label && (<InputLabel htmlFor={this.getId()} disabled={disabled} label={label}/>)}
         <div className={styles.container}>
           {icon && <Icon glyph={icon} className={styles.icon}/>}
           {multiline

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

@@ -800,7 +800,7 @@ export default class QueryAssist extends Component {
 
           <PopupMenu hidden={!this.state.showPopup} onCloseAttempt={this.closePopup} ref={this.popupRef} anchorElement={this.node} keepMounted attached className={this.props.popupClassName} directions={[PopupMenu.PopupProps.Directions.BOTTOM_RIGHT]} data={useCustomItemRender ? this.state.suggestions : this.renderSuggestions()} data-test="ring-query-assist-popup" hint={this.props.hint} hintOnSelection={this.props.hintOnSelection} left={this.getPopupOffset(this.state.suggestions)} maxHeight={PopupMenu.PopupProps.MaxHeight.SCREEN} onMouseDown={this.trackPopupMouseState} onMouseUp={this.trackPopupMouseState} onSelect={item => this.handleComplete(item)}/>
 
-          {glass && huge && (<div className={styles.rightSearchButton}>
+          {glass && huge && (<div className={styles.rightSearchButton} data-test="query-assist-search-button">
               <Icon glyph={searchIcon} className={styles.rightSearchIcon} title={this.props.translations.searchTitle} onClick={this.handleApply} ref={this.glassRef} data-test="query-assist-search-icon"/>
             </div>)}
         </div>

package/components/select/select.d.ts

@@ -236,6 +236,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     clear: (event?: Event | SyntheticEvent) => boolean;
     _selectionIsEmpty(): boolean;
     private _getLabel;
+    private _getPlaceholder;
     _getSelectedString(): string | null;
     private _getIcons;
     private _getAvatar;

package/components/select/select.js

@@ -9,6 +9,7 @@ import Avatar, { Size as AvatarSize } from '../avatar/avatar';
 import Popup from '../popup/popup';
 import List, { ActiveItemContext } from '../list/list';
 import Input, { Size } from '../input/input';
+import InputLabel from '../input/input-label';
 import Shortcuts from '../shortcuts/shortcuts';
 import Button from '../button/button';
 import dataTests from '../global/data-tests';
@@ -717,6 +718,12 @@ export default class Select extends Component {
     _getLabel() {
         return this.props.label ?? this.props.selectedLabel ?? 'Select an option';
     }
+    _getPlaceholder() {
+        if (this._selectionIsEmpty()) {
+            return this.props.label ?? 'Select an option';
+        }
+        return this._getSelectedString();
+    }
     _getSelectedString() {
         if (Array.isArray(this.state.selected)) {
             const labels = [];
@@ -767,6 +774,7 @@ export default class Select extends Component {
     }
     renderSelect(activeItemId) {
         const dataTest = this.props['data-test'];
+        const { selectedLabel } = this.props;
         const { shortcutsEnabled } = this.state;
         const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, styles[`height${this.props.height || this.context}`], {
             [styles[`size${this.props.size}`]]: this.props.type !== Type.INLINE,
@@ -798,13 +806,14 @@ export default class Select extends Component {
         </div>);
             case Type.BUTTON:
                 return (<div ref={this.nodeRef} className={classNames(classes, styles.buttonMode)} data-test={dataTests('ring-select', dataTest)}>
+            {selectedLabel && (<InputLabel label={selectedLabel} disabled={this.props.disabled} htmlFor={this.props.id}/>)}
             {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
             <div className={styles.buttonContainer}>
               <Button {...ariaProps} height={this.props.height} id={this.props.id} onClick={this._clickHandler} className={classNames(this.props.buttonClassName, styles.buttonValue, {
                         [styles.buttonValueOpen]: this.state.showPopup
                     })} disabled={this.props.disabled} style={style} data-test="ring-select__button ring-select__focus">
                 {this._getAvatar()}
-                {this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()}
+                {this._getPlaceholder()}
               </Button>
               {iconsNode}
             </div>
@@ -814,7 +823,7 @@ export default class Select extends Component {
                 return (<div className={classes} ref={this.nodeRef} data-test={dataTests('ring-select', dataTest)}>
             {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
             <Anchor {...ariaProps} id={this.props.id} onClick={this._clickHandler} data-test="ring-select__focus" disabled={this.props.disabled} active={this.state.showPopup}>
-              {this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()}
+              {this._getPlaceholder()}
             </Anchor>
             {this._renderPopup()}
           </div>);
@@ -832,7 +841,7 @@ export default class Select extends Component {
                                 id: this.props.id,
                                 onClick: this._clickHandler,
                                 disabled: this.props.disabled,
-                                children: this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString(),
+                                children: this._getPlaceholder(),
                                 'data-test': 'ring-select_focus'
                             },
                             popup: this._renderPopup()

package/dist/date-picker/date-input.js

@@ -22,6 +22,7 @@ import '../_helpers/button__classes.js';
 import '../global/get-uid.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 import 'date-fns/add';
 
 class DateInput extends React.PureComponent {

package/dist/date-picker/date-picker.js

@@ -83,6 +83,7 @@ import '@jetbrains/icons/close-12px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 
 const PopupComponent = _ref => {
   let {

package/dist/date-picker/date-popup.js

@@ -30,6 +30,7 @@ import '../_helpers/button__classes.js';
 import '../global/get-uid.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 import 'date-fns/add';
 import 'date-fns/addMonths';
 import 'date-fns/getDay';

package/dist/editable-heading/editable-heading.js

@@ -24,6 +24,7 @@ import '../_helpers/button__classes.js';
 import '@jetbrains/icons/close-12px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
+import '../input/input-label.js';
 import '../shortcuts/core.js';
 import 'combokeys';
 import '../global/sniffer.js';

package/dist/input/input-label.d.ts

@@ -0,0 +1,10 @@
+import { PureComponent, ReactNode } from 'react';
+interface InputLabelProps {
+    htmlFor?: string;
+    disabled?: boolean;
+    label: ReactNode;
+}
+export declare class InputLabel extends PureComponent<InputLabelProps> {
+    render(): JSX.Element;
+}
+export default InputLabel;

package/dist/input/input-label.js

@@ -0,0 +1,27 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { m as modules_88cfaf40 } from '../_helpers/input.js';
+
+class InputLabel extends PureComponent {
+  render() {
+    const {
+      htmlFor,
+      label,
+      disabled
+    } = this.props;
+    return /*#__PURE__*/React.createElement("label", {
+      htmlFor: htmlFor,
+      className: classNames(modules_88cfaf40.label, {
+        [modules_88cfaf40.disabledLabel]: disabled
+      })
+    }, label);
+  }
+}
+InputLabel.propTypes = {
+  label: PropTypes.node,
+  disabled: PropTypes.bool,
+  id: PropTypes.string
+};
+
+export { InputLabel, InputLabel as default };

package/dist/input/input.js

@@ -10,6 +10,7 @@ import Icon from '../icon/icon.js';
 import composeRefs from '../global/composeRefs.js';
 import { ControlsHeightContext } from '../global/controls-height.js';
 import { m as modules_88cfaf40 } from '../_helpers/input.js';
+import { InputLabel } from './input-label.js';
 import 'focus-visible';
 import '@jetbrains/icons/chevron-10px';
 import '../link/clickableLink.js';
@@ -150,12 +151,11 @@ class Input extends PureComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: classes,
       "data-test": "ring-input"
-    }, label && /*#__PURE__*/React.createElement("label", {
+    }, label && /*#__PURE__*/React.createElement(InputLabel, {
       htmlFor: this.getId(),
-      className: classNames(modules_88cfaf40.label, {
-        [modules_88cfaf40.disabledLabel]: disabled
-      })
-    }, label), /*#__PURE__*/React.createElement("div", {
+      disabled: disabled,
+      label: label
+    }), /*#__PURE__*/React.createElement("div", {
       className: modules_88cfaf40.container
     }, icon && /*#__PURE__*/React.createElement(Icon, {
       glyph: icon,

package/dist/pager/pager.js

@@ -72,6 +72,7 @@ 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';
 import '../global/react-render-adapter.js';
 import '../global/fuzzy-highlight.js';

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

@@ -78,6 +78,7 @@ 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';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';

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

@@ -71,6 +71,7 @@ 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;
 const ngModelStateField = 'query';
@@ -860,7 +861,8 @@ class QueryAssist extends Component {
       onMouseUp: this.trackPopupMouseState,
       onSelect: item => this.handleComplete(item)
     }), glass && huge && /*#__PURE__*/React.createElement("div", {
-      className: modules_da7ab055.rightSearchButton
+      className: modules_da7ab055.rightSearchButton,
+      "data-test": "query-assist-search-button"
     }, /*#__PURE__*/React.createElement(Icon, {
       glyph: searchIcon,
       className: modules_da7ab055.rightSearchIcon,

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

@@ -75,6 +75,7 @@ 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';
 
 var queryAssistNg = angularComponentFactory(QueryAssist, 'QueryAssist').name;

package/dist/select/select.d.ts

@@ -236,6 +236,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     clear: (event?: Event | SyntheticEvent) => boolean;
     _selectionIsEmpty(): boolean;
     private _getLabel;
+    private _getPlaceholder;
     _getSelectedString(): string | null;
     private _getIcons;
     private _getAvatar;

package/dist/select/select.js

@@ -10,6 +10,7 @@ import Avatar, { Size as Size$1 } from '../avatar/avatar.js';
 import Popup from '../popup/popup.js';
 import List, { ActiveItemContext } from '../list/list.js';
 import { Size, Input } from '../input/input.js';
+import { InputLabel } from '../input/input-label.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
 import { Button } from '../button/button.js';
 import joinDataTestAttributes from '../global/data-tests.js';
@@ -830,6 +831,13 @@ class Select extends Component {
     var _ref2, _this$props$label;
     return (_ref2 = (_this$props$label = this.props.label) !== null && _this$props$label !== void 0 ? _this$props$label : this.props.selectedLabel) !== null && _ref2 !== void 0 ? _ref2 : 'Select an option';
   }
+  _getPlaceholder() {
+    if (this._selectionIsEmpty()) {
+      var _this$props$label2;
+      return (_this$props$label2 = this.props.label) !== null && _this$props$label2 !== void 0 ? _this$props$label2 : 'Select an option';
+    }
+    return this._getSelectedString();
+  }
   _getSelectedString() {
     if (Array.isArray(this.state.selected)) {
       const labels = [];
@@ -911,8 +919,11 @@ class Select extends Component {
     };
   }
   renderSelect(activeItemId) {
-    var _this$props$label2, _this$props$label3, _this$_popup5, _this$_popup5$list;
+    var _this$props$label3, _this$props$label4, _this$_popup5, _this$_popup5$list;
     const dataTest = this.props['data-test'];
+    const {
+      selectedLabel
+    } = this.props;
     const {
       shortcutsEnabled
     } = this.state;
@@ -928,9 +939,9 @@ class Select extends Component {
     const ariaProps = this.state.showPopup ? {
       'aria-owns': this.listId,
       'aria-activedescendant': activeItemId,
-      'aria-label': (_this$props$label2 = this.props.label) !== null && _this$props$label2 !== void 0 ? _this$props$label2 : undefined
-    } : {
       'aria-label': (_this$props$label3 = this.props.label) !== null && _this$props$label3 !== void 0 ? _this$props$label3 : undefined
+    } : {
+      'aria-label': (_this$props$label4 = this.props.label) !== null && _this$props$label4 !== void 0 ? _this$props$label4 : undefined
     };
     switch (this.props.type) {
       case Type.INPUT_WITHOUT_CONTROLS:
@@ -971,7 +982,11 @@ class Select extends Component {
           ref: this.nodeRef,
           className: classNames(classes, modules_9d0de074.buttonMode),
           "data-test": joinDataTestAttributes('ring-select', dataTest)
-        }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
+        }, selectedLabel && /*#__PURE__*/React.createElement(InputLabel, {
+          label: selectedLabel,
+          disabled: this.props.disabled,
+          htmlFor: this.props.id
+        }), shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
           map: this.getShortcutsMap(),
           scope: this.shortcutsScope
         }), /*#__PURE__*/React.createElement("div", {
@@ -986,7 +1001,7 @@ class Select extends Component {
           disabled: this.props.disabled,
           style: style,
           "data-test": "ring-select__button ring-select__focus"
-        }), this._getAvatar(), this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()), iconsNode), this._renderPopup());
+        }), this._getAvatar(), this._getPlaceholder()), iconsNode), this._renderPopup());
       case Type.INLINE:
         return /*#__PURE__*/React.createElement("div", {
           className: classes,
@@ -1001,7 +1016,7 @@ class Select extends Component {
           "data-test": "ring-select__focus",
           disabled: this.props.disabled,
           active: this.state.showPopup
-        }), this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()), this._renderPopup());
+        }), this._getPlaceholder()), this._renderPopup());
       default:
         if (this.props.customAnchor) {
           return /*#__PURE__*/React.createElement(Fragment, null, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
@@ -1017,7 +1032,7 @@ class Select extends Component {
               id: this.props.id,
               onClick: this._clickHandler,
               disabled: this.props.disabled,
-              children: this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString(),
+              children: this._getPlaceholder(),
               'data-test': 'ring-select_focus'
             },
             popup: this._renderPopup()

package/dist/select/select__filter.js

@@ -23,6 +23,7 @@ import '../_helpers/button__classes.js';
 import '../global/get-uid.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 import 'sniffr';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';

package/dist/select/select__popup.js

@@ -68,6 +68,7 @@ import '../input/input.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 
 const FILTER_HEIGHT = 35;
 const TOOLBAR_HEIGHT = 49;

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

@@ -70,6 +70,7 @@ 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';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';

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

@@ -67,6 +67,7 @@ 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';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';

package/dist/table-legacy-ng/table-legacy-ng.js

@@ -90,6 +90,7 @@ 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';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';

package/dist/table-legacy-ng/table-legacy-ng__pager.js

@@ -80,6 +80,7 @@ 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';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';

package/dist/tags-input/tags-input.js

@@ -66,6 +66,7 @@ import '../list/list__title.js';
 import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
+import '../input/input-label.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';
 import '@jetbrains/icons/search';

package/dist/tags-input-ng/tags-input-ng.js

@@ -71,6 +71,7 @@ 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';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "5.0.50",
+  "version": "5.0.52",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -259,5 +259,5 @@
     "node": ">=14.0",
     "npm": ">=6.0.0"
   },
-  "gitHead": "f9a86300840ce2acfa803bef4d7b2d554c481a9c"
+  "gitHead": "497b3b0144654bd77fb90abcee949fcb6979501c"
 }