@jetbrains/ring-ui 5.0.153 → 5.0.155

package/components/select/select.d.ts

@@ -79,11 +79,13 @@ 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;
     dir: 'ltr' | 'rtl';
     renderBottomToolbar?: () => ReactNode;
+    renderTopToolbar?: () => ReactNode;
     height?: ControlsHeight | undefined;
     targetElement?: HTMLElement | null | undefined;
     className?: string | null | undefined;
@@ -183,6 +185,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;
@@ -219,6 +222,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     _hidePopup(tryFocusAnchor?: boolean): void;
     addHandler: () => void;
     getToolbar(): React.JSX.Element | null;
+    getTopbar(): React.ReactNode;
     getLowerCaseLabel: typeof getLowerCaseLabel;
     doesLabelMatch: typeof doesLabelMatch;
     getFilterFn(): FilterFn<T>;

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,
@@ -432,8 +433,8 @@ export default class Select extends Component {
                 else if (!shownData.length) {
                     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}/>);
+                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
+                 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>);
     }
@@ -485,6 +486,9 @@ export default class Select extends Component {
         {hint && (<List.ListHint label={hint} data-test="ring-select-toolbar-hint"/>)}
       </div>);
     }
+    getTopbar() {
+        return this.props.renderTopToolbar?.();
+    }
     getLowerCaseLabel = getLowerCaseLabel;
     doesLabelMatch = doesLabelMatch;
     getFilterFn() {
@@ -893,6 +897,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

@@ -38,6 +38,7 @@ export interface SelectPopupProps<T = unknown> {
     data: readonly ListDataItem<T>[];
     activeIndex: number | null;
     toolbar: ReactNode;
+    topbar: ReactNode;
     filter: boolean | Filter<T>;
     message: string | null;
     anchorElement: HTMLElement | null;
@@ -46,6 +47,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

@@ -34,6 +34,7 @@ export default class SelectPopup extends PureComponent {
         data: [],
         activeIndex: null,
         toolbar: null,
+        topbar: null,
         filter: false,
         multiple: false,
         message: null,
@@ -43,6 +44,7 @@ export default class SelectPopup extends PureComponent {
         loading: false,
         onSelect: noop,
         onCloseAttempt: noop,
+        onOutsideClick: noop,
         onFilter: noop,
         onClear: noop,
         onLoadMore: noop,
@@ -313,7 +315,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, topbar, 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 => {
@@ -322,11 +324,12 @@ export default class SelectPopup extends PureComponent {
                     multiple.selectAll && this.getSelectAll();
                 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}>
+                const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar || topbar;
+                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}/>)}
+                {topbar}
                 {/* Add empty div to prevent the change of List position in DOM*/}
                 {hidden ? <div /> : filterWithTags}
                 {selectAll}
@@ -370,6 +373,7 @@ SelectPopup.propTypes = {
     loading: PropTypes.bool,
     onClear: PropTypes.func,
     onCloseAttempt: PropTypes.func,
+    onOutsideClick: PropTypes.func,
     onEmptyPopupEnter: PropTypes.func,
     onFilter: PropTypes.func,
     onLoadMore: PropTypes.func,
@@ -381,5 +385,6 @@ SelectPopup.propTypes = {
     style: PropTypes.object,
     tags: PropTypes.object,
     toolbar: PropTypes.node,
+    topbar: PropTypes.node,
     top: PropTypes.number
 };

package/dist/select/select.d.ts

@@ -79,11 +79,13 @@ 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;
     dir: 'ltr' | 'rtl';
     renderBottomToolbar?: () => ReactNode;
+    renderTopToolbar?: () => ReactNode;
     height?: ControlsHeight | undefined;
     targetElement?: HTMLElement | null | undefined;
     className?: string | null | undefined;
@@ -183,6 +185,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;
@@ -219,6 +222,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     _hidePopup(tryFocusAnchor?: boolean): void;
     addHandler: () => void;
     getToolbar(): React.JSX.Element | null;
+    getTopbar(): React.ReactNode;
     getLowerCaseLabel: typeof getLowerCaseLabel;
     doesLabelMatch: typeof doesLabelMatch;
     getFilterFn(): FilterFn<T>;

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,
@@ -529,6 +530,7 @@ class Select extends Component {
         data: _shownData,
         message: message,
         toolbar: showPopup && this.getToolbar(),
+        topbar: this.getTopbar(),
         loading: this.props.loading,
         activeIndex: this.state.selectedIndex,
         hidden: !showPopup,
@@ -546,6 +548,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,
@@ -625,6 +628,9 @@ class Select extends Component {
       "data-test": "ring-select-toolbar-hint"
     }));
   }
+  getTopbar() {
+    return this.props.renderTopToolbar?.();
+  }
   getLowerCaseLabel = getLowerCaseLabel;
   doesLabelMatch = doesLabelMatch;
   getFilterFn() {
@@ -1122,6 +1128,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

@@ -38,6 +38,7 @@ export interface SelectPopupProps<T = unknown> {
     data: readonly ListDataItem<T>[];
     activeIndex: number | null;
     toolbar: ReactNode;
+    topbar: ReactNode;
     filter: boolean | Filter<T>;
     message: string | null;
     anchorElement: HTMLElement | null;
@@ -46,6 +47,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

@@ -81,6 +81,7 @@ class SelectPopup extends PureComponent {
     data: [],
     activeIndex: null,
     toolbar: null,
+    topbar: null,
     filter: false,
     multiple: false,
     message: null,
@@ -90,6 +91,7 @@ class SelectPopup extends PureComponent {
     loading: false,
     onSelect: noop,
     onCloseAttempt: noop,
+    onOutsideClick: noop,
     onFilter: noop,
     onClear: noop,
     onLoadMore: noop,
@@ -402,6 +404,7 @@ class SelectPopup extends PureComponent {
   render() {
     const {
       toolbar,
+      topbar,
       className,
       multiple,
       hidden,
@@ -409,6 +412,7 @@ class SelectPopup extends PureComponent {
       anchorElement,
       minWidth,
       onCloseAttempt,
+      onOutsideClick,
       directions,
       top,
       left,
@@ -422,7 +426,7 @@ class SelectPopup extends PureComponent {
       const selectAll = multiple && typeof multiple === 'object' && !multiple.limit && multiple.selectAll && this.getSelectAll();
       const list = this.getList(this.props.ringPopupTarget || ringPopupTarget);
       const bottomLine = this.getBottomLine();
-      const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar;
+      const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar || topbar;
       return /*#__PURE__*/React.createElement(Popup, {
         trapFocus: false,
         ref: this.popupRef,
@@ -433,6 +437,7 @@ class SelectPopup extends PureComponent {
         anchorElement: anchorElement,
         minWidth: minWidth,
         onCloseAttempt: onCloseAttempt,
+        onOutsideClick: onOutsideClick,
         directions: directions,
         top: top,
         left: left,
@@ -445,7 +450,7 @@ class SelectPopup extends PureComponent {
       }, !hidden && filter && /*#__PURE__*/React.createElement(Shortcuts, {
         map: this.shortcutsMap,
         scope: this.shortcutsScope
-      }), hidden ? /*#__PURE__*/React.createElement("div", null) : filterWithTags, selectAll, list, bottomLine, toolbar));
+      }), topbar, hidden ? /*#__PURE__*/React.createElement("div", null) : filterWithTags, selectAll, list, bottomLine, toolbar));
     });
   }
 }
@@ -480,6 +485,7 @@ SelectPopup.propTypes = {
   loading: PropTypes.bool,
   onClear: PropTypes.func,
   onCloseAttempt: PropTypes.func,
+  onOutsideClick: PropTypes.func,
   onEmptyPopupEnter: PropTypes.func,
   onFilter: PropTypes.func,
   onLoadMore: PropTypes.func,
@@ -491,6 +497,7 @@ SelectPopup.propTypes = {
   style: PropTypes.object,
   tags: PropTypes.object,
   toolbar: PropTypes.node,
+  topbar: PropTypes.node,
   top: PropTypes.number
 };
 

package/package.json

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