lookup modal prop build

Author: ivansfdc

dist/design-system-react.js

@@ -251,7 +251,7 @@ module.exports = _react2['default'].createClass({
       _SLDSPopover2['default'],
       {
         className: 'slds-dropdown slds-dropdown--left slds-dropdown--small slds-dropdown--menu',
-        targetElement: this.refs.date,
+        targetElement: this.refs.button,
         closeOnTabKey: true,
         onClose: this.handleCancel },
       this.getPopoverContent()

dist/design-system-react.js.map

@@ -99,8 +99,8 @@ var Menu = (function (_React$Component) {
       this.props.focusIndex === 0 ? isSearchRecordsActive = true : isSearchRecordsActive = false;
 
       return _react2['default'].createElement(
-        'div',
-        { className: 'ignore-react-onclickoutside slds-lookup__menu', role: 'listbox', ref: 'scroll' },
+        'section',
+        null,
         _react2['default'].createElement(
           'div',
           { className: 'slds-lookup__item' },

dist/design-system-react.min.js

@@ -27,6 +27,10 @@ var _Menu = require('./Menu');
 
 var _Menu2 = _interopRequireDefault(_Menu);
 
+var _SLDSPopover = require('../SLDSPopover');
+
+var _SLDSPopover2 = _interopRequireDefault(_SLDSPopover);
+
 var _SLDSIcons = require("./../SLDSIcons");
 
 var _SLDSButton = require('../SLDSButton');
@@ -149,6 +153,15 @@ var SLDSLookup = (function (_React$Component) {
         currentFocus: null
       });
     }
+  }, {
+    key: 'handleCancel',
+    value: function handleCancel() {
+      this.setState({
+        isOpen: false,
+        focusIndex: null,
+        currentFocus: null
+      });
+    }
   }, {
     key: 'handleClick',
     value: function handleClick() {
@@ -219,9 +232,10 @@ var SLDSLookup = (function (_React$Component) {
     //=================================================
     // Rendering Things
   }, {
-    key: 'renderMenu',
-    value: function renderMenu() {
+    key: 'renderMenuContent',
+    value: function renderMenuContent() {
       if (this.state.isOpen) {
+
         return _react2['default'].createElement(_Menu2['default'], {
           searchTerm: this.state.searchTerm,
           label: this.props.label,
@@ -238,6 +252,33 @@ var SLDSLookup = (function (_React$Component) {
         });
       }
     }
+  }, {
+    key: 'renderSimpleMenu',
+    value: function renderSimpleMenu() {
+      if (this.state.isOpen) {
+
+        return _react2['default'].createElement(
+          'div',
+          { className: 'ignore-react-onclickoutside slds-lookup__menu', role: 'listbox', ref: 'scroll' },
+          this.renderMenuContent()
+        );
+      }
+    }
+  }, {
+    key: 'renderModalMenu',
+    value: function renderModalMenu() {
+      if (this.state.isOpen) {
+        return _react2['default'].createElement(
+          _SLDSPopover2['default'],
+          {
+            className: 'slds-dropdown slds-dropdown--left slds-dropdown--small slds-dropdown--menu',
+            targetElement: this.refs.lookup,
+            closeOnTabKey: true,
+            onClose: this.handleCancel.bind(this) },
+          this.renderMenuContent()
+        );
+      }
+    }
   }, {
     key: 'renderSelectedItem',
     value: function renderSelectedItem() {
@@ -304,7 +345,7 @@ var SLDSLookup = (function (_React$Component) {
               value: this.state.searchTerm
             })
           ),
-          this.renderMenu()
+          this.props.modal ? this.renderModalMenu() : this.renderSimpleMenu()
         )
       );
     }
@@ -320,11 +361,15 @@ SLDSLookup.propTypes = {
   filterWith: _react2['default'].PropTypes.func,
   onItemSelect: _react2['default'].PropTypes.func,
   onNewItem: _react2['default'].PropTypes.func,
-  onSearchRecords: _react2['default'].PropTypes.func
+  onSearchRecords: _react2['default'].PropTypes.func,
+  modal: _react2['default'].PropTypes.boolean,
+  disabled: _react2['default'].PropTypes.boolean
 };
 
 SLDSLookup.defaultProps = {
   filterWith: defaultFilter,
+  modal: false,
+  disabled: false,
   onItemSelect: function onItemSelect(item) {
     //console.log('onItemSelect should be defined');
   }

dist/design-system-react.min.js.map

@@ -188,7 +188,6 @@ module.exports = _react2['default'].createClass({
       'div',
       {
         className: 'slds-dropdown slds-dropdown--left slds-dropdown--small slds-dropdown--menu',
-        targetElement: this.refs.button,
         style: { maxHeight: '20em' } },
       this.getPopoverContent()
     ) : null;