useOnClickOutside

wax-prosemirror-services/src/TablesService/components/TableDropDown.js

@@ -9,7 +9,7 @@ import React, {
 } from 'react';
 import styled from 'styled-components';
 import * as tablesFn from 'prosemirror-tables';
-import { WaxContext, Icon } from 'wax-prosemirror-core';
+import { WaxContext, Icon, useOnClickOutside } from 'wax-prosemirror-core';
 
 const Wrapper = styled.div`
   opacity: ${props => (props.disabled ? '0.4' : '1')};
@@ -81,9 +81,12 @@ const TableDropDown = ({ item }) => {
 
   const { activeView } = useContext(WaxContext);
   const itemRefs = useRef([]);
+  const wrapperRef = useRef();
   const [isOpen, setIsOpen] = useState(false);
   const isDisabled = !item.select(activeView.state);
 
+  useOnClickOutside(wrapperRef, () => setIsOpen(false));
+
   useEffect(() => {
     if (isDisabled) setIsOpen(false);
   }, [isDisabled]);
@@ -129,7 +132,7 @@ const TableDropDown = ({ item }) => {
 
   const TableDropDownComponent = useMemo(
     () => (
-      <Wrapper disabled={isDisabled}>
+      <Wrapper disabled={isDisabled} ref={wrapperRef}>
         <DropDownButton
           aria-expanded={isOpen}
           aria-haspopup

wax-prosemirror-services/src/WaxToolGroups/QuestionsDropDownToolGroupService/DropDownComponent.js

@@ -9,7 +9,7 @@ import React, {
   createRef,
 } from 'react';
 import styled from 'styled-components';
-import { WaxContext, Icon } from 'wax-prosemirror-core';
+import { WaxContext, Icon, useOnClickOutside } from 'wax-prosemirror-core';
 
 const Wrapper = styled.div`
   opacity: ${props => (props.disabled ? '0.4' : '1')};
@@ -67,22 +67,6 @@ const StyledIcon = styled(Icon)`
 `;
 
 const DropDownComponent = ({ view, tools }) => {
-  const context = useContext(WaxContext);
-  const {
-    activeView,
-    activeViewId,
-    pmViews: { main },
-  } = context;
-  const { state } = view;
-
-  const itemRefs = useRef([]);
-  const [isOpen, setIsOpen] = useState(false);
-
-  const [label, setLabel] = useState(null);
-  const isEditable = main.props.editable(editable => {
-    return editable;
-  });
-
   const dropDownOptions = [
     {
       label: 'Multiple Choice',
@@ -126,6 +110,24 @@ const DropDownComponent = ({ view, tools }) => {
     },
   ];
 
+  const context = useContext(WaxContext);
+  const {
+    activeView,
+    activeViewId,
+    pmViews: { main },
+  } = context;
+  const { state } = view;
+
+  const itemRefs = useRef([]);
+  const wrapperRef = useRef();
+  const [isOpen, setIsOpen] = useState(false);
+  useOnClickOutside(wrapperRef, () => setIsOpen(false));
+
+  const [label, setLabel] = useState(null);
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+
   useEffect(() => {
     setLabel('Question Type');
     dropDownOptions.forEach(option => {
@@ -186,7 +188,7 @@ const DropDownComponent = ({ view, tools }) => {
 
   const MultipleDropDown = useMemo(
     () => (
-      <Wrapper disabled={isDisabled}>
+      <Wrapper disabled={isDisabled} ref={wrapperRef}>
         <DropDownButton
           aria-expanded={isOpen}
           aria-haspopup