@etsoo/materialui 1.1.19 → 1.1.21

package/lib/pages/UserMenu.d.ts

@@ -1,3 +1,4 @@
+import { EventWatcher } from "@etsoo/react";
 import React from "react";
 /**
  * User menu props
@@ -27,6 +28,10 @@ export interface UserMenuLocalProps extends Omit<UserMenuProps, "children"> {
      */
     smDown: boolean;
 }
+/**
+ * Event watcher
+ */
+export declare const eventWatcher: EventWatcher;
 /**
  * User menu
  * @param props Props

package/lib/pages/UserMenu.js

@@ -1,6 +1,13 @@
+import { EventWatcher } from "@etsoo/react";
 import { IconButton, Menu } from "@mui/material";
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import { UserAvatar } from "../UserAvatar";
+/**
+ * Event watcher
+ */
+export const eventWatcher = new EventWatcher();
+const eventWatcherAction = "usermenu.href.transitionend";
 /**
  * User menu
  * @param props Props
@@ -13,6 +20,8 @@ export function UserMenu(props) {
     const [anchorEl, setAnchorEl] = React.useState();
     // User menu open or not
     const isMenuOpen = Boolean(anchorEl);
+    // Route
+    const navigate = useNavigate();
     // User menu
     const handleUserMenuOpen = (event) => {
         setAnchorEl(event.currentTarget);
@@ -20,6 +29,24 @@ export function UserMenu(props) {
     const handleMenuClose = () => {
         setAnchorEl(undefined);
     };
+    const handleClick = async (event) => {
+        var _a;
+        handleMenuClose();
+        const item = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest("li[href]");
+        if (item != null) {
+            const href = item.getAttribute("href");
+            if (href) {
+                // Even set transitionDuration = 0, still need to wait a little bit
+                eventWatcher.add({
+                    type: eventWatcherAction,
+                    action: () => {
+                        navigate(href);
+                    },
+                    once: true
+                });
+            }
+        }
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement(IconButton, { edge: "end", "aria-haspopup": "true", onClick: handleUserMenuOpen, color: "inherit" },
             React.createElement(UserAvatar, { title: name, src: avatar })),
@@ -54,5 +81,5 @@ export function UserMenu(props) {
             }, keepMounted: true, transformOrigin: {
                 vertical: "top",
                 horizontal: "right"
-            }, open: isMenuOpen, onClick: handleMenuClose, onClose: handleMenuClose }, children(handleMenuClose))));
+            }, open: isMenuOpen, onTransitionEnd: () => eventWatcher.do(eventWatcherAction), onClick: handleClick, onClose: handleMenuClose }, children(handleMenuClose))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -70,7 +70,7 @@
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-imask": "^6.4.3",
-    "react-router-dom": "^6.7.0",
+    "react-router-dom": "^6.8.0",
     "react-window": "^1.8.8"
   },
   "devDependencies": {
@@ -86,8 +86,8 @@
     "@types/jest": "^29.4.0",
     "@typescript-eslint/eslint-plugin": "^5.49.0",
     "@typescript-eslint/parser": "^5.49.0",
-    "jest": "^29.4.0",
-    "jest-environment-jsdom": "^29.4.0",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1",
     "typescript": "^4.9.4"
   }
 }

package/src/pages/UserMenu.tsx

@@ -1,5 +1,7 @@
+import { EventWatcher } from "@etsoo/react";
 import { IconButton, Menu } from "@mui/material";
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import { UserAvatar } from "../UserAvatar";
 
 /**
@@ -35,6 +37,13 @@ export interface UserMenuLocalProps extends Omit<UserMenuProps, "children"> {
   smDown: boolean;
 }
 
+/**
+ * Event watcher
+ */
+export const eventWatcher = new EventWatcher();
+
+const eventWatcherAction = "usermenu.href.transitionend";
+
 /**
  * User menu
  * @param props Props
@@ -50,6 +59,9 @@ export function UserMenu(props: UserMenuProps) {
   // User menu open or not
   const isMenuOpen = Boolean(anchorEl);
 
+  // Route
+  const navigate = useNavigate();
+
   // User menu
   const handleUserMenuOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
@@ -59,6 +71,25 @@ export function UserMenu(props: UserMenuProps) {
     setAnchorEl(undefined);
   };
 
+  const handleClick = async (event: React.MouseEvent<HTMLDivElement>) => {
+    handleMenuClose();
+
+    const item = (event.target as HTMLElement)?.closest("li[href]");
+    if (item != null) {
+      const href = item.getAttribute("href");
+      if (href) {
+        // Even set transitionDuration = 0, still need to wait a little bit
+        eventWatcher.add({
+          type: eventWatcherAction,
+          action: () => {
+            navigate(href!);
+          },
+          once: true
+        });
+      }
+    }
+  };
+
   return (
     <React.Fragment>
       <IconButton
@@ -108,7 +139,8 @@ export function UserMenu(props: UserMenuProps) {
           horizontal: "right"
         }}
         open={isMenuOpen}
-        onClick={handleMenuClose}
+        onTransitionEnd={() => eventWatcher.do(eventWatcherAction)}
+        onClick={handleClick}
         onClose={handleMenuClose}
       >
         {children(handleMenuClose)}