@jetbrains/ring-ui 4.1.1 → 4.1.2

package/dist/docked-panel-ng/docked-panel-ng.js

@@ -0,0 +1,170 @@
+import angular from 'angular';
+import scheduleRAF from '../global/schedule-raf.js';
+import { getDocumentScrollTop, getWindowHeight } from '../global/dom.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+
+var modules_655b40c7 = {"unit":"8px","dockedPanel":"dockedPanel_rui_0ffc","fixed":"fixed_rui_0ffc"};
+
+const scheduleAction = scheduleRAF();
+/**
+ * @name Docked Panel Ng
+ */
+
+const angularModule = angular.module('Ring.docked-panel', []);
+angularModule.directive('rgDockedPanel', ["$parse", function rgDockedPanelDirective($parse) {
+  return {
+    link: function link(scope, element, attrs) {
+      const TOGGLE_GAP = 8;
+      const CSS_CLASS_NAME = modules_655b40c7.dockedPanel;
+      const DOCKED_CSS_CLASS_NAME = modules_655b40c7.fixed;
+      const dockedPanelClass = attrs.rgDockedPanelClass || '';
+      const config = attrs.rgDockedPanelConfig ? $parse(attrs.rgDockedPanelConfig)(scope) : null;
+      let initialPanelPos;
+      let isDocked;
+      /**
+       * Container
+       * @type {Element} panel
+       */
+
+      const panel = element[0];
+      panel.classList.add(CSS_CLASS_NAME);
+
+      function getYPosition(node) {
+        const clientRect = node.getBoundingClientRect();
+        return clientRect.top + clientRect.height + getScrollContainerScrollTop();
+      }
+      /**
+       * Save panel initial rects and left margin and container-node for further use
+       */
+
+
+      function saveInitialPos() {
+        initialPanelPos = getYPosition(panel);
+      }
+
+      function getInitialUndockedPosition() {
+        return (config || {}).container ? getYPosition(config.container) : initialPanelPos;
+      }
+
+      function getScrollContainerScrollTop() {
+        if (config && config.scrollContainer) {
+          return config.scrollContainer.scrollTop;
+        }
+
+        return getDocumentScrollTop();
+      }
+
+      function getScrollContainerHeight() {
+        if (config && config.scrollContainer) {
+          return config.scrollContainer.getBoundingClientRect().height;
+        }
+
+        return getWindowHeight();
+      }
+
+      function onBeforeDock() {
+        if (config) {
+          if (config.beforeDock) {
+            scope.$eval(config.beforeDock(element));
+          }
+
+          if (config.className) {
+            panel.classList.add(config.className);
+          }
+        }
+      }
+
+      function onBeforeUndock() {
+        if (config) {
+          if (config.beforeUndock) {
+            scope.$eval(config.beforeUndock(element));
+          }
+
+          if (config.className) {
+            panel.classList.remove(config.className);
+          }
+        }
+      }
+      /**
+       * Docks the panel to the bottom of the page
+       */
+
+
+      function dock() {
+        onBeforeDock();
+        panel.classList.add(DOCKED_CSS_CLASS_NAME);
+
+        if (dockedPanelClass) {
+          panel.classList.add(dockedPanelClass);
+        }
+
+        isDocked = true;
+      }
+
+      function undock() {
+        onBeforeUndock();
+        panel.classList.remove(DOCKED_CSS_CLASS_NAME);
+
+        if (dockedPanelClass) {
+          panel.classList.remove(dockedPanelClass);
+        }
+
+        isDocked = false;
+      }
+
+      function onResize() {
+        if (config) {
+          if (config && config.onResize) {
+            scope.$eval(config.onResize(element, isDocked));
+          }
+        }
+      }
+      /**
+       * Check panel position
+       */
+
+
+      function checkPanelPosition() {
+        const currentPanelRect = panel.getBoundingClientRect();
+
+        if (currentPanelRect.top + currentPanelRect.height > getScrollContainerHeight() && !isDocked) {
+          dock();
+        } else if (isDocked && currentPanelRect.top + currentPanelRect.height + getScrollContainerScrollTop() >= getInitialUndockedPosition() + TOGGLE_GAP) {
+          undock();
+        }
+      }
+
+      function init() {
+        const _onResize = () => {
+          checkPanelPosition();
+          onResize();
+        };
+
+        const scrollListener = () => scheduleAction(checkPanelPosition);
+        /**
+         * Wait until all content on the page is loaded
+         */
+
+
+        scope.$applyAsync(() => {
+          const scrollContainer = (config || {}).scrollContainer || window;
+          scrollContainer.addEventListener('scroll', scrollListener);
+          window.addEventListener('resize', _onResize);
+          scope.$on('$destroy', () => {
+            scrollContainer.removeEventListener('scroll', scrollListener);
+            window.removeEventListener('resize', _onResize);
+          });
+          scheduleAction(() => {
+            saveInitialPos();
+            checkPanelPosition();
+          });
+        });
+      }
+
+      init();
+    }
+  };
+}]);
+var dockedPanelNg = angularModule.name;
+
+export { dockedPanelNg as default };

