@jetbrains/ring-ui 5.0.0-beta.2 → 5.0.0-beta.22

package/components/query-assist/{query-assist.jsx → query-assist.js}

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import debounce from 'just-debounce-it';
 import classNames from 'classnames';
 import deepEqual from 'deep-equal';
-import searchIcon from '@jetbrains/icons/search';
-import closeIcon from '@jetbrains/icons/close';
+import searchIcon from '@jetbrains/icons/search-12px';
+import closeIcon from '@jetbrains/icons/close-12px';
 import getUID from '../global/get-uid';
 import dataTests from '../global/data-tests';
 import { getRect, preventDefault } from '../global/dom';
@@ -14,7 +14,6 @@ import PopupMenu from '../popup-menu/popup-menu';
 import LoaderInline from '../loader-inline/loader-inline';
 import Shortcuts from '../shortcuts/shortcuts';
 import rerenderHOC from '../global/rerender-hoc';
-import Theme from '../global/theme';
 import Button from '../button/button';
 import QueryAssistSuggestions from './query-assist__suggestions';
 import styles from './query-assist.css';
@@ -66,7 +65,6 @@ function cleanText(text) {
  */
 export default class QueryAssist extends Component {
     static propTypes = {
-        theme: PropTypes.string,
         /**
          * Open suggestions popup during the initial render
          */
@@ -153,7 +151,6 @@ export default class QueryAssist extends Component {
         'data-test': PropTypes.string
     };
     static defaultProps = {
-        theme: Theme.LIGHT,
         onApply: noop,
         onChange: noop,
         onApplySuggestion: noop,
@@ -247,7 +244,6 @@ export default class QueryAssist extends Component {
         }
     }
     static ngModelStateField = ngModelStateField;
-    static Theme = Theme;
     immediateState;
     requestData;
     ngModelStateField = ngModelStateField;
@@ -756,11 +752,10 @@ export default class QueryAssist extends Component {
         return actions;
     }
     render() {
-        const { theme, glass, 'data-test': dataTest, className, useCustomItemRender } = this.props;
+        const { glass, 'data-test': dataTest, className, useCustomItemRender } = this.props;
         const renderPlaceholder = !!this.props.placeholder && this.state.placeholderEnabled;
         const renderLoader = this.props.loader !== false && this.state.loading;
         const renderGlass = glass && !renderLoader;
-        const renderUnderline = theme === Theme.DARK;
         const actions = this.renderActions();
         const inputClasses = classNames({
             [`${styles.input} ring-js-shortcuts`]: true,
@@ -769,7 +764,7 @@ export default class QueryAssist extends Component {
             [styles.inputLeftGap]: this.isRenderingGlassOrLoader() && glass,
             [styles.inputDisabled]: this.props.disabled
         });
-        return (<div data-test={dataTests('ring-query-assist', dataTest)} className={classNames(className, styles.queryAssist, styles[theme])} role="presentation" ref={this.nodeRef}>
+        return (<div data-test={dataTests('ring-query-assist', dataTest)} className={classNames(className, styles.queryAssist)} role="presentation" ref={this.nodeRef}>
         {this.state.shortcuts &&
                 (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
 
@@ -777,7 +772,7 @@ export default class QueryAssist extends Component {
         {renderLoader && (<div className={classNames(styles.icon, styles.loader, {
                     [styles.loaderOnTheRight]: !glass
                 })} ref={this.loaderRef}>
-            <LoaderInline theme={theme}/>
+            <LoaderInline />
           </div>)}
 
         <ContentEditable aria-label={this.props.translations.searchTitle} className={inputClasses} data-test="ring-query-assist-input" inputRef={this.inputRef} disabled={this.props.disabled} onComponentUpdate={() => this.setCaretPosition({ fromContentEditable: true })} onBlur={this.handleFocusChange} onClick={this.handleCaretMove} onCompositionStart={this.trackCompositionState} onCompositionEnd={this.trackCompositionState} onFocus={this.handleFocusChange} onInput={this.handleInput} // To support IE use the same method
@@ -789,10 +784,9 @@ export default class QueryAssist extends Component {
                 })} ref={this.placeholderRef} onClick={this.handleCaretMove} data-test="query-assist-placeholder">
             {this.props.placeholder}
           </button>)}
-        {renderUnderline && <div className={styles.focusUnderline}/>}
         {actions &&
                 <div data-test="ring-query-assist-actions" className={styles.actions}>{actions}</div>}
-        <PopupMenu hidden={!this.state.showPopup} onCloseAttempt={this.closePopup} ref={this.popupRef} anchorElement={this.node} keepMounted attached className={classNames(styles[theme], this.props.popupClassName)} directions={[PopupMenu.PopupProps.Directions.BOTTOM_RIGHT]} data={useCustomItemRender ? this.state.suggestions : this.renderSuggestions()} data-test="ring-query-assist-popup" hint={this.props.hint} hintOnSelection={this.props.hintOnSelection} left={this.getPopupOffset(this.state.suggestions)} maxHeight={PopupMenu.PopupProps.MaxHeight.SCREEN} onMouseDown={this.trackPopupMouseState} onMouseUp={this.trackPopupMouseState} onSelect={item => this.handleComplete(item)}/>
+        <PopupMenu hidden={!this.state.showPopup} onCloseAttempt={this.closePopup} ref={this.popupRef} anchorElement={this.node} keepMounted attached className={this.props.popupClassName} directions={[PopupMenu.PopupProps.Directions.BOTTOM_RIGHT]} data={useCustomItemRender ? this.state.suggestions : this.renderSuggestions()} data-test="ring-query-assist-popup" hint={this.props.hint} hintOnSelection={this.props.hintOnSelection} left={this.getPopupOffset(this.state.suggestions)} maxHeight={PopupMenu.PopupProps.MaxHeight.SCREEN} onMouseDown={this.trackPopupMouseState} onMouseUp={this.trackPopupMouseState} onSelect={item => this.handleComplete(item)}/>
       </div>);
     }
 }

package/components/radio/radio.css

@@ -74,11 +74,12 @@
   opacity: 0;
 
   &[disabled] + .circle {
-    border-color: var(--ring-borders-color);
+    border-color: var(--ring-border-unselected-disabled-color);
+    background-color: var(--ring-disabled-background-color);
   }
 
   &:checked + .circle {
-    border-color: var(--ring-border-hover-color);
+    border-color: var(--ring-main-color);
 
     /* stylelint-disable-next-line selector-max-specificity */
     &::after {
@@ -101,8 +102,13 @@
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
-  &[disabled]:checked + .circle::after {
-    opacity: 0.5;
+  &[disabled]:checked + .circle {
+    border-color: var(--ring-border-disabled-color);
+
+    /* stylelint-disable-next-line selector-max-specificity */
+    &::after {
+      background-color: var(--ring-border-disabled-color);
+    }
   }
 
   &[disabled] ~ .label {

package/components/radio/radio.d.ts

@@ -10,7 +10,7 @@ export default class Radio extends Component<RadioProps> {
         disabled: PropTypes.Requireable<boolean>;
         value: PropTypes.Requireable<string | number | boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     };
     static Item: React.ForwardRefExoticComponent<import("./radio__item").RadioItemProps & React.RefAttributes<import("./radio__item").Radio>>;
     uid: string;

package/components/select/select-popup.css

@@ -22,7 +22,9 @@
 }
 
 .filter {
-  width: 100%;
+  flex-grow: 1;
+
+  width: 0;
 
   & input {
     font-weight: 200;
@@ -32,6 +34,8 @@
 .filterWrapper {
   position: relative;
 
+  display: flex;
+
   margin: 0;
   padding-right: unit;
   padding-left: calc(unit * 5.5);

package/components/select/select.css

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
+@value button-shadow from "../button/button.css";
 
 .select {
   position: relative;
@@ -39,8 +40,8 @@
 
 .icons {
   position: absolute;
-  top: -2px;
-  right: 0;
+  top: -3px;
+  right: calc(unit * 1.5);
 
   transition: color var(--ring-ease);
 
@@ -55,20 +56,16 @@
   }
 
   @nest .inputMode & {
-    top: 12px;
-
     font-size: var(--ring-font-size);
   }
-
-  @nest .buttonMode & {
-    top: -4px;
-    right: unit;
-  }
 }
 
 .selectedIcon {
   composes: resetButton from "../global/global.css";
 
+  position: relative;
+  top: 3px;
+
   display: inline-block;
 
   width: calc(2 * unit);
@@ -84,11 +81,7 @@
 .clearIcon {
   padding: 0 3px;
 
-  vertical-align: -1px;
-}
-
-.clearIcon.clearIcon > span > span {
-  color: var(--ring-icon-secondary-color);
+  vertical-align: -2px;
 }
 
 .sizeS {
@@ -111,8 +104,7 @@
   max-width: 100%;
 }
 
-.buttonMode,
-.materialMode {
+.buttonMode {
   position: relative;
 
   cursor: pointer;
@@ -168,14 +160,18 @@
   display: block;
 
   width: 100%;
+  padding-left: unit;
 
   text-align: left;
   vertical-align: calc(0 - unit);
 }
 
-.buttonValueOpen {
-  border-color: var(--ring-selected-background-color);
-  background-color: var(--ring-selected-background-color);
+.buttonValue:global(.focus-visible) {
+  box-shadow: button-shadow var(--ring-main-color);
+}
+
+.buttonValueOpen.buttonValueOpen {
+  box-shadow: button-shadow var(--ring-main-color);
 }
 
 .label {
@@ -186,6 +182,7 @@
 
 .select:hover .value,
 .select:hover .icons,
+:global(.focus-visible) + .icons,
 .value:focus,
 .value:focus + .icons,
 .open,
@@ -207,23 +204,6 @@
   }
 }
 
-.selectedLabel {
-  position: absolute;
-  top: calc(unit * -1.5);
-  left: 0;
-
-  overflow: hidden;
-
-  max-width: 100%;
-
-  text-overflow: ellipsis;
-
-  color: var(--ring-secondary-color);
-
-  font-size: var(--ring-font-size-smaller);
-  line-height: var(--ring-line-height-lowest);
-}
-
 .avatar {
   margin-right: 4px;
 
@@ -236,9 +216,10 @@
 }
 
 .chevron.chevron {
-  padding: 0;
+  padding: 0 3px;
 
   transition: none;
+  vertical-align: -1px;
 
   color: inherit;
 }
@@ -249,6 +230,10 @@
   color: inherit;
 }
 
-.avatar {
+.heightS .avatar {
   vertical-align: -6px;
 }
+
+.heightS .icons {
+  top: -5px;
+}

package/components/select/select.d.ts

@@ -1,9 +1,9 @@
 import React, { ButtonHTMLAttributes, Component, CSSProperties, HTMLAttributes, ReactNode, RefCallback, SyntheticEvent } from 'react';
 import { SelectHandlerParams } from '../list/list';
 import { Size } from '../input/input';
-import Theme from '../global/theme';
 import { ListDataItem } from '../list/consts';
 import { Directions } from '../popup/popup.consts';
+import { ControlsHeight } from '../global/controls-height';
 import SelectPopup, { Filter, FilterFn, Multiple, Tags } from './select__popup';
 /**
  * @name Select
@@ -17,7 +17,6 @@ declare enum Type {
     INPUT = "INPUT",
     CUSTOM = "CUSTOM",
     INLINE = "INLINE",
-    MATERIAL = "MATERIAL",
     INPUT_WITHOUT_CONTROLS = "INPUT_WITHOUT_CONTROLS"
 }
 declare type SelectItemData<T> = T & {
@@ -46,6 +45,7 @@ export interface CustomAnchorProps {
     buttonProps: ButtonHTMLAttributes<HTMLButtonElement> & DataTestProps;
     popup: ReactNode;
 }
+export declare type CustomAnchor = ((props: CustomAnchorProps) => ReactNode);
 export interface BaseSelectProps<T = unknown> {
     data: readonly SelectItem<T>[];
     filter: boolean | Filter<T>;
@@ -61,7 +61,7 @@ export interface BaseSelectProps<T = unknown> {
     maxHeight: number;
     hideArrow: boolean;
     directions: readonly Directions[];
-    label: string;
+    label: string | null;
     selectedLabel: ReactNode;
     inputPlaceholder: string;
     shortcutsEnabled: boolean;
@@ -69,7 +69,7 @@ export interface BaseSelectProps<T = unknown> {
     onLoadMore: () => void;
     onOpen: () => void;
     onFilter: (value: string) => void;
-    onFocus: () => void;
+    onFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
     onBlur: () => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onSelect: (selected: SelectItem<T> | null, event?: Event | SyntheticEvent) => void;
@@ -78,6 +78,8 @@ export interface BaseSelectProps<T = unknown> {
     onDone: () => void;
     onReset: () => void;
     dir: 'ltr' | 'rtl';
+    renderBottomToolbar?: () => ReactNode;
+    height?: ControlsHeight | undefined;
     targetElement?: HTMLElement | null | undefined;
     className?: string | null | undefined;
     buttonClassName?: string | null | undefined;
@@ -93,8 +95,7 @@ export interface BaseSelectProps<T = unknown> {
     hint?: ReactNode;
     add?: Add | null | undefined;
     compact?: boolean | null | undefined;
-    theme?: string | null | undefined;
-    customAnchor?: ((props: CustomAnchorProps) => ReactNode) | null | undefined;
+    customAnchor?: CustomAnchor | null | undefined;
     disableMoveOverflow?: boolean | null | undefined;
     disableScrollToActive?: boolean | null | undefined;
     'data-test'?: string | null | undefined;
@@ -113,7 +114,7 @@ export interface MultipleSelectProps<T = unknown> extends BaseSelectProps<T> {
     onChange: (selected: SelectItem<T>[], event?: Event | SyntheticEvent) => void;
     tags?: Tags | boolean | null | undefined;
 }
-declare type SelectProps<T = unknown> = SingleSelectProps<T> | MultipleSelectProps<T>;
+export declare type SelectProps<T = unknown> = SingleSelectProps<T> | MultipleSelectProps<T>;
 interface AddButton {
     prefix: string | null | undefined;
     label: string;
@@ -162,8 +163,8 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
         maxHeight: number;
         directions: Directions[];
         selected: null;
-        label: string;
-        selectedLabel: string;
+        label: null;
+        selectedLabel: null;
         inputPlaceholder: string;
         hint: null;
         shortcutsEnabled: boolean;
@@ -188,9 +189,9 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     static getDerivedStateFromProps<T = unknown>(nextProps: SelectProps<T>, prevState: SelectState<T>): Partial<SelectState<T>>;
     state: SelectState<T>;
     componentDidUpdate(prevProps: SelectProps<T>, prevState: SelectState<T>): void;
+    static contextType: React.Context<ControlsHeight>;
     static Type: typeof Type;
     static Size: typeof Size;
-    static Theme: typeof Theme;
     id: string;
     shortcutsScope: string;
     listId: string;
@@ -221,6 +222,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     filterValue(setValue: string): void;
     isInputMode(): boolean;
     _clickHandler: () => void;
+    _openPopupIfClosed: () => void;
     _filterChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
     private _setFilter;
     private _rebuildMultipleMap;
@@ -235,8 +237,6 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     _getSelectedString(): string | null;
     private _getIcons;
     private _getAvatar;
-    button?: HTMLElement | null;
-    buttonRef: (el: HTMLElement | null) => void;
     filter?: HTMLInputElement | null;
     filterRef: (el: HTMLInputElement | null) => void;
     getShortcutsMap(): {
@@ -258,18 +258,14 @@ export declare type MultipleSelectAttrs<T = unknown> = JSX.LibraryManagedAttribu
 export declare type SelectAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<T>>;
 export declare const RerenderableSelect: {
     new (props: SelectProps<unknown>): {
-        _propsCache: Readonly<SelectProps<unknown>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        rerender(props?: Partial<SelectProps<unknown>>, callback?: (() => void) | undefined): void | Element | React.Component<SelectProps<unknown>, any, any>;
+        _propsCache: SelectProps<unknown> & React.RefAttributes<unknown>;
+        rerender(props?: Partial<SelectProps<unknown>>, callback?: (() => void) | undefined): void;
         node?: HTMLElement | null | undefined;
-        context: any;
+        context: unknown;
         setState<K extends keyof SelectState<unknown>>(state: SelectState<unknown> | ((prevState: Readonly<SelectState<unknown>>, props: Readonly<SelectProps<unknown>>) => SelectState<unknown> | Pick<SelectState<unknown>, K> | null) | Pick<SelectState<unknown>, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         render(): React.ReactNode;
-        readonly props: Readonly<SelectProps<unknown>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<SelectProps<unknown>>;
         state: Readonly<SelectState<unknown>>;
         refs: {
             [key: string]: React.ReactInstance;

package/components/select/{select.jsx → select.js}

@@ -1,8 +1,8 @@
 import React, { Component, Fragment } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import chevronDownIcon from '@jetbrains/icons/chevron-10px';
-import closeIcon from '@jetbrains/icons/close';
+import chevronDownIcon from '@jetbrains/icons/chevron-down';
+import closeIcon from '@jetbrains/icons/close-12px';
 import deepEqual from 'deep-equal';
 import { Anchor } from '../dropdown/dropdown';
 import Avatar, { Size as AvatarSize } from '../avatar/avatar';
@@ -15,9 +15,9 @@ import dataTests from '../global/data-tests';
 import getUID from '../global/get-uid';
 import rerenderHOC from '../global/rerender-hoc';
 import fuzzyHighlight from '../global/fuzzy-highlight';
-import Theme from '../global/theme';
 import memoize from '../global/memoize';
 import { isArray } from '../global/typescript-utils';
+import { ControlsHeightContext } from '../global/controls-height';
 import SelectPopup from './select__popup';
 import styles from './select.css';
 /**
@@ -33,12 +33,12 @@ var Type;
     Type["INPUT"] = "INPUT";
     Type["CUSTOM"] = "CUSTOM";
     Type["INLINE"] = "INLINE";
-    Type["MATERIAL"] = "MATERIAL";
     Type["INPUT_WITHOUT_CONTROLS"] = "INPUT_WITHOUT_CONTROLS";
 })(Type || (Type = {}));
+const ICONS_OFFSET = 12;
 const ICON_WIDTH = 20;
 const getStyle = memoize((iconsLength) => ({
-    paddingRight: iconsLength * ICON_WIDTH
+    paddingRight: ICONS_OFFSET + iconsLength * ICON_WIDTH
 }));
 const isInputMode = (type) => type === Type.INPUT || type === Type.INPUT_WITHOUT_CONTROLS;
 function getLowerCaseLabel(item) {
@@ -75,8 +75,8 @@ function buildMultipleMap(selected) {
 }
 function getListItems(props, state, rawFilterString, data = props.data) {
     let filterString = rawFilterString.trim();
-    if (isInputMode(props.type) && state.selected && !Array.isArray(state.selected) &&
-        filterString === state.selected.label) {
+    if (isInputMode(props.type) && !props.allowAny && state.selected &&
+        !Array.isArray(state.selected) && filterString === state.selected.label) {
         filterString = ''; // ignore multiple if it is exactly the selected item
     }
     const lowerCaseString = filterString.toLowerCase();
@@ -183,7 +183,7 @@ export default class Select extends Component {
         disabled: false,
         loadingMessage: 'Loading...',
         notFoundMessage: 'No options found',
-        type: Type.MATERIAL,
+        type: Type.BUTTON,
         size: Size.M,
         targetElement: null,
         hideSelected: false,
@@ -197,8 +197,8 @@ export default class Select extends Component {
             Popup.PopupProps.Directions.TOP_RIGHT
         ],
         selected: null,
-        label: '',
-        selectedLabel: '',
+        label: null,
+        selectedLabel: null,
         inputPlaceholder: '',
         hint: null,
         shortcutsEnabled: false,
@@ -253,6 +253,9 @@ export default class Select extends Component {
         if (prevMultiple !== multiple && !deepEqual(prevMultiple, multiple)) {
             nextState.selected = multiple ? [] : null;
         }
+        if (multiple && !nextState.selected) {
+            nextState.selected = prevState.selected;
+        }
         const { selected } = { ...prevState, ...nextState };
         if (selected && Array.isArray(selected)) {
             nextState.multipleMap = buildMultipleMap(selected);
@@ -290,14 +293,14 @@ export default class Select extends Component {
             onChange(selected);
         }
     }
+    static contextType = ControlsHeightContext;
     static Type = Type;
     static Size = Size;
-    static Theme = Theme;
     id = getUID('select-');
     shortcutsScope = this.id;
     listId = `${this.id}:list`;
-    _focusHandler = () => {
-        this.props.onFocus();
+    _focusHandler = (e) => {
+        this.props.onFocus(e);
         this.setState({
             shortcutsEnabled: true,
             focused: true
@@ -441,13 +444,14 @@ export default class Select extends Component {
     }
     _hidePopup(tryFocusAnchor) {
         if (this.node && this.state.showPopup) {
-            this.setState({
+            this.setState(prevState => ({
                 showPopup: false,
-                filterValue: ''
-            });
+                filterValue: this.props.allowAny ? prevState.filterValue : ''
+            }));
             if (tryFocusAnchor) {
-                const restoreFocusNode = this.props.targetElement ||
+                const focusableSelectExists = this.node &&
                     this.node.querySelector('[data-test~=ring-select__focus]');
+                const restoreFocusNode = this.props.targetElement || focusableSelectExists;
                 if (restoreFocusNode) {
                     restoreFocusNode.focus();
                 }
@@ -460,15 +464,16 @@ export default class Select extends Component {
         this.props.onAdd(value);
     };
     getToolbar() {
-        const { hint } = this.props;
+        const { hint, renderBottomToolbar } = this.props;
         const { prefix, label, delayed } = this.state.addButton || {};
-        const isToolbarHasElements = this.state.addButton || hint;
+        const isToolbarHasElements = this.state.addButton || hint || renderBottomToolbar;
         if (!isToolbarHasElements) {
             return null;
         }
         return (<div className={classNames({
-                [styles.toolbar]: !!this.state.addButton
+                [styles.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
             })} data-test="ring-select-toolbar">
+        {renderBottomToolbar && renderBottomToolbar()}
         {this.state.addButton && (<Button text delayed={delayed} className={classNames(styles.button, styles.buttonSpaced)} onClick={this.addHandler} data-test="ring-select-toolbar-button">
             {prefix ? `${prefix} ${label}` : label}
           </Button>)}
@@ -508,6 +513,13 @@ export default class Select extends Component {
             }
         }
     };
+    _openPopupIfClosed = () => {
+        if (this.props.disabled || this.state.showPopup) {
+            return;
+        }
+        this.props.onBeforeOpen();
+        this._showPopup();
+    };
     _filterChangeHandler = (e) => {
         this._setFilter(e.currentTarget.value, e);
     };
@@ -703,9 +715,7 @@ export default class Select extends Component {
             !this.state.selected;
     }
     _getLabel() {
-        return this.props.label ||
-            (typeof this.props.selectedLabel === 'string' ? this.props.selectedLabel : null) ||
-            'Select an option';
+        return this.props.label ?? this.props.selectedLabel ?? 'Select an option';
     }
     _getSelectedString() {
         if (Array.isArray(this.state.selected)) {
@@ -738,10 +748,6 @@ export default class Select extends Component {
         return !Array.isArray(this.state.selected) &&
             (this.state.selected?.avatar || this.state.selected?.showGeneratedAvatar) && (<Avatar className={styles.avatar} url={this.state.selected.avatar} username={this.state.selected.username} size={AvatarSize.Size20}/>);
     }
-    button;
-    buttonRef = (el) => {
-        this.button = el;
-    };
     filter;
     filterRef = (el) => {
         this.filter = el;
@@ -762,7 +768,7 @@ export default class Select extends Component {
     renderSelect(activeItemId) {
         const dataTest = this.props['data-test'];
         const { shortcutsEnabled } = this.state;
-        const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, {
+        const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, styles[`height${this.props.height || this.context}`], {
             [styles[`size${this.props.size}`]]: this.props.type !== Type.INLINE,
             [styles.disabled]: this.props.disabled
         });
@@ -779,20 +785,19 @@ export default class Select extends Component {
             case Type.INPUT_WITHOUT_CONTROLS:
             case Type.INPUT: return (<div ref={this.nodeRef} className={classNames(classes, styles.inputMode)} data-test={dataTests('ring-select', dataTest)}>
           {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
-          <Input {...ariaProps} autoComplete="off" id={this.props.id} onClick={this._clickHandler} inputRef={this.filterRef} disabled={this.props.disabled} value={this.state.filterValue} borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS} style={style} size={Size.FULL} onChange={this._filterChangeHandler} onFocus={this._focusHandler} onBlur={this._blurHandler} label={this.props.type === Type.INPUT ? this._getLabel() : null} placeholder={this.props.inputPlaceholder} onKeyDown={this.props.onKeyDown} data-test="ring-select__focus" enableShortcuts={shortcutsEnabled
+          <Input {...ariaProps} height={this.props.height} autoComplete="off" id={this.props.id} onClick={this._clickHandler} inputRef={this.filterRef} disabled={this.props.disabled} value={this.state.filterValue} borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS} style={style} size={Size.FULL} onChange={this._filterChangeHandler} onFocus={this._focusHandler} onBlur={this._blurHandler} label={this.props.type === Type.INPUT ? this._getLabel() : null} placeholder={this.props.inputPlaceholder} onKeyDown={this.props.onKeyDown} data-test="ring-select__focus" enableShortcuts={shortcutsEnabled
                     ? Object.keys({
                         ...this.getShortcutsMap(),
                         ...this._popup?.list?.shortcutsMap
                     })
-                    : undefined}/>
-          {this.props.type === Type.INPUT && iconsNode}
+                    : undefined} afterInput={this.props.type === Type.INPUT && iconsNode}/>
           {this._renderPopup()}
         </div>);
             case Type.BUTTON:
                 return (<div ref={this.nodeRef} className={classNames(classes, styles.buttonMode)} data-test={dataTests('ring-select', dataTest)}>
             {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
             <div className={styles.buttonContainer}>
-              <Button {...ariaProps} id={this.props.id} onClick={this._clickHandler} className={classNames(this.props.buttonClassName, styles.buttonValue, {
+              <Button {...ariaProps} height={this.props.height} id={this.props.id} onClick={this._clickHandler} className={classNames(this.props.buttonClassName, styles.buttonValue, {
                         [styles.buttonValueOpen]: this.state.showPopup
                     })} disabled={this.props.disabled} style={style} data-test="ring-select__button ring-select__focus">
                 {this._getAvatar()}
@@ -801,20 +806,6 @@ export default class Select extends Component {
               {iconsNode}
             </div>
             {this._renderPopup()}
-          </div>);
-            case Type.MATERIAL:
-                return (<div ref={this.nodeRef} className={classNames(classes, styles.materialMode)} data-test={dataTests('ring-select', dataTest)}>
-            {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
-            {!this._selectionIsEmpty() && this.props.selectedLabel && (<span className={styles.selectedLabel}>{this.props.selectedLabel}</span>)}
-            <button {...ariaProps} id={this.props.id} onClick={this._clickHandler} type="button" disabled={this.props.disabled} className={classNames(this.props.buttonClassName, styles.value, {
-                        [styles.open]: this.state.showPopup,
-                        [styles.label]: this._selectionIsEmpty()
-                    })} aria-label={this._getLabel()} style={style} data-test="ring-select__focus" ref={this.buttonRef}>
-              {this._getAvatar()}
-              {this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()}
-            </button>
-            {iconsNode}
-            {this._renderPopup()}
           </div>);
             case Type.INLINE:
                 return (<div className={classes} ref={this.nodeRef} data-test={dataTests('ring-select', dataTest)}>
@@ -912,7 +903,6 @@ Select.propTypes = {
     hideArrow: PropTypes.bool,
     compact: PropTypes.bool,
     size: PropTypes.oneOf(Object.values(Size)),
-    theme: PropTypes.string,
     customAnchor: PropTypes.func,
     disableMoveOverflow: PropTypes.bool,
     disableScrollToActive: PropTypes.bool,

package/components/select/{select__filter.jsx → select__filter.js}

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import Input from '../input/input';
 import sniffr from '../global/sniffer';
 import { ActiveItemContext } from '../list/list';
+import { ControlsHeight } from '../global/controls-height';
 import styles from './select-popup.css';
 function noop() { }
 export default class SelectFilter extends Component {
@@ -34,7 +35,7 @@ export default class SelectFilter extends Component {
         const { className, listId, ...restProps } = this.props;
         const classes = classNames(styles.filter, className);
         return (<ActiveItemContext.ValueContext.Consumer>
-        {activeItemId => (<Input {...restProps} aria-owns={listId} aria-activedescendant={activeItemId} autoComplete="off" autoFocus borderless inputRef={this.inputRef} className={classes}/>)}
+        {activeItemId => (<Input {...restProps} aria-owns={listId} aria-activedescendant={activeItemId} autoComplete="off" autoFocus borderless height={ControlsHeight.L} inputRef={this.inputRef} className={classes}/>)}
       </ActiveItemContext.ValueContext.Consumer>);
     }
 }