@jetbrains/ring-ui 5.0.152 → 5.0.153

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/components/control-label/control-label.css +23 -0
  2. package/components/control-label/control-label.d.ts +11 -0
  3. package/components/control-label/control-label.js +22 -0
  4. package/components/input/input.css +0 -15
  5. package/components/input/input.d.ts +2 -0
  6. package/components/input/input.js +3 -3
  7. package/components/input-ng/input-ng.js +2 -1
  8. package/components/select/select.d.ts +4 -0
  9. package/components/select/select.js +5 -3
  10. package/components/tags-input/tags-input.d.ts +2 -0
  11. package/components/tags-input/tags-input.js +3 -4
  12. package/dist/_helpers/control-label.js +3 -0
  13. package/dist/_helpers/input.js +1 -1
  14. package/dist/control-label/control-label.d.ts +11 -0
  15. package/dist/control-label/control-label.js +35 -0
  16. package/dist/date-picker/date-input.js +2 -1
  17. package/dist/date-picker/date-picker.js +2 -1
  18. package/dist/date-picker/date-popup.js +2 -1
  19. package/dist/editable-heading/editable-heading.js +2 -1
  20. package/dist/input/input.d.ts +2 -0
  21. package/dist/input/input.js +6 -4
  22. package/dist/input-ng/input-ng.js +2 -1
  23. package/dist/old-browsers-message/white-list.js +2 -2
  24. package/dist/pager/pager.js +2 -1
  25. package/dist/pager-ng/pager-ng.js +2 -1
  26. package/dist/query-assist/query-assist.js +2 -1
  27. package/dist/query-assist-ng/query-assist-ng.js +2 -1
  28. package/dist/select/select.d.ts +4 -0
  29. package/dist/select/select.js +8 -5
  30. package/dist/select/select__filter.js +2 -1
  31. package/dist/select/select__popup.js +2 -1
  32. package/dist/select-ng/select-ng.js +2 -1
  33. package/dist/select-ng/select-ng__lazy.js +2 -1
  34. package/dist/shortcuts-hint-ng/shortcuts-hint-ng.js +1 -0
  35. package/dist/style.css +1 -1
  36. package/dist/table-legacy-ng/table-legacy-ng.js +2 -1
  37. package/dist/table-legacy-ng/table-legacy-ng__pager.js +2 -1
  38. package/dist/tags-input/tags-input.d.ts +2 -0
  39. package/dist/tags-input/tags-input.js +6 -5
  40. package/dist/tags-input-ng/tags-input-ng.js +2 -1
  41. package/package.json +7 -7
  42. package/components/input/input-label.d.ts +0 -10
  43. package/components/input/input-label.js +0 -18
  44. package/dist/input/input-label.d.ts +0 -10
  45. package/dist/input/input-label.js +0 -27
@@ -0,0 +1,23 @@
1
+ .label {
2
+ display: block;
3
+
4
+ margin-bottom: calc(var(--ring-unit) * 0.5);
5
+ }
6
+
7
+ .primaryLabel {
8
+ color: var(--ring-text-color);
9
+
10
+ font-size: var(--ring-font-size);
11
+ line-height: var(--ring-line-height);
12
+ }
13
+
14
+ .secondaryLabel {
15
+ color: var(--ring-secondary-color);
16
+
17
+ font-size: var(--ring-font-size-smaller);
18
+ line-height: var(--ring-line-height-lowest);
19
+ }
20
+
21
+ .disabledLabel {
22
+ color: var(--ring-disabled-color);
23
+ }
@@ -0,0 +1,11 @@
1
+ import React, { LabelHTMLAttributes } from 'react';
2
+ export declare enum LabelType {
3
+ SECONDARY = "secondary",
4
+ PRIMARY = "primary"
5
+ }
6
+ interface ControlLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
7
+ disabled?: boolean;
8
+ type?: LabelType;
9
+ }
10
+ export declare const ControlLabel: React.FC<ControlLabelProps>;
11
+ export default ControlLabel;
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import classNames from 'classnames';
4
+ import styles from './control-label.css';
5
+ export var LabelType;
6
+ (function (LabelType) {
7
+ LabelType["SECONDARY"] = "secondary";
8
+ LabelType["PRIMARY"] = "primary";
9
+ })(LabelType || (LabelType = {}));
10
+ const classNameByType = {
11
+ [LabelType.SECONDARY]: styles.secondaryLabel,
12
+ [LabelType.PRIMARY]: styles.primaryLabel
13
+ };
14
+ export const ControlLabel = ({ children, type = LabelType.SECONDARY, disabled, ...rest }) => (<label className={classNames(styles.label, classNameByType[type], {
15
+ [styles.disabledLabel]: disabled
16
+ })} {...rest}>{children}</label>);
17
+ ControlLabel.propTypes = {
18
+ label: PropTypes.node,
19
+ labelStyle: PropTypes.string,
20
+ disabled: PropTypes.bool
21
+ };
22
+ export default ControlLabel;
@@ -150,21 +150,6 @@ textarea.input {
150
150
  resize: none;
151
151
  }
