@jetbrains/ring-ui 5.0.36 → 5.0.38

package/components/editable-heading/editable-heading.d.ts

@@ -15,7 +15,9 @@ export interface EditableHeadingProps {
     onChange?: (text: string) => void;
     onSave?: () => void;
     onCancel?: () => void;
+    autoFocus?: boolean;
+    'data-test'?: string | null;
 }
-export declare const EditableHeading: ({ level, className, editing, edited, children, placeholder, embedded, size, onEdit, onChange, onSave, onCancel }: EditableHeadingProps) => JSX.Element;
-declare const _default: React.MemoExoticComponent<({ level, className, editing, edited, children, placeholder, embedded, size, onEdit, onChange, onSave, onCancel }: EditableHeadingProps) => JSX.Element>;
+export declare const EditableHeading: ({ level, className, editing, edited, children, placeholder, embedded, size, onEdit, onChange, onSave, onCancel, autoFocus, "data-test": dataTest }: EditableHeadingProps) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ level, className, editing, edited, children, placeholder, embedded, size, onEdit, onChange, onSave, onCancel, autoFocus, "data-test": dataTest }: EditableHeadingProps) => JSX.Element>;
 export default _default;

package/components/editable-heading/editable-heading.js

@@ -11,7 +11,7 @@ import styles from './editable-heading.css';
 export { Levels };
 function noop() { }
 const shortcutsScope = getUID('ring-editable-heading-');
-export const EditableHeading = ({ level = Levels.H1, className, editing, edited, children, placeholder, embedded = false, size = Size.L, onEdit, onChange, onSave = noop, onCancel = noop }) => {
+export const EditableHeading = ({ level = Levels.H1, className, editing, edited, children, placeholder, embedded = false, size = Size.L, onEdit, onChange, onSave = noop, onCancel = noop, autoFocus, 'data-test': dataTest }) => {
     const onInputChange = (e) => {
         onChange?.(e.target.value);
     };
@@ -20,9 +20,9 @@ export const EditableHeading = ({ level = Levels.H1, className, editing, edited,
             ? (<>
             {!embedded && (<Shortcuts map={{ enter: onSave, esc: onCancel }} scope={shortcutsScope}/>)}
 
-            <input className={classNames('ring-js-shortcuts', styles.input, [inputStyles[`size${size}`], [[styles[`level${level}`]]]])} value={children} onChange={onInputChange} placeholder={placeholder} autoFocus/>
+            <input className={classNames('ring-js-shortcuts', styles.input, [inputStyles[`size${size}`], [[styles[`level${level}`]]]])} value={children} onChange={onInputChange} placeholder={placeholder} autoFocus={autoFocus} data-test={dataTest}/>
           </>)
-            : (<Heading className={classNames(styles.heading, [inputStyles[`size${size}`]])} level={level} onClick={onEdit}>{children}</Heading>)}
+            : (<Heading className={classNames(styles.heading, [inputStyles[`size${size}`]])} level={level} onClick={onEdit} data-test={dataTest}>{children}</Heading>)}
 
       {editing && !embedded && (<>
           <Button height={ControlsHeight.M} className={styles.button} primary disabled={!edited || !children || children?.trim() === ''} onClick={onSave}>{'Save'}</Button>

package/components/input/input.css

@@ -109,6 +109,8 @@
   top: calc(var(--ring-input-padding-block) + 1px);
   left: var(--ring-input-padding-inline);
 
+  pointer-events: none;
+
   color: var(--ring-icon-secondary-color);
 
   @nest [dir=rtl] & {

package/components/query-assist/query-assist.js

@@ -431,7 +431,7 @@ export default class QueryAssist extends Component {
         if (!this.props.disabled && (caret !== this.immediateState.caret || popupHidden)) {
             this.immediateState.caret = caret;
             this.scrollInput();
-            if (this.props.autoOpen === 'force' || this.immediateState.query.length > 0) {
+            if (this.immediateState.query.length > 0) {
                 this.requestData?.();
             }
         }

package/dist/_helpers/_rollupPluginBabelHelpers.js

@@ -9,22 +9,18 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }
-
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);

package/dist/_helpers/anchor.js

@@ -23,7 +23,6 @@ const Anchor = _ref => {
     className: modules_d9414203.chevron
   }));
 };
-
 Anchor.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string

package/dist/_helpers/card.js

@@ -41,9 +41,7 @@ class UserCard extends PureComponent {
       title: user.online ? wording.online : wording.offline
     }), user.login), user.email && /*#__PURE__*/React.createElement("div", null, user.email))), children);
   }
