Change streamBox to streamFilter

plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css

@@ -1,18 +1,17 @@
 .root {
-  display: flex;
-  justify-content: flex-end;
-  position: relative;
-  width: 100%;
-  z-index: 10;
-  cursor: pointer;
+}
+
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
 }
 
 .list {
   background: white;
   position: absolute;
   box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
-  right: 3px;
+  right: 0px;
   top: 20px;
+  z-index: 10;
 }
 
 .list > ul, .list > ul > li {
@@ -23,4 +22,5 @@
 .list > ul > li {
   padding: 10px;
   list-style: none;
+  white-space: nowrap;
 }

plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './ViewingOptions.css';
-import {Slot} from 'plugin-api/beta/client/components';
+import {Slot, ClickOutside} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
 const ViewingOptions = (props) => {
@@ -12,29 +12,38 @@ const ViewingOptions = (props) => {
       props.closeViewingOptions();
     }
   };
+
+  const handleClickOutside = () => {
+    if (props.open) {
+      props.closeViewingOptions();
+    }
+  };
+
   return (
-    <div className={cn([styles.root, 'coral-plugin-viewing-options'])}>
-      <div>
-        <a onClick={toggleOpen}>Viewing Options
-          {props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
-        </a>
+    <ClickOutside onClickOutside={handleClickOutside}>
+      <div className={cn([styles.root, 'coral-plugin-viewing-options'])}>
+        <div>
+          <button className={styles.button} onClick={toggleOpen}>Viewing Options
+            {props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
+          </button>
+        </div>
+        {
+          props.open ? (
+            <div className={cn([styles.list, 'coral-plugin-viewing-options-list'])}>
+              <ul>
+                {
+                  React.Children.map(<Slot fill="viewingOptions" />, (component) => {
+                    return React.createElement('li', {
+                      className: 'coral-plugin-viewing-options-item'
+                    }, component);
+                  })
+                }
+              </ul>
+            </div>
+          ) : null
+        }
       </div>
-      {
-        props.open ? (
-          <div className={cn([styles.list, 'coral-plugin-viewing-options-list'])}>
-            <ul>
-              {
-                React.Children.map(<Slot fill="viewingOptions" />, (component) => {
-                  return React.createElement('li', {
-                    className: 'coral-plugin-viewing-options-item'
-                  }, component);
-                })
-              }
-            </ul>
-          </div>
-        ) : null
-      }
-    </div>
+    </ClickOutside>
   );
 };
 

plugins/coral-plugin-viewing-options/client/index.js

@@ -4,6 +4,6 @@ import reducer from './reducer';
 export default {
   reducer,
   slots: {
-    streamBox: [ViewingOptions]
+    streamFilter: [ViewingOptions]
   }
 };