package/dist/dropdown/anchor.js

@@ -0,0 +1,17 @@
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'react';
+import 'prop-types';
+import '@jetbrains/icons/chevron-10px';
+import 'classnames';
+import '../icon/icon.js';
+import '../button/button.js';
+export { A as default } from '../_helpers/anchor.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../global/memoize.js';
+import 'focus-visible';
+import '../global/theme.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';

package/dist/dropdown/dropdown.js

@@ -0,0 +1,234 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { Component, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import joinDataTestAttributes from '../global/data-tests.js';
+import { m as modules_d9414203, A as Anchor } from '../_helpers/anchor.js';
+export { A as Anchor } from '../_helpers/anchor.js';
+import '@jetbrains/icons/chevron-10px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../global/memoize.js';
+import '../button/button.js';
+import 'focus-visible';
+import '../global/theme.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+
+/**
+ * @name Dropdown
+ */
+
+class Dropdown extends Component {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      show: this.props.initShown,
+      pinned: false
+    });
+
+    _defineProperty(this, "onClick", () => {
+      const {
+        show,
+        pinned
+      } = this.state;
+      let nextPinned = pinned;
+
+      if (this.props.hoverMode) {
+        if (!pinned) {
+          nextPinned = true;
+
+          if (show) {
+            this.setState({
+              pinned: true
+            });
+            return;
+          }
+        } else {
+          nextPinned = false;
+        }
+      }
+
+      this._toggle(!show, nextPinned);
+    });
+
+    _defineProperty(this, "onChildCloseAttempt", () => {
+      let nextPinned = this.state.pinned;
+
+      if (this.props.hoverMode) {
+        nextPinned = false;
+      }
+
+      this._toggle(false, nextPinned);
+    });
+
+    _defineProperty(this, "onMouseEnter", event => {
+      this._clearTimer();
+
+      this.props.onMouseEnter(event);
+      this.hoverTimer = setTimeout(() => {
+        if (!this.state.show) {
+          this._toggle(true);
+        }
+      }, this.props.hoverShowTimeOut);
+    });
+
+    _defineProperty(this, "onMouseLeave", event => {
+      this.props.onMouseLeave(event);
+
+      if (this.state.pinned) {
+        return;
+      }
+
+      this._clearTimer();
+
+      this.hoverTimer = setTimeout(() => {
+        if (this.state.show) {
+          this._toggle(false);
+        }
+      }, this.props.hoverHideTimeOut);
+    });
+
+    _defineProperty(this, "handlePopupInteraction", () => {
+      this.setState(_ref => {
+        let {
+          pinned
+        } = _ref;
+        return pinned ? null : {
+          pinned: true
+        };
+      });
+    });
+  }
+
+  toggle() {
+    let show = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !this.state.show;
+
+    this._toggle(show);
+  }
+
+  _toggle(show) {
+    let pinned = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state.pinned;
+    this.setState({
+      show,
+      pinned
+    }, () => show ? this.props.onShow() : this.props.onHide());
+  }
+
+  _clearTimer() {
+    if (this.hoverTimer) {
+      clearTimeout(this.hoverTimer);
+      this.hoverTimer = null;
+    }
+  }
+
+  render() {
+    const {
+      show,
+      pinned
+    } = this.state;
+    const {
+      initShown,
+      onShow,
+      onHide,
+      hoverShowTimeOut,
+      hoverHideTimeOut,
+      children,
+      anchor,
+      className,
+      activeClassName,
+      hoverMode,
+      clickMode,
+      'data-test': dataTest,
+      ...restProps
+    } = this.props;
+    const classes = classNames(modules_d9414203.dropdown, className, {
+      [activeClassName]: activeClassName != null && show
+    });
+    let anchorElement;
+    const active = hoverMode ? pinned : show;
+
+    switch (typeof anchor) {
+      case 'string':
+        anchorElement = /*#__PURE__*/React.createElement(Anchor, {
+          active: active
+        }, anchor);
+        break;
+
+      case 'function':
+        anchorElement = anchor({
+          active: show,
+          pinned
+        });
+        break;
+
+      default:
+        if (typeof anchor.type === 'string' || Array.isArray(anchor)) {
+          anchorElement = anchor;
+        } else {
+          anchorElement = /*#__PURE__*/cloneElement(anchor, {
+            active
+          });
+        }
+
+    }
+
+    const childProps = {
+      hidden: !show,
+      onCloseAttempt: this.onChildCloseAttempt,
+      onMouseDown: hoverMode ? this.handlePopupInteraction : undefined,
+      onContextMenu: hoverMode ? this.handlePopupInteraction : undefined,
+      dontCloseOnAnchorClick: true
+    };
+    return /*#__PURE__*/React.createElement("div", _extends({
+      "data-test": joinDataTestAttributes('ring-dropdown', dataTest)
+    }, restProps, {
+      onClick: clickMode ? this.onClick : undefined // anchorElement should be a `button` or an `a`
+      ,
+      role: "presentation",
+      onMouseEnter: hoverMode ? this.onMouseEnter : undefined,
+      onMouseLeave: hoverMode ? this.onMouseLeave : undefined,
+      className: classes
+    }), anchorElement, typeof children === 'function' ? children(childProps) : /*#__PURE__*/cloneElement(children, childProps));
+  }
+
+}
+
+_defineProperty(Dropdown, "propTypes", {
+  /**
+   * Can be string, React element, or a function accepting an object with {active, pinned} properties and returning a React element
+   * React element should render some interactive HTML element like `button` or `a`
+   */
+  anchor: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+  initShown: PropTypes.bool,
+  className: PropTypes.string,
+  activeClassName: PropTypes.string,
+  clickMode: PropTypes.bool,
+  hoverMode: PropTypes.bool,
+  hoverShowTimeOut: PropTypes.number,
+  hoverHideTimeOut: PropTypes.number,
+  onShow: PropTypes.func,
+  onHide: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  'data-test': PropTypes.string
+});
+
+_defineProperty(Dropdown, "defaultProps", {
+  initShown: false,
+  clickMode: true,
+  hoverMode: false,
+  hoverShowTimeOut: 300,
+  hoverHideTimeOut: 600,
+  onShow: () => {},
+  onHide: () => {},
+  onMouseEnter: () => {},
+  onMouseLeave: () => {}
+});
+
+export { Dropdown as default };

