chore(core): Add a TetheredSelect component to tether dropdown to body

app/scripts/modules/core/src/presentation/TetheredSelect.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import Select from 'react-select';
+import * as TetherComponent from 'react-tether';
+
+/* from https://github.com/JedWatson/react-select/issues/810#issuecomment-250274937 **/
+export class TetheredSelect extends Select {
+  constructor(props: any) {
+    super(props);
+    (this as any).renderOuter = this._renderOuter;
+  }
+
+  public _renderOuter() {
+    // @ts-ignore - type definitions don't expose renderOuter...
+    const menu = super.renderOuter.apply(this, arguments);
+
+    // Don't return an updated menu render if we don't have one
+    if (!menu) {
+      return null;
+    }
+
+    /* this.wrapper comes from the ref of the main Select component (super.render()) **/
+    const selectWidth = (this as any).wrapper ? (this as any).wrapper.offsetWidth : null;
+
+    return (
+      // @ts-ignore - type definitions don't expose renderOuter...
+      <TetherComponent
+        classes={{ element: 'layer-high' }}
+        attachment="top left"
+        targetAttachment="top left"
+        constraints={[
+          {
+            to: 'window',
+            attachment: 'together',
+            pin: ['top'],
+          },
+        ]}
+      >
+        {/* Apply position:static to our menu so that its parent will get the correct dimensions and we can tether the parent */}
+        <div />
+        {React.cloneElement(menu, { style: { position: 'static', width: selectWidth } })}
+      </TetherComponent>
+    );
+  }
+}

app/scripts/modules/core/src/presentation/index.ts

@@ -4,6 +4,7 @@ export * from './LabelComponent';
 export * from './Markdown';
 export * from './ReactModal';
 export * from './Placement';
+export * from './TetheredSelect';
 export * from './Tooltip';
 export * from './collapsibleSection/CollapsibleSection';
 export * from './forms';

app/scripts/modules/core/src/presentation/main.less

@@ -19,6 +19,11 @@
   height: inherit;
 }
 
+.Select-placeholder,
+.Select--single > .Select-control .Select-value {
+  line-height: 30px;
+}
+
 /* Space out content a bit */
 body {
   font-family: 'Source Sans Pro', sans-serif;

package.json

@@ -30,6 +30,7 @@
     "@fortawesome/fontawesome-free-webfonts": "^1.0.4",
     "@spinnaker/kayenta": "0.0.47",
     "@spinnaker/styleguide": "^1.0.0",
+    "@types/react-tether": "^0.5.3",
     "@uirouter/react-hybrid": "0.1.0",
     "@uirouter/rx": "0.4.5",
     "@uirouter/visualizer": "6.0.0",
@@ -72,6 +73,7 @@
     "react-redux": "^5.0.7",
     "react-select": "^1.2.1",
     "react-sortable-hoc": "^0.6.8",
+    "react-tether": "^0.6.1",
     "react-ultimate-pagination": "^1.2.0",
     "react-virtualized": "9.18.5",
     "react-virtualized-select": "^3.1.3",

yarn.lock

@@ -461,6 +461,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-tether@^0.5.3":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@types/react-tether/-/react-tether-0.5.3.tgz#48ba31358cc0cfadbd05864065ae1bd1b7174529"
+  dependencies:
+    "@types/react" "*"
+    "@types/tether" "*"
+
 "@types/react-virtualized-select@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/react-virtualized-select/-/react-virtualized-select-3.0.3.tgz#6d067824e712a727323e1867ba8e8685c42b798b"
@@ -501,6 +508,10 @@
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-0.2.3.tgz#0888b0f20cc7e58e1c22a1888b4e963eefaa810a"
 
+"@types/tether@*":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@types/tether/-/tether-1.4.3.tgz#bbcb46a35dfbeeaaf60d60afaba3d872b6e1ebf5"
+
 "@types/uglify-js@*":
   version "2.6.28"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-2.6.28.tgz#1499b48ca3a44132250b318cdde25b8f45f0c616"
@@ -10977,6 +10988,13 @@ react-test-renderer@^16.0.0-0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-tether@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/react-tether/-/react-tether-0.6.1.tgz#de64dd81a5e40053a9f275c4fef0beb0877b3e4e"
+  dependencies:
+    prop-types "^15.5.8"
+    tether "^1.4.3"
+
 react-transition-group@^2.0.0, react-transition-group@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10"
@@ -13028,6 +13046,10 @@ temp@^0.8.1:
     os-tmpdir "^1.0.0"
     rimraf "~2.2.6"
 
+tether@^1.4.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/tether/-/tether-1.4.4.tgz#9dc6eb2b3e601da2098fd264e7f7a8b264de1125"
+
 text-cache@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/text-cache/-/text-cache-4.1.0.tgz#7c58090e85ac0910f976df4cfc8ce8aa0ea58766"