@jetbrains/ring-ui 5.0.35 → 5.0.37

package/components/date-picker/date-popup.js

@@ -87,7 +87,9 @@ export default class DatePopup extends Component {
     isInTimeMode = () => !this.props.range && this.props.withTime || false;
     componentRef = React.createRef();
     handleWheel = (e) => {
-        e.preventDefault();
+        if (e.cancelable) {
+            e.preventDefault();
+        }
     };
     parse(text, type) {
         if (type === 'time') {

package/components/editable-heading/editable-heading.css

@@ -0,0 +1,69 @@
+@value unit from "../global/global.css";
+
+.editableHeading {
+  display: flex;
+  gap: unit;
+}
+
+.heading.heading {
+  margin-bottom: 0;
+
+  line-height: 28px;
+}
+
+.heading {
+  padding: 6px 0;
+
+  cursor: pointer;
+
+  border-radius: var(--ring-border-radius);
+
+  &:hover {
+    background-color: var(--ring-hover-background-color);
+  }
+}
+
+.input {
+  margin-bottom: 2px;
+  padding: 0;
+  padding-top: 6px;
+  padding-bottom: 3px;
+
+  color: var(--ring-heading-color);
+  caret-color: var(--ring-main-color);
+
+  border: none;
+  border-bottom: 1px solid var(--ring-borders-color);
+  outline: none;
+
+  font-family: var(--ring-font-family);
+  font-weight: bold;
+  line-height: 28px;
+
+  &::placeholder {
+    color: var(--ring-disabled-color);
+  }
+
+  &:focus {
+    margin-bottom: 1px;
+
+    border-bottom-width: 2px;
+    border-bottom-color: var(--ring-main-color);
+  }
+}
+
+.button {
+  margin: 6px 0;
+}
+
+.level1 {
+  font-size: 24px;
+}
+
+.level2 {
+  font-size: 20px;
+}
+
+.level3 {
+  font-size: 14px;
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Levels } from '../heading/heading';
+import { Size } from '../input/input';
+export { Levels };
+export interface EditableHeadingProps {
+    level?: Levels;
+    className?: string | null;
+    editing?: boolean;
+    edited?: boolean;
+    children?: string;
+    placeholder?: string;
+    embedded?: boolean;
+    size?: Size;
+    onEdit?: () => void;
+    onChange?: (text: string) => void;
+    onSave?: () => void;
+    onCancel?: () => void;
+}
+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 default _default;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import classNames from 'classnames';
+import Heading, { Levels } from '../heading/heading';
+import Button from '../button/button';
+import { Size } from '../input/input';
+import inputStyles from '../input/input.css';
+import { ControlsHeight } from '../global/controls-height';
+import getUID from '../global/get-uid';
+import Shortcuts from '../shortcuts/shortcuts';
+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 }) => {
+    const onInputChange = (e) => {
+        onChange?.(e.target.value);
+    };
+    return (<div className={classNames(styles.editableHeading, className)}>
+      {editing
+            ? (<>
+            {!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/>
+          </>)
+            : (<Heading className={classNames(styles.heading, [inputStyles[`size${size}`]])} level={level} onClick={onEdit}>{children}</Heading>)}
+
+      {editing && !embedded && (<>
+          <Button height={ControlsHeight.M} className={styles.button} primary disabled={!edited || !children || children?.trim() === ''} onClick={onSave}>{'Save'}</Button>
+
+          <Button height={ControlsHeight.M} className={styles.button} onClick={onCancel}>{'Cancel'}</Button>
+        </>)}
+    </div>);
+};
+export default React.memo(EditableHeading);

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,