-
 }
-
 _defineProperty(UserCard, "propTypes", {
   children: PropTypes.node,
   className: PropTypes.string,
@@ -63,7 +61,6 @@ _defineProperty(UserCard, "propTypes", {
     offline: PropTypes.string.isRequired
   })
 });
-
 _defineProperty(UserCard, "defaultProps", {
   wording: {
     banned: 'banned',

package/dist/_helpers/dialog__body-scroll-preventer.js

@@ -4,47 +4,36 @@ var modules_5e9b8c03 = {"unit":"8px","header":"header_rui_1d72","container":"con
 
 const isPrevented = new Set();
 let previousDocumentWidth = null;
-
 const prevent = key => {
   if (isPrevented.has(key)) {
     return;
   }
-
   isPrevented.add(key);
-
   if (isPrevented.size > 1) {
     return;
   }
-
   const documentHasScroll = document.documentElement.scrollHeight > window.innerHeight || getComputedStyle(document.documentElement).overflowY === 'scroll';
   document.documentElement.classList.add(modules_5e9b8c03.documentWithoutScroll);
   const scrollWidth = scrollbarWidth();
-
   if (documentHasScroll && scrollWidth != null && scrollWidth > 0) {
     previousDocumentWidth = document.documentElement.style.width;
     document.documentElement.style.width = `calc(100% - ${scrollWidth}px)`;
   }
 };
-
 const reset = key => {
   if (isPrevented.size === 0) {
     return;
   }
-
   isPrevented.delete(key);
-
   if (isPrevented.size > 0) {
     return;
   }
-
   document.documentElement.classList.remove(modules_5e9b8c03.documentWithoutScroll);
-
   if (previousDocumentWidth !== null) {
     document.documentElement.style.width = previousDocumentWidth;
     previousDocumentWidth = null;
   }
 };
-
 const preventerFactory = key => {
   const preventerKey = key || Math.random();
   return {

package/dist/_helpers/footer.js

@@ -30,35 +30,28 @@ FooterColumn.propTypes = {
  * @param year {int}
  * @returns {string}
  */
-
 function copyright(year) {
   const currentYear = new Date().getUTCFullYear();
   const ndash = '–';
   let ret = 'Copyright © ';
-
   if (year >= currentYear) {
     ret += year;
   } else {
     ret += year + ndash + currentYear;
   }
-
   return ret;
 }
 /**
  * @constructor
  * @extends {ReactComponent}
  */
-
 const FooterLine = /*#__PURE__*/memo(function FooterLine(props) {
   const items = Array.isArray(props.item) ? props.item : [props.item];
-
   function renderItem(item) {
     if ( /*#__PURE__*/isValidElement(item) || typeof item !== 'object') {
       return item;
     }
-
     const element = (item.copyright ? copyright(item.copyright) : '') + (item.label || item);
-
     if (item.url) {
       return /*#__PURE__*/React.createElement(Link, {
         href: item.url,
@@ -67,10 +60,8 @@ const FooterLine = /*#__PURE__*/memo(function FooterLine(props) {
         title: item.title
       }, element);
     }
-
     return element;
   }
-
   return /*#__PURE__*/React.createElement("li", {
     className: modules_7385b3fd.line
   }, items.map(renderItem));
@@ -86,22 +77,20 @@ const Footer = /*#__PURE__*/memo(function Footer(_ref2) {
     center,
     right
   } = _ref2;
-
   function content(elements, position) {
     if (!elements) {
       return false;
     }
-
     return /*#__PURE__*/React.createElement(FooterColumn, {
       key: position,
       position: position
-    }, elements.map((item, idx) => /*#__PURE__*/React.createElement(FooterLine // eslint-disable-next-line react/no-array-index-key
+    }, elements.map((item, idx) => /*#__PURE__*/React.createElement(FooterLine
+    // eslint-disable-next-line react/no-array-index-key
     , {
       key: idx,
       item: item
     })));
   }
-
   const classes = classNames(modules_7385b3fd.footer, className, {
     [modules_7385b3fd.footerFloating]: floating
   });

package/dist/_helpers/query-assist__suggestions.js

@@ -20,7 +20,6 @@ class QueryAssistSuggestions {
     } = suggestion;
     return prefix + option + suffix + group + description + (icon ? icon.substring(icon.length - ICON_ID_LENGTH) : '');
   }
-
   static renderLabel(suggestion) {
     const {
       className,
@@ -33,7 +32,6 @@ class QueryAssistSuggestions {
     let wrappedOption;
     let before = '';
     let after = '';
-
     if (matchingStart !== matchingEnd) {
       before = option.substring(0, matchingStart);
       wrappedOption = /*#__PURE__*/React.createElement("span", {
@@ -43,7 +41,6 @@ class QueryAssistSuggestions {
     } else {
       wrappedOption = option;
     }
-
     const wrappedPrefix = prefix && /*#__PURE__*/React.createElement("span", {
       className: modules_da7ab055.service
     }, prefix);
@@ -54,7 +51,6 @@ class QueryAssistSuggestions {
       className: className
     }, wrappedPrefix, before, wrappedOption, after, wrappedSuffix);
   }
-
   static renderGroupSeparator(suggestion, prevSuggestion) {
     const {
       group,
@@ -63,7 +59,6 @@ class QueryAssistSuggestions {
     const {
       SEPARATOR
     } = List.ListProps.Type;
-
     if (prevSuggestion !== group) {
       return {
         key: option + group + SEPARATOR,
@@ -71,25 +66,20 @@ class QueryAssistSuggestions {
         rgItemType: SEPARATOR
       };
     }
-
     return null;
   }
-
   static renderList(suggestions, suggestionRenderer) {
     const renderedSuggestions = [];
     suggestions.forEach((suggestion, index, arr) => {
       const prevSuggestionGroup = arr[index - 1] && arr[index - 1].group;
       const groupSeparator = QueryAssistSuggestions.renderGroupSeparator(suggestion, prevSuggestionGroup);
-
       if (groupSeparator) {
         renderedSuggestions.push(groupSeparator);
       }
-
       renderedSuggestions.push(suggestionRenderer(suggestion));
     });
     return renderedSuggestions;
   }
-
 }
 
 export { QueryAssistSuggestions as Q, modules_da7ab055 as m };

package/dist/_helpers/select__filter.js

@@ -10,39 +10,31 @@ import { ControlsHeight } from '../global/controls-height.js';
 var modules_b607bec2 = {"unit":"8px","filterWithTags":"filterWithTags_rui_531d","filterWrapper":"filterWrapper_rui_531d","filterWithTagsFocused":"filterWithTagsFocused_rui_531d","filter":"filter_rui_531d","filterIcon":"filterIcon_rui_531d","bottomLine":"bottomLine_rui_531d","message":"message_rui_531d","selectAll":"selectAll_rui_531d"};
 
 function noop() {}
-
 class SelectFilter extends Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "input", void 0);
-
     _defineProperty(this, "inputRef", el => {
       this.input = el;
       this.props.inputRef(el);
     });
   }
-
   componentWillUnmount() {
     this.blur();
   }
-
   focus() {
     const {
       input
     } = this;
-
     if (input && input !== document.activeElement) {
       sniffr.browser.name === 'firefox' ? input.select() : input.focus();
     }
   }
-
   blur() {
     if (this.input && this.input === document.activeElement) {
       this.input.blur();
     }
   }
-
   render() {
     const {
       className,
@@ -61,14 +53,11 @@ class SelectFilter extends Component {
       className: classes
     })));
   }
-
 }
-
 _defineProperty(SelectFilter, "defaultProps", {
   placeholder: 'Filter items',
   inputRef: noop
 });
-
 SelectFilter.propTypes = {
   placeholder: PropTypes.string,
   className: PropTypes.string,

package/dist/_helpers/services-link.js

@@ -24,9 +24,7 @@ class ServicesLink extends PureComponent {
       key: "text"
     }, /*#__PURE__*/React.createElement(WrapText, null, service.name))] : /*#__PURE__*/React.createElement(WrapText, null, service.name));
   }
-
 }
-
 _defineProperty(ServicesLink, "propTypes", {
   isActive: PropTypes.bool,
   service: PropTypes.shape({

package/dist/_helpers/sidebar.js

@@ -11,15 +11,12 @@ const INSIDE = 'inside';
 class Sidebar extends Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "state", {
       topIsOutside: true,
       bottomIsOutside: true,
       sidebarVisibleHeight: undefined
     });
-
     _defineProperty(this, "sidebarNode", void 0);
-
     _defineProperty(this, "handleTopWaypoint", _ref => {
       let {
         currentPosition
@@ -28,7 +25,6 @@ class Sidebar extends Component {
         topIsOutside: currentPosition === ABOVE
       });
     });
-
     _defineProperty(this, "handleBottomWaypoint", _ref2 => {
       let {
         currentPosition,
@@ -39,12 +35,10 @@ class Sidebar extends Component {
         bottomIsOutside: currentPosition !== INSIDE
       });
     });
-
     _defineProperty(this, "sidebarRef", node => {
       this.sidebarNode = node;
     });
   }
-
   shouldUseFixation() {
     const {
       contentNode
@@ -52,14 +46,11 @@ class Sidebar extends Component {
     const {
       sidebarNode
     } = this;
-
     if (!contentNode || !sidebarNode) {
       return false;
     }
-
     return contentNode.offsetHeight >= sidebarNode.offsetHeight;
   }
-
   shouldFixateBottom() {
     const {
       topIsOutside,
@@ -67,7 +58,6 @@ class Sidebar extends Component {
     } = this.state;
     return !bottomIsOutside && topIsOutside && this.shouldUseFixation();
   }
-
   render() {
     const {
       right,
@@ -113,9 +103,7 @@ class Sidebar extends Component {
       onLeave: this.handleBottomWaypoint
     })));
   }
-
 }
-
 _defineProperty(Sidebar, "propTypes", {
   right: PropTypes.bool,
   children: PropTypes.node,

package/dist/_helpers/theme.js

@@ -9,19 +9,16 @@ import getUID from '../global/get-uid.js';
 var modules_59717246 = {"dark":"dark_rui_eb55"};
 
 var Theme;
-
 (function (Theme) {
   Theme["AUTO"] = "auto";
   Theme["LIGHT"] = "light";
   Theme["DARK"] = "dark";
 })(Theme || (Theme = {}));
-
 const darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
 function useTheme() {
   const [dark, setDark] = useState(darkMatcher.matches);
   useEffect(() => {
     const onChange = e => setDark(e.matches);
-
     darkMatcher.addEventListener('change', onChange);
     return () => darkMatcher.removeEventListener('change', onChange);
   }, []);

package/dist/_helpers/title.js

@@ -12,30 +12,24 @@ var modules_09d014b4 = {"unit":"8px","height":"32px","compensate":"2px","dataLis
 class Title extends PureComponent {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "id", getUID('data-list-title'));
-
     _defineProperty(this, "onCheckboxFocus", () => {
       this.props.onFocusRestore();
     });
-
     _defineProperty(this, "onCheckboxChange", () => {
       this.toggleSelection();
     });
   }
-
   toggleSelection() {
     const {
       selectable,
       selected,
       onSelect
     } = this.props;
-
     if (selectable) {
       onSelect(!selected);
     }
   }
-
   render() {
     const {
       className,
@@ -72,15 +66,12 @@ class Title extends PureComponent {
       tabIndex: -1
     })), collapserExpander), title);
   }
-
 }
-
 _defineProperty(Title, "defaultProps", {
   selectable: false,
   selected: false,
   showFocus: false
 });
-
 Title.propTypes = {
   className: PropTypes.string,
   title: PropTypes.node,

package/dist/alert/alert.js

@@ -44,14 +44,11 @@ const ANIMATION_TIME = 500;
 /**
  * @name Alert
  */
-
 /**
  * List of available alert types.
  * @enum {string}
  */
-
 var AlertType;
-
 (function (AlertType) {
   AlertType["ERROR"] = "error";
   AlertType["MESSAGE"] = "message";
@@ -63,8 +60,6 @@ var AlertType;
  * Lookup table of alert type to icon modifier.
  * @type {Object.<AlertType, string>}
  */
-
-
 const TypeToIcon = {
   [AlertType.ERROR]: exceptionIcon,
   [AlertType.SUCCESS]: checkmarkIcon,
@@ -74,7 +69,6 @@ const TypeToIcon = {
  * Lookup table of alert type to icon color.
  * @type {Object.<AlertType, Icon.Color>}
  */
-
 const TypeToIconColor = {
   [AlertType.ERROR]: Color.RED,
   [AlertType.SUCCESS]: Color.GREEN,
@@ -85,62 +79,49 @@ const TypeToIconColor = {
  * @name Alert
  * @extends {ReactComponent}
  */
-
 /**
  * **Alert** is a component for displaying contextual notifications. If you want to display a stack of notifications, use **Alerts** instead.
  */
-
 class Alert extends PureComponent {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "state", {
       height: null
     });
-
     _defineProperty(this, "node", void 0);
-
     _defineProperty(this, "hideTimeout", void 0);
-
     _defineProperty(this, "closeRequest", event => {
       this.startCloseAnimation();
       return this.props.onCloseRequest(event);
     });
-
     _defineProperty(this, "startCloseAnimation", () => {
       const height = getRect(this.node).height;
       this.setState({
         height
       });
     });
-
     _defineProperty(this, "_handleCaptionsLinksClick", evt => {
       if (evt.target instanceof Element && evt.target.matches('a')) {
         this.closeRequest(evt);
       }
     });
-
     _defineProperty(this, "storeAlertRef", node => {
       this.node = node;
     });
   }
-
   componentDidMount() {
     if (this.props.timeout > 0) {
       this.hideTimeout = window.setTimeout(this.closeRequest, this.props.timeout);
     }
   }
-
   componentDidUpdate() {
     if (this.props.isClosing) {
       this._close();
     }
   }
-
   componentWillUnmount() {
     clearTimeout(this.hideTimeout);
   }
-
   _close() {
     this.startCloseAnimation();
     setTimeout(() => {
@@ -152,7 +133,6 @@ class Alert extends PureComponent {
    * @private
    */
 
-
   /**
    * @private
    */
@@ -161,7 +141,8 @@ class Alert extends PureComponent {
       className: classNames(modules_e02b3280.caption, this.props.captionClassName, {
         [modules_e02b3280.withCloseButton]: this.props.closeable
       }),
-      onClick: this._handleCaptionsLinksClick // We only process clicks on `a` elements, see above
+      onClick: this._handleCaptionsLinksClick
+      // We only process clicks on `a` elements, see above
       ,
       role: "presentation"
     }, this.props.children);
@@ -170,11 +151,8 @@ class Alert extends PureComponent {
    * @private
    * @return {XML|string}
    */
-
-
   _getIcon() {
     const glyph = TypeToIcon[this.props.type];
-
     if (glyph) {
       return /*#__PURE__*/React.createElement(Icon, {
         glyph: glyph,
@@ -186,10 +164,8 @@ class Alert extends PureComponent {
         className: modules_e02b3280.loader
       });
     }
-
     return '';
   }
-
   render() {
     const {
       type,
@@ -229,12 +205,9 @@ class Alert extends PureComponent {
       onClick: this.closeRequest
     }) : '');
   }
-
 }
-
 _defineProperty(Alert, "propTypes", {
   timeout: PropTypes.number,
-
   /**
    * Fires when alert starts closing if timeout is out or user clicks "Close" button
    */
@@ -242,7 +215,6 @@ _defineProperty(Alert, "propTypes", {
   onClose: PropTypes.func,
   isShaking: PropTypes.bool,
   isClosing: PropTypes.bool,
-
   /**
    * Whether an alert is rendered inside an **Alerts** container
    * or standalone.
@@ -257,7 +229,6 @@ _defineProperty(Alert, "propTypes", {
   closeButtonClassName: PropTypes.string,
   'data-test': PropTypes.string
 });
-
 _defineProperty(Alert, "defaultProps", {
   theme: Theme.DARK,
   closeable: true,
@@ -270,7 +241,6 @@ _defineProperty(Alert, "defaultProps", {
   onClose: () => {},
   onCloseRequest: () => {}
 });
-
 _defineProperty(Alert, "Type", AlertType);
 
 export { ANIMATION_TIME, AlertType, Alert as default };

package/dist/alert/container.js

@@ -15,11 +15,9 @@ class Alerts extends PureComponent {
     } = this.props;
     const classes = classNames(modules_fc8df42d.alertContainer, className);
     const show = Children.count(children) > 0;
-
     if (!show) {
       return null;
     }
-
     return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
       "data-test": "alert-container",
       className: classes,
@@ -28,16 +26,13 @@ class Alerts extends PureComponent {
       if (! /*#__PURE__*/isValidElement(child)) {
         return child;
       }
-
       const alertClassNames = classNames(modules_fc8df42d.alertInContainer, child.props.className);
       return /*#__PURE__*/cloneElement(child, {
         className: alertClassNames
       });
     })), document.body);
   }
-
 }
-
 _defineProperty(Alerts, "propTypes", {
   children: PropTypes.node,
   className: PropTypes.string