@jetbrains/ring-ui 4.2.7 → 4.2.10

package/dist/tabs/smart-tabs.js

@@ -0,0 +1,106 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import joinDataTestAttributes from '../global/data-tests.js';
+import Tabs from './dumb-tabs.js';
+import 'classnames';
+import '../global/memoize.js';
+import '../global/theme.js';
+import '../_helpers/tabs.js';
+import './tab-link.js';
+import '../link/link.js';
+import 'focus-visible';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+import './collapsible-tabs.js';
+import 'core-js/modules/es.string.replace.js';
+import 'fastdom';
+import './collapsible-more.js';
+import '@jetbrains/icons/chevron-10px';
+import '../popup/popup.consts.js';
+import '../popup-menu/popup-menu.js';
+import '../popup/popup.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 '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import '../popup/popup.target.js';
+import '../list/list.js';
+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/create-stateful-context.js';
+import '../list/list__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 '../dropdown/dropdown.js';
+import '../_helpers/anchor.js';
+import '../button/button.js';
+import '../_helpers/button__classes.js';
+import './collapsible-tab.js';
+import './custom-item.js';
+
+class SmartTabs extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      selected: this.props.initSelected || this.props.children[0].props.id || '0'
+    });
+
+    _defineProperty(this, "handleSelect", selected => this.setState({
+      selected
+    }));
+  }
+
+  render() {
+    const {
+      children,
+      initSelected,
+      'data-test': dataTest,
+      ...restProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Tabs, _extends({
+      "data-test": joinDataTestAttributes('ring-smart-tabs', dataTest),
+      selected: this.state.selected,
+      onSelect: this.handleSelect
+    }, restProps), children);
+  }
+
+}
+
+_defineProperty(SmartTabs, "propTypes", {
+  children: PropTypes.arrayOf(PropTypes.element).isRequired,
+  initSelected: PropTypes.string,
+  'data-test': PropTypes.string
+});
+
+export { SmartTabs as default };

package/dist/tabs/tab-link.js

@@ -0,0 +1,42 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import Link from '../link/link.js';
+import { m as modules_02138f4a } from '../_helpers/tabs.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'focus-visible';
+import 'classnames';
+import '../global/memoize.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import '../global/data-tests.js';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+
+function TabLink(_ref) {
+  let {
+    isSelected,
+    title,
+    collapsed,
+    ...restProps
+  } = _ref;
+  const renderedTitle = typeof title === 'function' ? title(isSelected, collapsed) : title;
+  return /*#__PURE__*/React.createElement(Link, restProps, () => /*#__PURE__*/React.createElement("div", {
+    className: modules_02138f4a.container
+  }, /*#__PURE__*/React.createElement("span", {
+    className: modules_02138f4a.visible
+  }, renderedTitle), /*#__PURE__*/React.createElement("span", {
+    className: modules_02138f4a.hidden
+  }, renderedTitle), /*#__PURE__*/React.createElement("span", {
+    className: modules_02138f4a.hiddenBold
+  }, renderedTitle), /*#__PURE__*/React.createElement("span", {
+    className: modules_02138f4a.hiddenRegular
+  }, renderedTitle)));
+}
+
+TabLink.propTypes = {
+  isSelected: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  title: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.node])
+};
+var TabLink$1 = /*#__PURE__*/memo(TabLink);
+
+export { TabLink$1 as default };

package/dist/tabs/tab.js

@@ -0,0 +1,33 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import joinDataTestAttributes from '../global/data-tests.js';
+import { m as modules_02138f4a } from '../_helpers/tabs.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+
+class Tab extends PureComponent {
+  render() {
+    const {
+      className,
+      children,
+      'data-test': dataTest
+    } = this.props;
+    const classes = classNames(modules_02138f4a.tab, className);
+    return /*#__PURE__*/React.createElement("div", {
+      "data-test": joinDataTestAttributes('ring-tab', dataTest),
+      className: classes
+    }, children);
+  }
+
+}
+
+_defineProperty(Tab, "propTypes", {
+  title: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  id: PropTypes.string,
+  className: PropTypes.string,
+  children: PropTypes.node,
+  'data-test': PropTypes.string
+});
+
+export { Tab as default };