152
152
 
153
- .label {
154
- display: block;
155
-
156
- margin-bottom: calc(unit / 2);
157
-
158
- color: var(--ring-secondary-color);
159
-
160
- font-size: var(--ring-font-size-smaller);
161
- line-height: var(--ring-line-height-lowest);
162
- }
163
-
164
- .disabledLabel {
165
- color: var(--ring-disabled-color);
166
- }
167
-
168
153
  .input::placeholder {
169
154
  color: var(--ring-disabled-color);
170
155
  }
@@ -1,5 +1,6 @@
1
1
  import React, { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
2
2
  import { ControlsHeight } from '../global/controls-height';
3
+ import { LabelType } from '../control-label/control-label';
3
4
  declare function noop(): void;
4
5
  /**
5
6
  * @name Input
@@ -20,6 +21,7 @@ export interface InputBaseProps {
20
21
  children?: string | undefined;
21
22
  inputClassName?: string | null | undefined;
22
23
  label?: ReactNode;
24
+ labelType?: LabelType;
23
25
  active?: boolean | null | undefined;
24
26
  error?: ReactNode | null | undefined;
25
27
  borderless?: boolean | null | undefined;
@@ -9,8 +9,8 @@ import Icon from '../icon/icon';
9
9
  import { I18nContext } from '../i18n/i18n-context';
10
10
  import composeRefs from '../global/composeRefs';
11
11
  import { ControlsHeightContext } from '../global/controls-height';
12
+ import { ControlLabel } from '../control-label/control-label';
12
13
  import styles from './input.css';
13
- import { InputLabel } from './input-label';
14
14
  function noop() { }
15
15
  /**
16
16
  * @name Input
@@ -93,7 +93,7 @@ export class Input extends PureComponent {
93
93
  // Modifiers
94
94
  size, active, multiline, borderless,
95
95
  // Props
96
- label, error, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = this.context, afterInput, ...restProps } = this.props;
96
+ label, labelType, error, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = this.context, afterInput, ...restProps } = this.props;
97
97
  const { empty } = this.state;
98
98
  const clearable = !!onClear;
99
99
  const classes = classNames(className, styles.outerContainer, [styles[`size${size}`]], [styles[`height${height}`]], {
@@ -120,7 +120,7 @@ export class Input extends PureComponent {
120
120
  };
121
121
  return (<I18nContext.Consumer>
122
122
  {({ translate }) => (<div className={classes} data-test="ring-input">
123
- {label && (<InputLabel htmlFor={this.getId()} disabled={disabled} label={label}/>)}
123
+ {label && (<ControlLabel htmlFor={this.getId()} disabled={disabled} type={labelType}>{label}</ControlLabel>)}
124
124
  <div className={styles.container}>
125
125
  {icon && <Icon glyph={icon} className={styles.icon}/>}
126
126
  {multiline
@@ -8,6 +8,7 @@ import closeIcon from '@jetbrains/icons/close';
8
8
 
9
9
  import RingAngularComponent from '../global/ring-angular-component';
10
10
  import styles from '../input/input.css';
11
+ import labelStyles from '../control-label/control-label.css';
11
12
  import ButtonNg from '../button-ng/button-ng';
12
13
 
13
14
  import styleOverrides from './input-ng.css';
@@ -102,7 +103,7 @@ class RingInputComponent extends RingAngularComponent {
102
103
  >
103
104
  <label
104
105
  ng-if="!$ctrl.borderless"
105
- class="${styles.label}"
106
+ class="${labelStyles.label} ${labelStyles.secondaryLabel}"
106
107
  >{{$ctrl.label}}</label>
107
108
  <div class="${styles.container}">
108
109
  <input
@@ -1,6 +1,7 @@
1
1
  import React, { ButtonHTMLAttributes, Component, CSSProperties, HTMLAttributes, ReactNode, RefCallback, SyntheticEvent } from 'react';
2
2
  import { SelectHandlerParams } from '../list/list';
3
3
  import { Size } from '../input/input';
4
+ import { LabelType } from '../control-label/control-label';
4
5
  import { ListDataItem } from '../list/consts';
5
6
  import { Directions } from '../popup/popup.consts';
6
7
  import { ControlsHeight } from '../global/controls-height';
@@ -62,9 +63,11 @@ export interface BaseSelectProps<T = unknown> {
62
63
  allowAny: boolean;
63
64
  maxHeight: number;
64
65
  hideArrow: boolean;
66
+ showPopup: boolean;
65
67
  directions: readonly Directions[];
66
68
  label: string | null;
67
69
  selectedLabel: ReactNode;
70
+ labelType?: LabelType;
68
71
  inputPlaceholder: string;
69
72
  shortcutsEnabled: boolean;
70
73
  onBeforeOpen: () => void;
@@ -161,6 +164,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
161
164
  hideSelected: boolean;
162
165
  allowAny: boolean;
163
166
  hideArrow: boolean;
167
+ showPopup: boolean;
164
168
  maxHeight: number;
165
169
  directions: Directions[];
166
170
  selected: null;
@@ -9,7 +9,7 @@ import Avatar, { Size as AvatarSize } from '../avatar/avatar';
9
9
  import Popup from '../popup/popup';
10
10
  import List, { ActiveItemContext } from '../list/list';
11
11
  import Input, { Size } from '../input/input';
12
- import InputLabel from '../input/input-label';
12
+ import ControlLabel from '../control-label/control-label';
13
13
  import Shortcuts from '../shortcuts/shortcuts';
14
14
  import Button from '../button/button';
15
15
  import dataTests from '../global/data-tests';
@@ -190,6 +190,7 @@ export default class Select extends Component {
190
190
  hideSelected: false,
191
191
  allowAny: false,
192
192
  hideArrow: false,
193
+ showPopup: false,
193
194
  maxHeight: 600,
194
195
  directions: [
195
196
  Popup.PopupProps.Directions.BOTTOM_RIGHT,
@@ -274,7 +275,7 @@ export default class Select extends Component {
274
275
  this.props.filter.value || '',
275
276
  shortcutsEnabled: false,
276
277
  popupShortcuts: false,
277
- showPopup: false,
278
+ showPopup: this.props.showPopup,
278
279
  prevData: this.props.data,
279
280
  prevSelected: null,
280
281
  prevMultiple: this.props.multiple,
@@ -817,7 +818,7 @@ export default class Select extends Component {
817
818
  </>);
818
819
  case Type.BUTTON:
819
820
  return (<div ref={this.nodeRef} className={classNames(classes, styles.buttonMode)} data-test={dataTests('ring-select', dataTest)}>
820
- {selectedLabel && (<InputLabel label={selectedLabel} disabled={this.props.disabled} htmlFor={this.props.id}/>)}
821
+ {selectedLabel && (<ControlLabel type={this.props.labelType} disabled={this.props.disabled} htmlFor={this.props.id}>{selectedLabel}</ControlLabel>)}
821
822
  {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
822
823
  <div className={styles.buttonContainer}>
823
824
  <Button {...ariaProps} height={this.props.height} id={this.props.id} onClick={this._clickHandler} className={classNames(this.props.buttonClassName, styles.buttonValue, {
@@ -926,6 +927,7 @@ Select.propTypes = {
926
927
  inputPlaceholder: PropTypes.string,
927
928
  clear: PropTypes.bool,
928
929
  hideArrow: PropTypes.bool,
930
+ showPopup: PropTypes.bool,
929
931
  compact: PropTypes.bool,
930
932
  size: PropTypes.oneOf(Object.values(Size)),
931
933
  customAnchor: PropTypes.func,
@@ -7,6 +7,7 @@ import { Size } from '../input/input';
7
7
  import { ControlsHeight } from '../global/controls-height';
8
8
  import { Filter } from '../select/select__popup';
9
9
  import { TagAttrs } from '../tag/tag';
10
+ import { LabelType } from '../control-label/control-label';
10
11
  declare function noop(): void;
11
12
  export interface ToggleTagParams {
12
13
  tag: TagType;
@@ -36,6 +37,7 @@ export interface TagsInputProps {
36
37
  size: Size;
37
38
  height?: ControlsHeight | undefined;
38
39
  label?: ReactNode;
40
+ labelType?: LabelType;
39
41
  }
40
42
  interface TagsInputState {
41
43
  tags: TagType[];
@@ -11,6 +11,7 @@ import { Size } from '../input/input';
11
11
  import { ControlsHeightContext } from '../global/controls-height';
12
12
  import getUID from '../global/get-uid';
13
13
  import inputStyles from '../input/input.css';
14
+ import ControlLabel from '../control-label/control-label';
14
15
  import styles from './tags-input.css';
15
16
  function noop() { }
16
17
  /**
@@ -252,7 +253,7 @@ export default class TagsInput extends PureComponent {
252
253
  };
253
254
  render() {
254
255
  const { focused, tags, activeIndex } = this.state;
255
- const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, height = this.context, label } = this.props;
256
+ const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, labelType, height = this.context, label } = this.props;
256
257
  const classes = classNames(styles.tagsInput, [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
257
258
  [styles.tagsInputDisabled]: disabled,
258
259
  [styles.tagsInputFocused]: focused
@@ -260,9 +261,7 @@ export default class TagsInput extends PureComponent {
260
261
  return (<div
261
262
  // it transfers focus to input
262
263
  role="presentation" className={classes} onKeyDown={this.handleKeyDown} onClick={this.clickHandler} ref={this.nodeRef}>
263
- {label && (<label htmlFor={this.id} className={classNames(inputStyles.label, {
264
- [inputStyles.disabledLabel]: disabled
265
- })}>{label}</label>)}
264
+ {label && (<ControlLabel htmlFor={this.id} disabled={disabled} type={labelType}>{label}</ControlLabel>)}
266
265
 
267
266
  <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}>
268
267
  <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}/>
@@ -0,0 +1,3 @@
1
+ var modules_9eb96a10 = {"label":"label_rui_40a4","primaryLabel":"primaryLabel_rui_40a4","secondaryLabel":"secondaryLabel_rui_40a4","disabledLabel":"disabledLabel_rui_40a4"};
2
+
3
+ export { modules_9eb96a10 as m };
@@ -1,3 +1,3 @@
1
- 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"};
1
+ 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"};
2
2
 
3
3
  export { modules_88cfaf40 as m };
@@ -0,0 +1,11 @@
1
+ import React, { LabelHTMLAttributes } from 'react';
2
+ export declare enum LabelType {
3
+ SECONDARY = "secondary",
4
+ PRIMARY = "primary"
5
+ }
6
+ interface ControlLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
7
+ disabled?: boolean;
8
+ type?: LabelType;
9
+ }
10
+ export declare const ControlLabel: React.FC<ControlLabelProps>;
11
+ export default ControlLabel;
@@ -0,0 +1,35 @@
1
+ import { _ as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
2
+ import React from 'react';
3
+ import PropTypes from 'prop-types';
4
+ import classNames from 'classnames';
5
+ import { m as modules_9eb96a10 } from '../_helpers/control-label.js';
6
+
7
+ var LabelType;
8
+ (function (LabelType) {
9
+ LabelType["SECONDARY"] = "secondary";
10
+ LabelType["PRIMARY"] = "primary";
11
+ })(LabelType || (LabelType = {}));
12
+ const classNameByType = {
13
+ [LabelType.SECONDARY]: modules_9eb96a10.secondaryLabel,
14
+ [LabelType.PRIMARY]: modules_9eb96a10.primaryLabel
15
+ };
16
+ const ControlLabel = _ref => {
17
+ let {
18
+ children,
19
+ type = LabelType.SECONDARY,
20
+ disabled,
21
+ ...rest
22
+ } = _ref;
23
+ return /*#__PURE__*/React.createElement("label", _extends({
24
+ className: classNames(modules_9eb96a10.label, classNameByType[type], {
25
+ [modules_9eb96a10.disabledLabel]: disabled
26
+ })
27
+ }, rest), children);
28
+ };
29
+ ControlLabel.propTypes = {
30
+ label: PropTypes.node,
31
+ labelStyle: PropTypes.string,
32
+ disabled: PropTypes.bool
33
+ };
34
+
35
+ export { ControlLabel, LabelType, ControlLabel as default };
@@ -21,8 +21,9 @@ import '../link/clickableLink.js';
21
21
  import '../_helpers/button__classes.js';
