Merge branch 'master' into button

Author: donnieberg

components/SLDSLookup/Menu/Item/index.jsx

@@ -10,23 +10,27 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 import React, { Component } from 'react';
 import {Icon} from "../../../SLDSIcons";
 import {EventUtil} from '../../../utils';
+import escapeRegExp from 'lodash.escaperegexp';
 
 class Item extends React.Component {
   constructor(props) {
     super(props);
   }
 
   componentWillReceiveProps(nextProps){
-    if(nextProps.isActive !== this.props.isActive && nextProps.isActive === true){
+    if (nextProps.isActive !== this.props.isActive && nextProps.isActive === true) {
       this.scrollFocus();
       this.props.setFocus(this.props.id);
     }
   }
 
   boldSearchText(children) {
-    const term = this.props.searchTerm;
-    if(!children || !term) return children;
-    const regex = new RegExp('(' + term + ')', 'gi');
+    let regex = this.props.boldRegex
+    if (!regex) {
+      const term = this.props.searchTerm;
+      if(!children || !term) return children;
+      regex = new RegExp('(' + escapeRegExp(term) + ')', 'gi');
+    }
     return React.Children.map(children, c => {
       return (typeof c === 'string') ? <span dangerouslySetInnerHTML={{ __html: c.replace(regex, '<mark>$1</mark>')}}></span> : c;
     });
@@ -53,7 +57,7 @@ class Item extends React.Component {
 
     return (
       //IMPORTANT: anchor id is used to set lookup's input's aria-activedescendant
-      <li className={className} role="presentaion">
+      <li className={className} role="presentation">
         <a
           href={this.props.href}
           id={id}
@@ -83,7 +87,8 @@ Item.propTypes = {
   setFocus: React.PropTypes.func,
   handleItemFocus: React.PropTypes.func,
   onSelect: React.PropTypes.func,
-  data: React.PropTypes.object
+  data: React.PropTypes.object,
+  boldRegex: React.PropTypes.instanceOf(RegExp)
 };
 
 Item.defaultProps = {

components/SLDSLookup/Menu/index.js

@@ -53,43 +53,67 @@ class Menu extends React.Component {
       return <div className={isActiveClass}>{this.props.footer}</div>;
     }
   }
+  renderMessages(){
+    return this.props.messages.map((message) => {
+      return <li className="slds-lookup__message" aria-live="polite">{message}</li>;
+    });
+  }
+
+  renderErrors(){
+    return this.props.errors.map((error) => {
+      return <li className="slds-lookup__error" aria-live="polite">{error}</li>;
+    });
+  }
 
   renderItems(){
     return this.props.items.filter(this.filter, this).map((c, i) => {
       //isActive means it is aria-activedescendant
       const id = c.id;
       let isActive = false;
       if(this.props.header){
-        isActive = this.props.focusIndex === i + 1? true : false;
+        isActive = this.props.focusIndex === i + 1 ? true : false;
       }else{
         isActive = this.props.focusIndex === i  ? true : false;
       }
       return <Item
-      key={id}
-      id={id}
-      type={this.props.type}
-      searchTerm={this.props.searchTerm}
-      index={i}
-      isActive={isActive}
-      setFocus={this.props.setFocus}
-      handleItemFocus={this.handleItemFocus.bind(this)}
-      onSelect={this.props.onSelect}
-      data={c.data}
+        key={id}
+        id={id}
+        type={this.props.type}
+        searchTerm={this.props.searchTerm}
+        index={i}
+        isActive={isActive}
+        setFocus={this.props.setFocus}
+        handleItemFocus={this.handleItemFocus.bind(this)}
+        onSelect={this.props.onSelect}
+        data={c.data}
+        boldRegex={this.props.boldRegex}
       >
       {c}
       </Item>
     });
   }
 
+  renderContent() {
+    if (this.props.errors.length)
+      return this.renderErrors
+    else if (this.props.items.length === 0)
+      return <li className="slds-lookup__message" aria-live="polite">{this.props.emptyMessage}</li>;
+    
+    elements = this.renderItems()
+    if (this.props.messages.length){
+      return elements.concat(this.renderMessages());
+    }
+    return elements;
+
+  }
+
   render(){
     return (
       <section id="menuContainer">
         {this.renderHeader()}
-
         <ul id="list" className="slds-lookup__list" role="presentation" ref="list">
-          {this.renderItems()}
+          {this.renderContent()}
         </ul>
-
         {this.renderFooter()}
       </section>
     )
@@ -103,9 +127,13 @@ Menu.propTypes = {
   focusIndex: React.PropTypes.number,
   listLength: React.PropTypes.number,
   items: React.PropTypes.array,
+  emptyMessage: React.PropTypes.string,
+  messages: React.PropTypes.arrayOf(React.PropTypes.string),
+  errors: React.PropTypes.arrayOf(React.PropTypes.string),
   filterWith: React.PropTypes.func,
   getListLength: React.PropTypes.func,
   setFocus: React.PropTypes.func,
+  boldRegex: React.PropTypes.instanceOf(RegExp),
 };
 
 Menu.defaultProps = {

components/SLDSLookup/index.jsx

@@ -37,10 +37,10 @@ class SLDSLookup extends React.Component {
       focusIndex:null,
       selectedIndex: null,
       listLength:this.props.items.length,
-      items:[]
+      items:[],
+      errors:[],
+      messages:[],
     };
-
-
   }
 
   componentDidMount(){
@@ -97,6 +97,7 @@ class SLDSLookup extends React.Component {
       selectedIndex: null,
       isOpen: true,
     });
+    if(this.props.onItemUnselect) this.props.onItemUnselect();
   }
 
   //=================================================
@@ -225,12 +226,16 @@ class SLDSLookup extends React.Component {
         focusIndex={this.state.focusIndex}
         listLength={this.state.listLength}
         items={this.state.items}
+        emptyMessage={this.props.emptyMessage}
+        messages={this.state.messages}
+        errors={this.state.errors}
         filterWith={this.props.filterWith}
         getListLength={this.getListLength.bind(this)}
         setFocus={this.setFocus.bind(this)}
         onSelect={this.selectItem.bind(this)}
         header={this.getHeader()}
         footer={this.getFooter()}
+        boldRegex={this.props.boldRegex}
       />;
     }
   }
@@ -254,7 +259,7 @@ class SLDSLookup extends React.Component {
           {this.renderMenuContent()}
         </SLDSPopover>;
       }
-  };
+  }
 
   renderSelectedItem(){
     let selectedItem = this.props.items[this.state.selectedIndex].label;
@@ -293,6 +298,12 @@ class SLDSLookup extends React.Component {
     if(newProps.items){
       this.modifyItems(newProps.items);
     }
+    if (newProps.message){
+      this.setState({message: newProps.message});
+    }
+    if (newProps.error){
+      this.setState({errors: newProps.error});
+    }
   }
 
   render(){
@@ -328,7 +339,6 @@ class SLDSLookup extends React.Component {
               value={this.state.searchTerm}
             />
           </div>
-
           {this.props.modal?this.renderModalMenu():this.renderSimpleMenu()}
         </section>
       </div>
@@ -339,13 +349,19 @@ class SLDSLookup extends React.Component {
 
 SLDSLookup.propTypes = {
   items: React.PropTypes.array,
+  errors: React.PropTypes.arrayOf(React.PropTypes.string),
+  emptyMessage: React.PropTypes.string,
+  messages: React.PropTypes.arrayOf(React.PropTypes.string),
+  errors: React.PropTypes.arrayOf(React.PropTypes.string),
   label: React.PropTypes.string,
   type: React.PropTypes.string,
   filterWith: React.PropTypes.func,
   onItemSelect: React.PropTypes.func,
+  onItemUnselect: React.PropTypes.func,
   onChange: React.PropTypes.func,
   modal: React.PropTypes.bool,
   disabled: React.PropTypes.bool,
+  boldRegex: React.PropTypes.instanceOf(RegExp),
 };
 
 SLDSLookup.defaultProps = {

demo/pages/HomePage/PicklistBaseSection.jsx

@@ -57,7 +57,7 @@ module.exports = React.createClass( {
               <div className="slds-p-vertical--large">
                 <SLDSPicklistBase
                     options={[
-                      {label:'A Option Option Super Super Long',value:'A0'},
+                      {label:'A Option Option Super Super Long',value:'A0', title: 'Greg'},
                       {label:'B Option',value:'B0'},
                       {label:'C Option',value:'C0'},
                       {label:'D Option',value:'D0'},