From 02b7fe89e265f63640485e1dcb3ea23d58a3a398 Mon Sep 17 00:00:00 2001
From: mnoster <njporter10@gmail.com>
Date: Wed, 6 May 2020 11:44:56 -0700
Subject: [PATCH] :sparkles: added onMenuToggle

---
 package.json                  | 2 +-
 src/lib/interfaces.ts         | 1 +
 src/multi-select/dropdown.tsx | 9 ++++++++-
 src/multi-select/index.tsx    | 2 ++
 stories/default.stories.tsx   | 1 +
 5 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index dcdc702..14a117d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-multi-select-component",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all",
   "author": "Harsh Zalavadiya",
   "license": "MIT",
diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts
index 69ff254..cb8bcbb 100644
--- a/src/lib/interfaces.ts
+++ b/src/lib/interfaces.ts
@@ -32,4 +32,5 @@ export interface ISelectProps {
   overrideStrings?: { [key: string]: string };
   labelledBy: string;
   className?: string;
+  onMenuToggle?;
 }
diff --git a/src/multi-select/dropdown.tsx b/src/multi-select/dropdown.tsx
index 4c552f7..901c76b 100644
--- a/src/multi-select/dropdown.tsx
+++ b/src/multi-select/dropdown.tsx
@@ -5,7 +5,7 @@
  */
 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";
@@ -18,6 +18,7 @@ interface IDropdownProps {
   disabled?: boolean;
   shouldToggleOnHover?: boolean;
   labelledBy?: string;
+  onMenuToggle?;
 }
 
 const PanelContainer = css({
@@ -75,6 +76,7 @@ const Dropdown = ({
   disabled,
   shouldToggleOnHover,
   labelledBy,
+  onMenuToggle,
 }: IDropdownProps) => {
   const [expanded, setExpanded] = useState(false);
   const [hasFocus, setHasFocus] = useState(false);
@@ -83,6 +85,11 @@ const Dropdown = ({
 
   useOutsideClick(wrapper, () => setExpanded(false));
 
+  /* eslint-disable react-hooks/exhaustive-deps */
+  useEffect(() => {
+    onMenuToggle && onMenuToggle(expanded);
+  }, [expanded]);
+
   const handleKeyDown = e => {
     switch (e.which) {
       case 27: // Escape
diff --git a/src/multi-select/index.tsx b/src/multi-select/index.tsx
index c4143b1..e184879 100644
--- a/src/multi-select/index.tsx
+++ b/src/multi-select/index.tsx
@@ -43,6 +43,7 @@ const MultiSelect = ({
   disableSearch,
   filterOptions,
   labelledBy,
+  onMenuToggle,
 }: ISelectProps) => {
   const nvalue = value || [];
   return (
@@ -66,6 +67,7 @@ const MultiSelect = ({
         }}
         disabled={disabled}
         labelledBy={labelledBy}
+        onMenuToggle={onMenuToggle}
       >
         <DropdownHeader
           value={nvalue}
diff --git a/stories/default.stories.tsx b/stories/default.stories.tsx
index b161f0c..1f210fe 100644
--- a/stories/default.stories.tsx
+++ b/stories/default.stories.tsx
@@ -30,6 +30,7 @@ export const toStorybook = () => {
         value={selected}
         disabled={boolean("disabled", false)}
         onChange={setSelected}
+        onMenuToggle={(s)=>{console.log("Select Toggle: ", s)}}
         labelledBy={text("labelledBy", "Select Fruits")}
         className={text("className", "multi-select")}
       />