22
22
  import '../global/get-uid.js';
23
23
  import '../global/composeRefs.js';
24
+ import '../control-label/control-label.js';
25
+ import '../_helpers/control-label.js';
24
26
  import '../_helpers/input.js';
25
- import '../input/input-label.js';
26
27
  import '../i18n/i18n.js';
27
28
  import 'date-fns/add';
28
29
 
@@ -51,8 +51,9 @@ import '../_helpers/link.js';
51
51
  import '@jetbrains/icons/close-12px';
52
52
  import '../global/prop-types.js';
53
53
  import '../global/composeRefs.js';
54
+ import '../control-label/control-label.js';
55
+ import '../_helpers/control-label.js';
54
56
  import '../_helpers/input.js';
55
- import '../input/input-label.js';
56
57
  import '../i18n/i18n.js';
57
58
  import 'date-fns/isAfter';
58
59
  import 'date-fns/isBefore';
@@ -31,8 +31,9 @@ import '../global/get-uid.js';
31
31
  import '../i18n/i18n-context.js';
32
32
  import '../i18n/i18n.js';
33
33
  import '../global/composeRefs.js';
34
+ import '../control-label/control-label.js';
35
+ import '../_helpers/control-label.js';
34
36
  import '../_helpers/input.js';
35
- import '../input/input-label.js';
36
37
  import 'date-fns/add';
