@jetbrains/ring-ui 5.0.134 → 5.0.136

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

@@ -33,6 +33,12 @@
 
   font-size: inherit;
 
+  @nest .disabled & {
+    user-select: text;
+
+    border-radius: 0;
+  }
+
   &:focus {
     outline: 1px solid var(--ring-border-hover-color);
   }

package/components/global/angular-component-factory.js

@@ -27,14 +27,19 @@ function createAngularComponent(Component) {
     $postLink() {
       const {$transclude} = this.$inject;
 
+
       $transclude(clone => {
-        this.innerNodes = Array.from(clone);
+        this.container = document.createElement('div');
+
+        for (let i = 0; i < clone.length; i++) {
+          this.container.appendChild(clone[i]);
+        }
         this.render();
       });
     }
 
     $onChanges() {
-      if (!this.innerNodes) {
+      if (!this.container) {
         return;
       }
       this.render();
@@ -62,11 +67,11 @@ function createAngularComponent(Component) {
         }
       });
 
-      const hasInnerContent = this.innerNodes && this.innerNodes.length;
+      const hasInnerContent = this.container.hasChildNodes();
 
       render(
         <Component {...props}>
-          {hasInnerContent ? <DomRenderer nodes={this.innerNodes}/> : null}
+          {hasInnerContent ? <DomRenderer nodes={this.container.childNodes}/> : null}
         </Component>,
         container
       );

package/components/global/angular-component-factory.test.js

@@ -4,7 +4,7 @@ import angular from 'angular';
 import 'angular-mocks';
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {Simulate} from 'react-dom/test-utils';
+import {act, Simulate} from 'react-dom/test-utils';
 
 import angularComponentFactory from './angular-component-factory';
 
@@ -13,7 +13,8 @@ class TestComponent extends PureComponent {
     id: PropTypes.string,
     someObj: PropTypes.object,
     onClick: PropTypes.func,
-    className: PropTypes.string
+    className: PropTypes.string,
+    children: PropTypes.node
   };
 
   static defaultProps = {
@@ -23,15 +24,18 @@ class TestComponent extends PureComponent {
   handleClick = () => this.props.onClick('payload');
 
   render() {
-    const {id, someObj, className} = this.props;
+    const {id, someObj, className, children} = this.props;
     return (
-      <button
-        type="button"
-        id={id}
-        data-some-obj={someObj.foo}
-        onClick={this.handleClick}
-        className={className}
-      />
+      <>
+        <button
+          type="button"
+          id={id}
+          data-some-obj={someObj.foo}
+          onClick={this.handleClick}
+          className={className}
+        />
+        {children}
+      </>
     );
   }
 }
@@ -115,4 +119,20 @@ describe('angularComponentFactory', () => {
     $rootScope.callback.should.have.been.called;
     $rootScope.callback.should.have.been.calledWith('payload');
   });
+
+  it('should support ng-if in nested content', () => {
+    let $element = null;
+    act(() => {
+      $element = $compile(`
+<rg-test-component>
+  <span data-test="hello">HELLO</span>
+</rg-test-component>`
+      )($rootScope);
+    });
+
+    const component = $element[0].querySelector('[data-test~=hello]');
+    $rootScope.$digest();
+
+    should.exist(component);
+  });
 });

package/components/global/react-dom-renderer.d.ts

@@ -2,12 +2,12 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 export interface RendererProps {
     className?: string | undefined;
-    nodes: readonly Node[];
+    nodes: readonly Node[] | NodeList;
 }
 export default class Renderer extends Component<RendererProps> {
     static propTypes: {
         className: PropTypes.Requireable<string>;
-        nodes: PropTypes.Requireable<any[]>;
+        nodes: PropTypes.Requireable<object>;
     };
     componentDidMount(): void;
     node?: HTMLElement | null;

package/components/global/react-dom-renderer.js

@@ -3,16 +3,16 @@ import PropTypes from 'prop-types';
 class Renderer extends Component {
     static propTypes = {
         className: PropTypes.string,
-        nodes: PropTypes.array
+        nodes: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
     };
     componentDidMount() {
+        const { node } = this;
         const { nodes } = this.props;
-        if (!this.node || !nodes || !nodes.length) {
+        if (!node || !nodes || !nodes.length) {
             return;
         }
-        const fragment = document.createDocumentFragment();
-        nodes.forEach(nodeToRender => fragment.appendChild(nodeToRender));
-        this.node.appendChild(fragment);
+        Array.from(this.props.nodes).
+            forEach(nodeToRender => node.appendChild(nodeToRender));
     }
     node;
     nodeRef = (node) => {

package/dist/global/angular-component-factory.js

@@ -23,12 +23,15 @@ function createAngularComponent(Component) {
         $transclude
       } = this.$inject;
       $transclude(clone => {
-        this.innerNodes = Array.from(clone);
+        this.container = document.createElement('div');
+        for (let i = 0; i < clone.length; i++) {
+          this.container.appendChild(clone[i]);
+        }
         this.render();
       });
     }
     $onChanges() {
-      if (!this.innerNodes) {
+      if (!this.container) {
         return;
       }
       this.render();
@@ -58,9 +61,9 @@ function createAngularComponent(Component) {
           }
         }
       });
-      const hasInnerContent = this.innerNodes && this.innerNodes.length;
+      const hasInnerContent = this.container.hasChildNodes();
       render( /*#__PURE__*/React.createElement(Component, props, hasInnerContent ? /*#__PURE__*/React.createElement(Renderer, {
-        nodes: this.innerNodes
+        nodes: this.container.childNodes
       }) : null), container);
     }
   }

package/dist/global/react-dom-renderer.d.ts

@@ -2,12 +2,12 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 export interface RendererProps {
     className?: string | undefined;
-    nodes: readonly Node[];
+    nodes: readonly Node[] | NodeList;
 }
 export default class Renderer extends Component<RendererProps> {
     static propTypes: {
         className: PropTypes.Requireable<string>;
-        nodes: PropTypes.Requireable<any[]>;
+        nodes: PropTypes.Requireable<object>;
     };
     componentDidMount(): void;
     node?: HTMLElement | null;

package/dist/global/react-dom-renderer.js

@@ -4,18 +4,19 @@ import PropTypes from 'prop-types';
 class Renderer extends Component {
   static propTypes = {
     className: PropTypes.string,
-    nodes: PropTypes.array
+    nodes: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
   };
   componentDidMount() {
+    const {
+      node
+    } = this;
     const {
       nodes
     } = this.props;
-    if (!this.node || !nodes || !nodes.length) {
+    if (!node || !nodes || !nodes.length) {
       return;
     }
-    const fragment = document.createDocumentFragment();
-    nodes.forEach(nodeToRender => fragment.appendChild(nodeToRender));
-    this.node.appendChild(fragment);
+    Array.from(this.props.nodes).forEach(nodeToRender => node.appendChild(nodeToRender));
   }
   node;
   nodeRef = node => {