@jetbrains/ring-ui 5.0.152 → 5.0.154

package/components/control-label/control-label.css

@@ -0,0 +1,23 @@
+.label {
+  display: block;
+
+  margin-bottom: calc(var(--ring-unit) * 0.5);
+}
+
+.primaryLabel {
+  color: var(--ring-text-color);
+
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+}
+
+.secondaryLabel {
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+}
+
+.disabledLabel {
+  color: var(--ring-disabled-color);
+}

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

@@ -0,0 +1,11 @@
+import React, { LabelHTMLAttributes } from 'react';
+export declare enum LabelType {
+    SECONDARY = "secondary",
+    PRIMARY = "primary"
+}
+interface ControlLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    disabled?: boolean;
+    type?: LabelType;
+}
+export declare const ControlLabel: React.FC<ControlLabelProps>;
+export default ControlLabel;

package/components/control-label/control-label.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './control-label.css';
+export var LabelType;
+(function (LabelType) {
+    LabelType["SECONDARY"] = "secondary";
+    LabelType["PRIMARY"] = "primary";
+})(LabelType || (LabelType = {}));
+const classNameByType = {
+    [LabelType.SECONDARY]: styles.secondaryLabel,
+    [LabelType.PRIMARY]: styles.primaryLabel
+};
+export const ControlLabel = ({ children, type = LabelType.SECONDARY, disabled, ...rest }) => (<label className={classNames(styles.label, classNameByType[type], {
+        [styles.disabledLabel]: disabled
+    })} {...rest}>{children}</label>);
+ControlLabel.propTypes = {
+    label: PropTypes.node,
+    labelStyle: PropTypes.string,
+    disabled: PropTypes.bool
+};
+export default ControlLabel;

package/components/input/input.css

@@ -150,21 +150,6 @@ textarea.input {
   resize: none;
 }
 
-.label {
-  display: block;
-
-  margin-bottom: calc(unit / 2);
-
-  color: var(--ring-secondary-color);
-
-  font-size: var(--ring-font-size-smaller);
-  line-height: var(--ring-line-height-lowest);
-}
-
-.disabledLabel {
-  color: var(--ring-disabled-color);
-}
-
 .input::placeholder {
   color: var(--ring-disabled-color);
 }

package/components/input/input.d.ts

