@jetbrains/ring-ui 5.0.162 → 5.0.163

package/components/select/select.d.ts

@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes, Component, CSSProperties, HTMLAttributes, ReactNode, Ref, RefCallback, SyntheticEvent } from 'react';
+import React, { ButtonHTMLAttributes, Component, ComponentType, CSSProperties, HTMLAttributes, ReactNode, Ref, RefCallback, SyntheticEvent } from 'react';
 import { SelectHandlerParams } from '../list/list';
 import { Size } from '../input/input';
 import { LabelType } from '../control-label/control-label';
@@ -52,7 +52,8 @@ export type CustomAnchor = ((props: CustomAnchorProps) => ReactNode);
 export interface BaseSelectProps<T = unknown> {
     data: readonly SelectItem<T>[];
     filter: boolean | Filter<T>;
-    filterRef: Ref<HTMLInputElement>;
+    filterIcon?: string | ComponentType | null | undefined;
+    filterRef?: Ref<HTMLInputElement>;
     clear: boolean;
     loading: boolean;
     disabled: boolean;
@@ -158,6 +159,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     static defaultProps: {
         data: never[];
         filter: boolean;
+        filterIcon: null;
         filterRef: typeof noop;
         multiple: boolean;
         clear: boolean;

package/components/select/select.js

@@ -182,6 +182,7 @@ export default class Select extends Component {
     static defaultProps = {
         data: [],
         filter: false,
+        filterIcon: null,
         filterRef: noop,
         multiple: false,
         clear: false,
@@ -437,7 +438,7 @@ export default class Select extends Component {
                     message = this.props.notFoundMessage ?? translate('noOptionsFound');
                 }
                 return (<SelectPopup data={_shownData} message={message} toolbar={showPopup && this.getToolbar()} topbar={this.getTopbar()} loading={this.props.loading} activeIndex={this.state.selectedIndex} hidden={!showPopup} ref={this.popupRef} maxHeight={this.props.maxHeight} minWidth={this.props.minWidth} directions={this.props.directions} className={this.props.popupClassName} style={this.props.popupStyle} top={this.props.top} left={this.props.left} filter={this.isInputMode() ? false : this.props.filter} // disable popup filter in INPUT mode
-                 filterRef={this.props.filterRef} multiple={this.props.multiple} filterValue={this.state.filterValue} anchorElement={anchorElement} onCloseAttempt={this._onCloseAttempt} onOutsideClick={this.props.onOutsideClick} onSelect={this._listSelectHandler} onSelectAll={this._listSelectAllHandler} onFilter={this._filterChangeHandler} onClear={this.clearFilter} onLoadMore={this.props.onLoadMore} isInputMode={this.isInputMode()} selected={this.state.selected} tags={this.props.tags} compact={this.props.compact} renderOptimization={this.props.renderOptimization} ringPopupTarget={this.props.ringPopupTarget} disableMoveOverflow={this.props.disableMoveOverflow} disableScrollToActive={this.props.disableScrollToActive} dir={this.props.dir} onEmptyPopupEnter={this.onEmptyPopupEnter} listId={this.listId}/>);
+                 filterIcon={this.props.filterIcon} filterRef={this.props.filterRef} multiple={this.props.multiple} filterValue={this.state.filterValue} anchorElement={anchorElement} onCloseAttempt={this._onCloseAttempt} onOutsideClick={this.props.onOutsideClick} onSelect={this._listSelectHandler} onSelectAll={this._listSelectAllHandler} onFilter={this._filterChangeHandler} onClear={this.clearFilter} onLoadMore={this.props.onLoadMore} isInputMode={this.isInputMode()} selected={this.state.selected} tags={this.props.tags} compact={this.props.compact} renderOptimization={this.props.renderOptimization} ringPopupTarget={this.props.ringPopupTarget} disableMoveOverflow={this.props.disableMoveOverflow} disableScrollToActive={this.props.disableScrollToActive} dir={this.props.dir} onEmptyPopupEnter={this.onEmptyPopupEnter} listId={this.listId}/>);
             }}
       </I18nContext.Consumer>);
     }
@@ -819,7 +820,7 @@ export default class Select extends Component {
                         ...this.getShortcutsMap(),
                         ...this._popup?.list?.shortcutsMap
                     })