package/dist/tabs/tabs.js

@@ -0,0 +1,71 @@
+export { CustomItem } from './custom-item.js';
+export { default as Tabs } from './dumb-tabs.js';
+export { default as SmartTabs } from './smart-tabs.js';
+export { default as Tab } from './tab.js';
+import 'prop-types';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'react';
+import 'classnames';
+import '../global/memoize.js';
+import '../global/theme.js';
+import '../global/data-tests.js';
+import '../_helpers/tabs.js';
+import './tab-link.js';
+import '../link/link.js';
+import 'focus-visible';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+import './collapsible-tabs.js';
+import 'core-js/modules/es.string.replace.js';
+import 'fastdom';
+import './collapsible-more.js';
+import '@jetbrains/icons/chevron-10px';
+import '../popup/popup.consts.js';
+import '../popup-menu/popup-menu.js';
+import '../popup/popup.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 '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import '../popup/popup.target.js';
+import '../list/list.js';
+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/create-stateful-context.js';
+import '../list/list__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 '../dropdown/dropdown.js';
+import '../_helpers/anchor.js';
+import '../button/button.js';
+import '../_helpers/button__classes.js';
+import './collapsible-tab.js';

package/dist/tabs-ng/tabs-ng.js

@@ -0,0 +1,194 @@
+import 'core-js/modules/es.string.replace.js';
+import angular from 'angular';
+import classNames from 'classnames';
+import { m as modules_02138f4a } from '../_helpers/tabs.js';
+import Theme from '../global/theme.js';
+import template from './tabs-ng__template.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'react';
+
+/**
+ * @name Tabs Ng
+ */
+
+const angularModule = angular.module('Ring.tabs', []);
+angularModule.directive('rgTabs', ["$location", "$rootScope", function rgTabsDirective($location, $rootScope) {
+  return {
+    restrict: 'E',
+    transclude: true,
+    template,
+    replace: true,
+    scope: {
+      tabParameter: '@',
+      tabsClass: '=',
+      control: '=?',
+      disableLocationChanging: '=',
+      theme: '@?'
+    },
+    controller: ["$scope", function controller($scope) {
+      $scope.panes = [];
+      $scope.current = null;
+      $scope.styles = modules_02138f4a;
+      $scope.theme = $scope.theme || Theme.LIGHT;
+
+      function getTabIdFromUrl() {
+        return $location.search()[$scope.tabParameter];
+      }
+
+      function doSelect(newPane, skipUrlUpdate) {
+        if (newPane === $scope.current || newPane.ngDisabled) {
+          return;
+        }
+
+        for (let index = 0; index < $scope.panes.length; index++) {
+          const pane = $scope.panes[index]; // Update current tab
+
+          if (pane === newPane || pane.tabId === newPane) {
+            $scope.current = newPane;
+            pane.selected = true;
+
+            if (!skipUrlUpdate) {
+              $location.search($scope.tabParameter, newPane.tabId);
+            }
+          } else {
+            // Deselect all other
+            pane.selected = false;
+          }
+        }
+      }
+
+      function getNextPaneIndex(reverseOrder) {
+        const currentTabIndex = $scope.panes.indexOf($scope.current);
+        let next = currentTabIndex;
+
+        do {
+          next += reverseOrder ? -1 : 1;
+        } while (next > -1 && next < $scope.panes.length && $scope.panes[next].ngDisabled);
+
+        if (next >= $scope.panes.length) {
+          next = $scope.panes.length - 1;
+        } else if (next < 0) {
+          next = 0;
+        } // if no suitable tab found till the end of array
+
+
+        if ($scope.panes[next].ngDisabled) {
+          return currentTabIndex;
+        }
+
+        return next;
+      }
+
+      function getCurrentTab() {
+        const currentTabId = getTabIdFromUrl();
+
+        if (currentTabId) {
+          const currentTab = $scope.panes.find(pane => pane.tabId === currentTabId);
+
+          if (currentTab && !currentTab.ngDisabled) {
+            return currentTab;
+          } else {
+            return $scope.panes[getNextPaneIndex()];
+          }
+        } else {
+          return $scope.panes[0];
+        }
+      } // controller methods
+
+
+      function checkCurrentTab() {
+        if ($scope.panes.length) {
+          doSelect(getCurrentTab(), true);
+        }
+      }
+
+      this.addTab = tab => {
+        $scope.panes.push(tab);
+
+        if ($scope.panes.length === 1 || tab.tabId === getTabIdFromUrl()) {
+          doSelect(tab, true);
+        }
+      };
+
+      this.removeTab = tab => {
+        const index = $scope.panes.indexOf(tab);
+        $scope.panes.splice(index, 1);
+        checkCurrentTab();
+      };
+
+      this.checkPane = checkCurrentTab; // scope
+
+      $scope.$on('$destroy', $rootScope.$on('$routeUpdate', checkCurrentTab)); // Exposed methods
+
+      $scope.control = {};
+
+      $scope.control.isLast = () => $scope.panes.indexOf($scope.current) === $scope.panes.length - 1;
+
+      $scope.control.isFirst = () => $scope.panes.indexOf($scope.current) === 0;
+
+      $scope.control.select = pane => {
+        doSelect(pane, $scope.disableLocationChanging);
+      };
+
+      $scope.control.next = () => {
+        const next = getNextPaneIndex();
+        doSelect($scope.panes[next], $scope.disableLocationChanging);
+      };
+
+      $scope.control.prev = () => {
+        const prev = getNextPaneIndex(true);
+        doSelect($scope.panes[prev], $scope.disableLocationChanging);
+      };
+
+      $scope.keyMap = {
+        next: $scope.control.next,
+        prev: $scope.control.prev,
+        focus: () => {
+          $scope.focus = !$scope.focus;
+          return !$scope.focus;
+        }
+      }; // For some reason ng-class doesn't work properly on tabs.
+      // From time to time several tabs look like selected despite correct scope state.
+      // I think this bug depends on the frequency of addTab calls (actually on digests)
+      // and ng-class detection of added and removed classes becomes broken.
+      // @maxim.erekhinskiy
+
+      $scope.tabClass = pane => classNames(modules_02138f4a.title, modules_02138f4a.titleLegacy, {
+        [modules_02138f4a.selected]: pane.selected
+      });
+
+      this.$onInit = () => {
+        if (!$scope.tabParameter) {
+          $scope.tabParameter = 'tab';
+        }
+      };
+    }]
+  };
+}]);
+angularModule.directive('rgTabsPane', function rgTabsPaneDirective() {
+  return {
+    require: '^rgTabs',
+    restrict: 'E',
+    transclude: true,
+    scope: {
+      title: '@',
+      counter: '@',
+      tabId: '@?',
+      tabIndex: '@?',
+      selected: '=?',
+      ngDisabled: '=?'
+    },
+    link: function link(scope, element, attrs, tabsCtrl) {
+      scope.tabId = scope.tabId || scope.title.toLowerCase().replace(' ', '-');
+      scope.tabIndex = scope.tabIndex ? +scope.tabIndex : 0;
+      tabsCtrl.addTab(scope);
+      scope.$on('$destroy', () => {
+        tabsCtrl.removeTab(scope);
+      });
+    },
+    template: '<div class="ring-tabs__content" ng-class="{\'ring-tabs__content_active\':selected}" ng-if="selected" ng-transclude></div>'
+  };
+});
+var tabsNg = angularModule.name;
+
+export { tabsNg as default };

