@jetbrains/ring-ui 5.0.69 → 5.0.71

package/components/select/select.css

@@ -40,21 +40,14 @@
 
 .icons {
   position: absolute;
-  top: -3px;
+  top: 0;
   right: 5px;
+  bottom: 0;
 
   transition: color var(--ring-ease);
 
   color: var(--ring-icon-secondary-color);
 
-  line-height: calc(unit * 4);
-
-  & :global(.ring-loader_inline) {
-    top: 2px;
-
-    margin-right: 2px;
-  }
-
   @nest .inputMode & {
     font-size: var(--ring-font-size);
   }
@@ -235,7 +228,3 @@
 
   color: inherit;
 }
-
-.heightS .icons {
-  top: -5px;
-}

package/components/select/select.js

@@ -740,14 +740,15 @@ export default class Select extends Component {
         const { selected } = this.state;
         const { disabled, clear, hideArrow } = this.props;
         const icons = [];
+        const height = this.props.height || this.context;
         if (!Array.isArray(selected) && selected?.icon) {
             icons.push(<button title="Toggle options popup" type="button" className={styles.selectedIcon} key="selected" disabled={this.props.disabled} onClick={this._clickHandler} style={{ backgroundImage: `url(${selected.icon})` }}/>);
         }
         if (clear && !disabled && !this._selectionIsEmpty()) {
-            icons.push(<Button title="Clear selection" data-test="ring-clear-select" className={styles.clearIcon} key="close" disabled={this.props.disabled} onClick={this.clear} icon={closeIcon}/>);
+            icons.push(<Button title="Clear selection" data-test="ring-clear-select" className={styles.clearIcon} key="close" disabled={this.props.disabled} onClick={this.clear} height={height} icon={closeIcon}/>);
         }
         if (!hideArrow) {
-            icons.push(<Button title="Toggle options popup" className={styles.chevron} iconClassName={styles.chevronIcon} icon={chevronDownIcon} key="hide" disabled={this.props.disabled} onClick={this._clickHandler}/>);
+            icons.push(<Button title="Toggle options popup" className={styles.chevron} iconClassName={styles.chevronIcon} icon={chevronDownIcon} key="hide" disabled={this.props.disabled} height={height} onClick={this._clickHandler}/>);
         }
         return icons;
     }
@@ -782,7 +783,7 @@ export default class Select extends Component {
         });
         const icons = this._getIcons();
         const style = getStyle(icons.length);
-        const iconsNode = <span className={styles.icons}>{icons}</span>;
+        const iconsNode = <div className={styles.icons}>{icons}</div>;
         const ariaProps = this.state.showPopup
             ? {
                 'aria-owns': this.listId,
@@ -829,7 +830,7 @@ export default class Select extends Component {
             case Type.INLINE:
                 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}>
+            <Anchor {...ariaProps} className={this.props.buttonClassName ?? undefined} id={this.props.id} onClick={this._clickHandler} data-test="ring-select__focus" disabled={this.props.disabled} active={this.state.showPopup}>
               {this._getPlaceholder()}
             </Anchor>
             {this._renderPopup()}

package/dist/select/select.js

@@ -857,6 +857,7 @@ class Select extends Component {
       hideArrow
     } = this.props;
     const icons = [];
+    const height = this.props.height || this.context;
     if (!Array.isArray(selected) && selected !== null && selected !== void 0 && selected.icon) {
       icons.push( /*#__PURE__*/React.createElement("button", {
         title: "Toggle options popup",
@@ -878,6 +879,7 @@ class Select extends Component {
         key: "close",
         disabled: this.props.disabled,
         onClick: this.clear,
+        height: height,
         icon: closeIcon
       }));
     }
@@ -889,6 +891,7 @@ class Select extends Component {
         icon: chevronDownIcon,
         key: "hide",
         disabled: this.props.disabled,
+        height: height,
         onClick: this._clickHandler
       }));
     }
@@ -917,7 +920,7 @@ class Select extends Component {
     };
   }
   renderSelect(activeItemId) {
-    var _this$props$label3, _this$props$label4, _this$_popup5, _this$_popup5$list;
+    var _this$props$label3, _this$props$label4, _this$_popup5, _this$_popup5$list, _this$props$buttonCla;
     const dataTest = this.props['data-test'];
     const {
       selectedLabel
@@ -931,7 +934,7 @@ class Select extends Component {
     });
     const icons = this._getIcons();
     const style = getStyle(icons.length);
-    const iconsNode = /*#__PURE__*/React.createElement("span", {
+    const iconsNode = /*#__PURE__*/React.createElement("div", {
       className: modules_9d0de074.icons
     }, icons);
     const ariaProps = this.state.showPopup ? {
@@ -1014,6 +1017,7 @@ class Select extends Component {
           map: this.getShortcutsMap(),
           scope: this.shortcutsScope
         }), /*#__PURE__*/React.createElement(Anchor, _extends({}, ariaProps, {
+          className: (_this$props$buttonCla = this.props.buttonClassName) !== null && _this$props$buttonCla !== void 0 ? _this$props$buttonCla : undefined,
           id: this.props.id,
           onClick: this._clickHandler,
           "data-test": "ring-select__focus",