fix(menu): submenu open state bugs

moecasts · Jun 29, 2024 · fdf9e97 · fdf9e97
1 parent 91a2ede
commit fdf9e97
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 26 deletions.
diff --git a/packages/casts-menu/src/components/hooks/use-sub-menu.ts b/packages/casts-menu/src/components/hooks/use-sub-menu.ts
@@ -25,12 +25,13 @@ export const useSubMenu = (props: UseSubMenuProps) => {
 
   const expandType = collapse ? 'popup' : menuContext.expandType;
 
-  const [_open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false);
 
-  const open =
-    has(parentContext, 'open') && expandType === 'popup'
-      ? parentContext.open && _open
-      : _open;
+  const [_popupOpen, setPopupOpen] = useState(false);
+  const popupOpen =
+    has(parentContext, 'popupOpen') && expandType === 'popup'
+      ? parentContext.popupOpen && _popupOpen
+      : _popupOpen;
 
   const prefixCls = getPrefixCls('sub-menu');
 
@@ -92,10 +93,13 @@ export const useSubMenu = (props: UseSubMenuProps) => {
       return;
     }
 
-    setOpen(open);
     if (expandType === 'popup') {
+      setPopupOpen(open);
       parentContext.onOpenChange?.(open);
+      return;
     }
+
+    setOpen(open);
   };
 
   /* --------------------------------- arrow ---------------------------------------- */
@@ -113,6 +117,7 @@ export const useSubMenu = (props: UseSubMenuProps) => {
     popupClasses,
     arrowClasses,
     handleSubOpenChange,
+    popupOpen,
     open,
     disabled,
     focusable,

diff --git a/packages/casts-menu/src/components/styles/sub-menu.scss b/packages/casts-menu/src/components/styles/sub-menu.scss
@@ -55,5 +55,14 @@
     .#{$sub-menu-prefix-cls}-arrow {
       transform: rotate(-90deg) !important;
     }
+
+    .#{$prefix-cls}-popup-content {
+      > *:first-child {
+        margin-top: 0px;
+      }
+      > *:last-child {
+        margin-bottom: 0px;
+      }
+    }
   }
 }
diff --git a/packages/casts-menu/src/components/sub-menu.tsx b/packages/casts-menu/src/components/sub-menu.tsx
@@ -43,6 +43,7 @@ export const SubMenu = forwardRef(
       arrowClasses,
       handleSubOpenChange,
       open,
+      popupOpen,
       disabled,
       focusable,
       level,
@@ -62,7 +63,7 @@ export const SubMenu = forwardRef(
     ]);
 
     const { collapseRef, collapseStyles } = useCollapse({
-      open: open,
+      open,
       duration,
     });
 
@@ -78,15 +79,15 @@ export const SubMenu = forwardRef(
 
     const popupProps: Partial<PopupProps> = { ...propsWithDefault.popupProps };
     if (expandType === 'popup') {
-      popupProps.visible = open;
+      popupProps.visible = popupOpen;
     }
 
     const getFlip = () => {
       if (expandType !== 'popup') {
-        return open;
+        return popupOpen;
       }
 
-      return !isUndefined(level) && level <= 1 && open;
+      return !isUndefined(level) && level <= 1 && popupOpen;
     };
 
     const innerComponent = (
@@ -106,12 +107,25 @@ export const SubMenu = forwardRef(
       </MenuItem>
     );
 
+    const getWholeSubStyles = () => {
+      const styles = {
+        ...subStyles,
+        ...collapseStyles,
+      };
+
+      if (expandType === 'popup') {
+        styles.display = 'none';
+      }
+
+      return styles;
+    };
+
     const childComponent = (
       <>
         <Popup
           className={popupClasses}
           content={children}
-          visible={expandType === 'popup' && open}
+          visible={popupOpen}
           onVisibleChange={handleSubOpenChange}
           disabled={disabled || expandType !== 'popup'}
           attach={rootRef}
@@ -120,22 +134,21 @@ export const SubMenu = forwardRef(
         >
           {innerComponent}
         </Popup>
-        {expandType === 'normal' && (
-          <ul
-            className={subClasses}
-            ref={collapseRef as Ref<HTMLUListElement>}
-            style={{ ...subStyles, ...collapseStyles }}
-            aria-hidden={!open || disabled}
-          >
-            {children}
-          </ul>
-        )}
+        <ul
+          className={subClasses}
+          ref={collapseRef as Ref<HTMLUListElement>}
+          style={getWholeSubStyles()}
+          aria-hidden={!open || disabled}
+        >
+          {children}
+        </ul>
       </>
     );
 
     return (
       <SubMenuProvider
         open={open}
+        popupOpen={popupOpen}
         onOpenChange={handleSubOpenChange}
         disabled={disabled}
         level={level}

diff --git a/packages/casts-menu/src/components/types/menu-context.ts b/packages/casts-menu/src/components/types/menu-context.ts
@@ -43,6 +43,8 @@ export type MenuProviderProps = BaseComponentProps & UseMenuProviderProps;
 export type SubMenuContextProps = {
   open?: boolean;
 
+  popupOpen?: boolean;
+
   onOpenChange?: (open: boolean) => void;
 
   disabled?: boolean;

diff --git a/packages/casts-theme/src/tokens/core/palette.json b/packages/casts-theme/src/tokens/core/palette.json
@@ -265,23 +265,23 @@
           },
           "100": {
             "value": "0, 0%, 97%",
-            "darkValue": "0, 0%, 5%"
+            "darkValue": "0, 0%, 9%"
           },
           "150": {
             "value": "0, 0%, 96.5%",
-            "darkValue": "0, 0%, 8%"
+            "darkValue": "0, 0%, 13%"
           },
           "200": {
             "value": "0, 0%, 95%",
-            "darkValue": "0, 0%, 15%"
+            "darkValue": "0, 0%, 18%"
           },
           "300": {
             "value": "0, 0%, 93%",
-            "darkValue": "0, 0%, 18%"
+            "darkValue": "0, 0%, 21%"
           },
           "400": {
             "value": "0, 0%, 90%",
-            "darkValue": "0, 0%, 21%"
+            "darkValue": "0, 0%, 26%"
           },
           "500": {
             "value": "0, 0%, 60%",