package/dist/tabs-ng/tabs-ng__template.js

@@ -0,0 +1,3 @@
+var template = "<div\n  ng-class=\":: [styles.tabs, styles[theme]]\"\n  rg-shortcuts=\"ring-tabs\"\n  shortcuts-map=\"keyMap\"\n  shortcuts-focus=\"focus\"\n>\n  <div\n    ng-class=\":: [styles.titles, tabsClass]\"\n    role=\"tablist\"\n  >\n    <button\n      role=\"tab\"\n      type=\"button\"\n      ng-repeat=\"pane in panes | orderBy:'tabIndex'\"\n      ng-click=\"control.select(pane)\"\n      ng-attr-tabindex=\"{{(pane.selected || pane.ngDisabled) ? -1 : 0}}\"\n      ng-disabled=\"pane.ngDisabled\"\n      data-test=\"ring-tab\"\n      ng-attr-data-test-active=\"{{pane.selected  ? 'true' : 'false'}}\"\n      ng-attr-class=\"{{ tabClass(pane) }}\"\n    ><span\n      ng-class=\":: styles.visible\">{{pane.title}}<span\n      ng-class=\":: styles.tabCounter\"\n      ng-show=\"pane.counter !== undefined\">{{ pane.counter }}</span\n    ></span><!--\n      hack for preserving constant tab width\n    --><span ng-class=\":: styles.hidden\">{{pane.title}}<span\n      ng-class=\":: styles.tabCounter\" ng-show=\"pane.counter !== undefined\">{{ pane.counter }}</span></span>\n      <span ng-class=\":: styles.hiddenBold\">{{pane.title}}<span\n        ng-class=\":: styles.tabCounter\" ng-show=\"pane.counter !== undefined\">{{ pane.counter }}</span></span>\n      <span ng-class=\":: styles.hiddenRegular\">{{pane.title}}<span\n        ng-class=\":: styles.tabCounter\" ng-show=\"pane.counter !== undefined\">{{ pane.counter }}</span></span>\n    </button>\n  </div>\n\n  <div ng-transclude></div>\n\n</div>";
+
+export { template as default };