package/dist/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,175 @@
+import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { useMemo, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import List, { ActiveItemContext } from '../list/list.js';
+import Dropdown from '../dropdown/dropdown.js';
+import PopupMenu from '../popup-menu/popup-menu.js';
+import getUID from '../global/get-uid.js';
+import { A as Anchor } from '../_helpers/anchor.js';
+import 'classnames';
+import 'react-virtualized/dist/es/List';
+import 'react-virtualized/dist/es/AutoSizer';
+import 'react-virtualized/dist/es/WindowScroller';
+import 'react-virtualized/dist/es/CellMeasurer';
+import 'util-deprecate';
+import 'memoize-one';
+import '../global/data-tests.js';
+import '../global/schedule-raf.js';
+import '../global/memoize.js';
+import '../global/dom.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../global/create-stateful-context.js';
+import '../list/list__link.js';
+import '../link/link.js';
+import 'focus-visible';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+import '../_helpers/list.js';
+import '../list/list__item.js';
+import '../avatar/avatar.js';
+import '../global/url.js';
+import '../avatar/fallback-avatar.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../icon/icon.js';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../_helpers/checkbox.js';
+import '../list/list__custom.js';
+import '../global/get-event-key.js';
+import '../list/list__title.js';
+import '../list/list__separator.js';
+import '../list/list__hint.js';
+import '../list/consts.js';
+import '@jetbrains/icons/chevron-10px';
+import '../button/button.js';
+import '../global/theme.js';
+import '../_helpers/button__classes.js';
+import '../popup/popup.js';
+import 'react-dom';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import '../popup/popup.consts.js';
+import '../popup/popup.target.js';
+
+const {
+  children,
+  ...dropdownPropTypes
+} = Dropdown.propTypes || {};
+const {
+  id: idPropType,
+  data: dataPropType,
+  ariaLabel: ariaLabelPropType,
+  onSelect: onSelectPropType
+} = PopupMenu.propTypes || {};
+const defaultAriaLabel = 'Dropdown menu';
+
+function DropdownAnchorWrapper(_ref) {
+  let {
+    anchor,
+    pinned,
+    active,
+    activeListItemId,
+    listId,
+    ...restProps
+  } = _ref;
+  const anchorAriaProps = useMemo(() => ({ ...(listId ? {
+      'aria-haspopup': 'true'
+    } : {}),
+    ...(activeListItemId ? {
+      'aria-activedescendant': activeListItemId,
+      'aria-owns': listId
+    } : {}),
+    ...(active ? {
+      'aria-expanded': 'true'
+    } : {})
+  }), [active, activeListItemId, listId]);
+  const anchorProps = useMemo(() => ({
+    active,
+    pinned,
+    ...restProps,
+    ...anchorAriaProps
+  }), [pinned, active, restProps, anchorAriaProps]);
+  const anchorComponentProps = useMemo(() => ({ ...anchorProps,
+    pinned: `${anchorProps.pinned}`
+  }), [anchorProps]);
+
+  if (typeof anchor === 'string') {
+    return /*#__PURE__*/React.createElement(Anchor, anchorComponentProps, anchor);
+  }
+
+  if (typeof anchor === 'function') {
+    return anchor({
+      active,
+      pinned,
+      ...restProps
+    }, anchorAriaProps);
+  }
+
+  if (!Array.isArray(anchor)) {
+    return /*#__PURE__*/cloneElement(anchor, typeof anchor.type === 'string' ? anchorAriaProps : anchorComponentProps);
+  }
+
+  return /*#__PURE__*/React.createElement("div", anchorAriaProps, anchor);
+}
+
+DropdownAnchorWrapper.propTypes = {
+  anchor: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]).isRequired,
+  pinned: PropTypes.bool,
+  active: PropTypes.bool,
+  activeListItemId: PropTypes.string,
+  listId: PropTypes.string
+};
+const DropdownMenu = /*#__PURE__*/React.forwardRef(function DropdownMenu(_ref2, forwardedRef) {
+  let {
+    id,
+    anchor,
+    ariaLabel,
+    data,
+    onSelect,
+    menuProps,
+    ...restDropdownProps
+  } = _ref2;
+  const listId = useMemo(() => id || getUID('dropdown-menu-list'), [id]);
+  return /*#__PURE__*/React.createElement(ActiveItemContext.Provider, null, /*#__PURE__*/React.createElement(Dropdown, _extends({
+    anchor: _ref3 => {
+      let {
+        pinned,
+        active,
+        ...restAnchorProps
+      } = _ref3;
+      return /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, activeItemId => /*#__PURE__*/React.createElement(DropdownAnchorWrapper, _extends({
+        anchor: anchor,
+        pinned: pinned,
+        active: active,
+        activeListItemId: activeItemId,
+        listId: listId
+      }, restAnchorProps)));
+    }
+  }, restDropdownProps), /*#__PURE__*/React.createElement(PopupMenu, _extends({
+    ref: forwardedRef,
+    id: listId,
+    ariaLabel: ariaLabel || defaultAriaLabel,
+    closeOnSelect: true,
+    activateFirstItem: true,
+    data: data,
+    onSelect: onSelect
+  }, menuProps))));
+});
+DropdownMenu.propTypes = {
+  id: idPropType,
+  data: dataPropType,
+  ariaLabel: ariaLabelPropType,
+  onSelect: onSelectPropType,
+  menuProps: PropTypes.object,
+  ...dropdownPropTypes
+};
+DropdownMenu.ListProps = List.ListProps;
+
+export { DropdownMenu as default };

