fix(react-grid-bootstrap3): repair column chooser positioning (#740)

Author: gsobolev

packages/dx-react-grid-bootstrap3/src/templates/column-chooser/overlay.jsx

@@ -1,23 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Overlay as OverlayBS3 } from 'react-bootstrap';
-
-const Popover = ({ children }) => (
-  <div
-    className="dropdown-menu"
-    style={{
-      padding: 0,
-      display: 'block',
-      border: 'none',
-    }}
-  >
-    {children}
-  </div>
-);
-
-Popover.propTypes = {
-  children: PropTypes.node.isRequired,
-};
+import { Popover } from './popover';
 
 export const Overlay = ({
   visible, target,

packages/dx-react-grid-bootstrap3/src/templates/column-chooser/popover.jsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+
+export const Popover = ({ children, style }) => (
+  <div
+    className="dropdown-menu"
+    style={{
+      padding: 0,
+      display: 'block',
+      border: 'none',
+      ...style,
+    }}
+  >
+    {children}
+  </div>
+);
+
+Popover.propTypes = {
+  children: PropTypes.node.isRequired,
+  style: PropTypes.object,
+};
+
+Popover.defaultProps = {
+  style: null,
+};

packages/dx-react-grid-bootstrap3/src/templates/column-chooser/popover.test.jsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { Popover } from './popover';
+
+describe('Popover', () => {
+  it('should pass styles to the root element', () => {
+    const tree = shallow((
+      <Popover
+        style={{ left: 100, top: 50 }}
+      >
+        <div />
+      </Popover>
+    ));
+
+    expect(tree.prop('style'))
+      .toMatchObject({ left: 100, top: 50 });
+  });
+});