@jetbrains/ring-ui 7.0.62 → 7.0.63

package/components/query-assist/query-assist.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable max-lines */
 import { Component } from 'react';
 import debounce from 'just-debounce-it';
 import classNames from 'classnames';
@@ -20,7 +21,7 @@ import { ControlsHeight, ControlsHeightContext } from '../global/controls-height
 import { Size } from '../input/input';
 import inputStyles from '../input/input.css';
 import { I18nContext } from '../i18n/i18n-context';
-import QueryAssistSuggestions from './query-assist__suggestions';
+import QueryAssistSuggestions from './query-assist-suggestions';
 import styles from './query-assist.css';
 const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING + PopupMenu.PopupProps.Dimension.BORDER_WIDTH;
 const ngModelStateField = 'query';
@@ -197,8 +198,9 @@ export default class QueryAssist extends Component {
             this.setFocus(focusValue);
         }
     }
+    // eslint-disable-next-line complexity
     setCaretPosition = (params = {}) => {
-        const queryLength = this.immediateState.query != null ? this.immediateState.query.length : 0;
+        const queryLength = this.immediateState.query ? this.immediateState.query.length : 0;
         const newCaretPosition = this.immediateState.caret < queryLength ? this.immediateState.caret : queryLength;
         if (params.fromContentEditable) {
             this.immediateState.selection = this.immediateState.selection
@@ -226,9 +228,9 @@ export default class QueryAssist extends Component {
     scrollInput() {
         const caretOffset = this.caret?.getOffset();
         if (this.input?.clientWidth !== this.input?.scrollWidth &&
-            caretOffset != null &&
-            this.input?.clientWidth != null &&
-            caretOffset > this.input.clientWidth) {
+            caretOffset &&
+            this.input?.clientWidth &&
+            caretOffset > this.input?.clientWidth) {
             this.input.scrollLeft += caretOffset;
         }
     }
@@ -500,9 +502,7 @@ export default class QueryAssist extends Component {
             if (caret === 0) {
                 return minOffset;
             }
-            else {
-                offset = caret;
-            }
+            offset = caret;
         }
         const result = offset - POPUP_COMPENSATION;
         return result < minOffset ? minOffset : result;
@@ -674,7 +674,7 @@ export default class QueryAssist extends Component {
         const actions = [...(this.props.actions || [])];
         const renderClear = this.props.clear && !!this.state.query;
         if (renderClear) {
-            actions.push(_jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsx(Button, { icon: closeIcon, className: styles.clear, title: this.props.translations?.clearTitle ?? translate('clearTitle'), ref: this.clearRef, onClick: this.clearQuery, "data-test": "query-assist-clear-icon" })) }, 'clearAction'));
+            actions.push(_jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsx(Button, { icon: closeIcon, className: styles.clear, title: this.props.translations?.clearTitle ?? translate('clearTitle'), ref: this.clearRef, onClick: this.clearQuery, "data-test": 'query-assist-clear-icon' })) }, 'clearAction'));
         }
         return actions;
     }
@@ -701,10 +701,10 @@ export default class QueryAssist extends Component {
             [styles.hugePlaceholder]: huge,
             [styles.withoutGlass]: !glass || (!renderLoader && huge),
         });