package/dist/error-bubble/error-bubble.js

@@ -0,0 +1,57 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent, Children, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Popup from '../popup/popup.js';
+import { Directions } from '../popup/popup.consts.js';
+import 'react-dom';
+import '../global/get-uid.js';
+import '../global/schedule-raf.js';
+import '../global/dom.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../global/data-tests.js';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import '../popup/popup.target.js';
+
+var modules_ee284100 = {"unit":"8px","errorBubblePopup":"errorBubblePopup_rui_fe10","errorBubbleWrapper":"errorBubbleWrapper_rui_fe10","errorBubble":"errorBubble_rui_fe10"};
+
+/**
+ * @name Error Bubble
+ */
+
+class ErrorBubble extends PureComponent {
+  render() {
+    const {
+      children,
+      className,
+      ...restProps
+    } = this.props;
+    const errorBubbleClasses = classNames(modules_ee284100.errorBubble, className);
+    return /*#__PURE__*/React.createElement("div", {
+      className: modules_ee284100.errorBubbleWrapper
+    }, Children.map(children, child => /*#__PURE__*/cloneElement(child, restProps)), restProps.error && /*#__PURE__*/React.createElement(Popup, {
+      trapFocus: false,
+      className: modules_ee284100.errorBubblePopup,
+      hidden: false,
+      attached: false,
+      directions: [Directions.RIGHT_CENTER, Directions.RIGHT_BOTTOM, Directions.RIGHT_TOP]
+    }, /*#__PURE__*/React.createElement("div", {
+      className: errorBubbleClasses,
+      "data-test": "ring-error-bubble"
+    }, restProps.error)));
+  }
+
+}
+
+_defineProperty(ErrorBubble, "propTypes", {
+  error: PropTypes.string,
+  className: PropTypes.string,
+  children: PropTypes.node
+});
+
+export { ErrorBubble as default };

