@jetbrains/ring-ui 5.0.153 → 5.0.154

package/components/select/select.d.ts

@@ -79,6 +79,7 @@ export interface BaseSelectProps<T = unknown> {
     onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onSelect: (selected: SelectItem<T> | null, event?: Event | SyntheticEvent) => void;
     onDeselect: (selected: SelectItem<T> | null) => void;
+    onOutsideClick: (e: PointerEvent) => void;
     onAdd: (value: string) => void;
     onDone: () => void;
     onReset: () => void;
@@ -183,6 +184,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
         onKeyDown: typeof noop;
         onSelect: typeof noop;
         onDeselect: typeof noop;
+        onOutsideClick: typeof noop;
         onChange: typeof noop;
         onAdd: typeof noop;
         onDone: typeof noop;

package/components/select/select.js

@@ -214,6 +214,7 @@ export default class Select extends Component {
         onKeyDown: noop,
         onSelect: noop,
         onDeselect: noop,
+        onOutsideClick: noop,
         onChange: noop,
         onAdd: noop,
         onDone: noop,
@@ -433,7 +434,7 @@ export default class Select extends Component {
                     message = this.props.notFoundMessage ?? translate('noOptionsFound');
                 }
                 return (<SelectPopup data={_shownData} message={message} toolbar={showPopup && this.getToolbar()} 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
-                 multiple={this.props.multiple} filterValue={this.state.filterValue} anchorElement={anchorElement} onCloseAttempt={this._onCloseAttempt} 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}/>);
+                 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>);
     }
@@ -893,6 +894,7 @@ Select.propTypes = {
     onBeforeOpen: PropTypes.func,
     onSelect: PropTypes.func,
     onDeselect: PropTypes.func,
+    onOutsideClick: PropTypes.func,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     onKeyDown: PropTypes.func,

package/components/select/select__popup.d.ts

@@ -46,6 +46,7 @@ export interface SelectPopupProps<T = unknown> {
     loading: boolean;
     onSelect: (item: ListDataItem<T>, event: Event, params?: SelectHandlerParams) => void;
     onCloseAttempt: (e?: Event | SyntheticEvent, isEsc?: boolean | undefined) => void;
+    onOutsideClick: (e: PointerEvent) => void;
     onFilter: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onClear: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onLoadMore: () => void;

package/components/select/select__popup.js

@@ -43,6 +43,7 @@ export default class SelectPopup extends PureComponent {
         loading: false,
         onSelect: noop,
         onCloseAttempt: noop,
+        onOutsideClick: noop,
         onFilter: noop,
         onClear: noop,
         onLoadMore: noop,
@@ -313,7 +314,7 @@ export default class SelectPopup extends PureComponent {
         right: event => this.handleNavigation(event)
     };
     render() {
-        const { toolbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, directions, top, left, style, dir, filter } = this.props;
+        const { toolbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, onOutsideClick, directions, top, left, style, dir, filter } = this.props;
         const classes = classNames(styles.popup, className);
         return (<PopupTargetContext.Consumer>
         {ringPopupTarget => {
@@ -323,7 +324,7 @@ export default class SelectPopup extends PureComponent {
                 const list = this.getList(this.props.ringPopupTarget || ringPopupTarget);
                 const bottomLine = this.getBottomLine();
                 const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar;
-                return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} directions={directions} top={top} left={left} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style}>
+                return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} onOutsideClick={onOutsideClick} directions={directions} top={top} left={left} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style}>
               <div dir={dir}>
                 {!hidden && filter &&
                         (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
@@ -370,6 +371,7 @@ SelectPopup.propTypes = {
     loading: PropTypes.bool,
     onClear: PropTypes.func,
     onCloseAttempt: PropTypes.func,
+    onOutsideClick: PropTypes.func,
     onEmptyPopupEnter: PropTypes.func,
     onFilter: PropTypes.func,
     onLoadMore: PropTypes.func,

package/dist/select/select.d.ts

@@ -79,6 +79,7 @@ export interface BaseSelectProps<T = unknown> {
     onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onSelect: (selected: SelectItem<T> | null, event?: Event | SyntheticEvent) => void;
     onDeselect: (selected: SelectItem<T> | null) => void;
+    onOutsideClick: (e: PointerEvent) => void;
     onAdd: (value: string) => void;
     onDone: () => void;
     onReset: () => void;
@@ -183,6 +184,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
         onKeyDown: typeof noop;
         onSelect: typeof noop;
         onDeselect: typeof noop;
+        onOutsideClick: typeof noop;
         onChange: typeof noop;
         onAdd: typeof noop;
         onDone: typeof noop;

package/dist/select/select.js

@@ -266,6 +266,7 @@ class Select extends Component {
     onKeyDown: noop,
     onSelect: noop,
     onDeselect: noop,
+    onOutsideClick: noop,
     onChange: noop,
     onAdd: noop,
     onDone: noop,
@@ -546,6 +547,7 @@ class Select extends Component {
         filterValue: this.state.filterValue,
         anchorElement: anchorElement,
         onCloseAttempt: this._onCloseAttempt,
+        onOutsideClick: this.props.onOutsideClick,
         onSelect: this._listSelectHandler,
         onSelectAll: this._listSelectAllHandler,
         onFilter: this._filterChangeHandler,
@@ -1122,6 +1124,7 @@ Select.propTypes = {
   onBeforeOpen: PropTypes.func,
   onSelect: PropTypes.func,
   onDeselect: PropTypes.func,
+  onOutsideClick: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   onKeyDown: PropTypes.func,

package/dist/select/select__popup.d.ts

@@ -46,6 +46,7 @@ export interface SelectPopupProps<T = unknown> {
     loading: boolean;
     onSelect: (item: ListDataItem<T>, event: Event, params?: SelectHandlerParams) => void;
     onCloseAttempt: (e?: Event | SyntheticEvent, isEsc?: boolean | undefined) => void;
+    onOutsideClick: (e: PointerEvent) => void;
     onFilter: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onClear: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onLoadMore: () => void;

package/dist/select/select__popup.js

@@ -90,6 +90,7 @@ class SelectPopup extends PureComponent {
     loading: false,
     onSelect: noop,
     onCloseAttempt: noop,
+    onOutsideClick: noop,
     onFilter: noop,
     onClear: noop,
     onLoadMore: noop,
@@ -409,6 +410,7 @@ class SelectPopup extends PureComponent {
       anchorElement,
       minWidth,
       onCloseAttempt,
+      onOutsideClick,
       directions,
       top,
       left,
@@ -433,6 +435,7 @@ class SelectPopup extends PureComponent {
         anchorElement: anchorElement,
         minWidth: minWidth,
         onCloseAttempt: onCloseAttempt,
+        onOutsideClick: onOutsideClick,
         directions: directions,
         top: top,
         left: left,
@@ -480,6 +483,7 @@ SelectPopup.propTypes = {
   loading: PropTypes.bool,
   onClear: PropTypes.func,
   onCloseAttempt: PropTypes.func,
+  onOutsideClick: PropTypes.func,
   onEmptyPopupEnter: PropTypes.func,
   onFilter: PropTypes.func,
   onLoadMore: PropTypes.func,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "5.0.153",
+  "version": "5.0.154",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",