package/dist/tag/tag.js

@@ -0,0 +1,197 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import closeIcon from '@jetbrains/icons/close';
+import Icon from '../icon/icon.js';
+import Button from '../button/button.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
+import '../global/memoize.js';
+import 'focus-visible';
+import '@jetbrains/icons/chevron-10px';
+import '../global/theme.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+
+var modules_2f9be069 = {"unit":"8px","background-color":"var(--ring-tag-background-color)","max-height":"20px","tag":"tag_rui_2f49 resetButton_rui_8bff","withRemove":"withRemove_rui_2f49","container":"container_rui_2f49","focused":"focused_rui_2f49","tagAngled":"tagAngled_rui_2f49","content":"content_rui_2f49 ellipsis_rui_8bff","disabled":"disabled_rui_2f49","remove":"remove_rui_2f49","removeIcon":"removeIcon_rui_2f49","icon":"icon_rui_2f49","avatarContainer":"avatarContainer_rui_2f49","customIcon":"customIcon_rui_2f49","avatarIcon":"avatarIcon_rui_2f49"};
+
+/**
+ * @name Tag
+ */
+
+class Tag extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      focused: false
+    });
+
+    _defineProperty(this, "onDocumentClick", event => {
+      if (this.tagNode) {
+        this.setState({
+          focused: this.tagNode === event.target
+        });
+      }
+    });
+
+    _defineProperty(this, "tagRef", el => {
+      this.tagNode = el;
+    });
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.focused !== prevProps.focused) {
+      this.setState({
+        focused: this.props.focused
+      });
+    }
+
+    if (this.state.focused) {
+      this.tagNode.focus();
+    }
+
+    this.setDocumentClickListener(this.state.focused);
+  }
+
+  componentWillUnmount() {
+    this.setDocumentClickListener(false);
+    this.setState({
+      focused: false
+    });
+  }
+
+  setDocumentClickListener(setListener) {
+    if (setListener) {
+      document.addEventListener('click', this.onDocumentClick);
+    } else {
+      document.removeEventListener('click', this.onDocumentClick);
+    }
+  }
+
+  renderCustomIcon() {
+    if (this.props.rgTagIcon) {
+      return /*#__PURE__*/React.createElement(Icon, {
+        className: modules_2f9be069.icon,
+        title: this.props.rgTagTitle,
+        glyph: this.props.rgTagIcon
+      });
+    }
+
+    return null;
+  }
+
+  _renderImageElement(avatarSrc) {
+    const classes = classNames({
+      [modules_2f9be069.customIcon]: this.props.icon,
+      [modules_2f9be069.avatarIcon]: avatarSrc
+    });
+    return /*#__PURE__*/React.createElement("img", {
+      alt: avatarSrc ? 'Avatar' : 'Icon',
+      className: classes,
+      src: avatarSrc || this.props.icon
+    });
+  }
+
+  renderImage() {
+    if (this.props.icon && !this.props.avatar) {
+      return this._renderImageElement();
+    }
+
+    return null;
+  }
+
+  renderAvatar() {
+    if (this.props.avatar) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: modules_2f9be069.avatarContainer
+      }, this._renderImageElement(this.props.avatar));
+    }
+
+    return null;
+  }
+
+  renderRemoveIcon() {
+    if (!this.props.readOnly) {
+      return /*#__PURE__*/React.createElement(Button, {
+        title: "Remove",
+        icon: closeIcon,
+        "data-test": "ring-tag-remove",
+        className: modules_2f9be069.remove,
+        iconClassName: modules_2f9be069.removeIcon,
+        onClick: this.props.onRemove,
+        style: {
+          '--ring-icon-secondary-color': this.props.textColor
+        }
+      });
+    }
+
+    return null;
+  }
+
+  render() {
+    const classes = classNames('ring-js-shortcuts', modules_2f9be069.tag, {
+      [modules_2f9be069.focused]: this.state.focused,
+      [modules_2f9be069.disabled]: this.props.disabled,
+      [modules_2f9be069.tagAngled]: this.props.angled,
+      [modules_2f9be069.withRemove]: !this.props.readOnly
+    }, this.props.className);
+    const {
+      backgroundColor,
+      textColor,
+      render
+    } = this.props;
+    return /*#__PURE__*/React.createElement("span", {
+      className: modules_2f9be069.container
+    }, render({
+      'data-test': 'ring-tag',
+      className: classes,
+      ref: this.tagRef,
+      onClick: this.props.onClick,
+      style: {
+        backgroundColor,
+        color: textColor
+      },
+      children: /*#__PURE__*/React.createElement(React.Fragment, null, this.renderAvatar(), this.renderCustomIcon(), this.renderImage(), /*#__PURE__*/React.createElement("span", {
+        className: modules_2f9be069.content
+      }, this.props.children))
+    }), this.renderRemoveIcon());
+  }
+
+}
+
+_defineProperty(Tag, "propTypes", {
+  onRemove: PropTypes.func,
+  onClick: PropTypes.func,
+  rgTagIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  icon: PropTypes.string,
+  avatar: PropTypes.string,
+  rgTagTitle: PropTypes.string,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  focused: PropTypes.bool,
+  angled: PropTypes.bool,
+  backgroundColor: PropTypes.string,
+  textColor: PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  render: PropTypes.func
+});
+
+_defineProperty(Tag, "defaultProps", {
+  onRemove: () => {},
+  onClick: () => {},
+  readOnly: false,
+  disabled: false,
+  focused: false,
+  render: props => /*#__PURE__*/React.createElement("button", _extends({
+    type: "button"
+  }, props))
+});
+
+export { Tag as default };