Feature/onClose prop support

src/lib/interfaces.ts

@@ -24,6 +24,7 @@ export interface ISelectProps {
   ItemRenderer?: Function;
   selectAllLabel?: string;
   isLoading?: boolean;
+  onClose?;
   disabled?: boolean;
   disableSearch?: boolean;
   shouldToggleOnHover?: boolean;

src/multi-select/dropdown.tsx

@@ -1,23 +1,24 @@
 /**
- * A generic dropdown component.  It takes the children of the component
- * and hosts it in the component.  When the component is selected, it
+ * A generic dropdown component. It takes the children of the component
+ * and hosts it in the component. When the component is selected, it
  * drops-down the contentComponent and applies the contentProps.
  */
 import useOutsideClick from "@rooks/use-outside-click";
 import { css } from "goober";
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 
 import Arrow from "./arrow";
 import Loading from "./loading";
 
 interface IDropdownProps {
   children?;
-  contentComponent;
-  contentProps: object;
   isLoading?: boolean;
   disabled?: boolean;
-  shouldToggleOnHover?: boolean;
   labelledBy?: string;
+  contentProps: object;
+  onClose?;
+  contentComponent;
+  shouldToggleOnHover?: boolean;
 }
 
 const PanelContainer = css({
@@ -68,21 +69,31 @@ const DropdownHeading = css({
 });
 
 const Dropdown = ({
+  onClose,
   children,
-  contentComponent: ContentComponent,
-  contentProps,
-  isLoading,
   disabled,
-  shouldToggleOnHover,
+  isLoading,
   labelledBy,
+  contentProps,
+  contentComponent: ContentComponent,
+  shouldToggleOnHover,
 }: IDropdownProps) => {
   const [expanded, setExpanded] = useState(false);
   const [hasFocus, setHasFocus] = useState(false);
-
+  const [onCloseEnabled, enableOnClose] = useState(false);
   const wrapper: any = useRef();
 
   useOutsideClick(wrapper, () => setExpanded(false));
 
+  /* eslint-disable react-hooks/exhaustive-deps */
+  useEffect(() => {
+    if (expanded === true) {
+      enableOnClose(true);
+    } else if (onCloseEnabled && !expanded) {
+      onClose();
+    }
+  }, [expanded]);
+
   const handleKeyDown = e => {
     switch (e.which) {
       case 27: // Escape
@@ -98,12 +109,15 @@ const Dropdown = ({
     }
     e.preventDefault();
   };
+
   const handleHover = (iexpanded: boolean) => {
     shouldToggleOnHover && setExpanded(iexpanded);
   };
+
   const handleFocus = e => {
     e.target === wrapper && !hasFocus && setHasFocus(true);
   };
+
   const handleBlur = () => hasFocus && setHasFocus(false);
   const handleMouseEnter = () => handleHover(true);
   const handleMouseLeave = () => handleHover(false);

src/multi-select/index.tsx

@@ -37,6 +37,7 @@ const MultiSelect = ({
   overrideStrings,
   onChange,
   disabled,
+  onClose,
   ItemRenderer,
   selectAllLabel,
   isLoading,
@@ -49,6 +50,7 @@ const MultiSelect = ({
     <div className={`${MultiSelectBox} ${className}`}>
       <Dropdown
         isLoading={isLoading}
+        onClose={onClose}
         contentComponent={SelectPanel}
         shouldToggleOnHover={shouldToggleOnHover}
         contentProps={{

stories/default.stories.tsx

@@ -28,6 +28,7 @@ export const toStorybook = () => {
         shouldToggleOnHover={boolean("shouldToggleOnHover", false)}
         disableSearch={boolean("disableSearch", false)}
         value={selected}
+        onClose={()=>{console.log("Closed")}}
         disabled={boolean("disabled", false)}
         onChange={setSelected}
         labelledBy={text("labelledBy", "Select Fruits")}