@jetbrains/ring-ui-built 8.0.0-beta.6 → 8.0.0-beta.8

package/components/select/select-filter.js

@@ -10,8 +10,8 @@ import '@jetbrains/icons/close-12px';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
-import 'util-deprecate';
 import '../icon/icon.js';
+import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import 'react/compiler-runtime';

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

@@ -446,9 +446,10 @@ class SelectPopup extends PureComponent {
       offset,
       style,
       dir,
-      filter
+      filter,
+      popupProps
     } = this.props;
-    const classes = classNames(styles.popup, className);
+    const classes = classNames(styles.popup, className, popupProps?.className);
     return /*#__PURE__*/jsx(PopupTargetContext.Consumer, {
       children: ringPopupTarget => {
         const filterWithTags = this.getFilterWithTags();
@@ -457,6 +458,7 @@ class SelectPopup extends PureComponent {
         const bottomLine = this.getBottomLine();
         const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar || topbar;
         return /*#__PURE__*/jsx(Popup, {
+          ...popupProps,
           trapFocus: false,
           ref: this.popupRef,
           hidden: hidden || !hasContent,
@@ -474,7 +476,10 @@ class SelectPopup extends PureComponent {
           onMouseDown: this.mouseDownHandler,
           target: this.props.ringPopupTarget,
           autoCorrectTopOverflow: false,
-          style: style,
+          style: {
+            ...popupProps?.style,
+            ...style
+          },
           largeBorderRadius: true,
           children: /*#__PURE__*/jsxs("div", {
             dir: dir,

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

@@ -25,8 +25,6 @@ import ChevronButton from './chevron-button.js';
 import { ControlsHeight } from '../global/configuration.js';
 import { Size as Size$1 } from '../avatar/avatar-size.js';
 import 'react/compiler-runtime';
-import 'core-js/modules/es.array.includes.js';
-import 'util-deprecate';
 import '../global/url.js';
 import '../global/dom.js';
 import '../avatar/fallback-avatar.js';
@@ -35,6 +33,7 @@ import 'react-dom';
 import '../global/schedule-raf.js';
 import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
+import 'core-js/modules/es.array.includes.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
 import '../popup/position-css.js';
@@ -47,6 +46,7 @@ import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
 import 'react-virtualized/dist/es/WindowScroller';
 import 'react-virtualized/dist/es/CellMeasurer';
+import 'util-deprecate';
 import 'memoize-one';
 import '../global/create-stateful-context.js';
 import '../list/list-item.js';
@@ -102,7 +102,7 @@ const getStyle = memoize(iconsLength => ({
 }));
 const isInputMode = type => type === Type.INPUT || type === Type.INPUT_WITHOUT_CONTROLS;
 function getLowerCaseLabel(item) {
-  if (List.isItemType(List.ListProps.Type.SEPARATOR, item) || List.isItemType(List.ListProps.Type.HINT, item) || typeof item.label !== 'string') {
+  if (List.isItemType(List.ListProps.Type.SEPARATOR, item) || typeof item.label !== 'string') {
     return null;
   }
   return item.label.toLowerCase();
@@ -585,6 +585,7 @@ class Select extends Component {
           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,