The alignment of dropdown menu wrapper should take effect when the pullRight prop is specified

Author: cheton

README.md

@@ -248,15 +248,12 @@ btnStyle | One of:<br/>'default'<br/>'primary'<br/>'emphasis'<br/>'flat'<br/>'li
 noCaret | boolean | false | Whether to prevent a caret from being rendered next to the title.
 title | node | | Title content.
 disabled | boolean | false | Whether or not component is disabled.
-open | boolean | false | Whether or not the dropdown is visible.
 
 #### DropdownMenu
 
 Name | Type | Default | Description 
 :--- | :--- | :------ | :----------
 componentClass | element | ul | A custom element for this component.
-open | boolean | false | Whether or not the dropdown is visible.
-pullRight | boolean | false | Align the menu to the right side of the dropdown toggle.
 onClose | function(event) | | A callback fired when the dropdown menu closes.
 onSelect | function(eventKey, event) | | A callback fired when a menu item is selected.
 rootCloseEvent | One of:<br/>'click'<br/>'mousedown' | | Which event when fired outside the component will cause it to be closed.
@@ -266,8 +263,6 @@ rootCloseEvent | One of:<br/>'click'<br/>'mousedown' | | Which event when fired
 Name | Type | Default | Description 
 :--- | :--- | :------ | :----------
 componentClass | element | div | A custom element for this component.
-open | boolean | false | Whether or not the dropdown is visible.
-pullRight | boolean | false | Align the menu to the right side of the dropdown toggle.
 onClose | function(event) | | A callback fired when the dropdown menu closes.
 onSelect | function(eventKey, event) | | A callback fired when a menu item is selected.
 rootCloseEvent | One of:<br/>'click'<br/>'mousedown' | | Which event when fired outside the component will cause it to be closed.
@@ -284,7 +279,6 @@ eventKey | any | | Value passed to the `onSelect` handler, useful for identifyin
 header | boolean | false | Style the menu item as a header label, useful for describing a group of menu items.
 onClick | function(event) | | Callback fired when the menu item is clicked, even if it is disabled.
 open | boolean | false | Whether or not the dropdown submenu is visible.
-pullRight | boolean | false | Align the menu to the right side of the dropdown toggle.
 onClose | function(event) | | A callback fired when the dropdown menu closes.
 onSelect | function(eventKey, event) | | A callback fired when a menu item is selected.
 rootCloseEvent | One of:<br/>'click'<br/>'mousedown' | | Which event when fired outside the component will cause it to be closed.

examples/DropdownMenuWrapper.jsx

@@ -8,11 +8,13 @@ export default () => (
         <div className={styles.sectionGroup}>
             <h3>Dropdown Menu Wrapper</h3>
             <Dropdown
-                open
                 onToggle={() => {}}
+                open
             >
                 <Dropdown.Toggle title="Custom range" />
-                <Dropdown.MenuWrapper style={{ whiteSpace: 'nowrap' }}>
+                <Dropdown.MenuWrapper
+                    style={{ whiteSpace: 'nowrap' }}
+                >
                     <Dropdown.Menu>
                         <MenuItem eventKey="1d">
                             Last 24 hours

src/Dropdown.jsx

@@ -326,7 +326,11 @@ class Dropdown extends PureComponent {
 
                     if (this.isDropdownMenu(child) || this.isDropdownMenuWrapper(child)) {
                         return this.renderMenu(child, {
-                            open, pullRight, onClose, onSelect, rootCloseEvent
+                            open,
+                            pullRight,
+                            onClose,
+                            onSelect,
+                            rootCloseEvent
                         });
                     }
 

src/DropdownMenu.jsx

@@ -30,11 +30,7 @@ class DropdownMenu extends PureComponent {
     };
 
     static defaultProps = {
-        componentClass: 'div',
-
-        // Dropdown
-        open: false,
-        pullRight: false
+        componentClass: 'div'
     };
 
     isMenuItem = match(MenuItem);
@@ -120,7 +116,7 @@ class DropdownMenu extends PureComponent {
                     className={cx(className, {
                         [styles.dropdownMenu]: true,
                         [styles.selected]: activeMenuItems.length > 0,
-                        [styles.pullRight]: pullRight
+                        [styles.pullRight]: !!pullRight
                     })}
                     style={style}
                 >

src/DropdownMenuWrapper.jsx

@@ -30,11 +30,7 @@ class DropdownMenuWrapper extends PureComponent {
     };
 
     static defaultProps = {
-        componentClass: 'div',
-
-        // Dropdown
-        open: false,
-        pullRight: false
+        componentClass: 'div'
     };
 
     menu = null; // <DropdownMenu ref={c => this.menu = c} />
@@ -91,7 +87,8 @@ class DropdownMenuWrapper extends PureComponent {
                 <Component
                     {...props}
                     className={cx(className, {
-                        [styles.dropdownMenuWrapper]: true
+                        [styles.dropdownMenuWrapper]: true,
+                        [styles.pullRight]: !!pullRight
                     })}
                 >
                     {React.Children.map(children, child => {
@@ -102,7 +99,9 @@ class DropdownMenuWrapper extends PureComponent {
                         if (this.isDropdownMenu(child)) {
                             return this.renderMenu(child, {
                                 // Do not pass onClose and rootCloseEvent to the dropdown menu
-                                open, pullRight, onSelect
+                                open,
+                                pullRight,
+                                onSelect
                             });
                         }
 

src/dropdown-menu-wrapper.styl

@@ -7,6 +7,11 @@
     background-color: #fff;
     border: 1px solid #bbbbbb;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+
+    &.pull-right {
+        right: 0;
+        left: auto;
+    }
 }
 
 .dropdown-menu-wrapper > .dropdown-menu {