@jetbrains/ring-ui 5.0.51 → 5.0.53

package/components/date-picker/months.js

@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
 import addMonths from 'date-fns/addMonths';
 import getDay from 'date-fns/getDay';
 import getDaysInMonth from 'date-fns/getDaysInMonth';
-import set from 'date-fns/set';
-import startOfHour from 'date-fns/startOfHour';
 import startOfMonth from 'date-fns/startOfMonth';
 import subMonths from 'date-fns/subMonths';
 import endOfMonth from 'date-fns/endOfMonth';
@@ -37,8 +35,9 @@ const scrollSchedule = scheduleRAF();
 let dy = 0;
 export default function Months(props) {
     const { scrollDate } = props;
-    // prevent switching from april to march because of daylight saving time
-    const monthStart = startOfHour(set(scrollDate, { date: 1, hours: 1 }));
+    const monthDate = scrollDate instanceof Date ? scrollDate : new Date(scrollDate);
+    // Creating midnight of the first day of the month in UTC to prevent the impact of user timezone
+    const monthStart = new Date(Date.UTC(monthDate.getFullYear(), monthDate.getMonth(), 1));
     let month = subMonths(monthStart, MONTHSBACK);
     const months = [month];
     for (let i = 0; i < MONTHSBACK * DOUBLE; i++) {

package/components/editable-heading/editable-heading.d.ts

@@ -2,6 +2,7 @@ import React, { InputHTMLAttributes } from 'react';
 import { Levels } from '../heading/heading';
 import { Size } from '../input/input';
 export { Levels };
+export { Size };
 export declare type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'size'> & {
     level?: Levels;
     headingClassName?: string | null;
@@ -19,7 +20,6 @@ export declare type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputEle
     error?: string;
     renderMenu?: () => React.ReactNode;
 };
-export { Size } from '../input/input';
 export declare const EditableHeading: (props: EditableHeadingProps) => JSX.Element;
 declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => JSX.Element>;
 export default _default;

package/components/editable-heading/editable-heading.js

@@ -8,12 +8,20 @@ import getUID from '../global/get-uid';
 import Shortcuts from '../shortcuts/shortcuts';
 import styles from './editable-heading.css';
 export { Levels };
+export { Size };
 function noop() { }
-const shortcutsScope = getUID('ring-editable-heading-');
-export { Size } from '../input/input';
 export const EditableHeading = (props) => {
-    const { level = Levels.H1, className, headingClassName, inputClassName, isEditing, isSavingPossible, isSaving, children, embedded = false, size = Size.L, onEdit, onSave = noop, onCancel = noop, autoFocus = true, 'data-test': dataTest, error, disabled, renderMenu = () => null, ...restProps } = props;
+    const { level = Levels.H1, className, headingClassName, inputClassName, children, isEditing = false, isSavingPossible = false, isSaving = false, embedded = false, size = Size.L, onEdit = noop, onSave = noop, onCancel = noop, autoFocus = true, 'data-test': dataTest, error, disabled, renderMenu = () => null, ...restProps } = props;
+    const [shortcutsScope] = React.useState(getUID('ring-editable-heading-'));
+    const [isInFocus, setIsInFocus] = React.useState(false);
     const hasError = error !== undefined;
+    const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
+    const isCancelDisabled = isSaving;
+    const isShortcutsDisabled = !isInFocus || isSaving;
+    const shortcutsMap = React.useMemo(() => ({
+        enter: isSaveDisabled ? noop : onSave,
+        esc: isCancelDisabled ? noop : onCancel
+    }), [isSaveDisabled, isCancelDisabled, onSave, onCancel]);
     const classes = classNames(styles.editableHeading, className, {
         [styles.fullSize]: size === Size.FULL,
         [styles.isEditing]: isEditing,
@@ -22,26 +30,27 @@ export const EditableHeading = (props) => {
     });
     const headingClasses = classNames(styles.heading, headingClassName);
     const inputClasses = classNames('ring-js-shortcuts', styles.input, inputStyles[`size${size}`], styles[`level${level}`], inputClassName);
-    const onClick = React.useCallback(() => {
-        if (disabled || !onEdit) {
+    const onHeadingClick = React.useCallback(() => {
+        if (disabled) {
             return undefined;
         }
         return onEdit();
     }, [disabled, onEdit]);
-    const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
-    const isCancelDisabled = isSaving;
+    const onInputFocus = React.useCallback(() => {
+        setIsInFocus(true);
+    }, []);
+    const onInputBlur = React.useCallback(() => {
+        setIsInFocus(false);
+    }, []);
     return (<>
       <div className={classes}>
         {!disabled && isEditing
             ? (<>
-              <Shortcuts map={{
-                    enter: () => !isSaveDisabled && onSave(),
-                    esc: () => !isCancelDisabled && onCancel()
-                }} scope={shortcutsScope} disabled={isSaving}/>
+              <Shortcuts map={shortcutsMap} scope={shortcutsScope} disabled={isShortcutsDisabled}/>
 
-              <input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} {...restProps}/>
+              <input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onFocus={onInputFocus} onBlur={onInputBlur} {...restProps}/>
             </>)
-            : (<Heading className={headingClasses} level={level} onClick={onClick} data-test={dataTest}>{children}</Heading>)}
+            : (<Heading className={headingClasses} level={level} onClick={onHeadingClick} data-test={dataTest}>{children}</Heading>)}
 
         {!isEditing && (renderMenu())}
 

package/components/header/services.js

@@ -42,8 +42,8 @@ export default class Services extends PureComponent {
             return (<TrayIcon {...props} loader={loading} active={loading} icon={servicesIcon} aria-label="Services"/>);
         }
         const sortedServices = [...services].sort(Services.sort);
-        const servicesWithIcons = sortedServices.filter(service => service.iconUrl);
-        const servicesWithOutIcons = sortedServices.filter(service => !service.iconUrl);
+        const servicesWithIcons = sortedServices.filter(service => service.iconUrl && service.homeUrl);
+        const servicesWithOutIcons = sortedServices.filter(service => !service.iconUrl && service.homeUrl);
         const separatorIsRequired = servicesWithIcons.length !== 0 && servicesWithOutIcons.length !== 0;
         return (<Dropdown {...props} anchor={makeAnchor(loading)} initShown={initShown}>
         <Popup className={classNames(styles.services, { [darkStyles.dark]: theme === Theme.DARK })} top={-3}>

package/components/input/input-label.d.ts

@@ -0,0 +1,10 @@
+import { PureComponent, ReactNode } from 'react';
+interface InputLabelProps {
+    htmlFor?: string;
+    disabled?: boolean;
+    label: ReactNode;
+}
+export declare class InputLabel extends PureComponent<InputLabelProps> {
+    render(): JSX.Element;
+}
+export default InputLabel;

package/components/input/input-label.js

@@ -0,0 +1,18 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './input.css';
+export class InputLabel extends PureComponent {
+    render() {
+        const { htmlFor, label, disabled } = this.props;
+        return (<label htmlFor={htmlFor} className={classNames(styles.label, {
+                [styles.disabledLabel]: disabled
+            })}>{label}</label>);
+    }
+}
+InputLabel.propTypes = {
+    label: PropTypes.node,
+    disabled: PropTypes.bool,
+    id: PropTypes.string
+};
+export default InputLabel;

package/components/input/input.js

@@ -9,6 +9,7 @@ import Icon from '../icon/icon';
 import composeRefs from '../global/composeRefs';
 import { ControlsHeightContext } from '../global/controls-height';
 import styles from './input.css';
+import { InputLabel } from './input-label';
 function noop() { }
 /**
  * @name Input
@@ -117,9 +118,7 @@ export class Input extends PureComponent {
             'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null
         };
         return (<div className={classes} data-test="ring-input">
-        {label && (<label htmlFor={this.getId()} className={classNames(styles.label, {
-                    [styles.disabledLabel]: disabled
-                })}>{label}</label>)}
+        {label && (<InputLabel htmlFor={this.getId()} disabled={disabled} label={label}/>)}
         <div className={styles.container}>
           {icon && <Icon glyph={icon} className={styles.icon}/>}
           {multiline

package/components/select/select.d.ts

@@ -236,6 +236,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     clear: (event?: Event | SyntheticEvent) => boolean;
     _selectionIsEmpty(): boolean;
     private _getLabel;
+    private _getPlaceholder;
     _getSelectedString(): string | null;
     private _getIcons;
     private _getAvatar;

package/components/select/select.js

@@ -9,6 +9,7 @@ import Avatar, { Size as AvatarSize } from '../avatar/avatar';
 import Popup from '../popup/popup';
 import List, { ActiveItemContext } from '../list/list';
 import Input, { Size } from '../input/input';
+import InputLabel from '../input/input-label';
 import Shortcuts from '../shortcuts/shortcuts';
 import Button from '../button/button';
 import dataTests from '../global/data-tests';
@@ -717,6 +718,12 @@ export default class Select extends Component {
     _getLabel() {
         return this.props.label ?? this.props.selectedLabel ?? 'Select an option';
     }
+    _getPlaceholder() {
+        if (this._selectionIsEmpty()) {
+            return this.props.label ?? 'Select an option';
+        }
+        return this._getSelectedString();
+    }
     _getSelectedString() {
         if (Array.isArray(this.state.selected)) {
             const labels = [];
@@ -767,6 +774,7 @@ export default class Select extends Component {
     }
     renderSelect(activeItemId) {
         const dataTest = this.props['data-test'];
+        const { selectedLabel } = this.props;
         const { shortcutsEnabled } = this.state;
         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,
@@ -798,13 +806,14 @@ export default class Select extends Component {
         </div>);
             case Type.BUTTON:
                 return (<div ref={this.nodeRef} className={classNames(classes, styles.buttonMode)} data-test={dataTests('ring-select', dataTest)}>
+            {selectedLabel && (<InputLabel label={selectedLabel} disabled={this.props.disabled} htmlFor={this.props.id}/>)}
             {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
             <div className={styles.buttonContainer}>
               <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()}
-                {this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()}
+                {this._getPlaceholder()}
               </Button>
               {iconsNode}
             </div>
@@ -814,7 +823,7 @@ export default class Select extends Component {
                 return (<div className={classes} ref={this.nodeRef} data-test={dataTests('ring-select', dataTest)}>
             {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
             <Anchor {...ariaProps} id={this.props.id} onClick={this._clickHandler} data-test="ring-select__focus" disabled={this.props.disabled} active={this.state.showPopup}>
-              {this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()}
+              {this._getPlaceholder()}
             </Anchor>
             {this._renderPopup()}
           </div>);
@@ -832,7 +841,7 @@ export default class Select extends Component {
                                 id: this.props.id,
                                 onClick: this._clickHandler,
                                 disabled: this.props.disabled,
-                                children: this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString(),
+                                children: this._getPlaceholder(),
                                 'data-test': 'ring-select_focus'
                             },
                             popup: this._renderPopup()

package/components/shortcuts/shortcuts.js

@@ -18,13 +18,17 @@ export default class Shortcuts extends PureComponent {
         }
     }
     componentDidUpdate(prevProps) {
-        const { disabled } = this.props;
+        const { disabled, map } = this.props;
         if (!prevProps.disabled && disabled) {
             this.turnShorcutsOff();
         }
         if (prevProps.disabled && !disabled) {
             this.turnShorcutsOn();
         }
+        if (prevProps.map !== map) {
+            this.turnShorcutsOff();
+            this.turnShorcutsOn();
+        }
     }
     componentWillUnmount() {
         if (!this.props.disabled) {

package/dist/date-picker/date-input.js

@@ -22,6 +22,7 @@ import '../_helpers/button__classes.js';
 import '../global/get-uid.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 import 'date-fns/add';
 
 class DateInput extends React.PureComponent {

package/dist/date-picker/date-picker.js

@@ -55,7 +55,6 @@ import './months.js';
 import 'date-fns/addMonths';
 import 'date-fns/getDay';
 import 'date-fns/getDaysInMonth';
-import 'date-fns/startOfHour';
 import 'date-fns/startOfMonth';
 import 'date-fns/subMonths';
 import 'date-fns/endOfMonth';
@@ -83,6 +82,7 @@ import '@jetbrains/icons/close-12px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 
 const PopupComponent = _ref => {
   let {

package/dist/date-picker/date-popup.js

@@ -30,12 +30,11 @@ import '../_helpers/button__classes.js';
 import '../global/get-uid.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 import 'date-fns/add';
 import 'date-fns/addMonths';
 import 'date-fns/getDay';
 import 'date-fns/getDaysInMonth';
-import 'date-fns/set';
-import 'date-fns/startOfHour';
 import 'date-fns/startOfMonth';
 import 'date-fns/subMonths';
 import 'date-fns/endOfMonth';
@@ -50,6 +49,7 @@ import 'date-fns/getDate';
 import 'date-fns/isToday';
 import './month-names.js';
 import 'date-fns/isThisMonth';
+import 'date-fns/set';
 import 'date-fns/startOfYear';
 import './month-slider.js';
 import 'date-fns/addYears';

package/dist/date-picker/months.js

@@ -4,8 +4,6 @@ import PropTypes from 'prop-types';
 import addMonths from 'date-fns/addMonths';
 import getDay from 'date-fns/getDay';
 import getDaysInMonth from 'date-fns/getDaysInMonth';
-import set from 'date-fns/set';
-import startOfHour from 'date-fns/startOfHour';
 import startOfMonth from 'date-fns/startOfMonth';
 import subMonths from 'date-fns/subMonths';
 import endOfMonth from 'date-fns/endOfMonth';
@@ -27,6 +25,7 @@ import 'date-fns/isSameDay';
 import 'date-fns/isToday';
 import 'date-fns/startOfDay';
 import 'date-fns/isThisMonth';
+import 'date-fns/set';
 import 'date-fns/startOfYear';
 import './month-slider.js';
 import 'date-fns/addYears';
@@ -62,11 +61,9 @@ function Months(props) {
   const {
     scrollDate
   } = props;
-  // prevent switching from april to march because of daylight saving time
-  const monthStart = startOfHour(set(scrollDate, {
-    date: 1,
-    hours: 1
-  }));
+  const monthDate = scrollDate instanceof Date ? scrollDate : new Date(scrollDate);
+  // Creating midnight of the first day of the month in UTC to prevent the impact of user timezone
+  const monthStart = new Date(Date.UTC(monthDate.getFullYear(), monthDate.getMonth(), 1));
   let month = subMonths(monthStart, MONTHSBACK);
   const months = [month];
   for (let i = 0; i < MONTHSBACK * DOUBLE; i++) {

package/dist/editable-heading/editable-heading.d.ts

@@ -2,6 +2,7 @@ import React, { InputHTMLAttributes } from 'react';
 import { Levels } from '../heading/heading';
 import { Size } from '../input/input';
 export { Levels };
+export { Size };
 export declare type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'size'> & {
     level?: Levels;
     headingClassName?: string | null;
@@ -19,7 +20,6 @@ export declare type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputEle
     error?: string;
     renderMenu?: () => React.ReactNode;
 };
-export { Size } from '../input/input';
 export declare const EditableHeading: (props: EditableHeadingProps) => JSX.Element;
 declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => JSX.Element>;
 export default _default;

package/dist/editable-heading/editable-heading.js

@@ -24,6 +24,7 @@ import '../_helpers/button__classes.js';
 import '@jetbrains/icons/close-12px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
+import '../input/input-label.js';
 import '../shortcuts/core.js';
 import 'combokeys';
 import '../global/sniffer.js';
@@ -32,20 +33,19 @@ import 'sniffr';
 var modules_6e69b0fe = {"unit":"8px","editableHeading":"editableHeading_rui_0870","fullSize":"fullSize_rui_0870","isEditing":"isEditing_rui_0870","heading":"heading_rui_0870","disabled":"disabled_rui_0870","input":"input_rui_0870","error":"error_rui_0870","button":"button_rui_0870","errorText":"errorText_rui_0870","level1":"level1_rui_0870","level2":"level2_rui_0870","level3":"level3_rui_0870"};
 
 function noop() {}
-const shortcutsScope = getUID('ring-editable-heading-');
 const EditableHeading = props => {
   const {
     level = Levels.H1,
     className,
     headingClassName,
     inputClassName,
-    isEditing,
-    isSavingPossible,
-    isSaving,
     children,
+    isEditing = false,
+    isSavingPossible = false,
+    isSaving = false,
     embedded = false,
     size = Size.L,
-    onEdit,
+    onEdit = noop,
     onSave = noop,
     onCancel = noop,
     autoFocus = true,
@@ -55,7 +55,16 @@ const EditableHeading = props => {
     renderMenu = () => null,
     ...restProps
   } = props;
+  const [shortcutsScope] = React.useState(getUID('ring-editable-heading-'));
+  const [isInFocus, setIsInFocus] = React.useState(false);
   const hasError = error !== undefined;
+  const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
+  const isCancelDisabled = isSaving;
+  const isShortcutsDisabled = !isInFocus || isSaving;
+  const shortcutsMap = React.useMemo(() => ({
+    enter: isSaveDisabled ? noop : onSave,
+    esc: isCancelDisabled ? noop : onCancel
+  }), [isSaveDisabled, isCancelDisabled, onSave, onCancel]);
   const classes = classNames(modules_6e69b0fe.editableHeading, className, {
     [modules_6e69b0fe.fullSize]: size === Size.FULL,
     [modules_6e69b0fe.isEditing]: isEditing,
@@ -64,33 +73,36 @@ const EditableHeading = props => {
   });
   const headingClasses = classNames(modules_6e69b0fe.heading, headingClassName);
   const inputClasses = classNames('ring-js-shortcuts', modules_6e69b0fe.input, modules_88cfaf40[`size${size}`], modules_6e69b0fe[`level${level}`], inputClassName);
-  const onClick = React.useCallback(() => {
-    if (disabled || !onEdit) {
+  const onHeadingClick = React.useCallback(() => {
+    if (disabled) {
       return undefined;
     }
     return onEdit();
   }, [disabled, onEdit]);
-  const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
-  const isCancelDisabled = isSaving;
+  const onInputFocus = React.useCallback(() => {
+    setIsInFocus(true);
+  }, []);
+  const onInputBlur = React.useCallback(() => {
+    setIsInFocus(false);
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classes
   }, !disabled && isEditing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Shortcuts, {
-    map: {
-      enter: () => !isSaveDisabled && onSave(),
-      esc: () => !isCancelDisabled && onCancel()
-    },
+    map: shortcutsMap,
     scope: shortcutsScope,
-    disabled: isSaving
+    disabled: isShortcutsDisabled
   }), /*#__PURE__*/React.createElement("input", _extends({
     className: inputClasses,
     value: children,
     autoFocus: autoFocus,
     "data-test": dataTest,
-    disabled: isSaving
+    disabled: isSaving,
+    onFocus: onInputFocus,
+    onBlur: onInputBlur
   }, restProps))) : /*#__PURE__*/React.createElement(Heading, {
     className: headingClasses,
     level: level,
-    onClick: onClick,
+    onClick: onHeadingClick,
     "data-test": dataTest
   }, children), !isEditing && renderMenu(), isEditing && !embedded && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
     className: modules_6e69b0fe.button,

package/dist/header/services.js

@@ -80,8 +80,8 @@ class Services extends PureComponent {
       }));
     }
     const sortedServices = [...services].sort(Services.sort);
-    const servicesWithIcons = sortedServices.filter(service => service.iconUrl);
-    const servicesWithOutIcons = sortedServices.filter(service => !service.iconUrl);
+    const servicesWithIcons = sortedServices.filter(service => service.iconUrl && service.homeUrl);
+    const servicesWithOutIcons = sortedServices.filter(service => !service.iconUrl && service.homeUrl);
     const separatorIsRequired = servicesWithIcons.length !== 0 && servicesWithOutIcons.length !== 0;
     return /*#__PURE__*/React.createElement(Dropdown, _extends({}, props, {
       anchor: makeAnchor(loading),

package/dist/input/input-label.d.ts

@@ -0,0 +1,10 @@
+import { PureComponent, ReactNode } from 'react';
+interface InputLabelProps {
+    htmlFor?: string;
+    disabled?: boolean;
+    label: ReactNode;
+}
+export declare class InputLabel extends PureComponent<InputLabelProps> {
+    render(): JSX.Element;
+}
+export default InputLabel;

package/dist/input/input-label.js

@@ -0,0 +1,27 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { m as modules_88cfaf40 } from '../_helpers/input.js';
+
+class InputLabel extends PureComponent {
+  render() {
+    const {
+      htmlFor,
+      label,
+      disabled
+    } = this.props;
+    return /*#__PURE__*/React.createElement("label", {
+      htmlFor: htmlFor,
+      className: classNames(modules_88cfaf40.label, {
+        [modules_88cfaf40.disabledLabel]: disabled
+      })
+    }, label);
+  }
+}
+InputLabel.propTypes = {
+  label: PropTypes.node,
+  disabled: PropTypes.bool,
+  id: PropTypes.string
+};
+
+export { InputLabel, InputLabel as default };

package/dist/input/input.js

@@ -10,6 +10,7 @@ import Icon from '../icon/icon.js';
 import composeRefs from '../global/composeRefs.js';
 import { ControlsHeightContext } from '../global/controls-height.js';
 import { m as modules_88cfaf40 } from '../_helpers/input.js';
+import { InputLabel } from './input-label.js';
 import 'focus-visible';
 import '@jetbrains/icons/chevron-10px';
 import '../link/clickableLink.js';
@@ -150,12 +151,11 @@ class Input extends PureComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: classes,
       "data-test": "ring-input"
-    }, label && /*#__PURE__*/React.createElement("label", {
+    }, label && /*#__PURE__*/React.createElement(InputLabel, {
       htmlFor: this.getId(),
-      className: classNames(modules_88cfaf40.label, {
-        [modules_88cfaf40.disabledLabel]: disabled
-      })
-    }, label), /*#__PURE__*/React.createElement("div", {
+      disabled: disabled,
+      label: label
+    }), /*#__PURE__*/React.createElement("div", {
       className: modules_88cfaf40.container
     }, icon && /*#__PURE__*/React.createElement(Icon, {
       glyph: icon,

package/dist/pager/pager.js

@@ -72,6 +72,7 @@ import '../input/input.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 import '../global/rerender-hoc.js';
 import '../global/react-render-adapter.js';
 import '../global/fuzzy-highlight.js';

package/dist/pager-ng/pager-ng.js

@@ -78,6 +78,7 @@ import '../input/input.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 import '../global/rerender-hoc.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';

package/dist/query-assist/query-assist.js

@@ -71,6 +71,7 @@ import '../global/composeRefs.js';
 import '@jetbrains/icons/chevron-10px';
 import '../_helpers/button__classes.js';
 import '../global/prop-types.js';
+import '../input/input-label.js';
 
 const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING + PopupMenu.PopupProps.Dimension.BORDER_WIDTH;
 const ngModelStateField = 'query';

package/dist/query-assist-ng/query-assist-ng.js

@@ -75,6 +75,7 @@ import '../_helpers/button__classes.js';
 import '../input/input.js';
 import '../global/prop-types.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 import '../_helpers/query-assist__suggestions.js';
 
 var queryAssistNg = angularComponentFactory(QueryAssist, 'QueryAssist').name;

package/dist/select/select.d.ts

@@ -236,6 +236,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     clear: (event?: Event | SyntheticEvent) => boolean;
     _selectionIsEmpty(): boolean;
     private _getLabel;
+    private _getPlaceholder;
     _getSelectedString(): string | null;
     private _getIcons;
     private _getAvatar;

package/dist/select/select.js

@@ -10,6 +10,7 @@ import Avatar, { Size as Size$1 } from '../avatar/avatar.js';
 import Popup from '../popup/popup.js';
 import List, { ActiveItemContext } from '../list/list.js';
 import { Size, Input } from '../input/input.js';
+import { InputLabel } from '../input/input-label.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
 import { Button } from '../button/button.js';
 import joinDataTestAttributes from '../global/data-tests.js';
@@ -830,6 +831,13 @@ class Select extends Component {
     var _ref2, _this$props$label;
     return (_ref2 = (_this$props$label = this.props.label) !== null && _this$props$label !== void 0 ? _this$props$label : this.props.selectedLabel) !== null && _ref2 !== void 0 ? _ref2 : 'Select an option';
   }
+  _getPlaceholder() {
+    if (this._selectionIsEmpty()) {
+      var _this$props$label2;
+      return (_this$props$label2 = this.props.label) !== null && _this$props$label2 !== void 0 ? _this$props$label2 : 'Select an option';
+    }
+    return this._getSelectedString();
+  }
   _getSelectedString() {
     if (Array.isArray(this.state.selected)) {
       const labels = [];
@@ -911,8 +919,11 @@ class Select extends Component {
     };
   }
   renderSelect(activeItemId) {
-    var _this$props$label2, _this$props$label3, _this$_popup5, _this$_popup5$list;
+    var _this$props$label3, _this$props$label4, _this$_popup5, _this$_popup5$list;
     const dataTest = this.props['data-test'];
+    const {
+      selectedLabel
+    } = this.props;
     const {
       shortcutsEnabled
     } = this.state;
@@ -928,9 +939,9 @@ class Select extends Component {
     const ariaProps = this.state.showPopup ? {
       'aria-owns': this.listId,
       'aria-activedescendant': activeItemId,
-      'aria-label': (_this$props$label2 = this.props.label) !== null && _this$props$label2 !== void 0 ? _this$props$label2 : undefined
-    } : {
       'aria-label': (_this$props$label3 = this.props.label) !== null && _this$props$label3 !== void 0 ? _this$props$label3 : undefined
+    } : {
+      'aria-label': (_this$props$label4 = this.props.label) !== null && _this$props$label4 !== void 0 ? _this$props$label4 : undefined
     };
     switch (this.props.type) {
       case Type.INPUT_WITHOUT_CONTROLS:
@@ -971,7 +982,11 @@ class Select extends Component {
           ref: this.nodeRef,
           className: classNames(classes, modules_9d0de074.buttonMode),
           "data-test": joinDataTestAttributes('ring-select', dataTest)
-        }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
+        }, selectedLabel && /*#__PURE__*/React.createElement(InputLabel, {
+          label: selectedLabel,
+          disabled: this.props.disabled,
+          htmlFor: this.props.id
+        }), shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
           map: this.getShortcutsMap(),
           scope: this.shortcutsScope
         }), /*#__PURE__*/React.createElement("div", {
@@ -986,7 +1001,7 @@ class Select extends Component {
           disabled: this.props.disabled,
           style: style,
           "data-test": "ring-select__button ring-select__focus"
-        }), this._getAvatar(), this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()), iconsNode), this._renderPopup());
+        }), this._getAvatar(), this._getPlaceholder()), iconsNode), this._renderPopup());
       case Type.INLINE:
         return /*#__PURE__*/React.createElement("div", {
           className: classes,
@@ -1001,7 +1016,7 @@ class Select extends Component {
           "data-test": "ring-select__focus",
           disabled: this.props.disabled,
           active: this.state.showPopup
-        }), this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()), this._renderPopup());
+        }), this._getPlaceholder()), this._renderPopup());
       default:
         if (this.props.customAnchor) {
           return /*#__PURE__*/React.createElement(Fragment, null, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
@@ -1017,7 +1032,7 @@ class Select extends Component {
               id: this.props.id,
               onClick: this._clickHandler,
               disabled: this.props.disabled,
-              children: this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString(),
+              children: this._getPlaceholder(),
               'data-test': 'ring-select_focus'
             },
             popup: this._renderPopup()

package/dist/select/select__filter.js

@@ -23,6 +23,7 @@ import '../_helpers/button__classes.js';
 import '../global/get-uid.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 import 'sniffr';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';

package/dist/select/select__popup.js

@@ -68,6 +68,7 @@ import '../input/input.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 
 const FILTER_HEIGHT = 35;
 const TOOLBAR_HEIGHT = 49;

package/dist/select-ng/select-ng.js

@@ -70,6 +70,7 @@ import '../input/input.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 import '../global/rerender-hoc.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';

package/dist/select-ng/select-ng__lazy.js

@@ -67,6 +67,7 @@ import '../input/input.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 import '../global/rerender-hoc.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';

package/dist/shortcuts/shortcuts.js

@@ -14,7 +14,8 @@ class Shortcuts extends PureComponent {
   }
   componentDidUpdate(prevProps) {
     const {
-      disabled
+      disabled,
+      map
     } = this.props;
     if (!prevProps.disabled && disabled) {
       this.turnShorcutsOff();
@@ -22,6 +23,10 @@ class Shortcuts extends PureComponent {
     if (prevProps.disabled && !disabled) {
       this.turnShorcutsOn();
     }
+    if (prevProps.map !== map) {
+      this.turnShorcutsOff();
+      this.turnShorcutsOn();
+    }
   }
   componentWillUnmount() {
     if (!this.props.disabled) {

package/dist/table-legacy-ng/table-legacy-ng.js

@@ -90,6 +90,7 @@ import '../input/input.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 import '../global/rerender-hoc.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';

package/dist/table-legacy-ng/table-legacy-ng__pager.js

@@ -80,6 +80,7 @@ import '../input/input.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 import '../global/rerender-hoc.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';

package/dist/tags-input/tags-input.js

@@ -66,6 +66,7 @@ import '../list/list__title.js';
 import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
+import '../input/input-label.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';
 import '@jetbrains/icons/search';

package/dist/tags-input-ng/tags-input-ng.js

@@ -71,6 +71,7 @@ import '../input/input.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';
+import '../input/input-label.js';
 import '../global/rerender-hoc.js';
 import '../global/fuzzy-highlight.js';
 import '../select/select__popup.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "5.0.51",
+  "version": "5.0.53",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -259,5 +259,5 @@
     "node": ">=14.0",
     "npm": ">=6.0.0"
   },
-  "gitHead": "ded81421e50b16b0b3939a51b372fee92deae595"
+  "gitHead": "21c1f2143dec4335b5094f69720307af583d39cf"
 }