@@ -1,5 +1,6 @@
 import React, { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
 import { ControlsHeight } from '../global/controls-height';
+import { LabelType } from '../control-label/control-label';
 declare function noop(): void;
 /**
  * @name Input
@@ -20,6 +21,7 @@ export interface InputBaseProps {
     children?: string | undefined;
     inputClassName?: string | null | undefined;
     label?: ReactNode;
+    labelType?: LabelType;
     active?: boolean | null | undefined;
     error?: ReactNode | null | undefined;
     borderless?: boolean | null | undefined;

package/components/input/input.js

@@ -9,8 +9,8 @@ import Icon from '../icon/icon';
 import { I18nContext } from '../i18n/i18n-context';
 import composeRefs from '../global/composeRefs';
 import { ControlsHeightContext } from '../global/controls-height';
+import { ControlLabel } from '../control-label/control-label';
 import styles from './input.css';
-import { InputLabel } from './input-label';
 function noop() { }
 /**
  * @name Input
@@ -93,7 +93,7 @@ export class Input extends PureComponent {
         // Modifiers
         size, active, multiline, borderless, 
         // Props
-        label, error, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = this.context, afterInput, ...restProps } = this.props;
+        label, labelType, error, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = this.context, afterInput, ...restProps } = this.props;
         const { empty } = this.state;
         const clearable = !!onClear;
         const classes = classNames(className, styles.outerContainer, [styles[`size${size}`]], [styles[`height${height}`]], {
@@ -120,7 +120,7 @@ export class Input extends PureComponent {
         };
         return (<I18nContext.Consumer>
         {({ translate }) => (<div className={classes} data-test="ring-input">
-            {label && (<InputLabel htmlFor={this.getId()} disabled={disabled} label={label}/>)}
+            {label && (<ControlLabel htmlFor={this.getId()} disabled={disabled} type={labelType}>{label}</ControlLabel>)}
             <div className={styles.container}>
               {icon && <Icon glyph={icon} className={styles.icon}/>}
               {multiline

package/components/input-ng/input-ng.js

@@ -8,6 +8,7 @@ import closeIcon from '@jetbrains/icons/close';
 
 import RingAngularComponent from '../global/ring-angular-component';
 import styles from '../input/input.css';
+import labelStyles from '../control-label/control-label.css';
 import ButtonNg from '../button-ng/button-ng';
 
 import styleOverrides from './input-ng.css';
@@ -102,7 +103,7 @@ class RingInputComponent extends RingAngularComponent {
 >
   <label
     ng-if="!$ctrl.borderless"
-    class="${styles.label}"
+    class="${labelStyles.label} ${labelStyles.secondaryLabel}"
   >{{$ctrl.label}}</label>
   <div class="${styles.container}">
     <input

package/components/select/select.d.ts

@@ -1,6 +1,7 @@
 import React, { ButtonHTMLAttributes, Component, CSSProperties, HTMLAttributes, ReactNode, RefCallback, SyntheticEvent } from 'react';
 import { 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 { ControlsHeight } from '../global/controls-height';
@@ -62,9 +63,11 @@ export interface BaseSelectProps<T = unknown> {
     allowAny: boolean;
     maxHeight: number;
     hideArrow: boolean;
+    showPopup: boolean;
     directions: readonly Directions[];
     label: string | null;
     selectedLabel: ReactNode;
+    labelType?: LabelType;
     inputPlaceholder: string;
     shortcutsEnabled: boolean;
     onBeforeOpen: () => void;
@@ -76,6 +79,7 @@ export interface BaseSelectProps<T = unknown> {
     onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onSelect: (selected: SelectItem<T> | null, event?: Event | SyntheticEvent) => void;
     onDeselect: (selected: SelectItem<T> | null) => void;
+    onOutsideClick: (e: PointerEvent) => void;
     onAdd: (value: string) => void;
     onDone: () => void;
     onReset: () => void;
@@ -161,6 +165,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
         hideSelected: boolean;
         allowAny: boolean;
         hideArrow: boolean;
+        showPopup: boolean;
         maxHeight: number;
         directions: Directions[];
         selected: null;
@@ -179,6 +184,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
         onKeyDown: typeof noop;
         onSelect: typeof noop;
         onDeselect: typeof noop;
+        onOutsideClick: typeof noop;
         onChange: typeof noop;
         onAdd: typeof noop;
         onDone: typeof noop;

package/components/select/select.js

@@ -9,7 +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 ControlLabel from '../control-label/control-label';
 import Shortcuts from '../shortcuts/shortcuts';
 import Button from '../button/button';
 import dataTests from '../global/data-tests';
@@ -190,6 +190,7 @@ export default class Select extends Component {
         hideSelected: false,
         allowAny: false,
         hideArrow: false,
+        showPopup: false,
         maxHeight: 600,
         directions: [
             Popup.PopupProps.Directions.BOTTOM_RIGHT,
@@ -213,6 +214,7 @@ export default class Select extends Component {
         onKeyDown: noop,
         onSelect: noop,
         onDeselect: noop,
+        onOutsideClick: noop,
         onChange: noop,
         onAdd: noop,
         onDone: noop,
@@ -274,7 +276,7 @@ export default class Select extends Component {
             this.props.filter.value || '',
         shortcutsEnabled: false,
         popupShortcuts: false,
-        showPopup: false,
+        showPopup: this.props.showPopup,
         prevData: this.props.data,
         prevSelected: null,
         prevMultiple: this.props.multiple,
@@ -432,7 +434,7 @@ export default class Select extends Component {
                     message = this.props.notFoundMessage ?? translate('noOptionsFound');
                 }
                 return (<SelectPopup data={_shownData} message={message} toolbar={showPopup && this.getToolbar()} loading={this.props.loading} activeIndex={this.state.selectedIndex} hidden={!showPopup} ref={this.popupRef} maxHeight={this.props.maxHeight} minWidth={this.props.minWidth} directions={this.props.directions} className={this.props.popupClassName} style={this.props.popupStyle} top={this.props.top} left={this.props.left} filter={this.isInputMode() ? false : this.props.filter} // disable popup filter in INPUT mode
-                 multiple={this.props.multiple} filterValue={this.state.filterValue} anchorElement={anchorElement} onCloseAttempt={this._onCloseAttempt} onSelect={this._listSelectHandler} onSelectAll={this._listSelectAllHandler} onFilter={this._filterChangeHandler} onClear={this.clearFilter} onLoadMore={this.props.onLoadMore} isInputMode={this.isInputMode()} selected={this.state.selected} tags={this.props.tags} compact={this.props.compact} renderOptimization={this.props.renderOptimization} ringPopupTarget={this.props.ringPopupTarget} disableMoveOverflow={this.props.disableMoveOverflow} disableScrollToActive={this.props.disableScrollToActive} dir={this.props.dir} onEmptyPopupEnter={this.onEmptyPopupEnter} listId={this.listId}/>);
+                 multiple={this.props.multiple} filterValue={this.state.filterValue} anchorElement={anchorElement} onCloseAttempt={this._onCloseAttempt} onOutsideClick={this.props.onOutsideClick} onSelect={this._listSelectHandler} onSelectAll={this._listSelectAllHandler} onFilter={this._filterChangeHandler} onClear={this.clearFilter} onLoadMore={this.props.onLoadMore} isInputMode={this.isInputMode()} selected={this.state.selected} tags={this.props.tags} compact={this.props.compact} renderOptimization={this.props.renderOptimization} ringPopupTarget={this.props.ringPopupTarget} disableMoveOverflow={this.props.disableMoveOverflow} disableScrollToActive={this.props.disableScrollToActive} dir={this.props.dir} onEmptyPopupEnter={this.onEmptyPopupEnter} listId={this.listId}/>);
             }}
       </I18nContext.Consumer>);
     }
@@ -817,7 +819,7 @@ export default class Select extends Component {
         </>);
             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}/>)}
+            {selectedLabel && (<ControlLabel type={this.props.labelType} disabled={this.props.disabled} htmlFor={this.props.id}>{selectedLabel}</ControlLabel>)}
             {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, {
@@ -892,6 +894,7 @@ Select.propTypes = {
     onBeforeOpen: PropTypes.func,
     onSelect: PropTypes.func,
     onDeselect: PropTypes.func,
+    onOutsideClick: PropTypes.func,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     onKeyDown: PropTypes.func,
@@ -926,6 +929,7 @@ Select.propTypes = {
     inputPlaceholder: PropTypes.string,
     clear: PropTypes.bool,
     hideArrow: PropTypes.bool,
+    showPopup: PropTypes.bool,
     compact: PropTypes.bool,
     size: PropTypes.oneOf(Object.values(Size)),
     customAnchor: PropTypes.func,

package/components/select/select__popup.d.ts

@@ -46,6 +46,7 @@ export interface SelectPopupProps<T = unknown> {
     loading: boolean;
     onSelect: (item: ListDataItem<T>, event: Event, params?: SelectHandlerParams) => void;
     onCloseAttempt: (e?: Event | SyntheticEvent, isEsc?: boolean | undefined) => void;
+    onOutsideClick: (e: PointerEvent) => void;
     onFilter: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onClear: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onLoadMore: () => void;

package/components/select/select__popup.js

@@ -43,6 +43,7 @@ export default class SelectPopup extends PureComponent {
         loading: false,
         onSelect: noop,
         onCloseAttempt: noop,
+        onOutsideClick: noop,
         onFilter: noop,
         onClear: noop,
         onLoadMore: noop,
@@ -313,7 +314,7 @@ export default class SelectPopup extends PureComponent {
         right: event => this.handleNavigation(event)
     };
     render() {
-        const { toolbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, directions, top, left, style, dir, filter } = this.props;
+        const { toolbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, onOutsideClick, directions, top, left, style, dir, filter } = this.props;
         const classes = classNames(styles.popup, className);
         return (<PopupTargetContext.Consumer>
         {ringPopupTarget => {
@@ -323,7 +324,7 @@ export default class SelectPopup extends PureComponent {
                 const list = this.getList(this.props.ringPopupTarget || ringPopupTarget);
                 const bottomLine = this.getBottomLine();
                 const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar;
-                return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} directions={directions} top={top} left={left} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style}>
+                return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} onOutsideClick={onOutsideClick} directions={directions} top={top} left={left} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style}>
               <div dir={dir}>
                 {!hidden && filter &&
                         (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
@@ -370,6 +371,7 @@ SelectPopup.propTypes = {
     loading: PropTypes.bool,
     onClear: PropTypes.func,
     onCloseAttempt: PropTypes.func,
+    onOutsideClick: PropTypes.func,
     onEmptyPopupEnter: PropTypes.func,
     onFilter: PropTypes.func,
     onLoadMore: PropTypes.func,

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

@@ -7,6 +7,7 @@ import { Size } from '../input/input';
 import { ControlsHeight } from '../global/controls-height';
 import { Filter } from '../select/select__popup';
 import { TagAttrs } from '../tag/tag';
+import { LabelType } from '../control-label/control-label';
 declare function noop(): void;
 export interface ToggleTagParams {
     tag: TagType;
@@ -36,6 +37,7 @@ export interface TagsInputProps {
     size: Size;
     height?: ControlsHeight | undefined;
     label?: ReactNode;
+    labelType?: LabelType;
 }
 interface TagsInputState {
     tags: TagType[];

package/components/tags-input/tags-input.js

@@ -11,6 +11,7 @@ import { Size } from '../input/input';
 import { ControlsHeightContext } from '../global/controls-height';
 import getUID from '../global/get-uid';
 import inputStyles from '../input/input.css';
+import ControlLabel from '../control-label/control-label';
 import styles from './tags-input.css';
 function noop() { }
 /**
@@ -252,7 +253,7 @@ export default class TagsInput extends PureComponent {
     };
     render() {
         const { focused, tags, activeIndex } = this.state;
-        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, height = this.context, label } = this.props;
+        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, labelType, height = this.context, label } = this.props;
         const classes = classNames(styles.tagsInput, [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
             [styles.tagsInputDisabled]: disabled,
             [styles.tagsInputFocused]: focused
@@ -260,9 +261,7 @@ export default class TagsInput extends PureComponent {
         return (<div 
         // it transfers focus to input
         role="presentation" className={classes} onKeyDown={this.handleKeyDown} onClick={this.clickHandler} ref={this.nodeRef}>
-        {label && (<label htmlFor={this.id} className={classNames(inputStyles.label, {
-                    [inputStyles.disabledLabel]: disabled
-                })}>{label}</label>)}
+        {label && (<ControlLabel htmlFor={this.id} disabled={disabled} type={labelType}>{label}</ControlLabel>)}
 
         <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} tagClassName={styles.tag} handleClick={this.handleClick} customTagComponent={this.props.customTagComponent}>
           <Select id={this.id} ref={this.selectRef} size={Select.Size.AUTO} type={Select.Type.INPUT_WITHOUT_CONTROLS} inputPlaceholder={this.props.placeholder} data={this.state.suggestions} className={classNames(styles.tagsSelect)} onSelect={this.addTag} onFocus={this._focusHandler} onBlur={this._blurHandler} renderOptimization={this.props.renderOptimization} add={allowAddNewTags ? { prefix: 'Add new tag' } : undefined} onAdd={allowAddNewTags ? this.handleTagCreation : undefined} filter={filter} maxHeight={this.props.maxPopupHeight} minWidth={this.props.minPopupWidth} top={POPUP_VERTICAL_SHIFT} loading={this.state.loading} onFilter={this.loadSuggestions} onBeforeOpen={this.loadSuggestions} onKeyDown={this.handleKeyDown} disabled={this.props.disabled} loadingMessage={this.props.loadingMessage} notFoundMessage={this.props.notFoundMessage} hint={this.props.hint}/>

package/dist/_helpers/control-label.js

@@ -0,0 +1,3 @@
+var modules_9eb96a10 = {"label":"label_rui_40a4","primaryLabel":"primaryLabel_rui_40a4","secondaryLabel":"secondaryLabel_rui_40a4","disabledLabel":"disabledLabel_rui_40a4"};
+
+export { modules_9eb96a10 as m };

package/dist/_helpers/input.js

@@ -1,3 +1,3 @@
-var modules_88cfaf40 = {"unit":"i__const_unit_1","button-shadow":"inset 0 0 0 1px","height":"var(--ring-button-height)","loaderWidth":"64px","light":"light_rui_2ac4","heightS":"heightS_rui_e356","heightM":"heightM_rui_e356","heightL":"heightL_rui_e356","button":"button_rui_e356","active":"active_rui_e356","withIcon":"withIcon_rui_e356","icon":"icon_rui_e356","primary":"primary_rui_e356","loader":"loader_rui_e356","loaderBackground":"loaderBackground_rui_e356","danger":"danger_rui_e356","text":"text_rui_e356","content":"content_rui_e356","text-loading":"text-loading_rui_e356","inline":"inline_rui_e356","withNormalIcon":"withNormalIcon_rui_e356","withDangerIcon":"withDangerIcon_rui_e356","progress":"progress_rui_e356","delayed":"delayed_rui_e356","short":"short_rui_e356","dropdownIcon":"dropdownIcon_rui_e356","outerContainer":"outerContainer_rui_e356","borderless":"borderless_rui_e356","container":"container_rui_e356","input":"input_rui_e356","error":"error_rui_e356","clearable":"clearable_rui_e356","clear":"clear_rui_e356","empty":"empty_rui_e356","label":"label_rui_e356","disabledLabel":"disabledLabel_rui_e356","errorText":"errorText_rui_e356","sizeS":"sizeS_rui_e356","sizeM":"sizeM_rui_e356","sizeL":"sizeL_rui_e356","sizeFULL":"sizeFULL_rui_e356"};
+var modules_88cfaf40 = {"unit":"i__const_unit_1","button-shadow":"inset 0 0 0 1px","height":"var(--ring-button-height)","loaderWidth":"64px","light":"light_rui_2ac4","heightS":"heightS_rui_e356","heightM":"heightM_rui_e356","heightL":"heightL_rui_e356","button":"button_rui_e356","active":"active_rui_e356","withIcon":"withIcon_rui_e356","icon":"icon_rui_e356","primary":"primary_rui_e356","loader":"loader_rui_e356","loaderBackground":"loaderBackground_rui_e356","danger":"danger_rui_e356","text":"text_rui_e356","content":"content_rui_e356","text-loading":"text-loading_rui_e356","inline":"inline_rui_e356","withNormalIcon":"withNormalIcon_rui_e356","withDangerIcon":"withDangerIcon_rui_e356","progress":"progress_rui_e356","delayed":"delayed_rui_e356","short":"short_rui_e356","dropdownIcon":"dropdownIcon_rui_e356","outerContainer":"outerContainer_rui_e356","borderless":"borderless_rui_e356","container":"container_rui_e356","input":"input_rui_e356","error":"error_rui_e356","clearable":"clearable_rui_e356","clear":"clear_rui_e356","empty":"empty_rui_e356","errorText":"errorText_rui_e356","sizeS":"sizeS_rui_e356","sizeM":"sizeM_rui_e356","sizeL":"sizeL_rui_e356","sizeFULL":"sizeFULL_rui_e356"};
 
 export { modules_88cfaf40 as m };

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

@@ -0,0 +1,11 @@
+import React, { LabelHTMLAttributes } from 'react';
+export declare enum LabelType {
+    SECONDARY = "secondary",
+    PRIMARY = "primary"
+}
+interface ControlLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    disabled?: boolean;
+    type?: LabelType;
+}
+export declare const ControlLabel: React.FC<ControlLabelProps>;
+export default ControlLabel;

package/dist/control-label/control-label.js

@@ -0,0 +1,35 @@
+import { _ as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { m as modules_9eb96a10 } from '../_helpers/control-label.js';
+
+var LabelType;
+(function (LabelType) {
+  LabelType["SECONDARY"] = "secondary";
+  LabelType["PRIMARY"] = "primary";
+})(LabelType || (LabelType = {}));
+const classNameByType = {
+  [LabelType.SECONDARY]: modules_9eb96a10.secondaryLabel,
+  [LabelType.PRIMARY]: modules_9eb96a10.primaryLabel
+};
+const ControlLabel = _ref => {
+  let {
+    children,
+    type = LabelType.SECONDARY,
+    disabled,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("label", _extends({
+    className: classNames(modules_9eb96a10.label, classNameByType[type], {
+      [modules_9eb96a10.disabledLabel]: disabled
+    })
+  }, rest), children);
+};
+ControlLabel.propTypes = {
+  label: PropTypes.node,
+  labelStyle: PropTypes.string,
+  disabled: PropTypes.bool
+};
+
+export { ControlLabel, LabelType, ControlLabel as default };

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

@@ -21,8 +21,9 @@ import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 import '../global/get-uid.js';
 import '../global/composeRefs.js';
+import '../control-label/control-label.js';
+import '../_helpers/control-label.js';
 import '../_helpers/input.js';
-import '../input/input-label.js';
 import '../i18n/i18n.js';
 import 'date-fns/add';
 

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

@@ -51,8 +51,9 @@ import '../_helpers/link.js';
 import '@jetbrains/icons/close-12px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
+import '../control-label/control-label.js';
+import '../_helpers/control-label.js';
 import '../_helpers/input.js';
-import '../input/input-label.js';
 import '../i18n/i18n.js';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';

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

@@ -31,8 +31,9 @@ import '../global/get-uid.js';
 import '../i18n/i18n-context.js';
 import '../i18n/i18n.js';
 import '../global/composeRefs.js';
+import '../control-label/control-label.js';
+import '../_helpers/control-label.js';
 import '../_helpers/input.js';
-import '../input/input-label.js';
 import 'date-fns/add';
 import 'date-fns/addMonths';
 import 'date-fns/getDay';

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

@@ -23,7 +23,8 @@ import '../global/prop-types.js';
 import '../i18n/i18n-context.js';
 import '../i18n/i18n.js';
 import '../global/composeRefs.js';
-import '../input/input-label.js';
+import '../control-label/control-label.js';
+import '../_helpers/control-label.js';
 import '../shortcuts/core.js';
 import 'combokeys';
 import '../global/sniffer.js';

package/dist/input/input.d.ts

@@ -1,5 +1,6 @@
 import React, { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
 import { ControlsHeight } from '../global/controls-height';
+import { LabelType } from '../control-label/control-label';
 declare function noop(): void;
 /**
  * @name Input
@@ -20,6 +21,7 @@ export interface InputBaseProps {
     children?: string | undefined;
     inputClassName?: string | null | undefined;
     label?: ReactNode;
+    labelType?: LabelType;
     active?: boolean | null | undefined;
     error?: ReactNode | null | undefined;
     borderless?: boolean | null | undefined;

package/dist/input/input.js

@@ -10,8 +10,8 @@ import Icon from '../icon/icon.js';
 import { I18nContext } from '../i18n/i18n-context.js';
 import composeRefs from '../global/composeRefs.js';
 import { ControlsHeightContext } from '../global/controls-height.js';
+import { ControlLabel } from '../control-label/control-label.js';
 import { m as modules_88cfaf40 } from '../_helpers/input.js';
-import { InputLabel } from './input-label.js';
 import '@jetbrains/icons/chevron-10px';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
@@ -21,6 +21,7 @@ import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
 import '../global/memoize.js';
 import '../i18n/i18n.js';
+import '../_helpers/control-label.js';
 
 function noop() {}
 /**
@@ -107,6 +108,7 @@ class Input extends PureComponent {
       borderless,
       // Props
       label,
+      labelType,
       error,
       className,
       inputClassName,
@@ -159,11 +161,11 @@ class Input extends PureComponent {
       return /*#__PURE__*/React.createElement("div", {
         className: classes,
         "data-test": "ring-input"
-      }, label && /*#__PURE__*/React.createElement(InputLabel, {
+      }, label && /*#__PURE__*/React.createElement(ControlLabel, {
         htmlFor: this.getId(),
         disabled: disabled,
-        label: label
-      }), /*#__PURE__*/React.createElement("div", {
+        type: labelType
+      }, label), /*#__PURE__*/React.createElement("div", {
         className: modules_88cfaf40.container
       }, icon && /*#__PURE__*/React.createElement(Icon, {
         glyph: icon,

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

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import closeIcon from '@jetbrains/icons/close';
 import RingAngularComponent from '../global/ring-angular-component.js';
 import { m as modules_88cfaf40 } from '../_helpers/input.js';
+import { m as modules_9eb96a10 } from '../_helpers/control-label.js';
 import ButtonNG from '../button-ng/button-ng.js';
 import '../global/dom.js';
 import '../icon-ng/icon-ng.js';
@@ -88,7 +89,7 @@ class RingInputComponent extends RingAngularComponent {
 >
   <label
     ng-if="!$ctrl.borderless"
-    class="${modules_88cfaf40.label}"
+    class="${modules_9eb96a10.label} ${modules_9eb96a10.secondaryLabel}"
   >{{$ctrl.label}}</label>
   <div class="${modules_88cfaf40.container}">
     <input

package/dist/old-browsers-message/white-list.js

@@ -5,11 +5,11 @@ const MAJOR_VERSION_INDEX = 0;
 /**
  * SUPPORTED_BROWSERS are defined by Babel plugin, see babel config
  */
-if (!["and_chr 114", "and_uc 13.4", "chrome 114", "chrome 113", "chrome 109", "edge 114", "firefox 114", "ios_saf 16.5", "ios_saf 16.4", "ios_saf 16.3", "ios_saf 16.1", "opera 99", "safari 16.5", "samsung 21"]) {
+if (!["and_chr 114", "and_uc 15.5", "chrome 114", "chrome 113", "chrome 109", "edge 114", "firefox 114", "ios_saf 16.5", "ios_saf 16.4", "ios_saf 16.3", "ios_saf 16.1", "opera 99", "safari 16.5", "samsung 21"]) {
   // eslint-disable-next-line no-console
   console.warn('Ring UI: no SUPPORTED_BROWSERS passed. Please check babel config.');
 }
-const SUPPORTED = ["and_chr 114", "and_uc 13.4", "chrome 114", "chrome 113", "chrome 109", "edge 114", "firefox 114", "ios_saf 16.5", "ios_saf 16.4", "ios_saf 16.3", "ios_saf 16.1", "opera 99", "safari 16.5", "samsung 21"] || [];
+const SUPPORTED = ["and_chr 114", "and_uc 15.5", "chrome 114", "chrome 113", "chrome 109", "edge 114", "firefox 114", "ios_saf 16.5", "ios_saf 16.4", "ios_saf 16.3", "ios_saf 16.1", "opera 99", "safari 16.5", "samsung 21"] || [];
 const WHITE_LISTED_BROWSERS = ['chrome', 'firefox', 'safari', 'edge'];
 const WHITE_LIST = SUPPORTED.reduce((acc, item) => {
   var _item$match;

package/dist/pager/pager.js

@@ -71,8 +71,9 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 import '../input/input.js';
+import '../control-label/control-label.js';
+import '../_helpers/control-label.js';
 import '../_helpers/input.js';
-import '../input/input-label.js';
 import '../i18n/i18n.js';
 import '../global/rerender-hoc.js';
 import '../global/react-render-adapter.js';

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

@@ -78,8 +78,9 @@ import '../list/consts.js';
 import '../input/input.js';
 import '../i18n/i18n-context.js';
 import '../i18n/i18n.js';
+import '../control-label/control-label.js';
+import '../_helpers/control-label.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,7 +71,8 @@ import '../_helpers/loader-inline.js';
 import '../global/react-render-adapter.js';
 import '@jetbrains/icons/chevron-10px';
 import '../_helpers/button__classes.js';
-import '../input/input-label.js';
+import '../control-label/control-label.js';
+import '../_helpers/control-label.js';
 import '../i18n/i18n.js';
 
 const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING + PopupMenu.PopupProps.Dimension.BORDER_WIDTH;

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

@@ -75,8 +75,9 @@ import '../_helpers/button__classes.js';
 import '../input/input.js';
 import '../i18n/i18n-context.js';
 import '../i18n/i18n.js';
+import '../control-label/control-label.js';
+import '../_helpers/control-label.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

@@ -1,6 +1,7 @@
 import React, { ButtonHTMLAttributes, Component, CSSProperties, HTMLAttributes, ReactNode, RefCallback, SyntheticEvent } from 'react';
 import { 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 { ControlsHeight } from '../global/controls-height';
@@ -62,9 +63,11 @@ export interface BaseSelectProps<T = unknown> {
     allowAny: boolean;
     maxHeight: number;
     hideArrow: boolean;
+    showPopup: boolean;
     directions: readonly Directions[];
     label: string | null;
     selectedLabel: ReactNode;
+    labelType?: LabelType;
     inputPlaceholder: string;
     shortcutsEnabled: boolean;
     onBeforeOpen: () => void;
@@ -76,6 +79,7 @@ export interface BaseSelectProps<T = unknown> {
     onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onSelect: (selected: SelectItem<T> | null, event?: Event | SyntheticEvent) => void;
     onDeselect: (selected: SelectItem<T> | null) => void;
+    onOutsideClick: (e: PointerEvent) => void;
     onAdd: (value: string) => void;
     onDone: () => void;
     onReset: () => void;
@@ -161,6 +165,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
         hideSelected: boolean;
         allowAny: boolean;
         hideArrow: boolean;
+        showPopup: boolean;
         maxHeight: number;
         directions: Directions[];
         selected: null;
@@ -179,6 +184,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
         onKeyDown: typeof noop;
         onSelect: typeof noop;
         onDeselect: typeof noop;
+        onOutsideClick: typeof noop;
         onChange: typeof noop;
         onAdd: typeof noop;
         onDone: typeof noop;