-                    : undefined} afterInput={this.props.type === Type.INPUT && iconsNode}/>
+                    : undefined} icon={this.props.filterIcon} afterInput={this.props.type === Type.INPUT && iconsNode}/>
             {this._renderPopup()}
           </div>
           {this.props.error && (<div className={classNames(inputStyles.errorText, inputStyles[`size${this.props.size}`])}>
@@ -891,6 +892,7 @@ Select.propTypes = {
     multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
     allowAny: PropTypes.bool,
     filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+    filterIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
     filterRef: PropTypes.oneOfType([
         PropTypes.func,
         refObject(PropTypes.instanceOf(HTMLInputElement))

package/components/select/select__popup.d.ts

@@ -1,7 +1,7 @@
 /**
  * @description Displays a popup with select's options.
  */
-import React, { CSSProperties, PureComponent, ReactNode, Ref, SyntheticEvent } from 'react';
+import React, { ComponentType, CSSProperties, PureComponent, ReactNode, Ref, SyntheticEvent } from 'react';
 import PropTypes from 'prop-types';
 import { IconType } from '../icon/icon';
 import Popup from '../popup/popup';
@@ -43,6 +43,7 @@ export interface SelectPopupProps<T = unknown> {
     toolbar: ReactNode;
     topbar: ReactNode;
     filter: boolean | Filter<T>;
+    filterIcon?: string | ComponentType | null | undefined;
     filterRef?: Ref<HTMLInputElement>;
     message: string | null;
     anchorElement: HTMLElement | null;

package/components/select/select__popup.js

@@ -38,6 +38,7 @@ export default class SelectPopup extends PureComponent {
         toolbar: null,
         topbar: null,
         filter: false,
+        filterIcon: null,
         filterRef: noop,
         multiple: false,
         message: null,
@@ -183,7 +184,7 @@ export default class SelectPopup extends PureComponent {
     getFilter() {
         if (this.props.filter || this.props.tags) {
             return (<div className={styles.filterWrapper} data-test="ring-select-popup-filter">
-          {!this.props.tags && (<Icon glyph={searchIcon} className={styles.filterIcon} data-test-custom="ring-select-popup-filter-icon"/>)}
+          {!this.props.tags && (<Icon glyph={this.props.filterIcon ?? searchIcon} className={styles.filterIcon} data-test-custom="ring-select-popup-filter-icon"/>)}
           <FilterWithShortcuts rgShortcutsOptions={this.state.popupFilterShortcutsOptions} rgShortcutsMap={this.popupFilterShortcutsMap} value={this.props.filterValue} inputRef={composeRefs(this.filterRef, this.props.filterRef)} onBlur={this.popupFilterOnBlur} onFocus={this.onFilterFocus} className="ring-js-shortcuts" inputClassName={classNames({ [styles.filterWithTagsInput]: this.props.tags })} placeholder={typeof this.props.filter === 'object'
                     ? this.props.filter.placeholder
                     : undefined} height={this.props.tags ? ControlsHeight.S : ControlsHeight.L} onChange={this.props.onFilter} onClick={this.onClickHandler} onClear={this.props.tags ? undefined : this.props.onClear} data-test-custom="ring-select-popup-filter-input" listId={this.props.listId} enableShortcuts={Object.keys(this.popupFilterShortcutsMap)}/>
@@ -367,6 +368,7 @@ SelectPopup.propTypes = {
             placeholder: PropTypes.string
         })]),
     filterValue: PropTypes.string,
+    filterIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
     filterRef: PropTypes.oneOfType([
         PropTypes.func,
         refObject(PropTypes.instanceOf(HTMLInputElement))

package/dist/select/select.d.ts

@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes, Component, CSSProperties, HTMLAttributes, ReactNode, Ref, RefCallback, SyntheticEvent } from 'react';
+import React, { ButtonHTMLAttributes, Component, ComponentType, CSSProperties, HTMLAttributes, ReactNode, Ref, RefCallback, SyntheticEvent } from 'react';
 import { SelectHandlerParams } from '../list/list';
 import { Size } from '../input/input';
 import { LabelType } from '../control-label/control-label';
@@ -52,7 +52,8 @@ export type CustomAnchor = ((props: CustomAnchorProps) => ReactNode);
 export interface BaseSelectProps<T = unknown> {
     data: readonly SelectItem<T>[];
     filter: boolean | Filter<T>;
-    filterRef: Ref<HTMLInputElement>;
+    filterIcon?: string | ComponentType | null | undefined;
+    filterRef?: Ref<HTMLInputElement>;
     clear: boolean;
     loading: boolean;
     disabled: boolean;
@@ -158,6 +159,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     static defaultProps: {
         data: never[];
         filter: boolean;
+        filterIcon: null;
         filterRef: typeof noop;
         multiple: boolean;
         clear: boolean;

package/dist/select/select.js

@@ -735,6 +735,7 @@ var Select = /*#__PURE__*/function (_Component) {
           left: _this3.props.left,
           filter: _this3.isInputMode() ? false : _this3.props.filter // disable popup filter in INPUT mode
           ,
+          filterIcon: _this3.props.filterIcon,
           filterRef: _this3.props.filterRef,
           multiple: _this3.props.multiple,
           filterValue: _this3.state.filterValue,
@@ -1028,6 +1029,7 @@ var Select = /*#__PURE__*/function (_Component) {
             onKeyDown: this.props.onKeyDown,
             "data-test": "ring-select__focus",
             enableShortcuts: shortcutsEnabled ? Object.keys(_objectSpread2(_objectSpread2({}, this.getShortcutsMap()), (_this$_popup5 = this._popup) === null || _this$_popup5 === void 0 || (_this$_popup5 = _this$_popup5.list) === null || _this$_popup5 === void 0 ? void 0 : _this$_popup5.shortcutsMap)) : undefined,
+            icon: this.props.filterIcon,
             afterInput: this.props.type === Type.INPUT && iconsNode
           })), this._renderPopup()), this.props.error && /*#__PURE__*/React.createElement("div", {
             className: classNames(modules_88cfaf40.errorText, modules_88cfaf40["size".concat(this.props.size)])
@@ -1175,6 +1177,7 @@ var Select = /*#__PURE__*/function (_Component) {
 _defineProperty(Select, "defaultProps", {
   data: [],
   filter: false,
+  filterIcon: null,
   filterRef: noop,
   multiple: false,
   clear: false,
@@ -1224,6 +1227,7 @@ Select.propTypes = {
   multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   allowAny: PropTypes.bool,
   filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  filterIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   filterRef: PropTypes.oneOfType([PropTypes.func, refObject(PropTypes.instanceOf(HTMLInputElement))]),
   getInitial: PropTypes.func,
   onClose: PropTypes.func,

package/dist/select/select__popup.d.ts

@@ -1,7 +1,7 @@
 /**
  * @description Displays a popup with select's options.
  */
-import React, { CSSProperties, PureComponent, ReactNode, Ref, SyntheticEvent } from 'react';
+import React, { ComponentType, CSSProperties, PureComponent, ReactNode, Ref, SyntheticEvent } from 'react';
 import PropTypes from 'prop-types';
 import { IconType } from '../icon/icon';
 import Popup from '../popup/popup';
@@ -43,6 +43,7 @@ export interface SelectPopupProps<T = unknown> {
     toolbar: ReactNode;
     topbar: ReactNode;
     filter: boolean | Filter<T>;
+    filterIcon?: string | ComponentType | null | undefined;
     filterRef?: Ref<HTMLInputElement>;
     message: string | null;
     anchorElement: HTMLElement | null;

package/dist/select/select__popup.js

@@ -388,11 +388,12 @@ var SelectPopup = /*#__PURE__*/function (_PureComponent) {
     key: "getFilter",
     value: function getFilter() {
       if (this.props.filter || this.props.tags) {
+        var _this$props$filterIco;
         return /*#__PURE__*/React.createElement("div", {
           className: modules_b607bec2.filterWrapper,
           "data-test": "ring-select-popup-filter"
         }, !this.props.tags && /*#__PURE__*/React.createElement(Icon, {
-          glyph: searchIcon,
+          glyph: (_this$props$filterIco = this.props.filterIcon) !== null && _this$props$filterIco !== void 0 ? _this$props$filterIco : searchIcon,
           className: modules_b607bec2.filterIcon,
           "data-test-custom": "ring-select-popup-filter-icon"
         }), /*#__PURE__*/React.createElement(FilterWithShortcuts, {
@@ -558,6 +559,7 @@ _defineProperty(SelectPopup, "defaultProps", {
   toolbar: null,
   topbar: null,
   filter: false,
+  filterIcon: null,
   filterRef: noop,
   multiple: false,
   message: null,
@@ -593,6 +595,7 @@ SelectPopup.propTypes = {
     placeholder: PropTypes.string
   })]),
   filterValue: PropTypes.string,
+  filterIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   filterRef: PropTypes.oneOfType([PropTypes.func, refObject(PropTypes.instanceOf(HTMLInputElement))]),
   hidden: PropTypes.bool,
   isInputMode: PropTypes.bool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "5.0.162",
+  "version": "5.0.163",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -109,7 +109,7 @@
     "@types/react-dom": "^18.2.7",
     "@types/sinon": "^10.0.15",
     "@types/sinon-chai": "^3.2.9",
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
     "@typescript-eslint/parser": "^6.2.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.10.0",