diff --git a/package-lock.json b/package-lock.json index 0ab2b7a..6cc9cb0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21447,6 +21447,30 @@ "signal-exit": "^3.0.2" } }, + "string-width": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", + "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", + "requires": { + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" + }, + "dependencies": { + "ansi-regex": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz", + "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==" + }, + "strip-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", + "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==", + "requires": { + "ansi-regex": "^3.0.0" + } + } + } + }, "strip-ansi": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", @@ -28377,4 +28401,4 @@ "integrity": "sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==" } } -} +} \ No newline at end of file diff --git a/src/components/better/dropdown.js b/src/components/better/dropdown.js index c774062..a306d69 100644 --- a/src/components/better/dropdown.js +++ b/src/components/better/dropdown.js @@ -3,11 +3,70 @@ import uuid from "uuid" import "./dropdown.scss" -const Dropdown = ({ }) => { +const Dropdown = ({ items = [], activatorText = "Dropdown" }) => { + const [isOpen, setIsOpen] = useState(false); + const listRef = useRef(null); + const activatorRef = useRef(null); + + const handleWrapKeyUp = (event) => { + if (event.key === "Escape" && isOpen) { + setIsOpen(false); + activatorRef.current && activatorRef.current.focus(); + } + }; + + const handleClickActivator = () => { + setIsOpen(!isOpen); + } + + const handleClickOutside = (event) => { + if ((listRef.current && listRef.current.contains(event.target)) || (activatorRef.current && activatorRef.current.contains(event.target))) { + return + } + setIsOpen(false); + }; + + useEffect(() => { + if (isOpen) { + document.addEventListener("mouseup", handleClickOutside); + listRef.current && listRef.current.querySelector('a').focus(); + } else { + document.removeEventListener("mouseup", handleClickOutside); + } + return () => { + document.removeEventListener("mouseup", handleClickOutside); + }; + }, [isOpen]); + + return (
+ +
)