package/dist/error-message/error-message.js

@@ -0,0 +1,55 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Icon from '../icon/icon.js';
+import { Size } from '../icon/icon__constants.js';
+import { m as modules_2c5e8509 } from '../_helpers/error-message.js';
+import 'util-deprecate';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../global/memoize.js';
+
+/**
+ * @name Error Message
+ */
+
+class ErrorMessage extends Component {
+  render() {
+    const {
+      className,
+      icon,
+      code,
+      message,
+      description,
+      children
+    } = this.props;
+    const classes = classNames(modules_2c5e8509.errorMessage, className);
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes
+    }, icon && /*#__PURE__*/React.createElement(Icon, {
+      className: modules_2c5e8509.icon,
+      glyph: icon,
+      size: Size.Size64,
+      suppressSizeWarning: true
+    }), /*#__PURE__*/React.createElement("div", {
+      className: modules_2c5e8509.content
+    }, /*#__PURE__*/React.createElement("div", {
+      className: modules_2c5e8509.title
+    }, code && `${code}:`, " ", message), description && /*#__PURE__*/React.createElement("div", {
+      className: modules_2c5e8509.description
+    }, description), children));
+  }
+
+}
+
+_defineProperty(ErrorMessage, "propTypes", {
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  code: PropTypes.string,
+  message: PropTypes.string,
+  description: PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string
+});
+
+export { ErrorMessage as default };