refactor Selection to use downshift. Implement option group feature -…

… STCOM-1278

lib/Selection/DefaultOptionFormatter.js

@@ -8,11 +8,9 @@ const propTypes = {
 };
 
 const DefaultOptionFormatter = ({ option, searchTerm }) => {
-  if (option) {
-    return <OptionSegment searchTerm={searchTerm}>{option.label}</OptionSegment>;
-  }
-
-  return null;
+  return option ?
+    <OptionSegment searchTerm={searchTerm}>{option.label}</OptionSegment> :
+    null;
 };
 
 DefaultOptionFormatter.propTypes = propTypes;

lib/Selection/OptionSegment.js

@@ -14,30 +14,28 @@ const propTypes = {
   searchTerm: PropTypes.string,
 };
 
-const render = ({ ...props }) => {
-  const { searchTerm, innerText, children } = props; /* eslint-disable-line react/prop-types */
+const OptionSegment = ({ searchTerm, innerText, children }) => {
   const text = innerText || children;
-
+  let rendered;
   if (!searchTerm || searchTerm === '' || typeof text !== 'string') {
-    return text;
+    rendered = text;
   }
 
-  return (
+  rendered = (
     <Highlighter
-      searchWords={searchTerm.split(' ')} // eslint-disable-line react/prop-types
+      searchWords={searchTerm.split(' ')}
       text={text}
     />
   );
-};
 
-const OptionSegment = ({ searchTerm, innerText, children }) => (
+  return (
   <div
     data-test-selection-option-segment
     className={css.optionSegment}
   >
-    {render({ searchTerm, innerText, children })}
+    {rendered}
   </div>
-);
+)};
 
 OptionSegment.propTypes = propTypes;
 

lib/Selection/Selection.css

@@ -154,6 +154,15 @@
   }
 }
 
+.groupLabel {
+  padding: 0.5rem;
+  cursor: default;
+  display: flex;
+  justify-content: space-between;
+  color: var(--color-text);
+  background-color: var(--color-fill-disabled);
+}
+
 .optionSegment {
   padding: 0 2px;
   text-align: initial;