@jetbrains/ring-ui 5.0.64 → 5.0.65

package/components/editable-heading/editable-heading.css

@@ -36,6 +36,10 @@
   &:focus {
     outline: 1px solid var(--ring-border-hover-color);
   }
+
+  @nest .disabled &:focus {
+    outline: none;
+  }
 }
 
 .heading {

package/components/select/select.d.ts

@@ -94,6 +94,7 @@ export interface BaseSelectProps<T = unknown> {
     left?: number | undefined;
     renderOptimization?: boolean | undefined;
     ringPopupTarget?: string | null | undefined;
+    error?: ReactNode | null | undefined;
     hint?: ReactNode;
     add?: Add | null | undefined;
     compact?: boolean | null | undefined;

package/components/select/select.js

@@ -19,6 +19,7 @@ import fuzzyHighlight from '../global/fuzzy-highlight';
 import memoize from '../global/memoize';
 import { isArray } from '../global/typescript-utils';
 import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
+import inputStyles from '../input/input.css';
 import SelectPopup from './select__popup';
 import styles from './select.css';
 /**
@@ -793,16 +794,23 @@ export default class Select extends Component {
             };
         switch (this.props.type) {
             case Type.INPUT_WITHOUT_CONTROLS:
-            case Type.INPUT: return (<div ref={this.nodeRef} className={classNames(classes, styles.inputMode)} data-test={dataTests('ring-select', dataTest)}>
-          {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
-          <Input {...ariaProps} height={this.props.height} autoComplete="off" id={this.props.id} onClick={this._clickHandler} inputRef={this.filterRef} disabled={this.props.disabled} value={this.state.filterValue} borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS} style={style} size={Size.FULL} onChange={this._filterChangeHandler} onFocus={this._focusHandler} onBlur={this._blurHandler} label={this.props.type === Type.INPUT ? this._getLabel() : null} placeholder={this.props.inputPlaceholder} onKeyDown={this.props.onKeyDown} data-test="ring-select__focus" enableShortcuts={shortcutsEnabled
+            case Type.INPUT: return (<>
+          <div ref={this.nodeRef} className={classNames(classes, styles.inputMode)} data-test={dataTests('ring-select', dataTest)}>
+            {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
+            <Input {...ariaProps} height={this.props.height} autoComplete="off" id={this.props.id} onClick={this._clickHandler} inputRef={this.filterRef} disabled={this.props.disabled} value={this.state.filterValue} borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS} style={style} size={Size.FULL} onChange={this._filterChangeHandler} onFocus={this._focusHandler} onBlur={this._blurHandler} 
+            // Input with error style without description
+            error={this.props.error != null ? '' : null} label={this.props.type === Type.INPUT ? this._getLabel() : null} placeholder={this.props.inputPlaceholder} onKeyDown={this.props.onKeyDown} data-test="ring-select__focus" enableShortcuts={shortcutsEnabled
                     ? Object.keys({
                         ...this.getShortcutsMap(),
                         ...this._popup?.list?.shortcutsMap
                     })
                     : undefined} afterInput={this.props.type === Type.INPUT && iconsNode}/>
-          {this._renderPopup()}
-        </div>);
+            {this._renderPopup()}
+          </div>
+          {this.props.error && (<div className={classNames(inputStyles.errorText, inputStyles[`size${this.props.size}`])}>
+              {this.props.error}
+            </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}/>)}
@@ -898,6 +906,7 @@ Select.propTypes = {
     left: PropTypes.number,
     renderOptimization: PropTypes.bool,
     ringPopupTarget: PropTypes.string,
+    error: PropTypes.bool,
     hint: List.ListHint.propTypes.label,
     add: PropTypes.object,
     type: PropTypes.oneOf(Object.values(Type)),

package/dist/select/select.d.ts

@@ -94,6 +94,7 @@ export interface BaseSelectProps<T = unknown> {
     left?: number | undefined;
     renderOptimization?: boolean | undefined;
     ringPopupTarget?: string | null | undefined;
+    error?: ReactNode | null | undefined;
     hint?: ReactNode;
     add?: Add | null | undefined;
     compact?: boolean | null | undefined;

package/dist/select/select.js

@@ -20,6 +20,7 @@ import fuzzyHighlight from '../global/fuzzy-highlight.js';
 import memoize from '../global/memoize.js';
 import { isArray } from '../global/typescript-utils.js';
 import { ControlsHeight, ControlsHeightContext } from '../global/controls-height.js';
+import { m as modules_88cfaf40 } from '../_helpers/input.js';
 import SelectPopup from './select__popup.js';
 import { A as Anchor } from '../_helpers/anchor.js';
 import '@jetbrains/icons/chevron-10px';
@@ -67,7 +68,6 @@ import '../list/list__hint.js';
 import '../list/consts.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
-import '../_helpers/input.js';
 import '../global/react-render-adapter.js';
 import '@jetbrains/icons/search';
 import '../loader-inline/loader-inline.js';
@@ -944,7 +944,7 @@ class Select extends Component {
     switch (this.props.type) {
       case Type.INPUT_WITHOUT_CONTROLS:
       case Type.INPUT:
-        return /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
           ref: this.nodeRef,
           className: classNames(classes, modules_9d0de074.inputMode),
           "data-test": joinDataTestAttributes('ring-select', dataTest)
@@ -964,7 +964,10 @@ class Select extends Component {
           size: Size.FULL,
           onChange: this._filterChangeHandler,
           onFocus: this._focusHandler,
-          onBlur: this._blurHandler,
+          onBlur: this._blurHandler
+          // Input with error style without description
+          ,
+          error: this.props.error != null ? '' : null,
           label: this.props.type === Type.INPUT ? this._getLabel() : null,
           placeholder: this.props.inputPlaceholder,
           onKeyDown: this.props.onKeyDown,
@@ -974,7 +977,9 @@ class Select extends Component {
             ...((_this$_popup5 = this._popup) === null || _this$_popup5 === void 0 ? void 0 : (_this$_popup5$list = _this$_popup5.list) === null || _this$_popup5$list === void 0 ? void 0 : _this$_popup5$list.shortcutsMap)
           }) : undefined,
           afterInput: this.props.type === Type.INPUT && iconsNode
-        })), this._renderPopup());
+        })), this._renderPopup()), this.props.error && /*#__PURE__*/React.createElement("div", {
+          className: classNames(modules_88cfaf40.errorText, modules_88cfaf40[`size${this.props.size}`])
+        }, this.props.error));
       case Type.BUTTON:
         return /*#__PURE__*/React.createElement("div", {
           ref: this.nodeRef,
@@ -1129,6 +1134,7 @@ Select.propTypes = {
   left: PropTypes.number,
   renderOptimization: PropTypes.bool,
   ringPopupTarget: PropTypes.string,
+  error: PropTypes.bool,
   hint: List.ListHint.propTypes.label,
   add: PropTypes.object,
   type: PropTypes.oneOf(Object.values(Type)),