From 4f7339643041fc410bbaaad74ed24ba1528f7f0c Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 7 Sep 2018 16:06:45 -0400
Subject: [PATCH 1/6] Allowing context menu panels to have different widths

---
 .../context_menu/context_menu_example.js      | 16 +++++++++-----
 .../context_menu/context_menu_with_content.js |  1 +
 .../__snapshots__/context_menu.test.js.snap   |  8 +++++--
 .../context_menu_panel.test.js.snap           |  8 +++++--
 .../context_menu/_context_menu.scss           |  4 +++-
 src/components/context_menu/context_menu.js   | 18 ++++++++++++++-
 .../context_menu/context_menu_panel.js        | 22 ++++++++++++++++++-
 7 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/src-docs/src/views/context_menu/context_menu_example.js b/src-docs/src/views/context_menu/context_menu_example.js
index 07353e56248..8924170fe4a 100644
--- a/src-docs/src/views/context_menu/context_menu_example.js
+++ b/src-docs/src/views/context_menu/context_menu_example.js
@@ -90,11 +90,17 @@ export const ContextMenuExample = {
       code: contextMenuWithContentHtml,
     }],
     text: (
-      <p>
-        Context menu panels can be passed React elements through the
-        <EuiCode>content</EuiCode> prop instead of <EuiCode>items</EuiCode>. The panel
-        will display your custom content without modification.
-      </p>
+      <div>
+        <p>
+          Context menu panels can be passed React elements through the
+          <EuiCode>content</EuiCode> prop instead of <EuiCode>items</EuiCode>. The panel
+          will display your custom content without modification.
+        </p>
+        <p>
+          If your panel contents have different widths or you need to ensure that a specific
+          context menu panel has a certain width, add <code>width: [number of pixels]</code> to the panel tree.
+        </p>
+      </div>
     ),
     demo: <ContextMenuWithContent />,
   }],
