sections working

Author: ivansfdc

components/SLDSLookup/Menu/DefaultSectionHeader/index.js

@@ -39,11 +39,15 @@ class DefaultSectionHeader extends React.Component {
 
   render(){
     return (
-      <div className="slds-lookup__item"
+      <li className="slds-lookup__item"
         tabIndex="-1"
       >
-        @@@ Section
-      </div>
+        <a href="javascript:void()" tabIndex="-1">
+          <span className="slds-m-left--x-small">
+            <strong>{this.props.data.label}</strong>
+          </span>
+        </a>
+      </li>
     )
   }
 }

components/SLDSLookup/Menu/index.js

@@ -59,7 +59,25 @@ class Menu extends React.Component {
   }
 
   filteredItems() {
-    return this.props.items.filter(this.filter, this)
+    return this.filterEmptySections(this.props.items.filter(this.filter, this));
+  }
+
+  filterEmptySections(items){
+    const result = [];
+    items.forEach((item,index)=>{
+      if(item && item.data && item.data.type === 'section'){
+        if(index+1<items.length){
+          const nextItem = items[index+1];
+          if(nextItem.data && nextItem.data.type !== 'section'){
+            result.push(item);
+          }
+        }
+      }
+      else{
+        result.push(item);
+      }
+    });
+    return result;
   }
 
   //Scroll menu up/down when using mouse keys

demo/pages/Playground.js

@@ -20,14 +20,14 @@ module.exports = React.createClass({
           onChange={function(newValue){console.log("New search term: ", newValue)}}
           onSelect={function(item){console.log(item , " Selected")}}
           options={[
-            {type:'section', label:'Section 1'},
+            {type:'section', label:'SECTION 1'},
             {label: "Paddy\"s Pub"},
             {label: "Tyrell Corp"},
-            {type:'section', label:'Section 2'},
+            {type:'section', label:'SECTION 2'},
             {label: "Paper St. Soap Company"},
             {label: "Nakatomi Investments"},
             {label: "Acme Landscaping"},
-            {type:'section', label:'Section 3'},
+            {type:'section', label:'SECTION 3'},
             {label: "Acme Construction"}
           ]}
         />