@jetbrains/ring-ui-built 7.0.0-beta.8 → 7.0.0
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/_helpers/anchor.js +4 -4
- package/components/_helpers/button__classes.js +13 -13
- package/components/_helpers/caption.js +3 -3
- package/components/_helpers/card.js +23 -20
- package/components/_helpers/date-picker.js +2 -2
- package/components/_helpers/dialog__body-scroll-preventer.js +4 -4
- package/components/_helpers/grid.js +2 -2
- package/components/_helpers/header.js +2 -2
- package/components/_helpers/heading.js +2 -2
- package/components/_helpers/icon__svg.js +6 -6
- package/components/_helpers/input.js +14 -14
- package/components/_helpers/island.js +2 -2
- package/components/_helpers/link.js +2 -2
- package/components/_helpers/list.js +2 -2
- package/components/_helpers/query-assist__suggestions.js +7 -7
- package/components/_helpers/select__filter.js +3 -3
- package/components/_helpers/services-link.js +3 -3
- package/components/_helpers/sidebar.js +9 -9
- package/components/_helpers/tab-link.js +7 -7
- package/components/_helpers/table.js +2 -2
- package/components/_helpers/theme.js +18 -12
- package/components/_helpers/title.js +7 -7
- package/components/alert/alert.d.ts +2 -2
- package/components/alert/alert.js +12 -13
- package/components/alert/container.js +4 -4
- package/components/alert-service/alert-service.js +0 -1
- package/components/auth/auth.js +0 -1
- package/components/auth/auth__core.js +1 -2
- package/components/auth/background-flow.js +2 -2
- package/components/auth/down-notification.js +5 -6
- package/components/auth/iframe-flow.js +0 -1
- package/components/auth/storage.js +0 -1
- package/components/auth/token-validator.js +1 -1
- package/components/auth-dialog/auth-dialog.js +10 -11
- package/components/auth-dialog-service/auth-dialog-service.js +2 -3
- package/components/avatar/avatar.js +6 -6
- package/components/breadcrumbs/breadcrumbs.js +2 -2
- package/components/button/button.js +4 -4
- package/components/button/button__classes.d.ts +1 -1
- package/components/button-group/button-group.js +3 -4
- package/components/button-set/button-set.js +2 -3
- package/components/button-toolbar/button-toolbar.d.ts +1 -1
- package/components/button-toolbar/button-toolbar.js +2 -3
- package/components/checkbox/checkbox.js +8 -8
- package/components/clipboard/clipboard.js +0 -1
- package/components/code/code.d.ts +1 -1
- package/components/code/code.js +7 -7
- package/components/collapse/collapse-content.d.ts +1 -2
- package/components/collapse/collapse-content.js +25 -11
- package/components/collapse/collapse-control.js +0 -1
- package/components/confirm/confirm.d.ts +2 -2
- package/components/confirm/confirm.js +3 -4
- package/components/confirm-service/confirm-service.d.ts +1 -1
- package/components/confirm-service/confirm-service.js +1 -2
- package/components/content-layout/content-layout.js +4 -4
- package/components/contenteditable/contenteditable.d.ts +1 -1
- package/components/control-help/control-help.js +2 -2
- package/components/control-label/control-label.js +5 -5
- package/components/data-list/data-list.d.ts +2 -2
- package/components/data-list/data-list.js +6 -7
- package/components/data-list/data-list.mock.js +16 -10
- package/components/data-list/item.js +8 -9
- package/components/date-picker/date-input.js +2 -2
- package/components/date-picker/date-picker.d.ts +2 -1
- package/components/date-picker/date-picker.js +12 -12
- package/components/date-picker/date-popup.js +4 -5
- package/components/date-picker/day.js +15 -15
- package/components/date-picker/month-names.js +5 -5
- package/components/date-picker/month-slider.js +3 -3
- package/components/date-picker/month.js +3 -3
- package/components/date-picker/months.js +3 -3
- package/components/date-picker/weekdays.js +4 -4
- package/components/date-picker/years.js +5 -5
- package/components/dialog/dialog.d.ts +1 -0
- package/components/dialog/dialog.js +22 -18
- package/components/dropdown/dropdown.d.ts +2 -2
- package/components/dropdown/dropdown.js +2 -3
- package/components/dropdown-menu/dropdown-menu.js +0 -1
- package/components/editable-heading/editable-heading.js +19 -19
- package/components/error-bubble/error-bubble.js +5 -5
- package/components/error-message/error-message.js +6 -7
- package/components/footer/footer.js +9 -10
- package/components/form/form.js +2 -3
- package/components/global/compose.js +0 -2
- package/components/global/data-tests.js +0 -1
- package/components/global/theme.d.ts +4 -2
- package/components/global/theme.js +1 -2
- package/components/grid/col.js +5 -4
- package/components/grid/grid.js +5 -4
- package/components/grid/row.js +5 -5
- package/components/group/group.js +5 -3
- package/components/header/header-icon.js +4 -4
- package/components/header/header.js +3 -4
- package/components/header/links.js +2 -2
- package/components/header/logo.js +2 -2
- package/components/header/profile.d.ts +2 -2
- package/components/header/profile.js +10 -11
- package/components/header/services-link.js +0 -1
- package/components/header/services.js +7 -8
- package/components/header/smart-profile.js +0 -1
- package/components/header/smart-services.js +0 -1
- package/components/header/tray.js +3 -3
- package/components/heading/heading.js +3 -3
- package/components/http/http.d.ts +3 -3
- package/components/icon/icon.js +8 -6
- package/components/input/input-legacy.js +2 -3
- package/components/input-size/input-size.js +2 -3
- package/components/island/content.js +7 -7
- package/components/island/header.js +4 -4
- package/components/island/island.js +4 -5
- package/components/link/link.js +7 -8
- package/components/list/list.d.ts +1 -1
- package/components/list/list.js +5 -6
- package/components/list/list__custom.js +5 -6
- package/components/list/list__hint.js +2 -2
- package/components/list/list__item.js +22 -23
- package/components/list/list__link.js +5 -6
- package/components/list/list__separator.js +3 -3
- package/components/list/list__title.js +5 -5
- package/components/list/list__users-groups-source.js +0 -1
- package/components/loader/loader.js +0 -1
- package/components/loader/loader__core.js +5 -5
- package/components/loader-inline/loader-inline.js +3 -4
- package/components/loader-screen/loader-screen.js +4 -5
- package/components/login-dialog/login-dialog.js +6 -7
- package/components/login-dialog/service.js +1 -2
- package/components/markdown/markdown.d.ts +2 -2
- package/components/markdown/markdown.js +6 -6
- package/components/message/message.js +9 -10
- package/components/old-browsers-message/old-browsers-message.js +0 -1
- package/components/old-browsers-message/old-browsers-message__stop.js +0 -1
- package/components/old-browsers-message/white-list.js +2 -3
- package/components/pager/pager.js +9 -10
- package/components/panel/panel.js +2 -2
- package/components/permissions/permissions.js +0 -1
- package/components/permissions/permissions__cache.js +2 -3
- package/components/popup/popup.js +6 -7
- package/components/popup/position.js +2 -2
- package/components/popup-menu/popup-menu.js +0 -1
- package/components/progress-bar/progress-bar.d.ts +2 -2
- package/components/progress-bar/progress-bar.js +5 -5
- package/components/query-assist/query-assist.js +27 -28
- package/components/query-assist/query-assist__suggestions.js +0 -1
- package/components/radio/radio__item.js +5 -5
- package/components/scrollable-section/scrollable-section.js +6 -6
- package/components/select/select.d.ts +1 -1
- package/components/select/select.js +25 -25
- package/components/select/select__filter.js +0 -1
- package/components/select/select__popup.js +11 -12
- package/components/shortcuts/core.js +1 -1
- package/components/slider/slider.js +20 -20
- package/components/storage/storage.js +0 -1
- package/components/storage/storage__local.js +0 -1
- package/components/style.css +1 -1
- package/components/tab-trap/tab-trap.js +2 -2
- package/components/table/cell.js +2 -3
- package/components/table/header-cell.js +8 -9
- package/components/table/header.d.ts +2 -10
- package/components/table/header.js +7 -14
- package/components/table/row-with-focus-sensor.js +1 -1
- package/components/table/row.d.ts +0 -1
- package/components/table/row.js +12 -18
- package/components/table/selection.d.ts +2 -3
- package/components/table/simple-table.js +3 -3
- package/components/table/smart-table.js +1 -1
- package/components/table/table.d.ts +0 -1
- package/components/table/table.js +18 -20
- package/components/tabs/collapsible-more.d.ts +1 -1
- package/components/tabs/collapsible-more.js +6 -7
- package/components/tabs/collapsible-tab.js +4 -5
- package/components/tabs/collapsible-tabs.d.ts +2 -2
- package/components/tabs/collapsible-tabs.js +5 -6
- package/components/tabs/dumb-tabs.js +5 -6
- package/components/tabs/smart-tabs.js +0 -1
- package/components/tabs/tab-link.js +0 -1
- package/components/tabs/tab.js +0 -1
- package/components/tabs/tabs.js +0 -1
- package/components/tag/tag.d.ts +1 -1
- package/components/tag/tag.js +14 -15
- package/components/tags-input/tags-input.js +8 -9
- package/components/tags-list/tags-list.d.ts +2 -2
- package/components/tags-list/tags-list.js +2 -2
- package/components/text/text.js +7 -7
- package/components/toggle/toggle.d.ts +2 -2
- package/components/toggle/toggle.js +12 -13
- package/components/tooltip/tooltip.d.ts +4 -1
- package/components/tooltip/tooltip.js +35 -20
- package/components/user-agreement/service.js +1 -2
- package/components/user-agreement/user-agreement.js +7 -8
- package/components/user-card/card.js +3 -2
- package/components/user-card/smart-user-card-tooltip.js +5 -4
- package/components/user-card/tooltip.js +5 -4
- package/components/user-card/user-card.js +3 -2
- package/package.json +7 -6
- package/typings.d.ts +2 -4
- package/components/_helpers/badge.js +0 -3
- package/components/badge/badge.d.ts +0 -14
- package/components/badge/badge.js +0 -47
- package/components/island-legacy/content-legacy.d.ts +0 -5
- package/components/island-legacy/content-legacy.js +0 -23
- package/components/island-legacy/header-legacy.d.ts +0 -5
- package/components/island-legacy/header-legacy.js +0 -26
- package/components/island-legacy/island-legacy.d.ts +0 -7
- package/components/island-legacy/island-legacy.js +0 -25
@@ -21,11 +21,10 @@ import rerenderHOC from '../global/rerender-hoc.js';
|
|
21
21
|
import { Button } from '../button/button.js';
|
22
22
|
import Icon from '../icon/icon.js';
|
23
23
|
import { ControlsHeightContext, ControlsHeight } from '../global/controls-height.js';
|
24
|
-
import { S as Size,
|
24
|
+
import { S as Size, i as inputStyles } from '../_helpers/input.js';
|
25
25
|
import { I18nContext } from '../i18n/i18n-context.js';
|
26
|
-
import { Q as QueryAssistSuggestions,
|
26
|
+
import { Q as QueryAssistSuggestions, s as styles } from '../_helpers/query-assist__suggestions.js';
|
27
27
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
28
|
-
import 'core-js/modules/es.array.reduce.js';
|
29
28
|
import 'react-dom/server';
|
30
29
|
import '../popup/popup.js';
|
31
30
|
import 'react-dom';
|
@@ -560,7 +559,7 @@ class QueryAssist extends Component {
|
|
560
559
|
this._pushHistory(this.state);
|
561
560
|
}
|
562
561
|
shouldComponentUpdate(props, state) {
|
563
|
-
return state.query !== this.state.query || state.dirty !== this.state.dirty || state.loading !== this.state.loading || state.showPopup !== this.state.showPopup || state.suggestions !== this.state.suggestions || state.styleRanges !== this.state.styleRanges || state.placeholderEnabled !== this.state.placeholderEnabled || props.placeholder !== this.props.placeholder || props.disabled !== this.props.disabled || props.clear !== this.props.clear || props.focus !== this.props.focus || props.actions !== this.props.actions || props.loader !== this.props.loader || props.glass !== this.props.glass;
|
562
|
+
return state.query !== this.state.query || state.dirty !== this.state.dirty || state.loading !== this.state.loading || state.showPopup !== this.state.showPopup || state.suggestions !== this.state.suggestions || state.styleRanges !== this.state.styleRanges || state.placeholderEnabled !== this.state.placeholderEnabled || props.placeholder !== this.props.placeholder || props.disabled !== this.props.disabled || props.clear !== this.props.clear || props.focus !== this.props.focus || props.actions !== this.props.actions || props.loader !== this.props.loader || props.glass !== this.props.glass || props.className !== this.props.className;
|
564
563
|
}
|
565
564
|
componentDidUpdate(prevProps) {
|
566
565
|
const {
|
@@ -737,7 +736,7 @@ class QueryAssist extends Component {
|
|
737
736
|
} = this.state;
|
738
737
|
const classes = [];
|
739
738
|
const LETTER_CLASS = 'letter';
|
740
|
-
const LETTER_DEFAULT_CLASS =
|
739
|
+
const LETTER_DEFAULT_CLASS = styles.letterDefault;
|
741
740
|
if (styleRanges && styleRanges.length) {
|
742
741
|
styleRanges.forEach((item, index) => {
|
743
742
|
if (dirty && index === styleRanges.length - 1 && item.style === 'text') {
|
@@ -745,12 +744,12 @@ class QueryAssist extends Component {
|
|
745
744
|
}
|
746
745
|
const styleName = "".concat(LETTER_CLASS, "-").concat(item.style.replace('_', '-'));
|
747
746
|
for (let i = item.start; i < item.start + item.length; i++) {
|
748
|
-
classes[i] =
|
747
|
+
classes[i] = styles[styleName];
|
749
748
|
}
|
750
749
|
});
|
751
750
|
}
|
752
751
|
return query && Array.from(query).map((letter, index, letters) => {
|
753
|
-
const className = classNames(
|
752
|
+
const className = classNames(styles.letter, classes[index] || LETTER_DEFAULT_CLASS);
|
754
753
|
const dataTest = letters.length - 1 === index ? 'ring-query-assist-last-letter' : null;
|
755
754
|
// \u00a0 ===
|
756
755
|
return /*#__PURE__*/jsx("span", {
|
@@ -779,7 +778,7 @@ class QueryAssist extends Component {
|
|
779
778
|
const actions = [...(this.props.actions || [])];
|
780
779
|
const renderClear = this.props.clear && !!this.state.query;
|
781
780
|
if (renderClear) {
|
782
|
-
actions.push(
|
781
|
+
actions.push(/*#__PURE__*/jsx(I18nContext.Consumer, {
|
783
782
|
children: _ref6 => {
|
784
783
|
var _this$props$translati, _this$props$translati2;
|
785
784
|
let {
|
@@ -787,7 +786,7 @@ class QueryAssist extends Component {
|
|
787
786
|
} = _ref6;
|
788
787
|
return /*#__PURE__*/jsx(Button, {
|
789
788
|
icon: closeIcon,
|
790
|
-
className:
|
789
|
+
className: styles.clear,
|
791
790
|
title: (_this$props$translati = (_this$props$translati2 = this.props.translations) === null || _this$props$translati2 === void 0 ? void 0 : _this$props$translati2.clearTitle) !== null && _this$props$translati !== void 0 ? _this$props$translati : translate('clearTitle'),
|
792
791
|
ref: this.clearRef,
|
793
792
|
onClick: this.clearQuery,
|
@@ -812,23 +811,23 @@ class QueryAssist extends Component {
|
|
812
811
|
const renderLoader = this.props.loader !== false && this.state.loading;
|
813
812
|
const renderGlass = glass && !renderLoader;
|
814
813
|
const actions = this.renderActions();
|
815
|
-
const containerClasses = classNames(className,
|
816
|
-
[
|
817
|
-
[
|
818
|
-
[
|
819
|
-
[
|
814
|
+
const containerClasses = classNames(className, inputStyles["size".concat(huge ? Size.FULL : size)], {
|
815
|
+
[styles.queryAssist]: true,
|
816
|
+
[styles.withIcon]: renderGlass && !huge || renderLoader,
|
817
|
+
[styles.huge]: huge,
|
818
|
+
[styles.queryAssistDisabled]: this.props.disabled
|
820
819
|
});
|
821
820
|
const inputClasses = classNames(this.props.inputClassName, {
|
822
|
-
["".concat(
|
823
|
-
[
|
824
|
-
[
|
821
|
+
["".concat(styles.input, " ring-js-shortcuts")]: true,
|
822
|
+
[styles.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
|
823
|
+
[styles.inputGap2]: actions.length === 2,
|
825
824
|
// TODO: replace with flex-box layout
|
826
|
-
[
|
825
|
+
[styles.inputRevertOrder]: !glass || huge
|
827
826
|
});
|
828
827
|
const placeholderStyles = classNames({
|
829
|
-
[
|
830
|
-
[
|
831
|
-
[
|
828
|
+
[styles.placeholder]: true,
|
829
|
+
[styles.hugePlaceholder]: huge,
|
830
|
+
[styles.withoutGlass]: !glass || !renderLoader && huge
|
832
831
|
});
|
833
832
|
return /*#__PURE__*/jsx(ControlsHeightContext.Provider, {
|
834
833
|
value: ControlsHeight.M,
|
@@ -848,14 +847,14 @@ class QueryAssist extends Component {
|
|
848
847
|
scope: this.shortcutsScope
|
849
848
|
}), renderGlass && !huge && /*#__PURE__*/jsx(Icon, {
|
850
849
|
glyph: searchIcon,
|
851
|
-
className:
|
850
|
+
className: styles.icon,
|
852
851
|
title: (_translations$searchT = translations === null || translations === void 0 ? void 0 : translations.searchTitle) !== null && _translations$searchT !== void 0 ? _translations$searchT : translate('searchTitle'),
|
853
852
|
ref: this.glassRef,
|
854
853
|
"data-test": "query-assist-search-icon"
|
855
854
|
}), renderLoader && /*#__PURE__*/jsx("div", {
|
856
|
-
className: classNames(
|
857
|
-
[
|
858
|
-
[
|
855
|
+
className: classNames(styles.icon, styles.loader, {
|
856
|
+
[styles.loaderOnTheRight]: !glass && !huge,
|
857
|
+
[styles.loaderActive]: renderLoader
|
859
858
|
}),
|
860
859
|
ref: this.loaderRef,
|
861
860
|
children: /*#__PURE__*/jsx(LoaderInline, {})
|
@@ -893,7 +892,7 @@ class QueryAssist extends Component {
|
|
893
892
|
children: this.props.placeholder
|
894
893
|
}), actions.length ? /*#__PURE__*/jsx("div", {
|
895
894
|
"data-test": "ring-query-assist-actions",
|
896
|
-
className:
|
895
|
+
className: styles.actions,
|
897
896
|
children: actions
|
898
897
|
}) : null, /*#__PURE__*/jsx(PopupMenu, {
|
899
898
|
hidden: !this.state.showPopup,
|
@@ -915,11 +914,11 @@ class QueryAssist extends Component {
|
|
915
914
|
onMouseUp: this.trackPopupMouseState,
|
916
915
|
onSelect: item => this.handleComplete(item)
|
917
916
|
}), glass && huge && /*#__PURE__*/jsx("div", {
|
918
|
-
className:
|
917
|
+
className: styles.rightSearchButton,
|
919
918
|
"data-test": "query-assist-search-button",
|
920
919
|
children: /*#__PURE__*/jsx(Icon, {
|
921
920
|
glyph: searchIcon,
|
922
|
-
className:
|
921
|
+
className: styles.rightSearchIcon,
|
923
922
|
title: (_translations$searchT3 = translations === null || translations === void 0 ? void 0 : translations.searchTitle) !== null && _translations$searchT3 !== void 0 ? _translations$searchT3 : translate('searchTitle'),
|
924
923
|
onClick: this.handleApply,
|
925
924
|
ref: this.glassRef,
|
@@ -13,7 +13,6 @@ import 'react-virtualized/dist/es/CellMeasurer';
|
|
13
13
|
import 'util-deprecate';
|
14
14
|
import 'memoize-one';
|
15
15
|
import '../global/data-tests.js';
|
16
|
-
import 'core-js/modules/es.array.reduce.js';
|
17
16
|
import '../global/get-uid.js';
|
18
17
|
import '../global/schedule-raf.js';
|
19
18
|
import '../global/memoize.js';
|
@@ -6,7 +6,7 @@ import getUID from '../global/get-uid.js';
|
|
6
6
|
import ControlHelp from '../control-help/control-help.js';
|
7
7
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
8
8
|
|
9
|
-
var
|
9
|
+
var styles = {"radio":"radio_rui_798a","circle":"circle_rui_798a","input":"input_rui_798a","focus":"focus_rui_798a","label":"label_rui_798a"};
|
10
10
|
|
11
11
|
const _excluded = ["className", "children", "help"],
|
12
12
|
_excluded2 = ["value", "onChange"];
|
@@ -32,7 +32,7 @@ class RadioItemInner extends Component {
|
|
32
32
|
help
|
33
33
|
} = _this$props,
|
34
34
|
restProps = _objectWithoutProperties(_this$props, _excluded);
|
35
|
-
const classes = classNames(
|
35
|
+
const classes = classNames(styles.radio, className);
|
36
36
|
return /*#__PURE__*/jsxs("label", {
|
37
37
|
ref: this.labelRef,
|
38
38
|
className: classes,
|
@@ -41,12 +41,12 @@ class RadioItemInner extends Component {
|
|
41
41
|
id: this.uid
|
42
42
|
}, restProps), {}, {
|
43
43
|
ref: this.inputRef,
|
44
|
-
className:
|
44
|
+
className: styles.input,
|
45
45
|
type: "radio"
|
46
46
|
})), /*#__PURE__*/jsx("span", {
|
47
|
-
className:
|
47
|
+
className: styles.circle
|
48
48
|
}), /*#__PURE__*/jsxs("span", {
|
49
|
-
className:
|
49
|
+
className: styles.label,
|
50
50
|
children: [children, help && /*#__PURE__*/jsx(ControlHelp, {
|
51
51
|
children: help
|
52
52
|
})]
|
@@ -4,7 +4,7 @@ import { useState, useRef, useCallback, useEffect } from 'react';
|
|
4
4
|
import classNames from 'classnames';
|
5
5
|
import { jsx } from 'react/jsx-runtime';
|
6
6
|
|
7
|
-
var
|
7
|
+
var styles = {"scrollableSection":"scrollableSection_rui_29c1","withTopBorder":"withTopBorder_rui_29c1","withRightBorder":"withRightBorder_rui_29c1","withBottomBorder":"withBottomBorder_rui_29c1","withLeftBorder":"withLeftBorder_rui_29c1"};
|
8
8
|
|
9
9
|
const _excluded = ["className"];
|
10
10
|
function ScrollableSection(_ref) {
|
@@ -39,11 +39,11 @@ function ScrollableSection(_ref) {
|
|
39
39
|
return () => window.removeEventListener('resize', calculateScrollPosition);
|
40
40
|
}, [calculateScrollPosition]);
|
41
41
|
return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({}, restProps), {}, {
|
42
|
-
className: classNames(
|
43
|
-
[
|
44
|
-
[
|
45
|
-
[
|
46
|
-
[
|
42
|
+
className: classNames(styles.scrollableSection, className, {
|
43
|
+
[styles.withTopBorder]: !scrolledToTop,
|
44
|
+
[styles.withRightBorder]: !scrolledToRight,
|
45
|
+
[styles.withBottomBorder]: !scrolledToBottom,
|
46
|
+
[styles.withLeftBorder]: !scrolledToLeft
|
47
47
|
}),
|
48
48
|
ref: ref,
|
49
49
|
onScroll: calculateScrollPosition
|
@@ -49,7 +49,7 @@ export interface CustomAnchorProps {
|
|
49
49
|
} & DataTestProps;
|
50
50
|
popup: ReactNode;
|
51
51
|
}
|
52
|
-
export type CustomAnchor = (
|
52
|
+
export type CustomAnchor = (props: CustomAnchorProps) => ReactNode;
|
53
53
|
export interface BaseSelectProps<T = unknown> {
|
54
54
|
data: readonly SelectItem<T>[];
|
55
55
|
filter: boolean | Filter<T>;
|
@@ -1,5 +1,4 @@
|
|
1
1
|
import { _ as _defineProperty, b as _objectSpread2, a as _objectWithoutProperties, c as _toPropertyKey } from '../_helpers/_rollupPluginBabelHelpers.js';
|
2
|
-
import 'core-js/modules/es.array.reduce.js';
|
3
2
|
import 'core-js/modules/es.regexp.exec.js';
|
4
3
|
import 'core-js/modules/es.string.replace.js';
|
5
4
|
import 'core-js/modules/es.string.trim.js';
|
@@ -13,7 +12,7 @@ import '../dropdown/dropdown.js';
|
|
13
12
|
import Avatar, { Size as Size$1 } from '../avatar/avatar.js';
|
14
13
|
import Popup from '../popup/popup.js';
|
15
14
|
import List, { ActiveItemContext } from '../list/list.js';
|
16
|
-
import { S as Size, I as Input,
|
15
|
+
import { S as Size, I as Input, i as inputStyles } from '../_helpers/input.js';
|
17
16
|
import { ControlLabel } from '../control-label/control-label.js';
|
18
17
|
import Shortcuts from '../shortcuts/shortcuts.js';
|
19
18
|
import { Button } from '../button/button.js';
|
@@ -82,7 +81,7 @@ import '../caret/caret.js';
|
|
82
81
|
import '../text/text.js';
|
83
82
|
import '../_helpers/select__filter.js';
|
84
83
|
|
85
|
-
var
|
84
|
+
var styles = {"select":"select_rui_e9c2","value":"value_rui_e9c2 ellipsis_rui_f295 font_rui_f295","icons":"icons_rui_e9c2","toolbar":"toolbar_rui_e9c2","button":"button_rui_e9c2","buttonSpaced":"buttonSpaced_rui_e9c2","inputMode":"inputMode_rui_e9c2","heightS":"heightS_rui_e9c2","heightL":"heightL_rui_e9c2","selectedIcon":"selectedIcon_rui_e9c2 resetButton_rui_f295","clearIcon":"clearIcon_rui_e9c2","sizeS":"sizeS_rui_e9c2","sizeM":"sizeM_rui_e9c2","sizeL":"sizeL_rui_e9c2","sizeFULL":"sizeFULL_rui_e9c2","sizeAUTO":"sizeAUTO_rui_e9c2","buttonMode":"buttonMode_rui_e9c2","open":"open_rui_e9c2","buttonContainer":"buttonContainer_rui_e9c2","buttonValue":"buttonValue_rui_e9c2 ellipsis_rui_f295","buttonValueOpen":"buttonValueOpen_rui_e9c2","buttonValueEmpty":"buttonValueEmpty_rui_e9c2","label":"label_rui_e9c2","disabled":"disabled_rui_e9c2","avatar":"avatar_rui_e9c2","popup":"popup_rui_e9c2","chevron":"chevron_rui_e9c2","chevronIcon":"chevronIcon_rui_e9c2"};
|
86
85
|
|
87
86
|
function noop() {}
|
88
87
|
/**
|
@@ -422,6 +421,7 @@ class Select extends Component {
|
|
422
421
|
_defineProperty(this, "_redrawPopup", () => {
|
423
422
|
if (this.props.multiple) {
|
424
423
|
setTimeout(() => {
|
424
|
+
//setTimeout solves events order and bubbling issue
|
425
425
|
if (this.isInputMode()) {
|
426
426
|
this.clearFilter();
|
427
427
|
}
|
@@ -696,7 +696,7 @@ class Select extends Component {
|
|
696
696
|
rgItemType: List.ListProps.Type.CUSTOM,
|
697
697
|
template: /*#__PURE__*/jsx(Button, {
|
698
698
|
text: true,
|
699
|
-
className:
|
699
|
+
className: styles.button,
|
700
700
|
"data-test": "ring-select-reset-tags-button",
|
701
701
|
height: ControlsHeight.S,
|
702
702
|
children: reset.label
|
@@ -801,13 +801,13 @@ class Select extends Component {
|
|
801
801
|
}
|
802
802
|
return /*#__PURE__*/jsxs("div", {
|
803
803
|
className: classNames({
|
804
|
-
[
|
804
|
+
[styles.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
|
805
805
|
}),
|
806
806
|
"data-test": "ring-select-toolbar",
|
807
807
|
children: [renderBottomToolbar && renderBottomToolbar(), this.state.addButton && /*#__PURE__*/jsx(Button, {
|
808
808
|
text: true,
|
809
809
|
delayed: delayed,
|
810
|
-
className: classNames(
|
810
|
+
className: classNames(styles.button, styles.buttonSpaced),
|
811
811
|
onClick: this.addHandler,
|
812
812
|
"data-test": "ring-select-toolbar-button",
|
813
813
|
children: prefix ? "".concat(prefix, " ").concat(label) : label
|
@@ -891,10 +891,10 @@ class Select extends Component {
|
|
891
891
|
const icons = [];
|
892
892
|
const height = this.props.height || this.context;
|
893
893
|
if (!Array.isArray(selected) && selected !== null && selected !== void 0 && selected.icon) {
|
894
|
-
icons.push(
|
894
|
+
icons.push(/*#__PURE__*/jsx("button", {
|
895
895
|
title: "Toggle options popup",
|
896
896
|
type: "button",
|
897
|
-
className:
|
897
|
+
className: styles.selectedIcon,
|
898
898
|
disabled: this.props.disabled,
|
899
899
|
onClick: this._clickHandler,
|
900
900
|
style: {
|
@@ -903,10 +903,10 @@ class Select extends Component {
|
|
903
903
|
}, "selected"));
|
904
904
|
}
|
905
905
|
if (clear && !disabled && !this._selectionIsEmpty()) {
|
906
|
-
icons.push(
|
906
|
+
icons.push(/*#__PURE__*/jsx(Button, {
|
907
907
|
title: "Clear selection",
|
908
908
|
"data-test": "ring-clear-select",
|
909
|
-
className:
|
909
|
+
className: styles.clearIcon,
|
910
910
|
disabled: this.props.disabled,
|
911
911
|
onClick: this.clear,
|
912
912
|
height: height,
|
@@ -914,10 +914,10 @@ class Select extends Component {
|
|
914
914
|
}, "close"));
|
915
915
|
}
|
916
916
|
if (!hideArrow) {
|
917
|
-
icons.push(
|
917
|
+
icons.push(/*#__PURE__*/jsx(Button, {
|
918
918
|
title: "Toggle options popup",
|
919
|
-
className:
|
920
|
-
iconClassName:
|
919
|
+
className: styles.chevron,
|
920
|
+
iconClassName: styles.chevronIcon,
|
921
921
|
icon: chevronDownIcon,
|
922
922
|
disabled: this.props.disabled,
|
923
923
|
height: height,
|
@@ -929,7 +929,7 @@ class Select extends Component {
|
|
929
929
|
_getAvatar() {
|
930
930
|
var _this$state$selected, _this$state$selected2;
|
931
931
|
return !Array.isArray(this.state.selected) && (((_this$state$selected = this.state.selected) === null || _this$state$selected === void 0 ? void 0 : _this$state$selected.avatar) || ((_this$state$selected2 = this.state.selected) === null || _this$state$selected2 === void 0 ? void 0 : _this$state$selected2.showGeneratedAvatar)) && /*#__PURE__*/jsx(Avatar, {
|
932
|
-
className:
|
932
|
+
className: styles.avatar,
|
933
933
|
url: this.state.selected.avatar,
|
934
934
|
username: this.state.selected.username,
|
935
935
|
size: Size$1.Size20
|
@@ -957,9 +957,9 @@ class Select extends Component {
|
|
957
957
|
const {
|
958
958
|
shortcutsEnabled
|
959
959
|
} = this.state;
|
960
|
-
const classes = classNames(
|
961
|
-
[
|
962
|
-
[
|
960
|
+
const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, styles["height".concat(this.props.height || this.context)], {
|
961
|
+
[styles["size".concat(this.props.size)]]: this.props.type !== Type.INLINE,
|
962
|
+
[styles.disabled]: this.props.disabled
|
963
963
|
});
|
964
964
|
let style;
|
965
965
|
let iconsNode;
|
@@ -967,7 +967,7 @@ class Select extends Component {
|
|
967
967
|
const icons = this._getIcons();
|
968
968
|
style = getStyle(icons.length);
|
969
969
|
iconsNode = /*#__PURE__*/jsx("div", {
|
970
|
-
className:
|
970
|
+
className: styles.icons,
|
971
971
|
children: icons
|
972
972
|
});
|
973
973
|
}
|
@@ -984,7 +984,7 @@ class Select extends Component {
|
|
984
984
|
return /*#__PURE__*/jsxs(Fragment$1, {
|
985
985
|
children: [/*#__PURE__*/jsxs("div", {
|
986
986
|
ref: this.nodeRef,
|
987
|
-
className: classNames(classes,
|
987
|
+
className: classNames(classes, styles.inputMode),
|
988
988
|
"data-test": joinDataTestAttributes('ring-select', dataTest),
|
989
989
|
role: "presentation" // has interactive elements inside
|
990
990
|
,
|
@@ -1019,14 +1019,14 @@ class Select extends Component {
|
|
1019
1019
|
afterInput: iconsNode
|
1020
1020
|
})), this._renderPopup()]
|
1021
1021
|
}), this.props.error && /*#__PURE__*/jsx("div", {
|
1022
|
-
className: classNames(
|
1022
|
+
className: classNames(inputStyles.errorText, inputStyles["size".concat(this.props.size)]),
|
1023
1023
|
children: this.props.error
|
1024
1024
|
})]
|
1025
1025
|
});
|
1026
1026
|
case Type.BUTTON:
|
1027
1027
|
return /*#__PURE__*/jsxs("div", {
|
1028
1028
|
ref: this.nodeRef,
|
1029
|
-
className: classNames(classes,
|
1029
|
+
className: classNames(classes, styles.buttonMode),
|
1030
1030
|
"data-test": joinDataTestAttributes('ring-select', dataTest),
|
1031
1031
|
children: [selectedLabel && /*#__PURE__*/jsx(ControlLabel, {
|
1032
1032
|
type: this.props.labelType,
|
@@ -1037,14 +1037,14 @@ class Select extends Component {
|
|
1037
1037
|
map: this.getShortcutsMap(),
|
1038
1038
|
scope: this.shortcutsScope
|
1039
1039
|
}), /*#__PURE__*/jsxs("div", {
|
1040
|
-
className:
|
1040
|
+
className: styles.buttonContainer,
|
1041
1041
|
children: [/*#__PURE__*/jsxs(Button, _objectSpread2(_objectSpread2({}, ariaProps), {}, {
|
1042
1042
|
height: this.props.height,
|
1043
1043
|
id: this.props.id,
|
1044
1044
|
onClick: this._clickHandler,
|
1045
|
-
className: classNames(this.props.buttonClassName,
|
1046
|
-
[
|
1047
|
-
[
|
1045
|
+
className: classNames(this.props.buttonClassName, styles.buttonValue, {
|
1046
|
+
[styles.buttonValueOpen]: this.state.showPopup,
|
1047
|
+
[styles.buttonValueEmpty]: this._selectionIsEmpty()
|
1048
1048
|
}),
|
1049
1049
|
disabled: this.props.disabled,
|
1050
1050
|
style: style,
|
@@ -33,7 +33,6 @@ import 'react-virtualized/dist/es/AutoSizer';
|
|
33
33
|
import 'react-virtualized/dist/es/WindowScroller';
|
34
34
|
import 'react-virtualized/dist/es/CellMeasurer';
|
35
35
|
import '../global/data-tests.js';
|
36
|
-
import 'core-js/modules/es.array.reduce.js';
|
37
36
|
import '../global/schedule-raf.js';
|
38
37
|
import '../global/dom.js';
|
39
38
|
import '../shortcuts/shortcuts.js';
|
@@ -1,5 +1,4 @@
|
|
1
1
|
import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
|
2
|
-
import 'core-js/modules/es.array.reduce.js';
|
3
2
|
import 'core-js/modules/web.dom-collections.iterator.js';
|
4
3
|
import { PureComponent } from 'react';
|
5
4
|
import classNames from 'classnames';
|
@@ -23,7 +22,7 @@ import Text from '../text/text.js';
|
|
23
22
|
import { ControlsHeight } from '../global/controls-height.js';
|
24
23
|
import { createComposedRef } from '../global/composeRefs.js';
|
25
24
|
import { DEFAULT_DIRECTIONS } from '../popup/popup.consts.js';
|
26
|
-
import {
|
25
|
+
import { s as styles, S as SelectFilter } from '../_helpers/select__filter.js';
|
27
26
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
28
27
|
import 'util-deprecate';
|
29
28
|
import '../icon/icon__constants.js';
|
@@ -149,7 +148,7 @@ class SelectPopup extends PureComponent {
|
|
149
148
|
const multiple = this.props.multiple;
|
150
149
|
const activeFilters = this.props.data.filter(item => !item.disabled);
|
151
150
|
return Array.isArray(this.props.selected) && /*#__PURE__*/jsxs("div", {
|
152
|
-
className:
|
151
|
+
className: styles.selectAll,
|
153
152
|
children: [activeFilters.length === 0 ? /*#__PURE__*/jsx("span", {}) : /*#__PURE__*/jsx(Button, {
|
154
153
|
text: true,
|
155
154
|
inline: true,
|
@@ -298,11 +297,11 @@ class SelectPopup extends PureComponent {
|
|
298
297
|
if (this.props.filter || this.props.tags) {
|
299
298
|
var _this$props$filterIco;
|
300
299
|
return /*#__PURE__*/jsxs("div", {
|
301
|
-
className:
|
300
|
+
className: styles.filterWrapper,
|
302
301
|
"data-test": "ring-select-popup-filter",
|
303
302
|
children: [!this.props.tags && /*#__PURE__*/jsx(Icon, {
|
304
303
|
glyph: (_this$props$filterIco = this.props.filterIcon) !== null && _this$props$filterIco !== void 0 ? _this$props$filterIco : searchIcon,
|
305
|
-
className:
|
304
|
+
className: styles.filterIcon,
|
306
305
|
"data-test-custom": "ring-select-popup-filter-icon"
|
307
306
|
}), /*#__PURE__*/jsx(FilterWithShortcuts, {
|
308
307
|
rgShortcutsOptions: this.state.popupFilterShortcutsOptions,
|
@@ -313,7 +312,7 @@ class SelectPopup extends PureComponent {
|
|
313
312
|
onFocus: this.onFilterFocus,
|
314
313
|
className: "ring-js-shortcuts",
|
315
314
|
inputClassName: classNames({
|
316
|
-
[
|
315
|
+
[styles.filterWithTagsInput]: this.props.tags
|
317
316
|
}),
|
318
317
|
placeholder: typeof this.props.filter === 'object' ? this.props.filter.placeholder : undefined,
|
319
318
|
height: this.props.tags ? ControlsHeight.S : ControlsHeight.L,
|
@@ -348,8 +347,8 @@ class SelectPopup extends PureComponent {
|
|
348
347
|
}
|
349
348
|
getFilterWithTags() {
|
350
349
|
if (this.props.tags) {
|
351
|
-
const classes = classNames([
|
352
|
-
[
|
350
|
+
const classes = classNames([styles.filterWithTags, {
|
351
|
+
[styles.filterWithTagsFocused]: !this.state.popupFilterShortcutsOptions.disabled
|
353
352
|
}]);
|
354
353
|
return /*#__PURE__*/jsxs("div", {
|
355
354
|
className: classes,
|
@@ -366,11 +365,11 @@ class SelectPopup extends PureComponent {
|
|
366
365
|
} = this.props;
|
367
366
|
const hasMoreThanOneItem = data.length > 1;
|
368
367
|
return (loading || message) && /*#__PURE__*/jsxs("div", {
|
369
|
-
className: classNames(
|
370
|
-
[
|
368
|
+
className: classNames(styles.bottomLine, {
|
369
|
+
[styles.bottomLineOverItem]: hasMoreThanOneItem
|
371
370
|
}),
|
372
371
|
children: [loading && /*#__PURE__*/jsx(LoaderInline, {}), message && /*#__PURE__*/jsx("div", {
|
373
|
-
className:
|
372
|
+
className: styles.message,
|
374
373
|
children: message
|
375
374
|
})]
|
376
375
|
});
|
@@ -432,7 +431,7 @@ class SelectPopup extends PureComponent {
|
|
432
431
|
dir,
|
433
432
|
filter
|
434
433
|
} = this.props;
|
435
|
-
const classes = classNames(
|
434
|
+
const classes = classNames(styles.popup, className);
|
436
435
|
return /*#__PURE__*/jsx(PopupTargetContext.Consumer, {
|
437
436
|
children: ringPopupTarget => {
|
438
437
|
const filterWithTags = this.getFilterWithTags();
|
@@ -88,7 +88,7 @@ class Shortcuts {
|
|
88
88
|
*/
|
89
89
|
bindMap(map, options) {
|
90
90
|
if (!(map instanceof Object)) {
|
91
|
-
throw new Error(
|
91
|
+
throw new Error("Shortcuts map shouldn't be empty");
|
92
92
|
}
|
93
93
|
for (const key in map) {
|
94
94
|
if (map.hasOwnProperty(key)) {
|
@@ -14,7 +14,7 @@ import 'combokeys';
|
|
14
14
|
import '../global/sniffer.js';
|
15
15
|
import 'sniffr';
|
16
16
|
|
17
|
-
var
|
17
|
+
var styles = {"slider":"slider_rui_35ea","disabled":"disabled_rui_35ea","marked":"marked_rui_35ea","rail":"rail_rui_35ea","rounded":"rounded_rui_35ea","track":"track_rui_35ea","thumb":"thumb_rui_35ea resetButton_rui_f295","dragged":"dragged_rui_35ea","tick":"tick_rui_35ea","active":"active_rui_35ea","markValue":"markValue_rui_35ea","tag":"tag_rui_35ea"};
|
18
18
|
|
19
19
|
const Slider = _ref => {
|
20
20
|
let {
|
@@ -169,9 +169,9 @@ const Slider = _ref => {
|
|
169
169
|
ref: ref,
|
170
170
|
role: "presentation" // contains interactive elements
|
171
171
|
,
|
172
|
-
className: classNames(
|
173
|
-
[
|
174
|
-
[
|
172
|
+
className: classNames(styles.slider, className, {
|
173
|
+
[styles.disabled]: disabled,
|
174
|
+
[styles.marked]: !!marks || showTag
|
175
175
|
}),
|
176
176
|
tabIndex: -1,
|
177
177
|
onMouseDown: handleMouseDown,
|
@@ -179,18 +179,18 @@ const Slider = _ref => {
|
|
179
179
|
map: shortcutsMap,
|
180
180
|
scope: shortcutsScope
|
181
181
|
}), /*#__PURE__*/jsx("div", {
|
182
|
-
className: classNames(
|
183
|
-
[
|
184
|
-
[
|
182
|
+
className: classNames(styles.rail, {
|
183
|
+
[styles.rounded]: !showTicks,
|
184
|
+
[styles.disabled]: disabled
|
185
185
|
})
|
186
186
|
}), /*#__PURE__*/jsx("div", {
|
187
187
|
style: {
|
188
188
|
left: "".concat(trackStart, "%"),
|
189
189
|
width: "".concat(trackLength, "%")
|
190
190
|
},
|
191
|
-
className: classNames(
|
192
|
-
[
|
193
|
-
[
|
191
|
+
className: classNames(styles.track, {
|
192
|
+
[styles.rounded]: !showTicks,
|
193
|
+
[styles.disabled]: disabled
|
194
194
|
})
|
195
195
|
}), validValues.map((numValue, index) => {
|
196
196
|
const percent = toPercent(numValue, min, max);
|
@@ -209,17 +209,17 @@ const Slider = _ref => {
|
|
209
209
|
style: {
|
210
210
|
left: "".concat(percent, "%")
|
211
211
|
},
|
212
|
-
className: classNames(
|
213
|
-
[
|
214
|
-
[
|
212
|
+
className: classNames(styles.thumb, {
|
213
|
+
[styles.disabled]: disabled,
|
214
|
+
[styles.dragged]: isDragging && draggedIndex === index
|
215
215
|
}),
|
216
216
|
onMouseDown: handleMouseDown
|
217
217
|
}), showTag && /*#__PURE__*/jsx("div", {
|
218
218
|
style: {
|
219
219
|
left: "".concat(percent, "%")
|
220
220
|
},
|
221
|
-
className: classNames(
|
222
|
-
[
|
221
|
+
className: classNames(styles.tag, {
|
222
|
+
[styles.disabled]: disabled
|
223
223
|
}),
|
224
224
|
role: "tooltip",
|
225
225
|
children: renderTag ? renderTag(numValue) : numValue
|
@@ -236,8 +236,8 @@ const Slider = _ref => {
|
|
236
236
|
style: {
|
237
237
|
left: "".concat(percent, "%")
|
238
238
|
},
|
239
|
-
className: classNames(
|
240
|
-
[
|
239
|
+
className: classNames(styles.markValue, {
|
240
|
+
[styles.disabled]: disabled
|
241
241
|
}),
|
242
242
|
children: label !== null && label !== void 0 ? label : markValue
|
243
243
|
}, index);
|
@@ -248,9 +248,9 @@ const Slider = _ref => {
|
|
248
248
|
const percent = toPercent(tickValue, min, max);
|
249
249
|
const isActive = isRange ? tickValue >= validValues[0] && tickValue <= validValues[validValues.length - 1] : tickValue <= validValues[0];
|
250
250
|
return /*#__PURE__*/jsx("div", {
|
251
|
-
className: classNames(
|
252
|
-
[
|
253
|
-
[
|
251
|
+
className: classNames(styles.tick, {
|
252
|
+
[styles.active]: isActive,
|
253
|
+
[styles.disabled]: disabled
|
254
254
|
}),
|
255
255
|
style: {
|
256
256
|
left: "".concat(percent, "%")
|
@@ -21,7 +21,6 @@ import '../global/memoize.js';
|
|
21
21
|
import 'react/jsx-runtime';
|
22
22
|
import '../loader-inline/loader-inline.js';
|
23
23
|
import '../global/data-tests.js';
|
24
|
-
import 'core-js/modules/es.array.reduce.js';
|
25
24
|
import '../global/dom.js';
|
26
25
|
import '../button/button.js';
|
27
26
|
import '@jetbrains/icons/chevron-down';
|
@@ -20,7 +20,6 @@ import '../global/memoize.js';
|
|
20
20
|
import 'react/jsx-runtime';
|
21
21
|
import '../loader-inline/loader-inline.js';
|
22
22
|
import '../global/data-tests.js';
|
23
|
-
import 'core-js/modules/es.array.reduce.js';
|
24
23
|
import '../global/dom.js';
|
25
24
|
import '../button/button.js';
|
26
25
|
import '@jetbrains/icons/chevron-down';
|