@jetbrains/ring-ui 8.0.0-beta.7 → 8.0.0-beta.8

package/components/select/select-popup.d.ts

@@ -4,7 +4,7 @@
 import { type ComponentType, type CSSProperties, PureComponent, type ReactNode, type Ref, type SyntheticEvent } from 'react';
 import * as React from 'react';
 import { type IconType } from '../icon/icon';
-import Popup from '../popup/popup';
+import Popup, { type PopupAttrs } from '../popup/popup';
 import { type Directions } from '../popup/position';
 import List, { type SelectHandlerParams } from '../list/list';
 import Caret from '../caret/caret';
@@ -60,6 +60,7 @@ export interface SelectPopupProps<T = unknown> {
     ringPopupTarget: string | null;
     onSelectAll: (isSelectAll: boolean) => void;
     onEmptyPopupEnter: (e: KeyboardEvent) => void;
+    popupProps?: Partial<PopupAttrs> | undefined;
     className?: string | null | undefined;
     compact?: boolean | null | undefined;
     dir?: 'ltr' | 'rtl' | undefined;

package/components/select/select-popup.js

@@ -323,8 +323,8 @@ export default class SelectPopup extends PureComponent {
         right: event => this.handleNavigation(event),
     };
     render() {
-        const { toolbar, topbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, onOutsideClick, directions, top, left, offset, style, dir, filter, } = this.props;
-        const classes = classNames(styles.popup, className);
+        const { toolbar, topbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, onOutsideClick, directions, top, left, offset, style, dir, filter, popupProps, } = this.props;
+        const classes = classNames(styles.popup, className, popupProps?.className);
         return (<PopupTargetContext.Consumer>
         {ringPopupTarget => {
                 const filterWithTags = this.getFilterWithTags();
@@ -332,7 +332,7 @@ export default class SelectPopup extends PureComponent {
                 const list = this.getList(this.props.ringPopupTarget || normalizePopupTarget(ringPopupTarget));
                 const bottomLine = this.getBottomLine();
                 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} offset={offset} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style} largeBorderRadius>
+                return (<Popup {...popupProps} 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} offset={offset} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={{ ...popupProps?.style, ...style }} largeBorderRadius>
               <div dir={dir}>
                 {!hidden && filter && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>}
                 {topbar}

package/components/select/select.d.ts

@@ -1,5 +1,6 @@
 import { type ButtonHTMLAttributes, Component, type ComponentType, type CSSProperties, type HTMLAttributes, type ReactNode, type Ref, type RefCallback, type SyntheticEvent } from 'react';
 import * as React from 'react';
+import { type PopupAttrs } from '../popup/popup';
 import { type SelectHandlerParams } from '../list/list';
 import { Size } from '../input/input';
 import { type LabelType } from '../control-label/control-label';
@@ -99,6 +100,7 @@ export interface BaseSelectProps<T = unknown> {
     getInitial?: (() => string) | null | undefined;
     minWidth?: number | undefined;
     popupClassName?: string | null | undefined;
+    popupProps?: Partial<PopupAttrs> | undefined;
     popupStyle?: CSSProperties | undefined;
     top?: number | undefined;
     left?: number | undefined;

package/components/select/select.js

@@ -454,7 +454,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()} topbar={this.getTopbar()} loading={this.props.loading} activeIndex={activeIndex} 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} offset={this.props.offset} 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={activeIndex} hidden={!showPopup} ref={this.popupRef} maxHeight={this.props.maxHeight} minWidth={this.props.minWidth} directions={this.props.directions} popupProps={this.props.popupProps} className={this.props.popupClassName} style={this.props.popupStyle} top={this.props.top} left={this.props.left} offset={this.props.offset} filter={this.isInputMode() ? false : this.props.filter} // disable popup filter in INPUT mode
                  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} preventListOverscroll={this.props.preventListOverscroll}/>);
             }}
       </I18nContext.Consumer>);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "8.0.0-beta.7",
+  "version": "8.0.0-beta.8",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"