@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.
- package/components/control-label/control-label.css +23 -0
- package/components/control-label/control-label.d.ts +11 -0
- package/components/control-label/control-label.js +22 -0
- package/components/input/input.css +0 -15
- package/components/input/input.d.ts +2 -0
- package/components/input/input.js +3 -3
- package/components/input-ng/input-ng.js +2 -1
- package/components/select/select.d.ts +4 -0
- package/components/select/select.js +5 -3
- package/components/tags-input/tags-input.d.ts +2 -0
- package/components/tags-input/tags-input.js +3 -4
- package/dist/_helpers/control-label.js +3 -0
- package/dist/_helpers/input.js +1 -1
- package/dist/control-label/control-label.d.ts +11 -0
- package/dist/control-label/control-label.js +35 -0
- package/dist/date-picker/date-input.js +2 -1
- package/dist/date-picker/date-picker.js +2 -1
- package/dist/date-picker/date-popup.js +2 -1
- package/dist/editable-heading/editable-heading.js +2 -1
- package/dist/input/input.d.ts +2 -0
- package/dist/input/input.js +6 -4
- package/dist/input-ng/input-ng.js +2 -1
- package/dist/old-browsers-message/white-list.js +2 -2
- package/dist/pager/pager.js +2 -1
- package/dist/pager-ng/pager-ng.js +2 -1
- package/dist/query-assist/query-assist.js +2 -1
- package/dist/query-assist-ng/query-assist-ng.js +2 -1
- package/dist/select/select.d.ts +4 -0
- package/dist/select/select.js +8 -5
- package/dist/select/select__filter.js +2 -1
- package/dist/select/select__popup.js +2 -1
- package/dist/select-ng/select-ng.js +2 -1
- package/dist/select-ng/select-ng__lazy.js +2 -1
- package/dist/shortcuts-hint-ng/shortcuts-hint-ng.js +1 -0
- package/dist/style.css +1 -1
- package/dist/table-legacy-ng/table-legacy-ng.js +2 -1
- package/dist/table-legacy-ng/table-legacy-ng__pager.js +2 -1
- package/dist/tags-input/tags-input.d.ts +2 -0
- package/dist/tags-input/tags-input.js +6 -5
- package/dist/tags-input-ng/tags-input-ng.js +2 -1
- package/package.json +7 -7
- package/components/input/input-label.d.ts +0 -10
- package/components/input/input-label.js +0 -18
- package/dist/input/input-label.d.ts +0 -10
- 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 && (<
|
|
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="${
|
|
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
|
|
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:
|
|
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 && (<
|
|
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 && (<
|
|
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}/>
|
package/dist/_helpers/input.js
CHANGED
|
@@ -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","
|
|
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 '../
|
|
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';
|
package/dist/input/input.d.ts
CHANGED
|
@@ -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;
|
package/dist/input/input.js
CHANGED
|
@@ -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(
|
|
164
|
+
}, label && /*#__PURE__*/React.createElement(ControlLabel, {
|
|
163
165
|
htmlFor: this.getId(),
|
|
164
166
|
disabled: disabled,
|
|
165
|
-
|
|
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="${
|
|
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
|
|
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
|
|
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;
|
package/dist/pager/pager.js
CHANGED
|
@@ -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 '../
|
|
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;
|
package/dist/select/select.d.ts
CHANGED
|
@@ -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;
|
package/dist/select/select.js
CHANGED
|
@@ -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 {
|
|
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:
|
|
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(
|
|
1036
|
-
|
|
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';
|