37
38
  import 'date-fns/addMonths';
38
39
  import 'date-fns/getDay';
@@ -23,7 +23,8 @@ import '../global/prop-types.js';
23
23
  import '../i18n/i18n-context.js';
24
24
  import '../i18n/i18n.js';
25
25
  import '../global/composeRefs.js';
26
- import '../input/input-label.js';
26
+ import '../control-label/control-label.js';
27
+ import '../_helpers/control-label.js';
27
28
  import '../shortcuts/core.js';
28
29
  import 'combokeys';
29
30
  import '../global/sniffer.js';
@@ -1,5 +1,6 @@
1
1
  import React, { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
2
2
  import { ControlsHeight } from '../global/controls-height';
3
+ import { LabelType } from '../control-label/control-label';
3
4
  declare function noop(): void;
4
5
  /**
5
6
  * @name Input
@@ -20,6 +21,7 @@ export interface InputBaseProps {
20
21
  children?: string | undefined;
21
22
  inputClassName?: string | null | undefined;
22
23
  label?: ReactNode;
24
+ labelType?: LabelType;
23
25
  active?: boolean | null | undefined;
24
26
  error?: ReactNode | null | undefined;
25
27
  borderless?: boolean | null | undefined;
@@ -10,8 +10,8 @@ import Icon from '../icon/icon.js';
10
10
  import { I18nContext } from '../i18n/i18n-context.js';
11
11
  import composeRefs from '../global/composeRefs.js';
12
12
  import { ControlsHeightContext } from '../global/controls-height.js';
13
+ import { ControlLabel } from '../control-label/control-label.js';
13
14
  import { m as modules_88cfaf40 } from '../_helpers/input.js';
14
- import { InputLabel } from './input-label.js';
15
15
  import '@jetbrains/icons/chevron-10px';
16
16
  import '../link/clickableLink.js';
17
17
  import '../_helpers/button__classes.js';
@@ -21,6 +21,7 @@ import '../_helpers/icon.js';
21
21
  import '../icon/icon__svg.js';
22
22
  import '../global/memoize.js';
23
23
  import '../i18n/i18n.js';
24
+ import '../_helpers/control-label.js';
24
25
 
25
26
  function noop() {}
26
27
  /**
@@ -107,6 +108,7 @@ class Input extends PureComponent {
107
108
  borderless,
108
109
  // Props
109
110
  label,
111
+ labelType,
110
112
  error,
111
113
  className,
112
114
  inputClassName,
@@ -159,11 +161,11 @@ class Input extends PureComponent {
159
161
  return /*#__PURE__*/React.createElement("div", {
160
162
  className: classes,
161
163
  "data-test": "ring-input"
162
- }, label && /*#__PURE__*/React.createElement(InputLabel, {
164
+ }, label && /*#__PURE__*/React.createElement(ControlLabel, {
163
165
  htmlFor: this.getId(),
164
166
  disabled: disabled,
165
- label: label
166
- }), /*#__PURE__*/React.createElement("div", {
167
+ type: labelType
168
+ }, label), /*#__PURE__*/React.createElement("div", {
167
169
  className: modules_88cfaf40.container
168
170
  }, icon && /*#__PURE__*/React.createElement(Icon, {
169
171
  glyph: icon,
@@ -3,6 +3,7 @@ import classNames from 'classnames';
3
3
  import closeIcon from '@jetbrains/icons/close';
4
4
  import RingAngularComponent from '../global/ring-angular-component.js';
5
5
  import { m as modules_88cfaf40 } from '../_helpers/input.js';
6
+ import { m as modules_9eb96a10 } from '../_helpers/control-label.js';
6
7
  import ButtonNG from '../button-ng/button-ng.js';
7
8
  import '../global/dom.js';
8
9
  import '../icon-ng/icon-ng.js';
@@ -88,7 +89,7 @@ class RingInputComponent extends RingAngularComponent {
88
89
  >
89
90
  <label
90
91
  ng-if="!$ctrl.borderless"
91
- class="${modules_88cfaf40.label}"
92
+ class="${modules_9eb96a10.label} ${modules_9eb96a10.secondaryLabel}"
92
93
  >{{$ctrl.label}}</label>
93
94
  <div class="${modules_88cfaf40.container}">
94
95
  <input
@@ -5,11 +5,11 @@ const MAJOR_VERSION_INDEX = 0;
5
5
  /**
6
6
  * SUPPORTED_BROWSERS are defined by Babel plugin, see babel config
7
7
  */
8
- 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"]) {
8
+ 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"]) {
9
9
  // eslint-disable-next-line no-console
10
10
  console.warn('Ring UI: no SUPPORTED_BROWSERS passed. Please check babel config.');
11
11
  }
12
- 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"] || [];
12
+ 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"] || [];
13
13
  const WHITE_LISTED_BROWSERS = ['chrome', 'firefox', 'safari', 'edge'];
14
14
  const WHITE_LIST = SUPPORTED.reduce((acc, item) => {
15
15
  var _item$match;
@@ -71,8 +71,9 @@ import '../list/list__separator.js';
71
71
  import '../list/list__hint.js';
72
72
  import '../list/consts.js';
73
73
  import '../input/input.js';
74
+ import '../control-label/control-label.js';
75
+ import '../_helpers/control-label.js';
74
76
  import '../_helpers/input.js';
75
- import '../input/input-label.js';
76
77
  import '../i18n/i18n.js';
77
78
  import '../global/rerender-hoc.js';
78
79
  import '../global/react-render-adapter.js';
@@ -78,8 +78,9 @@ import '../list/consts.js';
78
78
  import '../input/input.js';
79
79
  import '../i18n/i18n-context.js';
80
80
  import '../i18n/i18n.js';
81
+ import '../control-label/control-label.js';
82
+ import '../_helpers/control-label.js';
81
83
  import '../_helpers/input.js';
82
- import '../input/input-label.js';
83
84
  import '../global/rerender-hoc.js';
84
85
  import '../global/fuzzy-highlight.js';
85
86
  import '../select/select__popup.js';
@@ -71,7 +71,8 @@ import '../_helpers/loader-inline.js';
71
71
  import '../global/react-render-adapter.js';
72
72
  import '@jetbrains/icons/chevron-10px';
73
73
  import '../_helpers/button__classes.js';
74
- import '../input/input-label.js';
74
+ import '../control-label/control-label.js';
75
+ import '../_helpers/control-label.js';
75
76
  import '../i18n/i18n.js';
76
77
 
77
78
  const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING + PopupMenu.PopupProps.Dimension.BORDER_WIDTH;
@@ -75,8 +75,9 @@ import '../_helpers/button__classes.js';
75
75
  import '../input/input.js';
76
76
  import '../i18n/i18n-context.js';
77
77
  import '../i18n/i18n.js';
78
+ import '../control-label/control-label.js';
79
+ import '../_helpers/control-label.js';
78
80
  import '../_helpers/input.js';
79
- import '../input/input-label.js';
80
81
  import '../_helpers/query-assist__suggestions.js';
81
82
 
82
83
  var queryAssistNg = angularComponentFactory(QueryAssist, 'QueryAssist').name;
@@ -1,6 +1,7 @@
1
1
  import React, { ButtonHTMLAttributes, Component, CSSProperties, HTMLAttributes, ReactNode, RefCallback, SyntheticEvent } from 'react';
2
2
  import { SelectHandlerParams } from '../list/list';
3
3
  import { Size } from '../input/input';
4
+ import { LabelType } from '../control-label/control-label';
4
5
  import { ListDataItem } from '../list/consts';
5
6
  import { Directions } from '../popup/popup.consts';
6
7
  import { ControlsHeight } from '../global/controls-height';
@@ -62,9 +63,11 @@ export interface BaseSelectProps<T = unknown> {
62
63
  allowAny: boolean;
63
64
  maxHeight: number;
64
65
  hideArrow: boolean;
66
+ showPopup: boolean;
65
67
  directions: readonly Directions[];
66
68
  label: string | null;
67
69
  selectedLabel: ReactNode;
70
+ labelType?: LabelType;
68
71
  inputPlaceholder: string;
69
72
  shortcutsEnabled: boolean;
70
73
  onBeforeOpen: () => void;
@@ -161,6 +164,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
161
164
  hideSelected: boolean;
162
165
  allowAny: boolean;
163
166
  hideArrow: boolean;
167
+ showPopup: boolean;
164
168
  maxHeight: number;
165
169
  directions: Directions[];
166
170
  selected: null;
@@ -10,7 +10,7 @@ import Avatar, { Size as Size$1 } from '../avatar/avatar.js';
10
10
  import Popup from '../popup/popup.js';
11
11
  import List, { ActiveItemContext } from '../list/list.js';
12
12
  import { Size, Input } from '../input/input.js';
13
- import { InputLabel } from '../input/input-label.js';
13
+ import { ControlLabel } from '../control-label/control-label.js';
14
14
  import Shortcuts from '../shortcuts/shortcuts.js';
15
15
  import { Button } from '../button/button.js';
16
16
  import joinDataTestAttributes from '../global/data-tests.js';
@@ -69,6 +69,7 @@ import '../list/list__separator.js';
69
69
  import '../list/list__hint.js';
70
70
  import '../list/consts.js';
71
71
  import '../i18n/i18n.js';
72
+ import '../_helpers/control-label.js';
72
73
  import '../global/react-render-adapter.js';
73
74
  import '@jetbrains/icons/search';
74
75
  import '../loader-inline/loader-inline.js';
@@ -246,6 +247,7 @@ class Select extends Component {
246
247
  hideSelected: false,
247
248
  allowAny: false,
248
249
  hideArrow: false,
250
+ showPopup: false,
249
251
  maxHeight: 600,
250
252
  directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT, Popup.PopupProps.Directions.BOTTOM_LEFT, Popup.PopupProps.Directions.TOP_LEFT, Popup.PopupProps.Directions.TOP_RIGHT],
251
253
  selected: null,
@@ -351,7 +353,7 @@ class Select extends Component {
351
353
  filterValue: this.props.filter && typeof this.props.filter === 'object' && this.props.filter.value || '',
352
354
  shortcutsEnabled: false,
353
355
  popupShortcuts: false,
354
- showPopup: false,
356
+ showPopup: this.props.showPopup,
355
357
  prevData: this.props.data,
356
358
  prevSelected: null,
357
359
  prevMultiple: this.props.multiple,
@@ -1032,11 +1034,11 @@ class Select extends Component {
1032
1034
  ref: this.nodeRef,
1033
1035
  className: classNames(classes, modules_9d0de074.buttonMode),
1034
1036
  "data-test": joinDataTestAttributes('ring-select', dataTest)
1035
- }, selectedLabel && /*#__PURE__*/React.createElement(InputLabel, {
1036
- label: selectedLabel,
1037
+ }, selectedLabel && /*#__PURE__*/React.createElement(ControlLabel, {
1038
+ type: this.props.labelType,
1037
1039
  disabled: this.props.disabled,
1038
1040
  htmlFor: this.props.id
1039
- }), shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
1041
+ }, selectedLabel), shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
1040
1042
  map: this.getShortcutsMap(),
1041
1043
  scope: this.shortcutsScope
1042
1044
  }), /*#__PURE__*/React.createElement("div", {
@@ -1150,6 +1152,7 @@ Select.propTypes = {
1150
1152
  inputPlaceholder: PropTypes.string,
1151
1153
  clear: PropTypes.bool,
1152
1154
  hideArrow: PropTypes.bool,
1155
+ showPopup: PropTypes.bool,
1153
1156
  compact: PropTypes.bool,
1154
1157
  size: PropTypes.oneOf(Object.values(Size)),
1155
1158
  customAnchor: PropTypes.func,
@@ -22,8 +22,9 @@ import '../global/controls-height.js';
22
22
  import '../_helpers/button__classes.js';
23
23
  import '../global/get-uid.js';
24
24
  import '../global/composeRefs.js';
25
+ import '../control-label/control-label.js';
26
+ import '../_helpers/control-label.js';
25
27
  import '../_helpers/input.js';
26
- import '../input/input-label.js';
27
28
  import '../i18n/i18n.js';
28
29
  import 'sniffr';
29
30
  import 'react-virtualized/dist/es/List';
@@ -68,8 +68,9 @@ import '../_helpers/button__classes.js';
68
68
  import '../input/input.js';
69
69
  import '../i18n/i18n-context.js';
70
70
  import '../i18n/i18n.js';
71
+ import '../control-label/control-label.js';
72
+ import '../_helpers/control-label.js';
71
73
  import '../_helpers/input.js';
72
- import '../input/input-label.js';
73
74
 
74
75
  const FILTER_HEIGHT = 35;
75
76
  const TOOLBAR_HEIGHT = 49;
@@ -70,8 +70,9 @@ import '../list/consts.js';
70
70
  import '../input/input.js';
71
71
  import '../i18n/i18n-context.js';
72
72
  import '../i18n/i18n.js';
73
+ import '../control-label/control-label.js';
74
+ import '../_helpers/control-label.js';
73
75
  import '../_helpers/input.js';
74
- import '../input/input-label.js';
75
76
  import '../global/rerender-hoc.js';
76
77
  import '../global/fuzzy-highlight.js';
77
78
  import '../select/select__popup.js';