-        return (_jsx(ControlsHeightContext.Provider, { value: ControlsHeight.M, children: _jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsxs("div", { "data-test": dataTests('ring-query-assist', dataTest), className: containerClasses, role: "presentation", ref: this.nodeRef, children: [this.state.shortcuts && _jsx(Shortcuts, { map: this.shortcutsMap, scope: this.shortcutsScope }), renderGlass && !huge && (_jsx(Icon, { glyph: searchIcon, className: styles.icon, title: translations?.searchTitle ?? translate('searchTitle'), ref: this.glassRef, "data-test": "query-assist-search-icon" })), renderLoader && (_jsx("div", { className: classNames(styles.icon, styles.loader, {
+        return (_jsx(ControlsHeightContext.Provider, { value: ControlsHeight.M, children: _jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsxs("div", { "data-test": dataTests('ring-query-assist', dataTest), className: containerClasses, role: 'presentation', ref: this.nodeRef, children: [this.state.shortcuts && _jsx(Shortcuts, { map: this.shortcutsMap, scope: this.shortcutsScope }), renderGlass && !huge && (_jsx(Icon, { glyph: searchIcon, className: styles.icon, title: translations?.searchTitle ?? translate('searchTitle'), ref: this.glassRef, "data-test": 'query-assist-search-icon' })), renderLoader && (_jsx("div", { className: classNames(styles.icon, styles.loader, {
                                 [styles.loaderOnTheRight]: !glass && !huge,
                                 [styles.loaderActive]: renderLoader,
-                            }), ref: this.loaderRef, children: _jsx(LoaderInline, {}) })), _jsx(ContentEditable, { "aria-label": translations?.searchTitle ?? translate('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, onKeyUp: this.handleInput, onKeyDown: this.handleEnter, onPaste: this.handlePaste, spellCheck: "false", children: this.state.query && _jsx("span", { children: this.renderQuery() }) }), renderPlaceholder && (_jsx("button", { type: "button", className: placeholderStyles, ref: this.placeholderRef, onClick: this.handleCaretMove, "data-test": "query-assist-placeholder", disabled: this.props.disabled, tabIndex: -1, children: this.props.placeholder })), actions.length ? (_jsx("div", { "data-test": "ring-query-assist-actions", className: styles.actions, children: actions })) : null, _jsx(PopupMenu, { hidden: !this.state.showPopup, onCloseAttempt: this.closePopup, ref: this.popupRef, anchorElement: this.node, keepMounted: true, attached: true, 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, shortcutsMap: this.listShortcutsMap, 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) }), glass && huge && (_jsx("div", { className: styles.rightSearchButton, "data-test": "query-assist-search-button", children: _jsx(Icon, { glyph: searchIcon, className: styles.rightSearchIcon, title: translations?.searchTitle ?? translate('searchTitle'), onClick: this.handleApply, ref: this.glassRef, "data-test": "query-assist-search-icon" }) }))] })) }) }));
+                            }), ref: this.loaderRef, children: _jsx(LoaderInline, {}) })), _jsx(ContentEditable, { "aria-label": translations?.searchTitle ?? translate('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, onKeyUp: this.handleInput, onKeyDown: this.handleEnter, onPaste: this.handlePaste, spellCheck: 'false', children: this.state.query && _jsx("span", { children: this.renderQuery() }) }), renderPlaceholder && (_jsx("button", { type: 'button', className: placeholderStyles, ref: this.placeholderRef, onClick: this.handleCaretMove, "data-test": 'query-assist-placeholder', disabled: this.props.disabled, tabIndex: -1, children: this.props.placeholder })), actions.length ? (_jsx("div", { "data-test": 'ring-query-assist-actions', className: styles.actions, children: actions })) : null, _jsx(PopupMenu, { hidden: !this.state.showPopup, onCloseAttempt: this.closePopup, ref: this.popupRef, anchorElement: this.node, keepMounted: true, attached: true, 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, shortcutsMap: this.listShortcutsMap, 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) }), glass && huge && (_jsx("div", { className: styles.rightSearchButton, "data-test": 'query-assist-search-button', children: _jsx(Icon, { glyph: searchIcon, className: styles.rightSearchIcon, title: translations?.searchTitle ?? translate('searchTitle'), onClick: this.handleApply, ref: this.glassRef, "data-test": 'query-assist-search-icon' }) }))] })) }) }));
     }
 }
 export const RerenderableQueryAssist = rerenderHOC(QueryAssist);

package/components/radio/{radio__item.d.ts → radio-item.d.ts}

@@ -1,4 +1,4 @@
-import { Component, InputHTMLAttributes, ReactNode } from 'react';
+import { Component, type InputHTMLAttributes, type ReactNode } from 'react';
 export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
     value?: string | undefined;
     onChange?: ((value: string) => void) | null | undefined;

package/components/radio/{radio__item.js → radio-item.js}

@@ -18,10 +18,10 @@ export class RadioItemInner extends Component {
     render() {
         const { className, children, help, ...restProps } = this.props;
         const classes = classNames(styles.radio, className);
-        return (_jsxs("label", { ref: this.labelRef, className: classes, htmlFor: this.uid, children: [_jsx("input", { id: this.uid, ...restProps, ref: this.inputRef, className: styles.input, type: "radio" }), _jsx("span", { className: styles.circle }), _jsxs("span", { className: styles.label, children: [children, help && _jsx(ControlHelp, { children: help })] })] }));
+        return (_jsxs("label", { ref: this.labelRef, className: classes, htmlFor: this.uid, children: [_jsx("input", { id: this.uid, ...restProps, ref: this.inputRef, className: styles.input, type: 'radio' }), _jsx("span", { className: styles.circle }), _jsxs("span", { className: styles.label, children: [children, help && _jsx(ControlHelp, { children: help })] })] }));
     }
 }
 const RadioItem = forwardRef(function RadioItem(props, ref) {
-    return (_jsx(RadioContext.Consumer, { children: ({ value, onChange, ...restContext }) => (_jsx(RadioItemInner, { ref: ref, ...restContext, checked: value != null ? value === props.value : undefined, onChange: onChange != null ? () => onChange(props.value) : undefined, ...props })) }));
+    return (_jsx(RadioContext.Consumer, { children: ({ value, onChange, ...restContext }) => (_jsx(RadioItemInner, { ref: ref, ...restContext, checked: value ? value === props.value : undefined, onChange: onChange ? () => onChange(props.value) : undefined, ...props })) }));
 });
 export default RadioItem;

package/components/radio/radio.css

@@ -1,4 +1,4 @@
-@import "../global/variables.css";
+@import '../global/variables.css';
 
 .radio {
   position: relative;
@@ -48,7 +48,7 @@
     width: var(--ring-unit);
     height: var(--ring-unit);
 
-    content: "";
+    content: '';
 
     transition:
       opacity var(--ring-fast-ease),

package/components/radio/radio.d.ts

@@ -1,10 +1,10 @@
 import { Component } from 'react';
-import { RadioProps } from './radio__item';
+import { type RadioProps } from './radio-item';
 /**
  * @name Radio
  */
 export default class Radio extends Component<RadioProps> {
-    static Item: import("react").ForwardRefExoticComponent<import("./radio__item").RadioItemProps & import("react").RefAttributes<import("./radio__item").RadioItemInner>>;
+    static Item: import("react").ForwardRefExoticComponent<import("./radio-item").RadioItemProps & import("react").RefAttributes<import("./radio-item").RadioItemInner>>;
     uid: string;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/radio/radio.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import getUID from '../global/get-uid';
-import RadioItem, { RadioContext } from './radio__item';
+import RadioItem, { RadioContext } from './radio-item';
 /**
  * @name Radio
  */

package/components/scrollable-section/scrollable-section.d.ts

@@ -1,2 +1,2 @@
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 export default function ScrollableSection({ className, ...restProps }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/components/scrollable-section/scrollable-section.js

@@ -9,7 +9,7 @@ export default function ScrollableSection({ className, ...restProps }) {
     const [scrolledToLeft, setScrolledToLeft] = useState(false);
     const ref = useRef(null);
     const calculateScrollPosition = useCallback(() => {
-        if (ref.current != null) {
+        if (ref.current) {
             const { scrollTop, scrollLeft, scrollHeight, scrollWidth, offsetHeight, offsetWidth } = ref.current;
             setScrolledToTop(scrollTop === 0);
             setScrolledToRight(offsetWidth + scrollLeft >= scrollWidth);

package/components/select/{select__filter.d.ts → select-filter.d.ts}

@@ -1,5 +1,5 @@
-import { Component, RefCallback } from 'react';
-import { InputAttrs } from '../input/input';
+import { Component, type RefCallback } from 'react';
+import { type InputAttrs } from '../input/input';
 declare function noop(): void;
 type SelectFilterProps = InputAttrs & {
     inputRef: RefCallback<HTMLInputElement | HTMLTextAreaElement>;

package/components/select/{select__filter.js → select-filter.js}

@@ -35,6 +35,6 @@ export default class SelectFilter extends Component {
     render() {
         const { className, listId, ...restProps } = this.props;
         const classes = classNames(styles.filter, className);
-        return (_jsx(ActiveItemContext.ValueContext.Consumer, { children: activeItemId => (_jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsx(Input, { ...restProps, placeholder: restProps.placeholder ?? translate('filterItems'), "aria-owns": listId, "aria-activedescendant": activeItemId, autoComplete: "off", autoFocus: true, borderless: true, inputRef: this.inputRef, className: classes })) })) }));
+        return (_jsx(ActiveItemContext.ValueContext.Consumer, { children: activeItemId => (_jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsx(Input, { ...restProps, placeholder: restProps.placeholder ?? translate('filterItems'), "aria-owns": listId, "aria-activedescendant": activeItemId, autoComplete: 'off', autoFocus: true, borderless: true, inputRef: this.inputRef, className: classes })) })) }));
     }
 }

package/components/select/select-popup.css

@@ -1,4 +1,4 @@
-@import "../global/variables.css";
+@import '../global/variables.css';
 
 .filterWithTags {
   overflow: hidden;
@@ -15,7 +15,7 @@
     padding-right: 0;
     padding-left: 0;
 
-    border-bottom: none;
+    border-bottom: 0;
   }
 
   &:hover {
@@ -31,7 +31,7 @@
 .filterWithTagsInput {
   padding: 0;
 
-  border: none;
+  border: 0;
 }
 
 .filter {
@@ -55,7 +55,7 @@
 
   border-bottom: 1px solid var(--ring-borders-color);
 
-  [dir="rtl"] & {
+  [dir='rtl'] & {
     padding-right: calc(var(--ring-unit) * 5.5);
     padding-left: var(--ring-unit);
   }
@@ -68,7 +68,7 @@
 
   color: var(--ring-secondary-color);
 
-  [dir="rtl"] & {
+  [dir='rtl'] & {
     right: calc(var(--ring-unit) * 2);
     left: auto;
   }

package/components/select/{select__popup.d.ts → select-popup.d.ts}

@@ -1,17 +1,17 @@
 /**
  * @description Displays a popup with select's options.
  */
-import { ComponentType, CSSProperties, PureComponent, ReactNode, Ref, SyntheticEvent } from 'react';
+import { type ComponentType, type CSSProperties, PureComponent, type ReactNode, type Ref, type SyntheticEvent } from 'react';
 import * as React from 'react';
-import { IconType } from '../icon/icon';
+import { type IconType } from '../icon/icon';
 import Popup from '../popup/popup';
-import { Directions } from '../popup/position';
-import List, { SelectHandlerParams } from '../list/list';
+import { type Directions } from '../popup/position';
+import List, { type SelectHandlerParams } from '../list/list';
 import Caret from '../caret/caret';
-import { ListDataItem } from '../list/consts';
-import { ShortcutsMap } from '../shortcuts/core';
-import { TagAttrs } from '../tag/tag';
-import { SelectItem } from './select';
+import { type ListDataItem } from '../list/consts';
+import { type ShortcutsMap } from '../shortcuts/core';
+import { type TagAttrs } from '../tag/tag';
+import { type SelectItem } from './select';
 export type FilterFn<T> = (itemToCheck: SelectItem<T>, checkString: string, data: readonly SelectItem<T>[]) => boolean;
 export interface Filter<T = unknown> {
     fn?: FilterFn<T> | null | undefined;

package/components/select/{select__popup.js → select-popup.js}

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable max-lines */
 /**
  * @description Displays a popup with select's options.
  */
-import { PureComponent } from 'react';
+import { PureComponent, } from 'react';
 import classNames from 'classnames';
 import searchIcon from '@jetbrains/icons/search';
 import memoizeOne from 'memoize-one';
@@ -22,9 +23,9 @@ import Shortcuts from '../shortcuts/shortcuts';
 import Button from '../button/button';
 import Text from '../text/text';
 import { ControlsHeight } from '../global/controls-height';
-import { createComposedRef } from '../global/composeRefs';
+import { createComposedRef } from '../global/compose-refs';
 import { DEFAULT_DIRECTIONS } from '../popup/popup.consts';
-import SelectFilter from './select__filter';
+import SelectFilter from './select-filter';
 import styles from './select-popup.css';
 const FILTER_HEIGHT = 35;
 const TOOLBAR_HEIGHT = 49;
@@ -80,7 +81,7 @@ export default class SelectPopup extends PureComponent {
     }
     caret;
     handleNavigation(event, navigateLeft) {
-        if ((this.isEventTargetFilter(event) && this.caret != null && Number(this.caret.getPosition()) > 0) ||
+        if ((this.isEventTargetFilter(event) && this.caret && Number(this.caret?.getPosition()) > 0) ||
             !Array.isArray(this.props.selected)) {
             return;
         }
@@ -103,6 +104,7 @@ export default class SelectPopup extends PureComponent {
         if (!Array.isArray(this.props.selected)) {
             return;
         }
+        // eslint-disable-next-line no-underscore-dangle
         const _tag = tag || this.props.selected.slice(0)[this.props.selected.length - 1];
         if (_tag) {
             this.onListSelect(_tag, event, { tryKeepOpen: true });
@@ -113,7 +115,9 @@ export default class SelectPopup extends PureComponent {
         }
     }
     removeSelectedTag() {
-        if (Array.isArray(this.props.selected) && this.state.tagsActiveIndex != null) {
+        if (Array.isArray(this.props.selected) &&
+            this.state.tagsActiveIndex !== null &&
+            this.state.tagsActiveIndex !== undefined) {
             this.removeTag(this.props.selected[this.state.tagsActiveIndex]);
             return false;
         }
@@ -179,7 +183,7 @@ export default class SelectPopup extends PureComponent {
     onClickHandler = () => this.filter?.focus();
     getFilter() {
         if (this.props.filter || this.props.tags) {
-            return (_jsxs("div", { className: styles.filterWrapper, "data-test": "ring-select-popup-filter", children: [!this.props.tags && (_jsx(Icon, { glyph: this.props.filterIcon ?? searchIcon, className: styles.filterIcon, "data-test-custom": "ring-select-popup-filter-icon" })), _jsx(FilterWithShortcuts, { rgShortcutsOptions: this.state.popupFilterShortcutsOptions, rgShortcutsMap: this.popupFilterShortcutsMap, value: this.props.filterValue, inputRef: this.composedFilterRef(this.filterRef, this.props.filterRef), onBlur: this.popupFilterOnBlur, onFocus: this.onFilterFocus, className: "ring-js-shortcuts", inputClassName: classNames({ [styles.filterWithTagsInput]: this.props.tags }), placeholder: typeof this.props.filter === 'object' ? this.props.filter.placeholder : undefined, height: this.props.tags ? ControlsHeight.S : ControlsHeight.L, onChange: this.props.onFilter, onClick: this.onClickHandler, onClear: this.props.tags ? undefined : this.props.onClear, "data-test-custom": "ring-select-popup-filter-input", listId: this.props.listId, enableShortcuts: Object.keys(this.popupFilterShortcutsMap) })] }));
+            return (_jsxs("div", { className: styles.filterWrapper, "data-test": 'ring-select-popup-filter', children: [!this.props.tags && (_jsx(Icon, { glyph: this.props.filterIcon ?? searchIcon, className: styles.filterIcon, "data-test-custom": 'ring-select-popup-filter-icon' })), _jsx(FilterWithShortcuts, { rgShortcutsOptions: this.state.popupFilterShortcutsOptions, rgShortcutsMap: this.popupFilterShortcutsMap, value: this.props.filterValue, inputRef: this.composedFilterRef(this.filterRef, this.props.filterRef), onBlur: this.popupFilterOnBlur, onFocus: this.onFilterFocus, className: 'ring-js-shortcuts', inputClassName: classNames({ [styles.filterWithTagsInput]: this.props.tags }), placeholder: typeof this.props.filter === 'object' ? this.props.filter.placeholder : undefined, height: this.props.tags ? ControlsHeight.S : ControlsHeight.L, onChange: this.props.onFilter, onClick: this.onClickHandler, onClear: this.props.tags ? undefined : this.props.onClear, "data-test-custom": 'ring-select-popup-filter-input', listId: this.props.listId, enableShortcuts: Object.keys(this.popupFilterShortcutsMap) })] }));
         }
         return null;
     }
@@ -268,7 +272,7 @@ export default class SelectPopup extends PureComponent {
         // render the list would be a better way
         const anchorNode = this.props.anchorElement;
         const containerNode = getPopupContainer(ringPopupTarget) || document.documentElement;
-        return anchorNode != null
+        return anchorNode !== null
             ? Math.min(directions.reduce((maxHeight, direction) => Math.max(maxHeight, maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : null) ?? 0), minMaxHeight), userDefinedMaxHeight)
             : userDefinedMaxHeight;
     });

package/components/select/select.css

@@ -1,4 +1,4 @@
-@import "../global/variables.css";
+@import '../global/variables.css';
 
 .select {
   position: relative;
@@ -20,7 +20,7 @@
 
   text-align: left;
 
-  [dir="rtl"] & {
+  [dir='rtl'] & {
     text-align: right;
     direction: ltr;
   }
@@ -63,7 +63,7 @@
 }
 
 .selectedIcon {
-  composes: resetButton from "../global/global.css";
+  composes: resetButton from '../global/global.css';
 
   position: relative;
   top: 3px;
@@ -112,8 +112,8 @@
 }
 
 .value {
-  composes: ellipsis from "../global/global.css";
-  composes: font from "../global/global.css";
+  composes: ellipsis from '../global/global.css';
+  composes: font from '../global/global.css';
 
   display: inline-block;
 
@@ -131,7 +131,7 @@
 
   color: var(--ring-text-color);
 
-  border: none;
+  border: 0;
   border-bottom: 1px solid var(--ring-borders-color);
   outline: none;
   background: transparent;
@@ -160,7 +160,7 @@
 }
 
 .buttonValue {
-  composes: ellipsis from "../global/global.css";
+  composes: ellipsis from '../global/global.css';
 
   display: block;
 
@@ -180,7 +180,7 @@
 }
 
 .buttonValueEmpty.buttonValueEmpty {
-  color: var(--ring-disabled-color);
+  color: var(--ring-secondary-color);
 }
 
 .heightS .buttonValue {
@@ -211,7 +211,8 @@
 
   color: var(--ring-disabled-color);
 
-  & .value {
+  & .value,
+  & .buttonValueEmpty {
     color: var(--ring-disabled-color);
     border-bottom-style: dashed;
   }

package/components/select/select.d.ts

@@ -1,12 +1,12 @@
-import { ButtonHTMLAttributes, Component, ComponentType, CSSProperties, HTMLAttributes, ReactNode, Ref, RefCallback, SyntheticEvent } from 'react';
+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 { SelectHandlerParams } from '../list/list';
+import { type SelectHandlerParams } from '../list/list';
 import { Size } from '../input/input';
-import { LabelType } from '../control-label/control-label';
-import { ListDataItem } from '../list/consts';
-import { Directions } from '../popup/popup.consts';
+import { type LabelType } from '../control-label/control-label';
+import { type ListDataItem } from '../list/consts';
+import { type Directions } from '../popup/popup.consts';
 import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
-import SelectPopup, { Filter, FilterFn, Multiple, Tags } from './select__popup';
+import SelectPopup, { type Filter, type FilterFn, type Multiple, type Tags } from './select-popup';
 /**
  * @name Select
  */

package/components/select/select.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable max-lines */
 import { Component, Fragment, } from 'react';
 import classNames from 'classnames';
 import chevronDownIcon from '@jetbrains/icons/chevron-down';
@@ -18,11 +19,11 @@ import rerenderHOC from '../global/rerender-hoc';
 import fuzzyHighlight from '../global/fuzzy-highlight';
 import memoize from '../global/memoize';
 import { I18nContext } from '../i18n/i18n-context';
-import { createComposedRef } from '../global/composeRefs';
+import { createComposedRef } from '../global/compose-refs';
 import { isArray } from '../global/typescript-utils';
 import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
 import inputStyles from '../input/input.css';
-import SelectPopup from './select__popup';
+import SelectPopup from './select-popup';
 import styles from './select.css';
 /**
  * @name Select
@@ -55,7 +56,7 @@ function getLowerCaseLabel(item) {
 }
 function doesLabelMatch(itemToCheck, fn) {
     const lowerCaseLabel = getLowerCaseLabel(itemToCheck);
-    if (lowerCaseLabel == null) {
+    if (lowerCaseLabel === null || lowerCaseLabel === undefined) {
         return true;
     }
     return fn(lowerCaseLabel);
@@ -77,6 +78,7 @@ function buildMultipleMap(selected) {
         return acc;
     }, {});
 }
+// eslint-disable-next-line complexity
 function getListItems(props, state, rawFilterString, data = props.data) {
     let filterString = rawFilterString.trim();
     if (isInputMode(props.type) &&
@@ -136,7 +138,7 @@ function getListItems(props, state, rawFilterString, data = props.data) {
     return { filteredData, addButton };
 }
 const getItemLabel = ({ selectedLabel, label }) => {
-    if (selectedLabel != null) {
+    if (selectedLabel !== null && selectedLabel !== undefined) {
         return selectedLabel;
     }
     return typeof label === 'string' ? label : '';
@@ -236,7 +238,9 @@ export default class Select extends Component {
             const { filteredData, addButton } = getListItems(nextProps, nextState, filterValue, data);
             Object.assign(nextState, { shownData: filteredData, addButton });
         }
-        const isSelectionEmpty = nextProps.selected == null || (Array.isArray(nextProps.selected) && nextProps.selected.length === 0);
+        const isSelectionEmpty = nextProps.selected === null ||
+            nextProps.selected === undefined ||
+            (Array.isArray(nextProps.selected) && nextProps.selected.length === 0);
         if (isSelectionEmpty) {
             nextState.lastInteractedKey = null;
         }
@@ -333,7 +337,7 @@ export default class Select extends Component {
         if (!this._popup?.isVisible()) {
             return true;
         }
-        else if (this.props.multiple || !this.props.getInitial) {
+        if (this.props.multiple || !this.props.getInitial) {
             return false;
         }
         const selected = {
@@ -360,7 +364,7 @@ export default class Select extends Component {
     _getActiveIndex(items) {
         const { selected, lastInteractedKey } = this.state;
         const isNonOptionItem = (item) => item.isResetItem || List.isItemType(List.ListProps.Type.SEPARATOR, item);
-        if (lastInteractedKey != null) {
+        if (lastInteractedKey !== null && lastInteractedKey !== undefined) {
             const index = items.findIndex(item => item.key === lastInteractedKey && !isNonOptionItem(item));
             if (index >= 0)
                 return index;
@@ -404,7 +408,7 @@ export default class Select extends Component {
             separator: reset.separator,
             key: reset.label,
             rgItemType: List.ListProps.Type.CUSTOM,
-            template: (_jsx(Button, { inline: true, className: styles.button, "data-test": "ring-select-reset-tags-button", height: ControlsHeight.S, children: reset.label })),
+            template: (_jsx(Button, { inline: true, className: styles.button, "data-test": 'ring-select-reset-tags-button', height: ControlsHeight.S, children: reset.label })),
             glyph: reset.glyph,
             onClick: resetHandler,
         };
@@ -425,6 +429,7 @@ export default class Select extends Component {
     _renderPopup() {
         const anchorElement = this.props.targetElement || this.node;
         const { showPopup, shownData } = this.state;
+        // eslint-disable-next-line no-underscore-dangle
         const _shownData = this._prependResetOption(shownData);
         const activeIndex = this._getActiveIndex(_shownData);
         return (_jsx(I18nContext.Consumer, { children: ({ translate }) => {
@@ -474,7 +479,7 @@ export default class Select extends Component {
         }
         return (_jsxs("div", { className: classNames({
                 [styles.toolbar]: Boolean(this.state.addButton || renderBottomToolbar),
-            }), "data-test": "ring-select-toolbar", children: [renderBottomToolbar && renderBottomToolbar(), this.state.addButton && (_jsx(Button, { inline: true, delayed: delayed, className: classNames(styles.button, styles.buttonSpaced), onClick: this.addHandler, "data-test": "ring-select-toolbar-button", children: prefix ? `${prefix} ${label}` : label })), hint && _jsx(List.ListHint, { label: hint, "data-test": "ring-select-toolbar-hint" })] }));
+            }), "data-test": 'ring-select-toolbar', children: [renderBottomToolbar && renderBottomToolbar(), this.state.addButton && (_jsx(Button, { inline: true, delayed: delayed, className: classNames(styles.button, styles.buttonSpaced), onClick: this.addHandler, "data-test": 'ring-select-toolbar-button', children: prefix ? `${prefix} ${label}` : label })), hint && _jsx(List.ListHint, { label: hint, "data-test": 'ring-select-toolbar-hint' })] }));
     }
     getTopbar() {
         return this.props.renderTopToolbar?.();
@@ -494,9 +499,7 @@ export default class Select extends Component {
             this.setState({ filterValue: setValue });
             return undefined;
         }
-        else {
-            return this.state.filterValue;
-        }
+        return this.state.filterValue;
     }
     isInputMode() {
         return isInputMode(this.props.type);
@@ -597,7 +600,7 @@ export default class Select extends Component {
             if (!tryKeepOpen) {
                 this._hidePopup(isSelectItemEvent);
             }
-            if (selected.key == null) {
+            if (selected.key === null || selected.key === undefined) {
                 throw new Error('Multiple selection requires each item to have the "key" property');
             }
             this.setState(prevState => {
@@ -729,9 +732,7 @@ export default class Select extends Component {
             }
             return labels.filter(Boolean).join(', ');
         }
-        else {
-            return this.state.selected != null ? getItemLabel(this.state.selected) : null;
-        }
+        return this.state.selected !== null && this.state.selected !== undefined ? getItemLabel(this.state.selected) : null;
     }
     getHeight() {
         return this.props.height || (typeof this.context === 'function' ? this.context() : this.context);
@@ -742,13 +743,13 @@ export default class Select extends Component {
         const icons = [];
         const height = this.getHeight();
         if (!Array.isArray(selected) && selected?.icon) {
-            icons.push(_jsx("button", { title: "Toggle options popup", type: "button", className: styles.selectedIcon, disabled: this.props.disabled, onClick: this._clickHandler, style: { backgroundImage: `url(${selected.icon})` } }, "selected"));
+            icons.push(_jsx("button", { title: 'Toggle options popup', type: 'button', className: styles.selectedIcon, disabled: this.props.disabled, onClick: this._clickHandler, style: { backgroundImage: `url(${selected.icon})` } }, 'selected'));
         }
         if (clear && !disabled && !this._selectionIsEmpty()) {
-            icons.push(_jsx(Button, { title: "Clear selection", "data-test": "ring-clear-select", className: styles.clearIcon, disabled: this.props.disabled, onClick: this.clear, height: height, icon: closeIcon }, "close"));
+            icons.push(_jsx(Button, { title: 'Clear selection', "data-test": 'ring-clear-select', className: styles.clearIcon, disabled: this.props.disabled, onClick: this.clear, height: height, icon: closeIcon }, 'close'));
         }
         if (!hideArrow) {
-            icons.push(_jsx(Button, { title: "Toggle options popup", className: styles.chevron, iconClassName: styles.chevronIcon, icon: chevronDownIcon, disabled: this.props.disabled, height: height, onClick: this._clickHandler }, "hide"));
+            icons.push(_jsx(Button, { title: 'Toggle options popup', className: styles.chevron, iconClassName: styles.chevronIcon, icon: chevronDownIcon, disabled: this.props.disabled, height: height, onClick: this._clickHandler }, 'hide'));
         }
         return icons;
     }
@@ -774,6 +775,7 @@ export default class Select extends Component {
             space: noop,
         };
     }
+    // eslint-disable-next-line complexity
     renderSelect(activeItemId) {
         const dataTest = this.props['data-test'];
         const { selectedLabel } = this.props;
@@ -799,10 +801,10 @@ export default class Select extends Component {
         switch (this.props.type) {
             case Type.INPUT_WITHOUT_CONTROLS:
             case Type.INPUT:
-                return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: this.nodeRef, className: classNames(classes, styles.inputMode), "data-test": dataTests('ring-select', dataTest), role: "presentation" // has interactive elements inside
-                            , onMouseDown: this.mouseDownHandler, onMouseUp: this.mouseUpHandler, children: [shortcutsEnabled && _jsx(Shortcuts, { map: this.getShortcutsMap(), scope: this.shortcutsScope }), _jsx(Input, { ...ariaProps, height: this.props.height, autoComplete: "off", id: this.props.id, onClick: this._clickHandler, inputRef: this.composedFilterRef(this.filterRef, this.props.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, 
+                return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: this.nodeRef, className: classNames(classes, styles.inputMode), "data-test": dataTests('ring-select', dataTest), role: 'presentation' // has interactive elements inside
+                            , onMouseDown: this.mouseDownHandler, onMouseUp: this.mouseUpHandler, children: [shortcutsEnabled && _jsx(Shortcuts, { map: this.getShortcutsMap(), scope: this.shortcutsScope }), _jsx(Input, { ...ariaProps, height: this.props.height, autoComplete: 'off', id: this.props.id, onClick: this._clickHandler, inputRef: this.composedFilterRef(this.filterRef, this.props.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, 
                                     // Input with error style without description
-                                    error: this.props.error != null ? '' : null, label: this.props.type === Type.INPUT ? this._getLabel() : null, placeholder: this.props.inputPlaceholder, onKeyDown: this.props.onKeyDown, "data-test": "ring-select__focus", enableShortcuts: shortcutsEnabled
+                                    error: this.props.error ? '' : null, 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,
@@ -812,9 +814,9 @@ export default class Select extends Component {
                 return (_jsxs("div", { ref: this.nodeRef, className: classNames(classes, styles.buttonMode), "data-test": dataTests('ring-select', dataTest), children: [selectedLabel && (_jsx(ControlLabel, { type: this.props.labelType, disabled: this.props.disabled, htmlFor: this.props.id, children: selectedLabel })), shortcutsEnabled && _jsx(Shortcuts, { map: this.getShortcutsMap(), scope: this.shortcutsScope }), _jsxs("div", { className: styles.buttonContainer, children: [_jsxs(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,
                                         [styles.buttonValueEmpty]: this._selectionIsEmpty(),
-                                    }), disabled: this.props.disabled, style: style, "data-test": "ring-select__button ring-select__focus", children: [this._getAvatar(), this._getPlaceholder()] }), iconsNode] }), this._renderPopup()] }));
+                                    }), disabled: this.props.disabled, style: style, "data-test": 'ring-select__button ring-select__focus', children: [this._getAvatar(), this._getPlaceholder()] }), iconsNode] }), this._renderPopup()] }));
             case Type.INLINE:
-                return (_jsxs("div", { className: classes, ref: this.nodeRef, "data-test": dataTests('ring-select', dataTest), children: [shortcutsEnabled && _jsx(Shortcuts, { map: this.getShortcutsMap(), scope: this.shortcutsScope }), _jsx(Anchor, { ...ariaProps, className: this.props.buttonClassName ?? undefined, id: this.props.id, onClick: this._clickHandler, "data-test": "ring-select__focus", disabled: this.props.disabled, active: this.state.showPopup, children: this._getPlaceholder() }), this._renderPopup()] }));
+                return (_jsxs("div", { className: classes, ref: this.nodeRef, "data-test": dataTests('ring-select', dataTest), children: [shortcutsEnabled && _jsx(Shortcuts, { map: this.getShortcutsMap(), scope: this.shortcutsScope }), _jsx(Anchor, { ...ariaProps, className: this.props.buttonClassName ?? undefined, id: this.props.id, onClick: this._clickHandler, "data-test": 'ring-select__focus', disabled: this.props.disabled, active: this.state.showPopup, children: this._getPlaceholder() }), this._renderPopup()] }));
             default:
                 if (this.props.customAnchor) {
                     return (_jsxs(Fragment, { children: [shortcutsEnabled && _jsx(Shortcuts, { map: this.getShortcutsMap(), scope: this.shortcutsScope }), this.props.customAnchor({
@@ -833,7 +835,7 @@ export default class Select extends Component {
                                 popup: this._renderPopup(),
                             })] }));
                 }
-                return (_jsx("span", { id: this.props.id, ref: this.nodeRef, "data-test": "ring-select", children: this._renderPopup() }));
+                return (_jsx("span", { id: this.props.id, ref: this.nodeRef, "data-test": 'ring-select', children: this._renderPopup() }));
         }
     }
     render() {