0.0.4 build

Author: ivansfdc

lib/SLDSPicklistBase/index.js

@@ -42,6 +42,8 @@ module.exports = _react2['default'].createClass({
       options: [],
       initialFocus: false,
       modal: false,
+      className: '',
+      listClassName: '',
       onClick: function onClick() {
         console.log('onClick should be defined');
       },
@@ -158,6 +160,7 @@ module.exports = _react2['default'].createClass({
       ref: 'list',
       options: this.props.options,
       label: this.props.label,
+      className: this.props.listClassName,
       highlightedIndex: this.state.highlightedIndex,
       selectedIndex: this.state.selectedIndex,
       onSelect: this.handleSelect,
@@ -185,7 +188,8 @@ module.exports = _react2['default'].createClass({
       {
         className: 'slds-dropdown slds-dropdown--left slds-dropdown--small slds-dropdown--menu',
         targetElement: this.refs.date,
-        onClose: this.handleClose },
+        closeOnTabKey: true,
+        onClose: this.handleCancel },
       this.getPopoverContent()
     ) : null;
   },
@@ -218,7 +222,7 @@ module.exports = _react2['default'].createClass({
             {
               id: this.props.id,
               ref: 'button',
-              className: 'slds-button slds-button--neutral slds-picklist__label',
+              className: 'slds-button slds-button--neutral slds-picklist__label ' + this.props.className,
               'aria-haspopup': 'true',
               onBlur: this.handleBlur,
               onFocus: this.handleFocus,

lib/SLDSPicklistBase/list.js

@@ -32,9 +32,10 @@ module.exports = _react2["default"].createClass({
   getDefaultProps: function getDefaultProps() {
     return {
       options: [],
-      label: "Menu",
+      label: 'Menu',
       selectedIndex: -1,
       highlightedIndex: 0,
+      className: '',
       onListBlur: function onListBlur() {
         console.log("onListBlur should be overwritten");
       },
@@ -156,7 +157,7 @@ module.exports = _react2["default"].createClass({
       "div",
       {
         ref: "scroll",
-        className: "slds-wrap slds-grow slds-scrollable--y",
+        className: 'slds-wrap slds-grow slds-scrollable--y ' + this.props.className,
         style: {
           maxHeight: 260
         }

lib/SLDSPopover.js

@@ -9,38 +9,45 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 
 'use strict';
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _tetherDrop = require("tether-drop");
+var _tetherDrop = require('tether-drop');
 
 var _tetherDrop2 = _interopRequireDefault(_tetherDrop);
 
+var _utils = require('./utils');
+
 //import { TransitionSpring, Spring } from 'react-motion';
 
-module.exports = _react2["default"].createClass({
+module.exports = _react2['default'].createClass({
 
   displayName: 'SLDSPopover',
 
-  mixins: [require("react-onclickoutside")],
+  mixins: [require('react-onclickoutside')],
+
+  handleClickOutside: function handleClickOutside() {
+    this.handleClose();
+  },
 
-  handleClickOutside: function handleClickOutside(e) {
+  handleClose: function handleClose() {
     if (this.props.onClose) {
       this.props.onClose();
     }
   },
 
   propTypes: {
-    targetAttachment: _react2["default"].PropTypes.string
+    targetAttachment: _react2['default'].PropTypes.string
   },
 
   getDefaultProps: function getDefaultProps() {
     return {
-      targetAttachment: "bottom left",
-      className: "slds-dropdown"
+      targetAttachment: 'bottom left',
+      className: 'slds-dropdown',
+      closeOnTabKey: false
     };
   },
 
@@ -71,12 +78,21 @@ module.exports = _react2["default"].createClass({
     }
   },
 
+  handleKeyDown: function handleKeyDown(event) {
+    if (event.keyCode === _utils.KEYS.TAB) {
+      if (this.props.closeOnTabKey) {
+        _utils.EventUtil.trap(event);
+        this.handleClose();
+      }
+    }
+  },
+
   popoverComp: function popoverComp() {
     if (!this.state.isOpen) {
-      return _react2["default"].createElement("span", null);
+      return _react2['default'].createElement('span', null);
     }
-    return _react2["default"].createElement(
-      "div",
+    return _react2['default'].createElement(
+      'div',
       { className: 'SLDSPopover ' + this.props.className,
         style: {
           transform: 'none',
@@ -85,7 +101,9 @@ module.exports = _react2["default"].createClass({
           marginBottom: '0.35rem',
           float: 'inherit',
           position: 'inherit'
-        } },
+        },
+        onKeyDown: this.handleKeyDown
+      },
       this.props.children
     );
   },
@@ -112,7 +130,7 @@ module.exports = _react2["default"].createClass({
 
   renderPopover: function renderPopover() {
 
-    _react2["default"].render(this.popoverComp(), this.popoverElement);
+    _react2['default'].render(this.popoverComp(), this.popoverElement);
 
     if (this.popoverElement && this.popoverElement.parentNode && this.popoverElement.parentNode.parentNode && this.popoverElement.parentNode.parentNode.className && this.popoverElement.parentNode.parentNode.className.indexOf('drop ') > -1) {
       this.popoverElement.parentNode.parentNode.style.zIndex = 10001;
@@ -123,15 +141,15 @@ module.exports = _react2["default"].createClass({
         this.drop.position();
       }
     } else if (window && document) {
-      this.drop = new _tetherDrop2["default"](this.dropOptions());
+      this.drop = new _tetherDrop2['default'](this.dropOptions());
       this.drop.once('open', this.handleOpen);
     }
   },
 
   componentWillUnmount: function componentWillUnmount() {
 
     this.drop.destroy();
-    _react2["default"].unmountComponentAtNode(this.popoverElement);
+    _react2['default'].unmountComponentAtNode(this.popoverElement);
     if (this.popoverElement.parentNode) {
       this.popoverElement.parentNode.removeChild(this.popoverElement);
     }
@@ -141,7 +159,7 @@ module.exports = _react2["default"].createClass({
   },
 
   render: function render() {
-    return _react2["default"].createElement("span", null);
+    return _react2['default'].createElement('span', null);
   }
 
 });

lib/utils/EventUtil.js

@@ -11,7 +11,7 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 
 'use strict';
 
-module.exports = {
+var EventUtil = {
 
   trapEvent: function trapEvent(event) {
     event.preventDefault();
@@ -20,6 +20,12 @@ module.exports = {
       event.nativeEvent.preventDefault();
       event.nativeEvent.stopPropagation();
     }
+  },
+
+  trap: function trap(event) {
+    return EventUtil.trapEvent(event);
   }
 
-};
+};
+
+module.exports = EventUtil;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-system-react",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Salesforce Lightning Design System React components",
   "scripts": {
     "start": "node server.js",