diff --git a/src-docs/src/views/context_menu/context_menu_with_content.js b/src-docs/src/views/context_menu/context_menu_with_content.js
index fee75b19b1e..e30c6702fcf 100644
--- a/src-docs/src/views/context_menu/context_menu_with_content.js
+++ b/src-docs/src/views/context_menu/context_menu_with_content.js
@@ -51,6 +51,7 @@ export default class extends Component {
         icon: 'plusInCircle',
         panel: {
           id: 1,
+          width: 400,
           title: 'See more',
           content: (
             <EuiPanel>
diff --git a/src/components/context_menu/__snapshots__/context_menu.test.js.snap b/src/components/context_menu/__snapshots__/context_menu.test.js.snap
index bee9cd17c18..bcb5f20a0ca 100644
--- a/src/components/context_menu/__snapshots__/context_menu.test.js.snap
+++ b/src/components/context_menu/__snapshots__/context_menu.test.js.snap
@@ -11,10 +11,11 @@ exports[`EuiContextMenu is rendered 1`] = `
 exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 1`] = `
 <div
   class="euiContextMenu"
-  style="height: 0px;"
+  style="height: 0px; width: 0px;"
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
+    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -65,10 +66,11 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
 exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 2`] = `
 <div
   class="euiContextMenu"
-  style="height: 0px;"
+  style="height: 0px; width: 0px;"
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutRight"
+    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -115,6 +117,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
   </div>
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInRight"
+    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -270,6 +273,7 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
+    style="width:256px"
     tabindex="0"
   >
     <button
diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
index 9a581184bb9..b0d90d2ca25 100644
--- a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
+++ b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
@@ -11,10 +11,11 @@ exports[`EuiContextMenu is rendered 1`] = `
 exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 1`] = `
 <div
   class="euiContextMenu"
-  style="height: 0px;"
+  style="height: 0px; width: 0px;"
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
+    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -65,10 +66,11 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
 exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 2`] = `
 <div
   class="euiContextMenu"
-  style="height: 0px;"
+  style="height: 0px; width: 0px;"
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutRight"
+    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -115,6 +117,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
   </div>
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInRight"
+    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -270,6 +273,7 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
+    style="width:256px"
     tabindex="0"
   >
     <button
diff --git a/src/components/context_menu/_context_menu.scss b/src/components/context_menu/_context_menu.scss
index 5e9760a278a..5728f3e072a 100644
--- a/src/components/context_menu/_context_menu.scss
+++ b/src/components/context_menu/_context_menu.scss
@@ -4,7 +4,9 @@ $euiContextMenuWidth: $euiSize * 16;
   width: $euiContextMenuWidth;
   position: relative;
   overflow: hidden;
-  transition: height $euiAnimSpeedFast $euiAnimSlightResistance;
+  transition:
+    height $euiAnimSpeedFast $euiAnimSlightResistance,
+    width $euiAnimSpeedFast $euiAnimSlightResistance;
   border-radius: $euiBorderRadius;
 
   .euiContextMenu__content {
diff --git a/src/components/context_menu/context_menu.js b/src/components/context_menu/context_menu.js
index f9472c49224..60fb5f90d20 100644
--- a/src/components/context_menu/context_menu.js
+++ b/src/components/context_menu/context_menu.js
@@ -63,6 +63,7 @@ export const EuiContextMenuPanelItemShape = PropTypes.shape({
 
 export const EuiContextMenuPanelShape = PropTypes.shape({
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width: PropTypes.number,  // Pixel value to set the panel width to
   content: PropTypes.node,  // Either content or items array should be given.
   items: PropTypes.arrayOf(EuiContextMenuPanelItemShape),
   title: PropTypes.string,
@@ -105,6 +106,7 @@ export class EuiContextMenu extends Component {
       idToRenderedItemsMap: {},
 
       height: undefined,
+      width: undefined,
       outgoingPanelId: undefined,
       incomingPanelId: props.initialPanelId,
       transitionDirection: undefined,
@@ -182,6 +184,16 @@ export class EuiContextMenu extends Component {
     });
   };
 
+  onIncomingPanelWidthChange = width => {
+    this.setState(({ width: prevWidth }) => {
+      if (width === prevWidth) {
+        return null;
+      } else {
+        return { width };
+      }
+    });
+  };
+
   onOutGoingPanelTransitionComplete = () => {
     this.setState({
       isOutgoingPanelVisible: false,
@@ -262,13 +274,17 @@ export class EuiContextMenu extends Component {
       onClose = () => window.requestAnimationFrame(this.showPreviousPanel);
     }
 
+    const style = { width: panel.width || 256 };
+
     return (
       <EuiContextMenuPanel
         key={panelId}
         className="euiContextMenu__panel"
         onHeightChange={(transitionType === 'in') ? this.onIncomingPanelHeightChange : undefined}
+        onWidthChange={(transitionType === 'in') ? this.onIncomingPanelWidthChange : undefined}
         onTransitionComplete={(transitionType === 'out') ? this.onOutGoingPanelTransitionComplete : undefined}
         title={panel.title}
+        style={style}
         onClose={onClose}
         transitionType={this.state.isOutgoingPanelVisible ? transitionType : undefined}
         transitionDirection={this.state.isOutgoingPanelVisible ? this.state.transitionDirection : undefined}
@@ -304,7 +320,7 @@ export class EuiContextMenu extends Component {
     return (
       <div
         className={classes}
-        style={{ height: this.state.height }}
+        style={{ height: this.state.height, width: this.state.width }}
         {...rest}
       >
         {outgoingPanel}
diff --git a/src/components/context_menu/context_menu_panel.js b/src/components/context_menu/context_menu_panel.js
index 1118135e6c2..70a603818fb 100644
--- a/src/components/context_menu/context_menu_panel.js
+++ b/src/components/context_menu/context_menu_panel.js
@@ -28,6 +28,7 @@ export class EuiContextMenuPanel extends Component {
     title: PropTypes.node,
     onClose: PropTypes.func,
     onHeightChange: PropTypes.func,
+    onWidthChange: PropTypes.func,
     transitionType: PropTypes.oneOf(['in', 'out']),
     transitionDirection: PropTypes.oneOf(['next', 'previous']),
     onTransitionComplete: PropTypes.func,
@@ -55,7 +56,8 @@ export class EuiContextMenuPanel extends Component {
       menuItems: [],
       isTransitioning: Boolean(props.transitionType),
       focusedItemIndex: props.initialFocusedItemIndex,
-      currentHeight: undefined
+      currentHeight: undefined,
+      currentWidth: undefined,
     };
   }
 
@@ -323,15 +325,31 @@ export class EuiContextMenuPanel extends Component {
     }
   }
 
+  updateWidth() {
+    console.log(this.panel, this.panel ? this.panel.clientWidth : 0);
+    const currentWidth = this.panel ? this.panel.clientWidth : 0;
+
+    if (this.state.width !== currentWidth) {
+      if (this.props.onWidthChange) {
+        this.props.onWidthChange(currentWidth);
+
+        this.setState({ width: currentWidth });
+      }
+    }
+    console.log(this.state.width, currentWidth);
+  }
+
   componentDidUpdate(prevProps) {
     if (prevProps.items.length > 0 || this.props.items.length > 0) {
       // content comes from items
       if (this.didItemsChange(prevProps.items, this.props.items)) {
         this.updateHeight();
+        this.updateWidth();
       }
     } else {
       // content comes from children
       this.updateHeight();
+      this.updateWidth();
     }
 
     this.updateFocus();
@@ -350,6 +368,7 @@ export class EuiContextMenuPanel extends Component {
     this.panel = node;
 
     this.updateHeight();
+    this.updateWidth();
   };
 
   contentRef = node => {
@@ -363,6 +382,7 @@ export class EuiContextMenuPanel extends Component {
       onClose,
       title,
       onHeightChange, // eslint-disable-line no-unused-vars
+      onWidthChange, // eslint-disable-line no-unused-vars
       transitionType,
       transitionDirection,
       onTransitionComplete, // eslint-disable-line no-unused-vars

From b2fed06eeaaad44207b3a17580dc3fd64630392f Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 7 Sep 2018 16:52:52 -0400
Subject: [PATCH 2/6] Revert "Allowing context menu panels to have different
 widths"

This reverts commit 4f7339643041fc410bbaaad74ed24ba1528f7f0c.
---
 .../__snapshots__/context_menu.test.js.snap   |  8 ++-----
 .../context_menu_panel.test.js.snap           |  8 ++-----
 src/components/context_menu/context_menu.js   |  4 ----
 .../context_menu/context_menu_panel.js        | 22 +------------------
 4 files changed, 5 insertions(+), 37 deletions(-)

diff --git a/src/components/context_menu/__snapshots__/context_menu.test.js.snap b/src/components/context_menu/__snapshots__/context_menu.test.js.snap
index bcb5f20a0ca..bee9cd17c18 100644
--- a/src/components/context_menu/__snapshots__/context_menu.test.js.snap
+++ b/src/components/context_menu/__snapshots__/context_menu.test.js.snap
@@ -11,11 +11,10 @@ exports[`EuiContextMenu is rendered 1`] = `
 exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 1`] = `
 <div
   class="euiContextMenu"
-  style="height: 0px; width: 0px;"
+  style="height: 0px;"
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
-    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -66,11 +65,10 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
 exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 2`] = `
 <div
   class="euiContextMenu"
-  style="height: 0px; width: 0px;"
+  style="height: 0px;"
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutRight"
-    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -117,7 +115,6 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
   </div>
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInRight"
-    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -273,7 +270,6 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
-    style="width:256px"
     tabindex="0"
   >
     <button
diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
index b0d90d2ca25..9a581184bb9 100644
--- a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
+++ b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
@@ -11,11 +11,10 @@ exports[`EuiContextMenu is rendered 1`] = `
 exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 1`] = `
 <div
   class="euiContextMenu"
-  style="height: 0px; width: 0px;"
+  style="height: 0px;"
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
-    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -66,11 +65,10 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
 exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 2`] = `
 <div
   class="euiContextMenu"
-  style="height: 0px; width: 0px;"
+  style="height: 0px;"
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutRight"
-    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -117,7 +115,6 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
   </div>
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInRight"
-    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -273,7 +270,6 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
-    style="width:256px"
     tabindex="0"
   >
     <button
diff --git a/src/components/context_menu/context_menu.js b/src/components/context_menu/context_menu.js
index 60fb5f90d20..bb54e127dba 100644
--- a/src/components/context_menu/context_menu.js
+++ b/src/components/context_menu/context_menu.js
@@ -274,17 +274,13 @@ export class EuiContextMenu extends Component {
       onClose = () => window.requestAnimationFrame(this.showPreviousPanel);
     }
 
-    const style = { width: panel.width || 256 };
-
     return (
       <EuiContextMenuPanel
         key={panelId}
         className="euiContextMenu__panel"
         onHeightChange={(transitionType === 'in') ? this.onIncomingPanelHeightChange : undefined}
-        onWidthChange={(transitionType === 'in') ? this.onIncomingPanelWidthChange : undefined}
         onTransitionComplete={(transitionType === 'out') ? this.onOutGoingPanelTransitionComplete : undefined}
         title={panel.title}
-        style={style}
         onClose={onClose}
         transitionType={this.state.isOutgoingPanelVisible ? transitionType : undefined}
         transitionDirection={this.state.isOutgoingPanelVisible ? this.state.transitionDirection : undefined}
diff --git a/src/components/context_menu/context_menu_panel.js b/src/components/context_menu/context_menu_panel.js
index 70a603818fb..1118135e6c2 100644
--- a/src/components/context_menu/context_menu_panel.js
+++ b/src/components/context_menu/context_menu_panel.js
@@ -28,7 +28,6 @@ export class EuiContextMenuPanel extends Component {
     title: PropTypes.node,
     onClose: PropTypes.func,
     onHeightChange: PropTypes.func,
-    onWidthChange: PropTypes.func,
     transitionType: PropTypes.oneOf(['in', 'out']),
     transitionDirection: PropTypes.oneOf(['next', 'previous']),
     onTransitionComplete: PropTypes.func,
@@ -56,8 +55,7 @@ export class EuiContextMenuPanel extends Component {
       menuItems: [],
       isTransitioning: Boolean(props.transitionType),
       focusedItemIndex: props.initialFocusedItemIndex,
-      currentHeight: undefined,
-      currentWidth: undefined,
+      currentHeight: undefined
     };
   }
 
@@ -325,31 +323,15 @@ export class EuiContextMenuPanel extends Component {
     }
   }
 
-  updateWidth() {
-    console.log(this.panel, this.panel ? this.panel.clientWidth : 0);
-    const currentWidth = this.panel ? this.panel.clientWidth : 0;
-
-    if (this.state.width !== currentWidth) {
-      if (this.props.onWidthChange) {
-        this.props.onWidthChange(currentWidth);
-
-        this.setState({ width: currentWidth });
-      }
-    }
-    console.log(this.state.width, currentWidth);
-  }
-
   componentDidUpdate(prevProps) {
     if (prevProps.items.length > 0 || this.props.items.length > 0) {
       // content comes from items
       if (this.didItemsChange(prevProps.items, this.props.items)) {
         this.updateHeight();
-        this.updateWidth();
       }
     } else {
       // content comes from children
       this.updateHeight();
-      this.updateWidth();
     }
 
     this.updateFocus();
@@ -368,7 +350,6 @@ export class EuiContextMenuPanel extends Component {
     this.panel = node;
 
     this.updateHeight();
-    this.updateWidth();
   };
 
   contentRef = node => {
@@ -382,7 +363,6 @@ export class EuiContextMenuPanel extends Component {
       onClose,
       title,
       onHeightChange, // eslint-disable-line no-unused-vars
-      onWidthChange, // eslint-disable-line no-unused-vars
       transitionType,
       transitionDirection,
       onTransitionComplete, // eslint-disable-line no-unused-vars

From f4cbe2482761ffaabdfc09a1f458caa3d001319d Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 7 Sep 2018 16:59:34 -0400
Subject: [PATCH 3/6] Fixes

- No longer watch for width
- Mobile fix
- Adding to jest test
---
 CHANGELOG.md                                    |  1 +
 .../__snapshots__/context_menu.test.js.snap     |  2 +-
 .../context_menu_panel.test.js.snap             |  2 +-
 src/components/context_menu/_context_menu.scss  |  1 +
 src/components/context_menu/context_menu.js     | 17 ++++++-----------
 .../context_menu/context_menu.test.js           |  1 +
 6 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d2a9c933ea4..850179dd705 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `maxWidth` prop to `EuiModal` ([#1165](https://github.com/elastic/eui/pull/1165))
+- Added `width` prop to `EuiContextMenu` panels ([#1173](https://github.com/elastic/eui/pull/1173))
 
 ## [`3.9.0`](https://github.com/elastic/eui/tree/v3.9.0)
 
diff --git a/src/components/context_menu/__snapshots__/context_menu.test.js.snap b/src/components/context_menu/__snapshots__/context_menu.test.js.snap
index bee9cd17c18..b33bede4715 100644
--- a/src/components/context_menu/__snapshots__/context_menu.test.js.snap
+++ b/src/components/context_menu/__snapshots__/context_menu.test.js.snap
@@ -65,7 +65,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
 exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 2`] = `
 <div
   class="euiContextMenu"
-  style="height: 0px;"
+  style="height: 0px; width: 400px;"
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutRight"
diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
index 9a581184bb9..06dc4953a64 100644
--- a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
+++ b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
@@ -65,7 +65,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
 exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 2`] = `
 <div
   class="euiContextMenu"
-  style="height: 0px;"
+  style="height: 0px; width: 400px;"
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutRight"
diff --git a/src/components/context_menu/_context_menu.scss b/src/components/context_menu/_context_menu.scss
index 5728f3e072a..e6e491306ad 100644
--- a/src/components/context_menu/_context_menu.scss
+++ b/src/components/context_menu/_context_menu.scss
@@ -2,6 +2,7 @@ $euiContextMenuWidth: $euiSize * 16;
 
 .euiContextMenu {
   width: $euiContextMenuWidth;
+  max-width: 100%;
   position: relative;
   overflow: hidden;
   transition:
diff --git a/src/components/context_menu/context_menu.js b/src/components/context_menu/context_menu.js
index bb54e127dba..7edd30d11fa 100644
--- a/src/components/context_menu/context_menu.js
+++ b/src/components/context_menu/context_menu.js
@@ -184,16 +184,6 @@ export class EuiContextMenu extends Component {
     });
   };
 
-  onIncomingPanelWidthChange = width => {
-    this.setState(({ width: prevWidth }) => {
-      if (width === prevWidth) {
-        return null;
-      } else {
-        return { width };
-      }
-    });
-  };
-
   onOutGoingPanelTransitionComplete = () => {
     this.setState({
       isOutgoingPanelVisible: false,
@@ -311,12 +301,17 @@ export class EuiContextMenu extends Component {
       outgoingPanel = this.renderPanel(this.state.outgoingPanelId, 'out');
     }
 
+    const width =
+      this.state.idToPanelMap[this.state.incomingPanelId] &&
+      this.state.idToPanelMap[this.state.incomingPanelId].width ?
+        this.state.idToPanelMap[this.state.incomingPanelId].width : undefined;
+
     const classes = classNames('euiContextMenu', className);
 
     return (
       <div
         className={classes}
-        style={{ height: this.state.height, width: this.state.width }}
+        style={{ height: this.state.height, width: width }}
         {...rest}
       >
         {outgoingPanel}
diff --git a/src/components/context_menu/context_menu.test.js b/src/components/context_menu/context_menu.test.js
index 9f716923adf..9810f439360 100644
--- a/src/components/context_menu/context_menu.test.js
+++ b/src/components/context_menu/context_menu.test.js
@@ -17,6 +17,7 @@ const panel2 = {
 const panel1 = {
   id: 1,
   title: '1',
+  width: 400,
   items: [{
     name: '2a',
     panel: 2,

From 1259a8e248c5d8a0e3c31cfa00f1b0d790173491 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 7 Sep 2018 17:15:13 -0400
Subject: [PATCH 4/6] Removing the animation for now

---
 src/components/context_menu/_context_menu.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/context_menu/_context_menu.scss b/src/components/context_menu/_context_menu.scss
index e6e491306ad..245ba0f646c 100644
--- a/src/components/context_menu/_context_menu.scss
+++ b/src/components/context_menu/_context_menu.scss
@@ -6,8 +6,7 @@ $euiContextMenuWidth: $euiSize * 16;
   position: relative;
   overflow: hidden;
   transition:
-    height $euiAnimSpeedFast $euiAnimSlightResistance,
-    width $euiAnimSpeedFast $euiAnimSlightResistance;
+    height $euiAnimSpeedFast $euiAnimSlightResistance;
   border-radius: $euiBorderRadius;
 
   .euiContextMenu__content {

From 7c74cb12b992b3a36c50085040644eb0c4df6123 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 7 Sep 2018 17:21:46 -0400
Subject: [PATCH 5/6] Remove old state key

---
 src/components/context_menu/context_menu.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/context_menu/context_menu.js b/src/components/context_menu/context_menu.js
index 7edd30d11fa..01f60d11ead 100644
--- a/src/components/context_menu/context_menu.js
+++ b/src/components/context_menu/context_menu.js
@@ -106,7 +106,6 @@ export class EuiContextMenu extends Component {
       idToRenderedItemsMap: {},
 
       height: undefined,
-      width: undefined,
       outgoingPanelId: undefined,
       incomingPanelId: props.initialPanelId,
       transitionDirection: undefined,

From e94cd90569a631acf5a24509b63fc4e057dff407 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 10 Sep 2018 13:07:53 -0400
Subject: [PATCH 6/6] TS def

---
 src/components/context_menu/_context_menu.scss | 3 +--
 src/components/context_menu/index.d.ts         | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/context_menu/_context_menu.scss b/src/components/context_menu/_context_menu.scss
index 245ba0f646c..87ec5fabdcd 100644
--- a/src/components/context_menu/_context_menu.scss
+++ b/src/components/context_menu/_context_menu.scss
@@ -5,8 +5,7 @@ $euiContextMenuWidth: $euiSize * 16;
   max-width: 100%;
   position: relative;
   overflow: hidden;
-  transition:
-    height $euiAnimSpeedFast $euiAnimSlightResistance;
+  transition: height $euiAnimSpeedFast $euiAnimSlightResistance;
   border-radius: $euiBorderRadius;
 
   .euiContextMenu__content {
diff --git a/src/components/context_menu/index.d.ts b/src/components/context_menu/index.d.ts
index ee4532f2283..dbea11145ef 100644
--- a/src/components/context_menu/index.d.ts
+++ b/src/components/context_menu/index.d.ts
@@ -97,6 +97,7 @@ declare module '@elastic/eui' {
     title: string;
     items?: EuiContextMenuPanelItemDescriptor[];
     content?: React.ReactNode;
+    width?: number;
   }
 
   export type EuiContextMenuProps = CommonProps &