@jetbrains/ring-ui-built 7.0.0-beta.13 → 7.0.0-beta.14

package/components/radio/radio__item.js

@@ -6,7 +6,7 @@ import getUID from '../global/get-uid.js';
 import ControlHelp from '../control-help/control-help.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var modules_df92307a = {"light":"light_rui_2ac4","radio":"radio_rui_798a","circle":"circle_rui_798a","input":"input_rui_798a","focus":"focus_rui_798a","label":"label_rui_798a"};
+var styles = {"radio":"radio_rui_798a","circle":"circle_rui_798a","input":"input_rui_798a","focus":"focus_rui_798a","label":"label_rui_798a"};
 
 const _excluded = ["className", "children", "help"],
   _excluded2 = ["value", "onChange"];
@@ -32,7 +32,7 @@ class RadioItemInner extends Component {
         help
       } = _this$props,
       restProps = _objectWithoutProperties(_this$props, _excluded);
-    const classes = classNames(modules_df92307a.radio, className);
+    const classes = classNames(styles.radio, className);
     return /*#__PURE__*/jsxs("label", {
       ref: this.labelRef,
       className: classes,
@@ -41,12 +41,12 @@ class RadioItemInner extends Component {
         id: this.uid
       }, restProps), {}, {
         ref: this.inputRef,
-        className: modules_df92307a.input,
+        className: styles.input,
         type: "radio"
       })), /*#__PURE__*/jsx("span", {
-        className: modules_df92307a.circle
+        className: styles.circle
       }), /*#__PURE__*/jsxs("span", {
-        className: modules_df92307a.label,
+        className: styles.label,
         children: [children, help && /*#__PURE__*/jsx(ControlHelp, {
           children: help
         })]

package/components/scrollable-section/scrollable-section.js

@@ -4,7 +4,7 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import classNames from 'classnames';
 import { jsx } from 'react/jsx-runtime';
 
-var modules_8c094df0 = {"scrollableSection":"scrollableSection_rui_29c1","withTopBorder":"withTopBorder_rui_29c1","withRightBorder":"withRightBorder_rui_29c1","withBottomBorder":"withBottomBorder_rui_29c1","withLeftBorder":"withLeftBorder_rui_29c1"};
+var styles = {"scrollableSection":"scrollableSection_rui_29c1","withTopBorder":"withTopBorder_rui_29c1","withRightBorder":"withRightBorder_rui_29c1","withBottomBorder":"withBottomBorder_rui_29c1","withLeftBorder":"withLeftBorder_rui_29c1"};
 
 const _excluded = ["className"];
 function ScrollableSection(_ref) {
@@ -39,11 +39,11 @@ function ScrollableSection(_ref) {
     return () => window.removeEventListener('resize', calculateScrollPosition);
   }, [calculateScrollPosition]);
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({}, restProps), {}, {
-    className: classNames(modules_8c094df0.scrollableSection, className, {
-      [modules_8c094df0.withTopBorder]: !scrolledToTop,
-      [modules_8c094df0.withRightBorder]: !scrolledToRight,
-      [modules_8c094df0.withBottomBorder]: !scrolledToBottom,
-      [modules_8c094df0.withLeftBorder]: !scrolledToLeft
+    className: classNames(styles.scrollableSection, className, {
+      [styles.withTopBorder]: !scrolledToTop,
+      [styles.withRightBorder]: !scrolledToRight,
+      [styles.withBottomBorder]: !scrolledToBottom,
+      [styles.withLeftBorder]: !scrolledToLeft
     }),
     ref: ref,
     onScroll: calculateScrollPosition

package/components/select/select.d.ts

@@ -49,7 +49,7 @@ export interface CustomAnchorProps {
     } & DataTestProps;
     popup: ReactNode;
 }
-export type CustomAnchor = ((props: CustomAnchorProps) => ReactNode);
+export type CustomAnchor = (props: CustomAnchorProps) => ReactNode;
 export interface BaseSelectProps<T = unknown> {
     data: readonly SelectItem<T>[];
     filter: boolean | Filter<T>;

package/components/select/select.js

@@ -13,7 +13,7 @@ import '../dropdown/dropdown.js';
 import Avatar, { Size as Size$1 } from '../avatar/avatar.js';
 import Popup from '../popup/popup.js';
 import List, { ActiveItemContext } from '../list/list.js';
-import { S as Size, I as Input, m as modules_88cfaf40 } from '../_helpers/input.js';
+import { S as Size, I as Input, i as inputStyles } from '../_helpers/input.js';
 import { ControlLabel } from '../control-label/control-label.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
 import { Button } from '../button/button.js';
@@ -82,7 +82,7 @@ import '../caret/caret.js';
 import '../text/text.js';
 import '../_helpers/select__filter.js';
 
-var modules_9d0de074 = {"button-shadow":"i__const_button_shadow_0","select":"select_rui_e9c2","value":"value_rui_e9c2 ellipsis_rui_f295 font_rui_f295","icons":"icons_rui_e9c2","light":"light_rui_2ac4","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"};
+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"};
 
 function noop() {}
 /**
@@ -422,6 +422,7 @@ class Select extends Component {
     _defineProperty(this, "_redrawPopup", () => {
       if (this.props.multiple) {
         setTimeout(() => {
+          //setTimeout solves events order and bubbling issue
           if (this.isInputMode()) {
             this.clearFilter();
           }
@@ -696,7 +697,7 @@ class Select extends Component {
       rgItemType: List.ListProps.Type.CUSTOM,
       template: /*#__PURE__*/jsx(Button, {
         text: true,
-        className: modules_9d0de074.button,
+        className: styles.button,
         "data-test": "ring-select-reset-tags-button",
         height: ControlsHeight.S,
         children: reset.label
@@ -801,13 +802,13 @@ class Select extends Component {
     }
     return /*#__PURE__*/jsxs("div", {
       className: classNames({
-        [modules_9d0de074.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
+        [styles.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
       }),
       "data-test": "ring-select-toolbar",
       children: [renderBottomToolbar && renderBottomToolbar(), this.state.addButton && /*#__PURE__*/jsx(Button, {
         text: true,
         delayed: delayed,
-        className: classNames(modules_9d0de074.button, modules_9d0de074.buttonSpaced),
+        className: classNames(styles.button, styles.buttonSpaced),
         onClick: this.addHandler,
         "data-test": "ring-select-toolbar-button",
         children: prefix ? "".concat(prefix, " ").concat(label) : label
@@ -894,7 +895,7 @@ class Select extends Component {
       icons.push(/*#__PURE__*/jsx("button", {
         title: "Toggle options popup",
         type: "button",
-        className: modules_9d0de074.selectedIcon,
+        className: styles.selectedIcon,
         disabled: this.props.disabled,
         onClick: this._clickHandler,
         style: {
@@ -906,7 +907,7 @@ class Select extends Component {
       icons.push(/*#__PURE__*/jsx(Button, {
         title: "Clear selection",
         "data-test": "ring-clear-select",
-        className: modules_9d0de074.clearIcon,
+        className: styles.clearIcon,
         disabled: this.props.disabled,
         onClick: this.clear,
         height: height,
@@ -916,8 +917,8 @@ class Select extends Component {
     if (!hideArrow) {
       icons.push(/*#__PURE__*/jsx(Button, {
         title: "Toggle options popup",
-        className: modules_9d0de074.chevron,
-        iconClassName: modules_9d0de074.chevronIcon,
+        className: styles.chevron,
+        iconClassName: styles.chevronIcon,
         icon: chevronDownIcon,
         disabled: this.props.disabled,
         height: height,
@@ -929,7 +930,7 @@ class Select extends Component {
   _getAvatar() {
     var _this$state$selected, _this$state$selected2;
     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, {
-      className: modules_9d0de074.avatar,
+      className: styles.avatar,
       url: this.state.selected.avatar,
       username: this.state.selected.username,
       size: Size$1.Size20
@@ -957,9 +958,9 @@ class Select extends Component {
     const {
       shortcutsEnabled
     } = this.state;
-    const classes = classNames(modules_9d0de074.select, 'ring-js-shortcuts', this.props.className, modules_9d0de074["height".concat(this.props.height || this.context)], {
-      [modules_9d0de074["size".concat(this.props.size)]]: this.props.type !== Type.INLINE,
-      [modules_9d0de074.disabled]: this.props.disabled
+    const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, styles["height".concat(this.props.height || this.context)], {
+      [styles["size".concat(this.props.size)]]: this.props.type !== Type.INLINE,
+      [styles.disabled]: this.props.disabled
     });
     let style;
     let iconsNode;
@@ -967,7 +968,7 @@ class Select extends Component {
       const icons = this._getIcons();
       style = getStyle(icons.length);
       iconsNode = /*#__PURE__*/jsx("div", {
-        className: modules_9d0de074.icons,
+        className: styles.icons,
         children: icons
       });
     }
@@ -984,7 +985,7 @@ class Select extends Component {
         return /*#__PURE__*/jsxs(Fragment$1, {
           children: [/*#__PURE__*/jsxs("div", {
             ref: this.nodeRef,
-            className: classNames(classes, modules_9d0de074.inputMode),
+            className: classNames(classes, styles.inputMode),
             "data-test": joinDataTestAttributes('ring-select', dataTest),
             role: "presentation" // has interactive elements inside
             ,
@@ -1019,14 +1020,14 @@ class Select extends Component {
               afterInput: iconsNode
             })), this._renderPopup()]
           }), this.props.error && /*#__PURE__*/jsx("div", {
-            className: classNames(modules_88cfaf40.errorText, modules_88cfaf40["size".concat(this.props.size)]),
+            className: classNames(inputStyles.errorText, inputStyles["size".concat(this.props.size)]),
             children: this.props.error
           })]
         });
       case Type.BUTTON:
         return /*#__PURE__*/jsxs("div", {
           ref: this.nodeRef,
-          className: classNames(classes, modules_9d0de074.buttonMode),
+          className: classNames(classes, styles.buttonMode),
           "data-test": joinDataTestAttributes('ring-select', dataTest),
           children: [selectedLabel && /*#__PURE__*/jsx(ControlLabel, {
             type: this.props.labelType,
@@ -1037,14 +1038,14 @@ class Select extends Component {
             map: this.getShortcutsMap(),
             scope: this.shortcutsScope
           }), /*#__PURE__*/jsxs("div", {
-            className: modules_9d0de074.buttonContainer,
+            className: styles.buttonContainer,
             children: [/*#__PURE__*/jsxs(Button, _objectSpread2(_objectSpread2({}, ariaProps), {}, {
               height: this.props.height,
               id: this.props.id,
               onClick: this._clickHandler,
-              className: classNames(this.props.buttonClassName, modules_9d0de074.buttonValue, {
-                [modules_9d0de074.buttonValueOpen]: this.state.showPopup,
-                [modules_9d0de074.buttonValueEmpty]: this._selectionIsEmpty()
+              className: classNames(this.props.buttonClassName, styles.buttonValue, {
+                [styles.buttonValueOpen]: this.state.showPopup,
+                [styles.buttonValueEmpty]: this._selectionIsEmpty()
               }),
               disabled: this.props.disabled,
               style: style,

package/components/select/select__popup.js

@@ -23,7 +23,7 @@ import Text from '../text/text.js';
 import { ControlsHeight } from '../global/controls-height.js';
 import { createComposedRef } from '../global/composeRefs.js';
 import { DEFAULT_DIRECTIONS } from '../popup/popup.consts.js';
-import { m as modules_b607bec2, S as SelectFilter } from '../_helpers/select__filter.js';
+import { s as styles, S as SelectFilter } from '../_helpers/select__filter.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
@@ -149,7 +149,7 @@ class SelectPopup extends PureComponent {
       const multiple = this.props.multiple;
       const activeFilters = this.props.data.filter(item => !item.disabled);
       return Array.isArray(this.props.selected) && /*#__PURE__*/jsxs("div", {
-        className: modules_b607bec2.selectAll,
+        className: styles.selectAll,
         children: [activeFilters.length === 0 ? /*#__PURE__*/jsx("span", {}) : /*#__PURE__*/jsx(Button, {
           text: true,
           inline: true,
@@ -298,11 +298,11 @@ class SelectPopup extends PureComponent {
     if (this.props.filter || this.props.tags) {
       var _this$props$filterIco;
       return /*#__PURE__*/jsxs("div", {
-        className: modules_b607bec2.filterWrapper,
+        className: styles.filterWrapper,
         "data-test": "ring-select-popup-filter",
         children: [!this.props.tags && /*#__PURE__*/jsx(Icon, {
           glyph: (_this$props$filterIco = this.props.filterIcon) !== null && _this$props$filterIco !== void 0 ? _this$props$filterIco : searchIcon,
-          className: modules_b607bec2.filterIcon,
+          className: styles.filterIcon,
           "data-test-custom": "ring-select-popup-filter-icon"
         }), /*#__PURE__*/jsx(FilterWithShortcuts, {
           rgShortcutsOptions: this.state.popupFilterShortcutsOptions,
@@ -313,7 +313,7 @@ class SelectPopup extends PureComponent {
           onFocus: this.onFilterFocus,
           className: "ring-js-shortcuts",
           inputClassName: classNames({
-            [modules_b607bec2.filterWithTagsInput]: this.props.tags
+            [styles.filterWithTagsInput]: this.props.tags
           }),
           placeholder: typeof this.props.filter === 'object' ? this.props.filter.placeholder : undefined,
           height: this.props.tags ? ControlsHeight.S : ControlsHeight.L,
@@ -348,8 +348,8 @@ class SelectPopup extends PureComponent {
   }
   getFilterWithTags() {
     if (this.props.tags) {
-      const classes = classNames([modules_b607bec2.filterWithTags, {
-        [modules_b607bec2.filterWithTagsFocused]: !this.state.popupFilterShortcutsOptions.disabled
+      const classes = classNames([styles.filterWithTags, {
+        [styles.filterWithTagsFocused]: !this.state.popupFilterShortcutsOptions.disabled
       }]);
       return /*#__PURE__*/jsxs("div", {
         className: classes,
@@ -366,11 +366,11 @@ class SelectPopup extends PureComponent {
     } = this.props;
     const hasMoreThanOneItem = data.length > 1;
     return (loading || message) && /*#__PURE__*/jsxs("div", {
-      className: classNames(modules_b607bec2.bottomLine, {
-        [modules_b607bec2.bottomLineOverItem]: hasMoreThanOneItem
+      className: classNames(styles.bottomLine, {
+        [styles.bottomLineOverItem]: hasMoreThanOneItem
       }),
       children: [loading && /*#__PURE__*/jsx(LoaderInline, {}), message && /*#__PURE__*/jsx("div", {
-        className: modules_b607bec2.message,
+        className: styles.message,
         children: message
       })]
     });
@@ -432,7 +432,7 @@ class SelectPopup extends PureComponent {
       dir,
       filter
     } = this.props;
-    const classes = classNames(modules_b607bec2.popup, className);
+    const classes = classNames(styles.popup, className);
     return /*#__PURE__*/jsx(PopupTargetContext.Consumer, {
       children: ringPopupTarget => {
         const filterWithTags = this.getFilterWithTags();

package/components/shortcuts/core.js

@@ -88,7 +88,7 @@ class Shortcuts {
    */
   bindMap(map, options) {
     if (!(map instanceof Object)) {
-      throw new Error('Shortcuts map shouldn\'t be empty');
+      throw new Error("Shortcuts map shouldn't be empty");
     }
     for (const key in map) {
       if (map.hasOwnProperty(key)) {

package/components/slider/slider.js

@@ -14,7 +14,7 @@ import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 
-var modules_b653e84a = {"dark":"dark_rui_f090","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"};
+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"};
 
 const Slider = _ref => {
   let {
@@ -169,9 +169,9 @@ const Slider = _ref => {
     ref: ref,
     role: "presentation" // contains interactive elements
     ,
-    className: classNames(modules_b653e84a.slider, className, {
-      [modules_b653e84a.disabled]: disabled,
-      [modules_b653e84a.marked]: !!marks || showTag
+    className: classNames(styles.slider, className, {
+      [styles.disabled]: disabled,
+      [styles.marked]: !!marks || showTag
     }),
     tabIndex: -1,
     onMouseDown: handleMouseDown,
@@ -179,18 +179,18 @@ const Slider = _ref => {
       map: shortcutsMap,
       scope: shortcutsScope
     }), /*#__PURE__*/jsx("div", {
-      className: classNames(modules_b653e84a.rail, {
-        [modules_b653e84a.rounded]: !showTicks,
-        [modules_b653e84a.disabled]: disabled
+      className: classNames(styles.rail, {
+        [styles.rounded]: !showTicks,
+        [styles.disabled]: disabled
       })
     }), /*#__PURE__*/jsx("div", {
       style: {
         left: "".concat(trackStart, "%"),
         width: "".concat(trackLength, "%")
       },
-      className: classNames(modules_b653e84a.track, {
-        [modules_b653e84a.rounded]: !showTicks,
-        [modules_b653e84a.disabled]: disabled
+      className: classNames(styles.track, {
+        [styles.rounded]: !showTicks,
+        [styles.disabled]: disabled
       })
     }), validValues.map((numValue, index) => {
       const percent = toPercent(numValue, min, max);
@@ -209,17 +209,17 @@ const Slider = _ref => {
             style: {
               left: "".concat(percent, "%")
             },
-            className: classNames(modules_b653e84a.thumb, {
-              [modules_b653e84a.disabled]: disabled,
-              [modules_b653e84a.dragged]: isDragging && draggedIndex === index
+            className: classNames(styles.thumb, {
+              [styles.disabled]: disabled,
+              [styles.dragged]: isDragging && draggedIndex === index
             }),
             onMouseDown: handleMouseDown
           }), showTag && /*#__PURE__*/jsx("div", {
             style: {
               left: "".concat(percent, "%")
             },
-            className: classNames(modules_b653e84a.tag, {
-              [modules_b653e84a.disabled]: disabled
+            className: classNames(styles.tag, {
+              [styles.disabled]: disabled
             }),
             role: "tooltip",
             children: renderTag ? renderTag(numValue) : numValue
@@ -236,8 +236,8 @@ const Slider = _ref => {
         style: {
           left: "".concat(percent, "%")
         },
-        className: classNames(modules_b653e84a.markValue, {
-          [modules_b653e84a.disabled]: disabled
+        className: classNames(styles.markValue, {
+          [styles.disabled]: disabled
         }),
         children: label !== null && label !== void 0 ? label : markValue
       }, index);
@@ -248,9 +248,9 @@ const Slider = _ref => {
       const percent = toPercent(tickValue, min, max);
       const isActive = isRange ? tickValue >= validValues[0] && tickValue <= validValues[validValues.length - 1] : tickValue <= validValues[0];
       return /*#__PURE__*/jsx("div", {
-        className: classNames(modules_b653e84a.tick, {
-          [modules_b653e84a.active]: isActive,
-          [modules_b653e84a.disabled]: disabled
+        className: classNames(styles.tick, {
+          [styles.active]: isActive,
+          [styles.disabled]: disabled
         }),
         style: {
           left: "".concat(percent, "%")