@jetbrains/ring-ui 5.0.154 → 5.0.155

package/components/select/select.d.ts

@@ -85,6 +85,7 @@ export interface BaseSelectProps<T = unknown> {
     onReset: () => void;
     dir: 'ltr' | 'rtl';
     renderBottomToolbar?: () => ReactNode;
+    renderTopToolbar?: () => ReactNode;
     height?: ControlsHeight | undefined;
     targetElement?: HTMLElement | null | undefined;
     className?: string | null | undefined;
@@ -221,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

@@ -433,7 +433,7 @@ 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
+                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>);
@@ -486,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() {

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;

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,
@@ -314,7 +315,7 @@ export default class SelectPopup extends PureComponent {
         right: event => this.handleNavigation(event)
     };
     render() {
-        const { toolbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, onOutsideClick, 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 => {
@@ -323,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;
+                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}
@@ -383,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

@@ -85,6 +85,7 @@ export interface BaseSelectProps<T = unknown> {
     onReset: () => void;
     dir: 'ltr' | 'rtl';
     renderBottomToolbar?: () => ReactNode;
+    renderTopToolbar?: () => ReactNode;
     height?: ControlsHeight | undefined;
     targetElement?: HTMLElement | null | undefined;
     className?: string | null | undefined;
@@ -221,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

@@ -530,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,
@@ -627,6 +628,9 @@ class Select extends Component {
       "data-test": "ring-select-toolbar-hint"
     }));
   }
+  getTopbar() {
+    return this.props.renderTopToolbar?.();
+  }
   getLowerCaseLabel = getLowerCaseLabel;
   doesLabelMatch = doesLabelMatch;
   getFilterFn() {

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;

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,
@@ -403,6 +404,7 @@ class SelectPopup extends PureComponent {
   render() {
     const {
       toolbar,
+      topbar,
       className,
       multiple,
       hidden,
@@ -424,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,
@@ -448,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));
     });
   }
 }
@@ -495,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.154",
+  "version": "5.0.155",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",