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} > { 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")} />