Merge branch 'master' into dependencies.io-update-build-422.1.0

components/icon/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@ring-ui/icon",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "index.js",
   "scripts": {
     "prepublish": "node generate-exports"

components/popup/popup.test.js

@@ -67,8 +67,7 @@ describe('Popup', () => {
     it('should be closed by click outside the element after show', () => {
       const onCloseAttempt = sandbox.stub();
       const wrapper = mountPopup({
-        onCloseAttempt,
-        ...this.state
+        onCloseAttempt
       });
 
       wrapper.setProps({hidden: false}, () => {

components/query-assist/query-assist.css

@@ -2,6 +2,7 @@
 
 @value unit from "../global/global.css";
 @value overInputZIndex: 2;
+@value inputGap: calc(unit * 3);
 
 .light {
   &.queryAssist {
@@ -209,11 +210,15 @@
   }
 
   &.inputGap {
-    border-right-width: calc(unit * 3);
+    border-right-width: inputGap;
+  }
+
+  &.inputGap2 {
+    border-right-width: calc(2 * inputGap);
   }
 
   &.inputLeftGap {
-    border-left-width: calc(unit * 3);
+    border-left-width: inputGap;
   }
 
   &.inputDisabled {
@@ -258,6 +263,13 @@
   display: inline;
 }
 
+.actions {
+  position: absolute;
+  z-index: overInputZIndex;
+  top: 2px;
+  right: 1px;
+}
+
 .icon {
   position: absolute;
   z-index: overInputZIndex;
@@ -274,6 +286,11 @@
   & svg {
     vertical-align: baseline;
   }
+
+  @nest .actions & {
+    position: relative;
+    top: auto;
+  }
 }
 
 .loaderOnTheRight {
@@ -282,10 +299,6 @@
   left: auto;
 }
 
-.iconClear {
-  right: 1px;
-}
-
 .iconGlass {
   left: 1px;
 }

components/query-assist/query-assist.examples.html

@@ -285,3 +285,70 @@
     );
   </file>
 </example>
+
+<example name="QueryAssistWithCustomActions">
+  <file type="html" disable-auto-size>
+    <div id="example">
+    </div>
+
+    <div class="example-dark" id="example-dark">
+    </div>
+  </file>
+
+  <file type="js">
+    import React from 'react';
+    import {render} from 'react-dom';
+    import hubConfig from '@ring-ui/docs/components/hub-config';
+    import { PermissionIcon } from '@jetbrains/ring-ui/components/icon';
+
+    import QueryAssist from '@jetbrains/ring-ui/components/query-assist/query-assist';
+    import Auth from '@jetbrains/ring-ui/components/auth/auth';
+    import HTTP from '@jetbrains/ring-ui/components/http/http';
+
+    const log = obj => {
+    const div = document.createElement('div');
+    div.innerHTML = JSON.stringify(obj);
+    document.getElementById('example').appendChild(div);
+    };
+
+    const auth = new Auth(hubConfig);
+    const http = new HTTP(auth, auth.getAPIPath());
+
+    const dataSource = props => {
+    const params = {
+    query: {
+    ...props,
+    fields: 'query,caret,styleRanges' + (props.omitSuggestions ? '' : ',suggestions')
+    }
+    }
+
+    return http.get('users/queryAssist', params);
+    }
+
+    const actions = [
+      <PermissionIcon
+        key="custom-action"
+        size={PermissionIcon.Size.Size16}
+      />,
+    ];
+    auth.init().then(() => {
+    render(
+    <QueryAssist
+      query="test"
+      placeholder="placeholder"
+      popupClassName="popupClassNameTest"
+      glass
+      clear
+      onApply={log}
+      focus
+      hint="lol"
+      hintOnSelection="lol selected"
+      popupClassName="test"
+      dataSource={dataSource}
+      actions={actions}
+    />,
+    document.getElementById('example')
+    );
+    });
+  </file>
+</example>

components/query-assist/query-assist.js

@@ -129,6 +129,7 @@ export default class QueryAssist extends Component {
     query: PropTypes.string,
     useCustomItemRender: PropTypes.bool,
     translations: PropTypes.object,
+    actions: PropTypes.array,
     'data-test': PropTypes.string
   };
 
@@ -760,17 +761,39 @@ export default class QueryAssist extends Component {
     end: noop
   };
 
+  renderActions() {
+    const actions = [].concat(this.props.actions || []);
+    const renderClear = this.props.clear && !!this.state.query;
+
+    if (renderClear) {
+      actions.push(
+        <CloseIcon
+          key={'clearAction'}
+          className={classNames(styles.icon)}
+          title={this.props.translations.clearTitle}
+          iconRef={this.clearRef}
+          onClick={this.clearQuery}
+          size={CloseIcon.Size.Size16}
+          data-test="query-assist-clear-icon"
+        />
+      );
+    }
+
+    return actions;
+  }
+
   render() {
     const {theme, glass, 'data-test': dataTest, useCustomItemRender} = this.props;
     const renderPlaceholder = !!this.props.placeholder && this.state.placeholderEnabled;
-    const renderClear = this.props.clear && !!this.state.query;
     const renderLoader = this.props.loader !== false && this.state.loading;
     const renderGlass = glass && !renderLoader;
     const renderUnderline = theme === Theme.DARK;
+    const actions = this.renderActions();
 
     const inputClasses = classNames({
       [`${styles.input} ring-js-shortcuts`]: true,
-      [styles.inputGap]: renderClear,
+      [styles.inputGap]: actions.length,
+      [styles.inputGap2]: actions.length === 2, // TODO: replace with flex-box layout
       [styles.inputLeftGap]: this.isRenderingGlassOrLoader(),
       [styles.inputDisabled]: this.props.disabled
     });
@@ -846,16 +869,7 @@ export default class QueryAssist extends Component {
           </span>
         )}
         {renderUnderline && <div className={styles.focusUnderline}/>}
-        {renderClear && (
-          <CloseIcon
-            className={classNames(styles.icon, styles.iconClear)}
-            title={this.props.translations.clearTitle}
-            iconRef={this.clearRef}
-            onClick={this.clearQuery}
-            size={CloseIcon.Size.Size16}
-            data-test="query-assist-clear-icon"
-          />
-        )}
+        {actions && <div className={styles.actions}>{actions}</div>}
         <PopupMenu
           hidden={!this.state.showPopup}
           onCloseAttempt={this.closePopup}

components/query-assist/query-assist.test.js

@@ -639,4 +639,19 @@ describe('Query Assist', () => {
 
     });
   });
+
+
+  describe('custom actions', () => {
+    it('should allow to pass custom actions', () => {
+      const wrapper = mountQueryAssist({
+        actions: [
+          <div id={'A'} key={'A'}/>,
+          <div id={'B'} key={'B'}/>
+        ]
+      });
+
+      wrapper.find('#A').should.exist;
+      wrapper.find('#B').should.exist;
+    });
+  });
 });

components/select/select.test.js

@@ -985,46 +985,47 @@ describe('Select', () => {
 
     describe('Focus after close', () => {
       let instance;
+      let targetInput;
       beforeEach(() => {
-        this.targetInput = document.createElement('input');
-        document.body.appendChild(this.targetInput);
+        targetInput = document.createElement('input');
+        document.body.appendChild(targetInput);
 
         mountSelectToContainer({
           data: testData,
           filter: true,
-          targetElement: this.targetInput
+          targetElement: targetInput
         });
         instance = mountWrapper.instance();
 
         instance._showPopup();
       });
 
       afterEach(() => {
-        document.body.removeChild(this.targetInput);
-        this.targetInput = null;
+        document.body.removeChild(targetInput);
+        targetInput = null;
       });
 
       it('Should restore focus on provided target element after closing popup', () => {
         instance._hidePopup(true);
 
-        this.targetInput.should.equal(document.activeElement);
+        targetInput.should.equal(document.activeElement);
       });
 
       it('Should restore focus on provided target element after closing popup with keyboard', () => {
         simulateCombo('esc');
-        this.targetInput.should.equal(document.activeElement);
+        targetInput.should.equal(document.activeElement);
       });
 
       it('Should not restore focus on provided target element after closing popup with not keyboard event', () => {
         Simulate.click(document.body);
 
-        this.targetInput.should.not.equal(document.activeElement);
+        targetInput.should.not.equal(document.activeElement);
       });
 
       it('Should not restore focus on provided target element after closing popup', () => {
         instance._hidePopup();
 
-        this.targetInput.should.not.equal(document.activeElement);
+        targetInput.should.not.equal(document.activeElement);
       });
     });