Added portalHost prop to DatePicker component.

When passed a shadow root through the portalHost prop, all portals will be created as children of that shadow root. This enables style encapsulation for consumers that are using the shadow DOM.

Author: colinthesealion

docs/datepicker.md

@@ -93,6 +93,8 @@ General datepicker component.
 | `value`                      | `string`                       |                 |                                                                                               |
 | `weekLabel`                  | `string`                       |                 |                                                                                               |
 | `withPortal`                 | `bool`                         | `false`         |                                                                                               |
+| `portalId`                   | `string`                       |                 |                                                                                               |
+| `portalHost`                 | `instanceOf(ShadowRoot)`       |                 | When set, portals will be attached to this ShadowRoot instead of the document body.           |
 | `wrapperClassName`           | `string`                       |
 |                              |
 | `yearItemNumber`             | `number`                       | `12`            |                                                                                               |

docs/popper_component.md

@@ -12,5 +12,6 @@
 | `popperPlacement`  | `enumpopperPlacementPositions` | `"bottom-start"` |             |
 | `popperProps`      | `object`                       | `{}`             |             |
 | `portalId`         | `string`                       |                  |             |
+| `portalHost`       | `instanceOf(ShadowRoot)`       |                  |             |
 | `targetComponent`  | `element`                      |                  |             |
 | `wrapperClassName` | `string`                       |                  |             |

docs/portal.md

@@ -1,8 +1,7 @@
-`portal` (component)
-====================
+# `portal` (component)
 
-
-| name  | type  | default value  | description  |
-|---|---|---|---|
-|`children`|`any`|||
-|`portalId`|`string`|||
+| name         | type                     | default value | description |
+| ------------ | ------------------------ | ------------- | ----------- |
+| `children`   | `any`                    |               |             |
+| `portalId`   | `string`                 |               |             |
+| `portalHost` | `instanceOf(ShadowRoot)` |               |             |

src/index.jsx

@@ -227,6 +227,7 @@ export default class DatePicker extends React.Component {
     weekLabel: PropTypes.string,
     withPortal: PropTypes.bool,
     portalId: PropTypes.string,
+    portalHost: PropTypes.instanceOf(ShadowRoot),
     yearItemNumber: PropTypes.number,
     yearDropdownItemNumber: PropTypes.number,
     shouldCloseOnSelect: PropTypes.bool,
@@ -1048,7 +1049,12 @@ export default class DatePicker extends React.Component {
 
       if (this.state.open && this.props.portalId) {
         portalContainer = (
-          <Portal portalId={this.props.portalId}>{portalContainer}</Portal>
+          <Portal
+            portalId={this.props.portalId}
+            portalHost={this.props.portalHost}
+          >
+            {portalContainer}
+          </Portal>
         );
       }
 
@@ -1066,6 +1072,7 @@ export default class DatePicker extends React.Component {
         wrapperClassName={this.props.wrapperClassName}
         hidePopper={!this.isCalendarOpen()}
         portalId={this.props.portalId}
+        portalHost={this.props.portalHost}
         popperModifiers={this.props.popperModifiers}
         targetComponent={this.renderInputContainer()}
         popperContainer={this.props.popperContainer}

src/popper_component.jsx

@@ -31,6 +31,7 @@ export default class PopperComponent extends React.Component {
     enableTabLoop: PropTypes.bool,
     popperOnKeyDown: PropTypes.func,
     portalId: PropTypes.string,
+    portalHost: PropTypes.instanceOf(ShadowRoot),
   };
 
   render() {
@@ -46,6 +47,7 @@ export default class PopperComponent extends React.Component {
       enableTabLoop,
       popperOnKeyDown,
       portalId,
+      portalHost,
     } = this.props;
 
     let popper;
@@ -79,7 +81,11 @@ export default class PopperComponent extends React.Component {
     }
 
     if (portalId && !hidePopper) {
-      popper = <Portal portalId={portalId}>{popper}</Portal>;
+      popper = (
+        <Portal portalId={portalId} portalHost={portalHost}>
+          {popper}
+        </Portal>
+      );
     }
 
     const wrapperClasses = classnames(

src/portal.jsx

@@ -6,6 +6,7 @@ export default class Portal extends React.Component {
   static propTypes = {
     children: PropTypes.any,
     portalId: PropTypes.string,
+    portalHost: PropTypes.instanceOf(ShadowRoot),
   };
 
   constructor(props) {
@@ -14,11 +15,13 @@ export default class Portal extends React.Component {
   }
 
   componentDidMount() {
-    this.portalRoot = document.getElementById(this.props.portalId);
+    this.portalRoot = (this.props.portalHost || document).getElementById(
+      this.props.portalId
+    );
     if (!this.portalRoot) {
       this.portalRoot = document.createElement("div");
       this.portalRoot.setAttribute("id", this.props.portalId);
-      document.body.appendChild(this.portalRoot);
+      (this.props.portalHost || document.body).appendChild(this.portalRoot);
     }
     this.portalRoot.appendChild(this.el);
   }

test/datepicker_test.js

@@ -112,6 +112,21 @@ describe("DatePicker", () => {
     expect(datePicker.calendar).to.exist;
   });
 
+  it("should render the calendar in the portalHost prop when provided", () => {
+    var root = document.createElement("div");
+    var shadow = root.attachShadow({ mode: "closed" });
+    var appHost = document.createElement("div");
+    shadow.appendChild(appHost);
+    var datePicker = ReactDOM.render(
+      <DatePicker portalId="test-portal" portalHost={shadow} />,
+      appHost
+    );
+    var dateInput = datePicker.input;
+    TestUtils.Simulate.click(ReactDOM.findDOMNode(dateInput));
+    expect(datePicker.calendar).to.exist;
+    expect(shadow.getElementById("test-portal")).to.exist;
+  });
+
   it("should not set open state when it is disabled and gets clicked", function () {
     var datePicker = TestUtils.renderIntoDocument(<DatePicker disabled />);
     var dateInput = datePicker.input;