@jetbrains/ring-ui 4.1.0-beta.4 → 4.1.2

package/components/select/select.js

@@ -12,14 +12,12 @@ import List, {ActiveItemContext} from '../list/list';
 import Input, {Size} from '../input/input';
 import Shortcuts from '../shortcuts/shortcuts';
 import Button from '../button/button';
-import buttonStyles from '../button/button.css';
 import dataTests from '../global/data-tests';
 import getUID from '../global/get-uid';
 import rerenderHOC from '../global/rerender-hoc';
 import fuzzyHighlight from '../global/fuzzy-highlight';
-import Theme, {ThemeContext} from '../global/theme';
+import Theme from '../global/theme';
 import memoize from '../global/memoize';
-import getEventKey from '../global/get-event-key';
 
 import SelectPopup from './select__popup';
 import styles from './select.css';
@@ -222,6 +220,7 @@ export default class Select extends Component {
 
   static propTypes = {
     className: PropTypes.string,
+    buttonClassName: PropTypes.string,
     id: PropTypes.string,
     multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
     allowAny: PropTypes.bool,
@@ -523,10 +522,6 @@ export default class Select extends Component {
     return getSelectedIndex(selected, data, this.props.multiple);
   }
 
-  popupRef = el => {
-    this._popup = el;
-  };
-
   _getResetOption() {
     const isOptionsSelected = this.state.selected && this.state.selected.length;
     const hasTagsResetProp = this.props.tags && this.props.tags.reset;
@@ -743,13 +738,6 @@ export default class Select extends Component {
     }
   };
 
-  _selectButtonKeyboardHack = event => {
-    const key = getEventKey(event);
-    if (key === 'Enter' || key === ' ') {
-      this._clickHandler();
-    }
-  };
-
   _filterChangeHandler = e => {
     this._setFilter(e.target.value, e);
   };
@@ -1004,6 +992,7 @@ export default class Select extends Component {
           type="button"
           className={styles.selectedIcon}
           key="selected"
+          disabled={this.props.disabled}
           onClick={this._clickHandler}
           style={{backgroundImage: `url(${selected.icon})`}}
         />
@@ -1017,6 +1006,7 @@ export default class Select extends Component {
           data-test="ring-clear-select"
           className={styles.clearIcon}
           key="close"
+          disabled={this.props.disabled}
           onClick={this.clear}
           icon={closeIcon}
         />
@@ -1031,6 +1021,7 @@ export default class Select extends Component {
           iconClassName={styles.chevronIcon}
           icon={chevronDownIcon}
           key="hide"
+          disabled={this.props.disabled}
           onClick={this._clickHandler}
         />
       );
@@ -1040,10 +1031,12 @@ export default class Select extends Component {
   }
 
   _getAvatar() {
-    return this.state.selected && this.state.selected.avatar && (
+    return this.state.selected &&
+      (this.state.selected.avatar || this.state.selected.showGeneratedAvatar) && (
       <Avatar
         className={styles.avatar}
         url={this.state.selected.avatar}
+        username={this.state.selected.username}
         size={AvatarSize.Size20}
       />
     );
@@ -1152,33 +1145,27 @@ export default class Select extends Component {
                 scope={this.shortcutsScope}
               />
             )}
-            <ThemeContext.Consumer>
-              {contextTheme => (
-                <div
-                  {...ariaProps}
-                  id={this.props.id}
-                  onClick={this._clickHandler}
-                  onKeyPress={this._selectButtonKeyboardHack}
-                  className={classNames(
-                    buttonStyles.button,
-                    buttonStyles[this.props.theme || contextTheme || Theme.LIGHT],
-                    styles.buttonValue,
-                    {
-                      [styles.buttonValueOpen]: this.state.showPopup
-                    })
-                  }
-                  role="button"
-                  tabIndex={0}
-                  disabled={this.props.disabled}
-                  style={style}
-                  data-test="ring-select__button ring-select__focus"
-                >
-                  {this._getAvatar()}
-                  {this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()}
-                  {iconsNode}
-                </div>
-              )}
-            </ThemeContext.Consumer>
+            <div className={styles.buttonContainer}>
+              <Button
+                {...ariaProps}
+                id={this.props.id}
+                onClick={this._clickHandler}
+                className={classNames(
+                  this.props.buttonClassName,
+                  styles.buttonValue,
+                  {
+                    [styles.buttonValueOpen]: this.state.showPopup
+                  })
+                }
+                disabled={this.props.disabled}
+                style={style}
+                data-test="ring-select__button ring-select__focus"
+              >
+                {this._getAvatar()}
+                {this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()}
+              </Button>
+              {iconsNode}
+            </div>
             {this._renderPopup()}
           </div>
         );
@@ -1205,7 +1192,7 @@ export default class Select extends Component {
               onClick={this._clickHandler}
               type="button"
               disabled={this.props.disabled}
-              className={classNames(styles.value, {
+              className={classNames(this.props.buttonClassName, styles.value, {
                 [styles.open]: this.state.showPopup,
                 [styles.label]: this._selectionIsEmpty()
               })}

package/components/select/select.test.js

@@ -1,6 +1,5 @@
-/* eslint-disable no-magic-numbers, react/no-find-dom-node */
+/* eslint-disable no-magic-numbers*/
 import React from 'react';
-import {findDOMNode} from 'react-dom';
 import {Simulate} from 'react-dom/test-utils';
 import {shallow, mount} from 'enzyme';
 
@@ -212,7 +211,7 @@ describe('Select', () => {
     const instance = wrapper.instance();
     instance._showPopup();
 
-    Simulate.mouseDown(findDOMNode(instance._popup.list));
+    Simulate.mouseDown(instance._popup.list.container);
     Simulate.blur(instance.filter);
     sandbox.clock.tick();
     instance._popup.props.hidden.should.be.false;
@@ -623,7 +622,7 @@ describe('Select', () => {
       const instance = wrapper.instance();
       instance._showPopup();
       instance.filterValue('test');
-      findDOMNode(instance._popup.filter).value.should.equal('test');
+      instance._popup.filter.value.should.equal('test');
     });
 
     it('Should set target input value in input mode', () => {
@@ -642,7 +641,7 @@ describe('Select', () => {
       instance._showPopup();
       instance._hidePopup();
       instance._showPopup();
-      findDOMNode(instance._popup.filter).value.should.equal('');
+      instance._popup.filter.value.should.equal('');
     });
   });
 

package/components/select/select__popup.js

@@ -274,6 +274,7 @@ export default class SelectPopup extends PureComponent {
 
             data-test-custom="ring-select-popup-filter-input"
             listId={this.props.listId}
+            enableShortcuts={Object.keys(this.popupFilterShortcuts.map)}
           />
         </div>
       );

package/components/shortcuts-hint-ng/shortcuts-hint-ng.css

@@ -43,7 +43,7 @@
 
   height: calc(unit / 2);
 
-  content: '';
+  content: "";
 }
 
 :global(.shortcuts-hint__search-input-wrapper) {

package/components/shortcuts-hint-ng/shortcuts-hint-ng.js

@@ -10,7 +10,7 @@ import IconNg from '../icon-ng/icon-ng';
 import InputNg from '../input-ng/input-ng';
 import {getShortcutTitle} from '../shortcuts/shortcut-title';
 
-import HintPopupTpl from './shortcuts-hint-ng.html';
+import HintPopupTpl from './shortcuts-hint-ng__template';
 import './shortcuts-hint-ng.css';
 
 /**

package/components/shortcuts-hint-ng/{shortcuts-hint-ng.html → shortcuts-hint-ng__template.js}

@@ -1,4 +1,4 @@
-<div class="shortcuts-hint">
+export default `<div class="shortcuts-hint">
 
   <div class="shortcuts-hint__search-input-wrapper">
     <rg-input
@@ -45,4 +45,4 @@
 
   <div rg-template="hintPopupCtrl.tailTemplate"></div>
 
-</div>
+</div>`;

package/components/sidebar/sidebar.css

@@ -63,6 +63,7 @@
   width: calc(6 * unit);
   height: calc(6 * unit);
   object-fit: contain;
+
   padding: 0 calc(2 * unit) 0 calc(4 * unit);
 }
 

package/components/sidebar-ng/sidebar-ng.js

@@ -10,6 +10,10 @@ import ButtonNG from '../button-ng/button-ng';
 
 import '../sidebar/sidebar.css';
 
+import template from './sidebar-ng__template';
+
+import buttonTemplate from './sidebar-ng__button-template';
+
 /**
  * @name Sidebar Ng
  */
@@ -66,7 +70,7 @@ function rgSidebarDirective() {
       topOffset: '=?',
       dialogIsActive: '=?'
     },
-    template: require('./sidebar-ng.html'),
+    template,
     controllerAs: 'sidebar'
   };
 }
@@ -85,7 +89,7 @@ function rgSidebarToggleButtonDirective() {
       model: '=',
       dialogIsActive: '=?'
     },
-    template: require('./sidebar-ng__button.html'),
+    template: buttonTemplate,
     controllerAs: 'button'
   };
 }

package/components/sidebar-ng/{sidebar-ng__button.html → sidebar-ng__button-template.js}

@@ -1,4 +1,4 @@
-<span>
+export default `<span>
   <rg-button
     ng-click="button.model = !button.model"
     ng-disabled="button.dialogIsActive"
@@ -15,4 +15,4 @@
 
     <span ng-transclude></span>
   </rg-button>
-</span>
+</span>`;

package/components/sidebar-ng/{sidebar-ng.html → sidebar-ng__template.js}

@@ -1,4 +1,4 @@
-<div
+export default `<div
   class="ring-sidebar"
   rg-place-under="{{sidebar.placeUnderSibling}}"
   place-top-offset="{{sidebar.topOffset}}"
@@ -7,4 +7,4 @@
 >
   <rg-dialog in-sidebar="true" active="sidebar.dialogIsActive"></rg-dialog>
   <div class="ring-sidebar__content" ng-transclude ng-if="!sidebar.dialogIsActive"></div>
-</div>
+</div>`;

package/components/table/header.js

@@ -10,7 +10,6 @@ import getUID from '../global/get-uid';
 import style from './table.css';
 import HeaderCell from './header-cell';
 
-const waypointChild = <tr data-test="ring-table-header-row"/>;
 
 export default class Header extends PureComponent {
   static propTypes = {
@@ -123,6 +122,15 @@ export default class Header extends PureComponent {
 
     const regularCells = this.createCells();
 
+    const waypointChild = (
+      <tr data-test="ring-table-header-row">
+        {/*Since we need to keep the exact amount of columns in each row, we need to present them even being empty*/}
+        {/*regularCells doesn't provide any other information than a list of components. Hence using array indexes as keys looks like a sane idea*/}
+        {/*eslint-disable-next-line react/no-array-index-key*/}
+        {regularCells.map((c, i) => <td key={i}/>)}
+      </tr>
+    );
+
     return (
       <thead id={this.id} data-test="ring-table-header" className={style.tableHead}>
         {caption && (

package/components/table/row.js

@@ -214,10 +214,11 @@ export default class Row extends PureComponent {
       const getDataTest = column.getDataTest || (() => column.id);
       const value = getValue(item, column);
       const cellClasses = classNames({[style.cellRight]: column.rightAlign}, column.className);
+      const showMetaColumn = draggable || selectable || showDisabledSelection || !!level;
 
       return (
         <Cell key={column.id} className={cellClasses} data-test={getDataTest(item, column)}>
-          {index === 0 && (draggable || selectable || showDisabledSelection) && metaColumn}
+          {index === 0 && (showMetaColumn) && metaColumn}
           {value}
         </Cell>
       );

package/components/table/table.css

@@ -137,7 +137,8 @@
   line-height: compensated;
 }
 
-@nest .table:not(.disabledHover) &:hover .row {
+/* stylelint-disable-next-line selector-max-specificity */
+.table:not(.disabledHover) .row:hover {
   background-color: var(--ring-hover-background-color);
 }
 

package/components/table-legacy/table-legacy.css

@@ -75,7 +75,7 @@
 }
 
 :global(.ring-table__title_border::after) {
-  content: '';
+  content: "";
 }
 
 :global(.ring-table__title_nested) {
@@ -239,7 +239,7 @@
 }
 
 :global(.ring-table__column-list:not(:last-child)::after) {
-  content: ', ';
+  content: ", ";
 }
 
 :global(.ring-table__row) {

package/components/table-legacy/table-legacy__toolbar.css

@@ -17,9 +17,9 @@
 
   background: inherit;
 
-  &.ring-table__toolbar-controls_fixed {
+  &:global(.ring-table__toolbar-controls_fixed) {
     position: fixed;
-    z-index: calc(var(--ring-fixed-z-index) + 1px);
+    z-index: calc(var(--ring-fixed-z-index) + 1);
     top: 0;
     right: 0;
     left: 0;

package/components/table-legacy-ng/table-legacy-ng.js

@@ -26,7 +26,7 @@ angularModule.directive('rgLegacyTable', function rgLegacyTableDirective() {
   return {
     restrict: 'E',
     transclude: true,
-    template: require('./table-legacy-ng.html'),
+    template: '<div><table class="ring-table" ng-transclude></table></div>',
     controllerAs: 'ctrl',
 
     /**
@@ -79,7 +79,10 @@ angularModule.directive('rgLegacyTableHeader',
 
     return {
       restrict: 'E',
-      template: require('./table-legacy-ng__header.html'),
+      template: `<thead>
+  <tr class="ring-table__header" ng-transclude></tr>
+  <tr class="ring-table__header ring-table__header_sticky" rg-place-under="{{stickToSelector}}" ng-transclude></tr>
+</thead>`,
       transclude: true,
       replace: true,
       link: function link(scope, iElement, iAttrs) {
@@ -156,7 +159,18 @@ angularModule.directive('rgLegacyTableBody', function rgLegacyTableBodyDirective
 
 angularModule.directive('rgLegacyTableRow', function rgLegacyTableRowDirective() {
   return {
-    template: require('./table-legacy-ng__row.html'),
+    template: `<tr ng-click="rowCtrl.setActiveItem(rowCtrl.rowItem)"
+  ng-mouseover="rowCtrl.onMouseOver(rowCtrl.rowItem)"
+  ng-mouseout="rowCtrl.onMouseOut(rowCtrl.rowItem)"
+  class="ring-table__row" ng-class="{
+    'ring-table__row_active': rowCtrl.rowItem.active,
+    'ring-table__row_checked': rowCtrl.rowItem.checked,
+    'ring-table__row_active-checked': rowCtrl.rowItem.active && !rowCtrl.hasCheckedItems(),
+    'ring-table__row_implicit': rowCtrl.rowItem.implicit,
+    'ring-table__row_expanded': rowCtrl.rowItem.expanded,
+    'ring-table__row_unselectable': rowCtrl.rowItem.unselectable
+    }" ng-transclude>
+</tr>`,
     restrict: 'E',
     transclude: true,
     replace: true,
@@ -333,7 +347,15 @@ angularModule.directive('rgLegacyTableTitle', function rgLegacyTableTitleDirecti
     transclude: true,
     replace: true,
     scope: true,
-    template: require('./table-legacy-ng__title.html'),
+    template: `<th class="ring-table__title"
+    ng-class="{
+    'ring-table__title_border': isBorder,
+    'ring-table__title_active': isActive,
+    'ring-table__column_snuggle-right': isPullRight,
+    'ring-table__column_snuggle-left': isPullLeft,
+    'ring-table__column_align-right' : isAlignRight
+    }" ng-transclude>
+</th>`,
 
     link: function link(scope, iElement, iAttrs) {
       /**
@@ -362,7 +384,18 @@ angularModule.directive('rgLegacyTableColumn', function rgLegacyTableColumnDirec
     transclude: true,
     replace: true,
     scope: true,
-    template: require('./table-legacy-ng__column.html'),
+    template: `<td class="ring-table__column"
+    ng-class="{
+    'ring-table__column_limited': isLimited,
+    'ring-table__column_unlimited': isUnlimited,
+    'ring-table__column_right': isAlignRight,
+    'ring-table__avatar': isAvatar,
+    'ring-table__column_wide': isWide,
+    'ring-table__column_gray': isGray,
+    'ring-table__column_snuggle-right': isPullRight,
+    'ring-table__column_snuggle-left': isPullLeft
+    }" ng-transclude>
+</td>`,
 
     link: function link(scope, iElement, iAttrs) {
       const element = iElement[0];

package/components/table-legacy-ng/table-legacy-ng__pager.js

@@ -7,7 +7,13 @@ const angularModule = angular.module('Ring.table-legacy.pager', [MessageBundle,
 angularModule.directive('rgLegacyTablePager', function rgLegacyTablePagerDirective() {
   return {
     restrict: 'E',
-    template: require('./table-legacy-ng__pager.html'),
+    template: `<rg-pager
+  total="pagerCtrl.total"
+  current-page="pagerCtrl.getPage()"
+  page-size="pagerCtrl.top"
+  on-page-change="pagerCtrl.onPageChange"
+  disable-page-size-selector="true"
+></rg-pager>`,
     scope: {},
     bindToController: {
       skip: '=',

package/components/tabs/collapsible-tab.js

@@ -10,13 +10,13 @@ import {CustomItem} from './custom-item';
 
 function noop() {}
 
-const TabTitle = React.memo(({
+const TabTitle = React.memo(function TabTitle({
   selected,
   child,
   handleSelect = noop,
   collapsed = false,
   tabIndex
-}) => {
+}) {
   if (child == null || typeof child !== 'object' || child.type === CustomItem) {
     return child;
   }

package/components/tabs/collapsible-tabs.js

@@ -199,7 +199,7 @@ export const CollapsibleTabs = ({
   // Initial measure for tabs and more button sizes
   React.useEffect(() => {
     if (measureRef.current == null) {
-      return;
+      return undefined;
     }
 
     const measureTask = fastdom.measure(() => {
@@ -220,10 +220,8 @@ export const CollapsibleTabs = ({
         return width + +marginLeft.replace('px', '') + +marginRight.replace('px', '');
       });
 
-      // eslint-disable-next-line no-param-reassign
-      const newSummaryWidth = tabsWidth.reduce((acc, curr) => (acc += curr), 0);
-      // eslint-disable-next-line no-param-reassign
-      const oldSummaryWidth = elements.sizes.tabs.reduce((acc, curr) => (acc += curr), 0);
+      const newSummaryWidth = tabsWidth.reduce((acc, curr) => (acc + curr), 0);
+      const oldSummaryWidth = elements.sizes.tabs.reduce((acc, curr) => (acc + curr), 0);
 
       if (elements.sizes.more !== moreButtonWidth || newSummaryWidth !== oldSummaryWidth) {
         fastdom.mutate(() =>
@@ -232,7 +230,6 @@ export const CollapsibleTabs = ({
       }
     });
 
-    // eslint-disable-next-line consistent-return
     return () => {
       fastdom.clear(measureTask);
     };
@@ -244,7 +241,7 @@ export const CollapsibleTabs = ({
     let resizeObserver = null;
 
     if (measureRef.current === null) {
-      return;
+      return undefined;
     }
 
     resizeObserver = new ResizeObserver(entries => {
@@ -256,7 +253,6 @@ export const CollapsibleTabs = ({
 
     resizeObserver.observe(measureRef.current);
 
-    // eslint-disable-next-line consistent-return
     return () => {
       fastdom.clear(measureTask);
       resizeObserver.disconnect();
@@ -274,7 +270,7 @@ export const CollapsibleTabs = ({
 
   return (
     <div className={styles.autoCollapseContainer}>
-      <div className={className}>
+      <div className={classNames(className, styles.rendered)}>
         {visibleElements}
         <MoreButton
           moreClassName={moreClassName}

package/components/tabs/tab-link.js

@@ -13,11 +13,13 @@ function TabLink({isSelected, title, collapsed, ...restProps}) {
   return (
     <Link {...restProps}>
       {() => (
-        <>
+        <div className={styles.container}>
           <span className={styles.visible}>{renderedTitle}</span>
           {/* hack for preserving constant tab width*/}
           <span className={styles.hidden}>{renderedTitle}</span>
-        </>
+          <span className={styles.hiddenBold}>{renderedTitle}</span>
+          <span className={styles.hiddenRegular}>{renderedTitle}</span>
+        </div>
       )}
     </Link>
   );

package/components/tabs/tabs.css

@@ -66,6 +66,11 @@
   }
 }
 
+.title.titleLegacy {
+  display: inline-flex;
+  flex-direction: column;
+}
+
 .title + .title {
   margin-left: calc(unit * 3);
 }
@@ -112,12 +117,34 @@
   text-align: center;
 }
 
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
 .hidden {
+  display: flex;
+  visibility: hidden;
+}
+
+.hiddenBold {
+  display: flex;
   visibility: hidden;
 
+  height: 0;
+
   font-weight: bold;
 }
 
+.hiddenRegular {
+  display: flex;
+  visibility: hidden;
+
+  height: 0;
+
+  font-weight: normal;
+}
+
 .tabCounter {
   padding-left: 8px;
 
@@ -142,15 +169,15 @@
   max-width: 100%;
 }
 
-.autoCollapse.adjusted {
-  visibility: visible;
-  overflow: visible;
-}
-
 .autoCollapse .title {
   flex-shrink: 0;
 }
 
+.rendered.adjusted {
+  visibility: visible;
+  overflow: visible;
+}
+
 .measure {
   position: absolute;
   top: 0;

package/components/tabs-ng/tabs-ng.js

@@ -5,6 +5,8 @@ import className from 'classnames';
 import styles from '../tabs/tabs.css';
 import Theme from '../global/theme';
 
+import template from './tabs-ng__template';
+
 /**
  * @name Tabs Ng
  */
@@ -15,7 +17,7 @@ angularModule.directive('rgTabs', function rgTabsDirective($location, $rootScope
   return {
     restrict: 'E',
     transclude: true,
-    template: require('./tabs-ng.html'),
+    template,
     replace: true,
 
     scope: {
@@ -161,7 +163,7 @@ angularModule.directive('rgTabs', function rgTabsDirective($location, $rootScope
       // 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 => className(styles.title, {
+      $scope.tabClass = pane => className(styles.title, styles.titleLegacy, {
         [styles.selected]: pane.selected
       });
 

package/components/tabs-ng/{tabs-ng.html → tabs-ng__template.js}

@@ -1,4 +1,4 @@
-<div
+export default `<div
   ng-class=":: [styles.tabs, styles[theme]]"
   rg-shortcuts="ring-tabs"
   shortcuts-map="keyMap"
@@ -26,9 +26,13 @@
       hack for preserving constant tab width
     --><span ng-class=":: styles.hidden">{{pane.title}}<span
       ng-class=":: styles.tabCounter" ng-show="pane.counter !== undefined">{{ pane.counter }}</span></span>
+      <span ng-class=":: styles.hiddenBold">{{pane.title}}<span
+        ng-class=":: styles.tabCounter" ng-show="pane.counter !== undefined">{{ pane.counter }}</span></span>
+      <span ng-class=":: styles.hiddenRegular">{{pane.title}}<span
+        ng-class=":: styles.tabCounter" ng-show="pane.counter !== undefined">{{ pane.counter }}</span></span>
     </button>
   </div>
 
   <div ng-transclude></div>
 
-</div>
+</div>`;