From 246f96823855d088708047d2c4c6762758e00a14 Mon Sep 17 00:00:00 2001
From: xiejay97 <xiejay97@gmail.com>
Date: Mon, 29 Nov 2021 11:23:20 +0800
Subject: [PATCH] feat(ui): support two-way binding

---
 .../site/src/app/components/route/DemoBox.tsx | 15 +---
 .../src/app/components/sidebar/Sidebar.tsx    | 13 +---
 packages/ui/src/components/_popup/Popup.tsx   | 70 +++++++++++--------
 packages/ui/src/components/drawer/Drawer.tsx  | 33 +++++----
 packages/ui/src/components/drawer/README.md   |  2 +-
 .../src/components/drawer/README.zh-Hant.md   |  2 +-
 .../ui/src/components/drawer/demos/1.Basic.md |  7 +-
 .../components/drawer/demos/2.Placement.md    |  6 +-
 .../components/drawer/demos/3.Container.md    |  6 +-
 .../src/components/drawer/demos/4.Nested.md   | 11 +--
 .../src/components/drawer/demos/5.Footer.md   |  9 +--
 packages/ui/src/components/menu/Menu.tsx      | 56 +++++++++------
 packages/ui/src/components/menu/MenuSub.tsx   |  2 +-
 packages/ui/src/components/menu/README.md     |  7 +-
 .../ui/src/components/menu/README.zh-Hant.md  |  7 +-
 .../ui/src/components/menu/demos/1.Basic.md   |  5 +-
 .../ui/src/components/menu/demos/3.Popup.md   |  3 +-
 .../ui/src/components/menu/demos/4.Icon.md    |  3 +-
 .../menu/demos/5.SingleExpansion.md           |  5 +-
 packages/ui/src/components/tooltip/README.md  |  2 +-
 .../src/components/tooltip/README.zh-Hant.md  |  2 +-
 .../src/components/tooltip/demos/1.Basic.md   |  5 +-
 .../components/tooltip/demos/3.AutoPlace.md   |  2 +-
 23 files changed, 136 insertions(+), 137 deletions(-)

diff --git a/packages/site/src/app/components/route/DemoBox.tsx b/packages/site/src/app/components/route/DemoBox.tsx
index 49871f68..2d858e05 100644
--- a/packages/site/src/app/components/route/DemoBox.tsx
+++ b/packages/site/src/app/components/route/DemoBox.tsx
@@ -35,14 +35,6 @@ export function AppDemoBox(props: AppDemoBoxProps) {
     setCopycode(true);
   }, [setCopycode, tsxSource]);
 
-  const [copyVisible, setCopyVisible] = useImmer(false);
-  const handleCopyTrige = useCallback(
-    (v) => {
-      setCopyVisible(v);
-    },
-    [setCopyVisible]
-  );
-
   const afterCopyTrige = useCallback(
     (v) => {
       if (!v) {
@@ -100,12 +92,7 @@ export function AppDemoBox(props: AppDemoBoxProps) {
             <path d="M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7zM378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211L378.2 732.5z"></path>
           </DIcon>
         </DTooltip>
-        <DTooltip
-          dVisible={copyVisible}
-          dTitle={copyCode ? t('Copied!') : t('Copy code')}
-          onTrigger={handleCopyTrige}
-          afterVisibleChange={afterCopyTrige}
-        >
+        <DTooltip dTitle={copyCode ? t('Copied!') : t('Copy code')} afterVisibleChange={afterCopyTrige}>
           <DIcon className="icon-button" dSize={18} onClick={handleCopyClick}>
             {copyCode ? (
               <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path>
diff --git a/packages/site/src/app/components/sidebar/Sidebar.tsx b/packages/site/src/app/components/sidebar/Sidebar.tsx
index 2a0116a9..d9baba91 100644
--- a/packages/site/src/app/components/sidebar/Sidebar.tsx
+++ b/packages/site/src/app/components/sidebar/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
@@ -12,14 +12,7 @@ export function AppSidebar() {
   const { t, i18n } = useTranslation();
   const navigate = useNavigate();
 
-  const [activeId, setActiveId] = useImmer<string | undefined>(undefined);
-
-  const handleActiveChange = useCallback(
-    (id) => {
-      setActiveId(id);
-    },
-    [setActiveId]
-  );
+  const [activeId, setActiveId] = useImmer<string | null>(null);
 
   useEffect(() => {
     if (window.location.href.includes(String.raw`/components/`)) {
@@ -36,7 +29,7 @@ export function AppSidebar() {
 
   return (
     <nav className="app-sidebar">
-      <DMenu dActive={activeId} onActiveChange={handleActiveChange}>
+      <DMenu dActive={[activeId, setActiveId]}>
         {menu.map((group) => (
           <DMenuGroup key={group.title} dId={group.title} dTitle={t(`menu-group.${group.title}`)}>
             {group.children.map((child) => (
diff --git a/packages/ui/src/components/_popup/Popup.tsx b/packages/ui/src/components/_popup/Popup.tsx
index 6327bcd2..2727deb0 100644
--- a/packages/ui/src/components/_popup/Popup.tsx
+++ b/packages/ui/src/components/_popup/Popup.tsx
@@ -1,4 +1,5 @@
 import type { DElementSelector } from '../../hooks/element-ref';
+import type { Updater } from '../../hooks/immer';
 import type { DPlacement } from '../../utils/position';
 import type { DTransitionStateList, DTransitionRef } from '../_transition';
 
@@ -6,7 +7,7 @@ import { isUndefined } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useImperativeHandle, useRef } from 'react';
 import ReactDOM, { flushSync } from 'react-dom';
 
-import { useDPrefixConfig, useAsync, useRefSelector, useManualOrAutoState, useId, useImmer, useRefCallback } from '../../hooks';
+import { useDPrefixConfig, useAsync, useRefSelector, useId, useImmer, useRefCallback } from '../../hooks';
 import { getClassName, globalMaxIndexManager, getPopupPlacementStyle } from '../../utils';
 import { DTransition } from '../_transition';
 
@@ -25,7 +26,7 @@ export interface DPopupRef {
 }
 
 export interface DPopupProps extends React.HTMLAttributes<HTMLDivElement> {
-  dVisible?: boolean;
+  dVisible?: [boolean, Updater<boolean>?];
   dPopupContent: React.ReactNode;
   dTriggerRender?: (props: DTriggerRenderProps) => React.ReactNode;
   dTriggerEl?: HTMLElement | null;
@@ -91,7 +92,18 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
   const [zIndex, setZIndex] = useImmer(1000);
   const id = useId();
 
-  const [visible, dispatchVisible] = useManualOrAutoState(false, dVisible, onTrigger);
+  const setVisible = dVisible?.[1];
+  const [autoVisible, setAutoVisible] = useImmer(false);
+  const visible = dVisible?.[0] ?? autoVisible;
+  const changeVisible = useCallback(
+    (val?: boolean) => {
+      const _val = isUndefined(val) ? !visible : val;
+      setVisible?.(_val);
+      setAutoVisible(_val);
+      onTrigger?.(_val);
+    },
+    [onTrigger, setAutoVisible, setVisible, visible]
+  );
 
   const [autoPlacement, setAutoPlacement] = useImmer<DPlacement>(dPlacement);
 
@@ -249,11 +261,11 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
         dataRef.current.clearTid && dataRef.current.clearTid();
         dataRef.current.clearTid = asyncCapture.setTimeout(() => {
           dataRef.current.clearTid = null;
-          dispatchVisible({ value: true });
+          changeVisible(true);
         }, dMouseEnterDelay);
       }
     },
-    [asyncCapture, dMouseEnterDelay, dTrigger, onMouseEnter, dispatchVisible]
+    [onMouseEnter, dTrigger, asyncCapture, dMouseEnterDelay, changeVisible]
   );
 
   const handleMouseLeave = useCallback(
@@ -264,11 +276,11 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
         dataRef.current.clearTid && dataRef.current.clearTid();
         dataRef.current.clearTid = asyncCapture.setTimeout(() => {
           dataRef.current.clearTid = null;
-          dispatchVisible({ value: false });
+          changeVisible(false);
         }, dMouseLeaveDelay);
       }
     },
-    [asyncCapture, dMouseLeaveDelay, dTrigger, onMouseLeave, dispatchVisible]
+    [onMouseLeave, dTrigger, asyncCapture, dMouseLeaveDelay, changeVisible]
   );
 
   const handleFocus = useCallback(
@@ -277,10 +289,10 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
 
       if (dTrigger === 'focus') {
         dataRef.current.clearTid && dataRef.current.clearTid();
-        dispatchVisible({ value: true });
+        changeVisible(true);
       }
     },
-    [dTrigger, onFocus, dispatchVisible]
+    [onFocus, dTrigger, changeVisible]
   );
 
   const handleBlur = useCallback(
@@ -288,10 +300,10 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
       onBlur?.(e);
 
       if (dTrigger === 'focus') {
-        dataRef.current.clearTid = asyncCapture.setTimeout(() => dispatchVisible({ value: false }), 20);
+        dataRef.current.clearTid = asyncCapture.setTimeout(() => changeVisible(false), 20);
       }
     },
-    [asyncCapture, dTrigger, onBlur, dispatchVisible]
+    [onBlur, dTrigger, asyncCapture, changeVisible]
   );
 
   const handleClick = useCallback(
@@ -300,15 +312,15 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
 
       if (dTrigger === 'click') {
         dataRef.current.clearTid && dataRef.current.clearTid();
-        dispatchVisible({ value: true });
+        changeVisible(true);
       }
     },
-    [dTrigger, onClick, dispatchVisible]
+    [onClick, dTrigger, changeVisible]
   );
 
   //#region DidUpdate
   useEffect(() => {
-    if (dVisible) {
+    if (visible) {
       if (isUndefined(dZIndex)) {
         if (isUndefined(dContainer)) {
           const [key, maxZIndex] = globalMaxIndexManager.getMaxIndex();
@@ -323,7 +335,7 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
         setZIndex(dZIndex);
       }
     }
-  }, [dVisible, dContainer, dZIndex, setZIndex]);
+  }, [dContainer, dZIndex, setZIndex, visible]);
 
   useEffect(() => {
     if (!isUndefined(dTriggerEl)) {
@@ -335,7 +347,7 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
               dataRef.current.clearTid && dataRef.current.clearTid();
               dataRef.current.clearTid = asyncCapture.setTimeout(() => {
                 dataRef.current.clearTid = null;
-                flushSync(() => dispatchVisible({ value: true }));
+                flushSync(() => changeVisible(true));
               }, dMouseEnterDelay);
             },
           });
@@ -344,7 +356,7 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
               dataRef.current.clearTid && dataRef.current.clearTid();
               dataRef.current.clearTid = asyncCapture.setTimeout(() => {
                 dataRef.current.clearTid = null;
-                flushSync(() => dispatchVisible({ value: false }));
+                flushSync(() => changeVisible(false));
               }, dMouseLeaveDelay);
             },
           });
@@ -354,12 +366,12 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
           asyncGroup.fromEvent(triggerRef.current, 'focus').subscribe({
             next: () => {
               dataRef.current.clearTid && dataRef.current.clearTid();
-              flushSync(() => dispatchVisible({ value: true }));
+              flushSync(() => changeVisible(true));
             },
           });
           asyncGroup.fromEvent(triggerRef.current, 'blur').subscribe({
             next: () => {
-              dataRef.current.clearTid = asyncCapture.setTimeout(() => flushSync(() => dispatchVisible({ value: false })), 20);
+              dataRef.current.clearTid = asyncCapture.setTimeout(() => flushSync(() => changeVisible(false)), 20);
             },
           });
         }
@@ -368,7 +380,7 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
           asyncGroup.fromEvent(triggerRef.current, 'click').subscribe({
             next: () => {
               dataRef.current.clearTid && dataRef.current.clearTid();
-              flushSync(() => dispatchVisible({ reverse: true }));
+              flushSync(() => changeVisible());
             },
           });
         }
@@ -378,7 +390,7 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
         asyncCapture.deleteGroup(asyncId);
       };
     }
-  }, [asyncCapture, dMouseEnterDelay, dMouseLeaveDelay, dTrigger, dTriggerEl, dispatchVisible, triggerRef]);
+  }, [asyncCapture, changeVisible, dMouseEnterDelay, dMouseLeaveDelay, dTrigger, dTriggerEl, triggerRef]);
 
   useEffect(() => {
     const [asyncGroup, asyncId] = asyncCapture.createGroup();
@@ -387,7 +399,7 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
       asyncGroup.fromEvent(window, 'click', { capture: true }).subscribe({
         next: () => {
           dataRef.current.clearTid = asyncGroup.setTimeout(() => {
-            flushSync(() => dispatchVisible({ value: false }));
+            flushSync(() => changeVisible(false));
           }, 20);
         },
       });
@@ -396,7 +408,7 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
     return () => {
       asyncCapture.deleteGroup(asyncId);
     };
-  }, [asyncCapture, dTrigger, dispatchVisible]);
+  }, [asyncCapture, changeVisible, dTrigger]);
 
   useEffect(() => {
     const [asyncGroup, asyncId] = asyncCapture.createGroup();
@@ -438,35 +450,35 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
         dataRef.current.clearTid && dataRef.current.clearTid();
         dataRef.current.clearTid = asyncCapture.setTimeout(() => {
           dataRef.current.clearTid = null;
-          dispatchVisible({ value: true });
+          changeVisible(true);
         }, dMouseEnterDelay);
       };
       _triggerRenderProps.onMouseLeave = () => {
         dataRef.current.clearTid && dataRef.current.clearTid();
         dataRef.current.clearTid = asyncCapture.setTimeout(() => {
           dataRef.current.clearTid = null;
-          dispatchVisible({ value: false });
+          changeVisible(false);
         }, dMouseLeaveDelay);
       };
     }
     if (dTrigger === 'focus') {
       _triggerRenderProps.onFocus = () => {
         dataRef.current.clearTid && dataRef.current.clearTid();
-        dispatchVisible({ value: true });
+        changeVisible(true);
       };
       _triggerRenderProps.onBlur = () => {
-        dataRef.current.clearTid = asyncCapture.setTimeout(() => dispatchVisible({ value: false }), 20);
+        dataRef.current.clearTid = asyncCapture.setTimeout(() => changeVisible(false), 20);
       };
     }
     if (dTrigger === 'click') {
       _triggerRenderProps.onClick = () => {
         dataRef.current.clearTid && dataRef.current.clearTid();
-        dispatchVisible({ reverse: true });
+        changeVisible();
       };
     }
 
     return _triggerRenderProps;
-  }, [asyncCapture, dMouseEnterDelay, dMouseLeaveDelay, dPrefix, dTrigger, dispatchVisible, id]);
+  }, [asyncCapture, changeVisible, dMouseEnterDelay, dMouseLeaveDelay, dPrefix, dTrigger, id]);
 
   return (
     <>
diff --git a/packages/ui/src/components/drawer/Drawer.tsx b/packages/ui/src/components/drawer/Drawer.tsx
index 0c4f5dc3..08ec37cf 100644
--- a/packages/ui/src/components/drawer/Drawer.tsx
+++ b/packages/ui/src/components/drawer/Drawer.tsx
@@ -1,4 +1,5 @@
 import type { DElementSelector } from '../../hooks/element-ref';
+import type { Updater } from '../../hooks/immer';
 import type { DTransitionRef } from '../_transition';
 
 import { isUndefined } from 'lodash';
@@ -31,7 +32,7 @@ export interface DDrawerRef {
 }
 
 export interface DDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
-  dVisible?: boolean;
+  dVisible: [boolean, Updater<boolean>?];
   dContainer?: DElementSelector | false;
   dPlacement?: 'top' | 'right' | 'bottom' | 'left';
   dWidth?: number | string;
@@ -50,7 +51,7 @@ export interface DDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const DDrawer = React.forwardRef<DDrawerRef, DDrawerProps>((props, ref) => {
   const {
-    dVisible = false,
+    dVisible,
     dContainer,
     dPlacement = 'right',
     dWidth = 400,
@@ -90,6 +91,8 @@ export const DDrawer = React.forwardRef<DDrawerRef, DDrawerProps>((props, ref) =
   const [absoluteStyle, setAbsoluteStyle] = useImmer<React.CSSProperties>({});
   const [zIndex, setZIndex] = useImmer(1000);
 
+  const [visible, setVisible] = dVisible;
+
   const handleContainer = useCallback(() => {
     if (isUndefined(dContainer)) {
       let el = document.getElementById(`${dPrefix}drawer-root`);
@@ -116,9 +119,10 @@ export const DDrawer = React.forwardRef<DDrawerRef, DDrawerProps>((props, ref) =
 
   const handleMaskClose = useCallback(() => {
     if (dMaskClosable) {
+      setVisible?.(false);
       onClose?.();
     }
-  }, [dMaskClosable, onClose]);
+  }, [dMaskClosable, onClose, setVisible]);
 
   const updatePosition = useCallback(() => {
     if (drawerEl && containerRef.current) {
@@ -130,14 +134,15 @@ export const DDrawer = React.forwardRef<DDrawerRef, DDrawerProps>((props, ref) =
   }, [containerRef, drawerEl, setAbsoluteStyle]);
 
   const closeDrawer = useCallback(() => {
+    setVisible?.(false);
     onClose?.();
-  }, [onClose]);
+  }, [onClose, setVisible]);
 
-  useLockScroll(dVisible && isUndefined(dContainer));
+  useLockScroll(visible && isUndefined(dContainer));
 
   //#region DidUpdate
   useEffect(() => {
-    if (dVisible) {
+    if (visible) {
       if (isUndefined(dZIndex)) {
         if (isUndefined(dContainer)) {
           const [key, maxZIndex] = globalMaxIndexManager.getMaxIndex();
@@ -152,11 +157,11 @@ export const DDrawer = React.forwardRef<DDrawerRef, DDrawerProps>((props, ref) =
         setZIndex(dZIndex);
       }
     }
-  }, [dContainer, dVisible, dZIndex, setZIndex]);
+  }, [dContainer, dZIndex, setZIndex, visible]);
 
   useEffect(() => {
     const [asyncGroup, asyncId] = asyncCapture.createGroup();
-    if (dVisible && !isUndefined(dContainer) && containerRef.current) {
+    if (visible && !isUndefined(dContainer) && containerRef.current) {
       const throttleUpdate = () => {
         if (transition) {
           transition.transitionThrottle.run(updatePosition);
@@ -172,17 +177,17 @@ export const DDrawer = React.forwardRef<DDrawerRef, DDrawerProps>((props, ref) =
     return () => {
       asyncCapture.deleteGroup(asyncId);
     };
-  }, [asyncCapture, containerRef, dContainer, dVisible, transition, updatePosition]);
+  }, [asyncCapture, containerRef, dContainer, transition, updatePosition, visible]);
 
   useEffect(() => {
     const [asyncGroup, asyncId] = asyncCapture.createGroup();
-    if (dVisible) {
-      asyncGroup.onEscKeydown(() => onClose?.());
+    if (visible) {
+      asyncGroup.onEscKeydown(closeDrawer);
     }
     return () => {
       asyncCapture.deleteGroup(asyncId);
     };
-  }, [asyncCapture, dVisible, id, onClose]);
+  }, [asyncCapture, closeDrawer, id, visible]);
   //#endregion
 
   useImperativeHandle(
@@ -214,7 +219,7 @@ export const DDrawer = React.forwardRef<DDrawerRef, DDrawerProps>((props, ref) =
       <DTransition
         dEl={drawerContentEl}
         ref={transitionRef}
-        dVisible={dVisible}
+        dVisible={visible}
         dStateList={() => {
           const transform =
             dPlacement === 'top'
@@ -292,7 +297,7 @@ export const DDrawer = React.forwardRef<DDrawerRef, DDrawerProps>((props, ref) =
               aria-labelledby={dHeader ? `${dPrefix}drawer-content__header-${id}` : undefined}
               aria-describedby={`${dPrefix}drawer-content-${id}`}
             >
-              {dMask && <DMask dVisible={dVisible} onClose={handleMaskClose} />}
+              {dMask && <DMask dVisible={visible} onClose={handleMaskClose} />}
               <div
                 ref={drawerContentRef}
                 id={`${dPrefix}drawer-content-${id}`}
diff --git a/packages/ui/src/components/drawer/README.md b/packages/ui/src/components/drawer/README.md
index 18953658..ae659725 100644
--- a/packages/ui/src/components/drawer/README.md
+++ b/packages/ui/src/components/drawer/README.md
@@ -18,7 +18,7 @@ Extend `React.HTMLAttributes<HTMLDivElement>`.
 <!-- prettier-ignore-start -->
 | Property | Description | Type | Default | 
 | --- | --- | --- | --- | 
-| dVisible | Is the drawer visible | boolean | false |
+| dVisible | Is the drawer visible | [boolean, Updater\<boolean\>?] | - |
 | dContainer | The mounted node of the drawer, `false` means it is mounted on the current node | DElementSelector \| false | - |
 | dPlacement | Drawer pop-up direction | 'top' \| 'right' \| 'bottom' \| 'left'  | 'right' |
 | dWidth | Drawer width | number \| string | 400 |
diff --git a/packages/ui/src/components/drawer/README.zh-Hant.md b/packages/ui/src/components/drawer/README.zh-Hant.md
index e9a400d8..5ea07f04 100644
--- a/packages/ui/src/components/drawer/README.zh-Hant.md
+++ b/packages/ui/src/components/drawer/README.zh-Hant.md
@@ -17,7 +17,7 @@ title: 抽屉
 <!-- prettier-ignore-start -->
 | 参数 | 说明 | 类型 | 默认值 | 
 | --- | --- | --- | --- | 
-| dVisible | 抽屉是否可见 | boolean | false |
+| dVisible | 抽屉是否可见 | [boolean, Updater\<boolean\>?] | - |
 | dContainer | 抽屉的挂载节点, `false` 表示挂载在当前节点 | DElementSelector \| false | - |
 | dPlacement | 抽屉弹出方向 | 'top' \| 'right' \| 'bottom' \| 'left'  | 'right' |
 | dWidth | 抽屉宽度 | number \| string | 400 |
diff --git a/packages/ui/src/components/drawer/demos/1.Basic.md b/packages/ui/src/components/drawer/demos/1.Basic.md
index 7665a41c..8491f05d 100644
--- a/packages/ui/src/components/drawer/demos/1.Basic.md
+++ b/packages/ui/src/components/drawer/demos/1.Basic.md
@@ -27,10 +27,6 @@ export default function Demo() {
     setVisible(true);
   }, [setVisible]);
 
-  const handleClose = useCallback(() => {
-    setVisible(false);
-  }, [setVisible]);
-
   const handleOk = useCallback(() => {
     const [asyncGroup] = asyncCapture.createGroup('handleOk');
 
@@ -45,7 +41,7 @@ export default function Demo() {
     <>
       <DButton onClick={handleClick}>Show Drawer</DButton>
       <DDrawer
-        dVisible={visible}
+        dVisible={[visible, setVisible]}
         dHeader={
           <DDrawerHeader
             dExtraIcons={[
@@ -58,7 +54,6 @@ export default function Demo() {
           </DDrawerHeader>
         }
         dFooter={<DDrawerFooter onOkClick={handleOk}></DDrawerFooter>}
-        onClose={handleClose}
       >
         <div style={{ height: 2000 }}>Some contents...</div>
       </DDrawer>
diff --git a/packages/ui/src/components/drawer/demos/2.Placement.md b/packages/ui/src/components/drawer/demos/2.Placement.md
index d35a0545..71757956 100644
--- a/packages/ui/src/components/drawer/demos/2.Placement.md
+++ b/packages/ui/src/components/drawer/demos/2.Placement.md
@@ -30,10 +30,6 @@ export default function Demo() {
     [setVisible, setPlacement]
   );
 
-  const handleClose = useCallback(() => {
-    setVisible(false);
-  }, [setVisible]);
-
   return (
     <>
       <div className="container">
@@ -52,7 +48,7 @@ export default function Demo() {
           <DButton onClick={() => handleClick('bottom')}>B</DButton>
         </div>
       </div>
-      <DDrawer dVisible={visible} dPlacement={placement} dHeader={<DDrawerHeader>Placement Drawer</DDrawerHeader>} onClose={handleClose}>
+      <DDrawer dVisible={[visible, setVisible]} dPlacement={placement} dHeader={<DDrawerHeader>Placement Drawer</DDrawerHeader>}>
         <p>Some contents...</p>
         <p>Some contents...</p>
         <p>Some contents...</p>
diff --git a/packages/ui/src/components/drawer/demos/3.Container.md b/packages/ui/src/components/drawer/demos/3.Container.md
index a5c9764f..9061c34a 100644
--- a/packages/ui/src/components/drawer/demos/3.Container.md
+++ b/packages/ui/src/components/drawer/demos/3.Container.md
@@ -25,14 +25,10 @@ export default function Demo() {
     setVisible(true);
   }, [setVisible]);
 
-  const handleClose = useCallback(() => {
-    setVisible(false);
-  }, [setVisible]);
-
   return (
     <div className="container">
       <DButton onClick={handleClick}>Show Drawer</DButton>
-      <DDrawer dVisible={visible} dContainer={false} onClose={handleClose}>
+      <DDrawer dVisible={[visible, setVisible]} dContainer={false}>
         <p>Some contents...</p>
         <p>Some contents...</p>
         <p>Some contents...</p>
diff --git a/packages/ui/src/components/drawer/demos/4.Nested.md b/packages/ui/src/components/drawer/demos/4.Nested.md
index ded93848..e81fe2db 100644
--- a/packages/ui/src/components/drawer/demos/4.Nested.md
+++ b/packages/ui/src/components/drawer/demos/4.Nested.md
@@ -23,32 +23,25 @@ export default function Demo() {
   const handleClick1 = useCallback(() => {
     setVisible1(true);
   }, [setVisible1]);
-  const handleClose1 = useCallback(() => {
-    setVisible1(false);
-  }, [setVisible1]);
 
   const [visible2, setVisible2] = useImmer(false);
   const handleClick2 = useCallback(() => {
     setVisible2(true);
   }, [setVisible2]);
-  const handleClose2 = useCallback(() => {
-    setVisible2(false);
-  }, [setVisible2]);
 
   return (
     <>
       <DButton onClick={handleClick1}>Show Drawer1</DButton>
       <DDrawer
-        dVisible={visible1}
+        dVisible={[visible1, setVisible1]}
         dHeader={<DDrawerHeader>Drawer1</DDrawerHeader>}
         dChildDrawer={
-          <DDrawer dVisible={visible2} dHeader={<DDrawerHeader>Drawer2</DDrawerHeader>} onClose={handleClose2}>
+          <DDrawer dVisible={[visible2, setVisible2]} dHeader={<DDrawerHeader>Drawer2</DDrawerHeader>}>
             <p>Some contents...</p>
             <p>Some contents...</p>
             <p>Some contents...</p>
           </DDrawer>
         }
-        onClose={handleClose1}
       >
         <DButton onClick={handleClick2}>Show Drawer2</DButton>
       </DDrawer>
diff --git a/packages/ui/src/components/drawer/demos/5.Footer.md b/packages/ui/src/components/drawer/demos/5.Footer.md
index 586b8cab..849283c8 100644
--- a/packages/ui/src/components/drawer/demos/5.Footer.md
+++ b/packages/ui/src/components/drawer/demos/5.Footer.md
@@ -27,7 +27,7 @@ export default function Demo() {
     setVisible(true);
   }, [setVisible]);
 
-  const handleClose = useCallback(() => {
+  const closeDrawer = useCallback(() => {
     setVisible(false);
   }, [setVisible]);
 
@@ -41,23 +41,20 @@ export default function Demo() {
     });
   }, [asyncCapture]);
 
-  const submit = <DButton onClick={handleClose}>Submit</DButton>;
-
   return (
     <>
       <DButton onClick={handleClick}>Show Drawer</DButton>
       <DDrawer
-        dVisible={visible}
+        dVisible={[visible, setVisible]}
         dHeader={<DDrawerHeader>Custom Footer</DDrawerHeader>}
         dFooter={
           <DDrawerFooter
             dAlign="center"
-            dButtons={['cancel', submit, 'ok']}
+            dButtons={['cancel', <DButton onClick={closeDrawer}>Submit</DButton>, 'ok']}
             dCancelButtonProps={{ disabled: true }}
             onOkClick={handleOk}
           ></DDrawerFooter>
         }
-        onClose={handleClose}
       >
         <p>Some contents...</p>
         <p>Some contents...</p>
diff --git a/packages/ui/src/components/menu/Menu.tsx b/packages/ui/src/components/menu/Menu.tsx
index bcadd362..72074dc3 100644
--- a/packages/ui/src/components/menu/Menu.tsx
+++ b/packages/ui/src/components/menu/Menu.tsx
@@ -1,10 +1,12 @@
+import type { Updater } from '../../hooks/immer';
 import type { DRenderProps } from '../_trigger';
 import type { DMenuItemProps } from './MenuItem';
 
+import { produce } from 'immer';
 import { isUndefined } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
-import { useDPrefixConfig, useDComponentConfig, useManualOrAutoState, useImmer, useRefCallback } from '../../hooks';
+import { useDPrefixConfig, useDComponentConfig, useImmer, useRefCallback } from '../../hooks';
 import { getClassName } from '../../utils';
 import { DCollapseTransition } from '../_transition';
 import { DTrigger } from '../_trigger';
@@ -31,21 +33,19 @@ export interface DMenuContextData {
 export const DMenuContext = React.createContext<DMenuContextData | null>(null);
 
 export interface DMenuProps extends React.HTMLAttributes<HTMLElement> {
-  dActive?: string;
-  dDefaultActive?: string;
-  dDefaultExpands?: string[];
+  dActive?: [string | null, Updater<string | null>?];
+  dExpands?: [Set<string>, Updater<Set<string>>?];
   dMode?: DMenuMode;
   dExpandOne?: boolean;
   dExpandTrigger?: 'hover' | 'click';
   onActiveChange?: (id: string) => void;
-  onExpandsChange?: (ids: string[]) => void;
+  onExpandsChange?: (ids: Set<string>) => void;
 }
 
 export function DMenu(props: DMenuProps) {
   const {
     dActive,
-    dDefaultActive,
-    dDefaultExpands,
+    dExpands,
     dMode = 'vertical',
     dExpandOne = false,
     dExpandTrigger,
@@ -76,21 +76,40 @@ export function DMenu(props: DMenuProps) {
 
   const [focusId, setFocusId] = useImmer<DMenuContextData['menuFocusId']>(null);
   const [activedescendant, setActiveDescendant] = useImmer<string | undefined>(undefined);
-  const [expandIds, setExpandIds] = useImmer(() => new Set(dDefaultExpands));
   const [popupIds, setPopupIds] = useImmer<DMenuContextData['menuPopupIds']>(() => new Map());
 
-  const [activeId, dispatchActiveId] = useManualOrAutoState(dDefaultActive ?? null, dActive, onActiveChange);
+  const setActiveId = dActive?.[1];
+  const [autoActiveId, setAutoActiveId] = useImmer<string | null>(null);
+  const activeId = dActive?.[0] ?? autoActiveId;
+  const changeActiveId = useCallback(
+    (val: string) => {
+      setActiveId?.(val);
+      setAutoActiveId(val);
+      onActiveChange?.(val);
+    },
+    [onActiveChange, setActiveId, setAutoActiveId]
+  );
+
+  const setExpandIds = dExpands?.[1];
+  const [autoExpandIds, setAutoExpandIds] = useImmer(new Set<string>());
+  const expandIds = useMemo(() => (dExpands?.[0] ? dExpands?.[0] : autoExpandIds), [autoExpandIds, dExpands]);
+  const changeExpandIds = useCallback(
+    (val: Set<string>) => {
+      setExpandIds?.(val);
+      setAutoExpandIds(val);
+      onExpandsChange?.(val);
+    },
+    [onExpandsChange, setAutoExpandIds, setExpandIds]
+  );
   const expandTrigger = isUndefined(dExpandTrigger) ? (dMode === 'vertical' ? 'click' : 'hover') : dExpandTrigger;
 
   const handleTrigger = useCallback(
     (val) => {
       if (dMode === 'vertical' && expandTrigger === 'hover' && !val) {
-        setExpandIds((draft) => {
-          draft.clear();
-        });
+        changeExpandIds(new Set());
       }
     },
-    [expandTrigger, dMode, setExpandIds]
+    [dMode, expandTrigger, changeExpandIds]
   );
 
   //#region DidUpdate
@@ -113,10 +132,6 @@ export function DMenu(props: DMenuProps) {
     }
     setActiveDescendant(isFocus ? focusId?.[1] : undefined);
   }, [focusId, navEl?.childNodes, setActiveDescendant]);
-
-  useEffect(() => {
-    onExpandsChange?.(Array.from(expandIds));
-  }, [expandIds, onExpandsChange]);
   //#endregion
 
   const contextValue = useMemo<DMenuContextData>(
@@ -129,10 +144,10 @@ export function DMenu(props: DMenuProps) {
       menuPopupIds: popupIds,
       menuCurrentData: dataRef.current,
       onActiveChange: (id) => {
-        dispatchActiveId({ value: id });
+        changeActiveId(id);
       },
       onExpandChange: (id, expand) => {
-        setExpandIds((draft) => {
+        const newExpandIds = produce(expandIds, (draft) => {
           if (expand) {
             if (dExpandOne) {
               for (const ids of [...Array.from(dataRef.current.ids.values()), dataRef.current.navIds]) {
@@ -149,6 +164,7 @@ export function DMenu(props: DMenuProps) {
             draft.delete(id);
           }
         });
+        changeExpandIds(newExpandIds);
       },
       onPopupIdChange: (id, visible) => {
         setPopupIds((draft) => {
@@ -199,7 +215,7 @@ export function DMenu(props: DMenuProps) {
         setFocusId(null);
       },
     }),
-    [activeId, dExpandOne, dMode, dispatchActiveId, expandIds, expandTrigger, focusId, popupIds, setExpandIds, setFocusId, setPopupIds]
+    [activeId, changeActiveId, changeExpandIds, dExpandOne, dMode, expandIds, expandTrigger, focusId, popupIds, setFocusId, setPopupIds]
   );
 
   const childs = useMemo(() => {
diff --git a/packages/ui/src/components/menu/MenuSub.tsx b/packages/ui/src/components/menu/MenuSub.tsx
index bcc23709..81c0a6c5 100644
--- a/packages/ui/src/components/menu/MenuSub.tsx
+++ b/packages/ui/src/components/menu/MenuSub.tsx
@@ -264,7 +264,7 @@ export function DMenuSub(props: DMenuSubProps) {
               {popupMode ? (
                 <DPopup
                   className={`${dPrefix}menu-sub__popup`}
-                  dVisible={popupVisible}
+                  dVisible={[popupVisible]}
                   dPopupContent={menuNode({ ref: menuPopupRef })}
                   dTrigger={menuExpandTrigger}
                   dArrow={false}
diff --git a/packages/ui/src/components/menu/README.md b/packages/ui/src/components/menu/README.md
index b094a475..948452be 100644
--- a/packages/ui/src/components/menu/README.md
+++ b/packages/ui/src/components/menu/README.md
@@ -18,14 +18,13 @@ Extend `React.HTMLAttributes<HTMLElement>`.
 <!-- prettier-ignore-start -->
 | Property | Description | Type | Default | 
 | --- | --- | --- | --- | 
-| dActive | Manually control the active menu item, the value is `dId` | string | - |
-| dDefaultActive | The default active menu item, the value is `dId` | string | - |
-| dDefaultExpands | The sub-menu expanded by default, the value is `dId` | string[]  | - |
+| dActive | Manually control the active menu item, the value is `dId` | [string \| null, Updater\<string \| null\>?] | - |
+| dExpands | Expanded sub-menu, the value is `dId` | [Set\<string\>, Updater\<Set\<string\>\>?]  | - |
 | dMode | Menu type | 'horizontal' \| 'vertical' \| 'popup' \| 'icon' | 'vertical' |
 | dExpandOne | Keep the same level of the menu, expand at most one sub-menu | boolean | false |
 | dExpandTrigger | How to trigger the expansion, adjust the trigger behavior according to `dMode` by default | 'hover' \| 'click' | - |
 | onActiveChange | Callback for active menu item change | `(id: string) => void` | - |
-| onExpandsChange | Callback for changes in expanded submenu | `(ids: string[]) => void` | - |
+| onExpandsChange | Callback for changes in expanded submenu | `(ids: Set<string>) => void` | - |
 <!-- prettier-ignore-end -->
 
 ### DMenuGroupProps
diff --git a/packages/ui/src/components/menu/README.zh-Hant.md b/packages/ui/src/components/menu/README.zh-Hant.md
index 45952c7f..793d44e1 100644
--- a/packages/ui/src/components/menu/README.zh-Hant.md
+++ b/packages/ui/src/components/menu/README.zh-Hant.md
@@ -17,14 +17,13 @@ title: 导航菜单
 <!-- prettier-ignore-start -->
 | 参数 | 说明 | 类型 | 默认值 | 
 | --- | --- | --- | --- | 
-| dActive | 手动控制活动的菜单项，值为 `dId` | string | - |
-| dDefaultActive | 默认的活动菜单项，值为 `dId` | string | - |
-| dDefaultExpands | 默认展开的子菜单，值为 `dId` | string[]  | - |
+| dActive | 手动控制活动的菜单项，值为 `dId` | [string \| null, Updater\<string \| null\>?] | - |
+| dExpands | 展开的子菜单，值为 `dId` | [Set\<string\>, Updater\<Set\<string\>\>?]  | - |
 | dMode | 菜单类型 | 'horizontal' \| 'vertical' \| 'popup' \| 'icon' | 'vertical' |
 | dExpandOne | 保持同一层级的菜单至多展开一个子菜单 | boolean | false |
 | dExpandTrigger | 如何触发展开，默认根据 `dMode` 调整触发行为 | 'hover' \| 'click' | - |
 | onActiveChange | 活动菜单项改变的回调 | `(id: string) => void` | - |
-| onExpandsChange | 展开子菜单改变的回调 | `(ids: string[]) => void` | - |
+| onExpandsChange | 展开子菜单改变的回调 | `(ids: Set<string>) => void` | - |
 <!-- prettier-ignore-end -->
 
 ### DMenuGroupProps
diff --git a/packages/ui/src/components/menu/demos/1.Basic.md b/packages/ui/src/components/menu/demos/1.Basic.md
index 42dda637..542a8e67 100644
--- a/packages/ui/src/components/menu/demos/1.Basic.md
+++ b/packages/ui/src/components/menu/demos/1.Basic.md
@@ -14,10 +14,13 @@ The simplest usage.
 
 ```tsx
 import { DMenu, DMenuGroup, DMenuItem, DMenuSub, DIcon } from '@react-devui/ui';
+import { useImmer } from '@react-devui/ui/hooks';
 
 export default function Demo() {
+  const [activeId, setActiveId] = useImmer<string>('Item121');
+
   return (
-    <DMenu className="app-demo-menu" style={{ width: 320 }} dDefaultActive="Item121">
+    <DMenu className="app-demo-menu" style={{ width: 320 }} dActive={[activeId, setActiveId]}>
       <DMenuSub
         dId="Sub1"
         dTitle="Sub 1"
diff --git a/packages/ui/src/components/menu/demos/3.Popup.md b/packages/ui/src/components/menu/demos/3.Popup.md
index 9303021e..f16d70d7 100644
--- a/packages/ui/src/components/menu/demos/3.Popup.md
+++ b/packages/ui/src/components/menu/demos/3.Popup.md
@@ -22,9 +22,10 @@ import { useImmer } from '@react-devui/ui/hooks';
 
 export default function Demo() {
   const [mode, setMode] = useImmer('vertical');
+  const [expands, setExpands] = useImmer(new Set(['Sub1']));
 
   return (
-    <DMenu className="app-demo-menu" style={{ width: 320 }} dMode={mode} dDefaultExpands={['Sub1']}>
+    <DMenu className="app-demo-menu" style={{ width: 320 }} dMode={mode} dExpands={[expands, setExpands]}>
       <div className="button-container" onClick={() => setMode(mode === 'vertical' ? 'popup' : 'vertical')}>
         to {mode === 'vertical' ? 'popup' : 'vertical'} mode
       </div>
diff --git a/packages/ui/src/components/menu/demos/4.Icon.md b/packages/ui/src/components/menu/demos/4.Icon.md
index 554cd8a6..aec76af3 100644
--- a/packages/ui/src/components/menu/demos/4.Icon.md
+++ b/packages/ui/src/components/menu/demos/4.Icon.md
@@ -18,9 +18,10 @@ import { useImmer } from '@react-devui/ui/hooks';
 
 export default function Demo() {
   const [mode, setMode] = useImmer('vertical');
+  const [expands, setExpands] = useImmer(new Set(['Sub1']));
 
   return (
-    <DMenu className="app-demo-menu" style={{ width: 320 }} dMode={mode} dDefaultExpands={['Sub1']}>
+    <DMenu className="app-demo-menu" style={{ width: 320 }} dMode={mode} dExpands={[expands, setExpands]}>
       <div className="button-container" onClick={() => setMode(mode === 'vertical' ? 'icon' : 'vertical')}>
         <DIcon>
           {mode === 'vertical' ? (
diff --git a/packages/ui/src/components/menu/demos/5.SingleExpansion.md b/packages/ui/src/components/menu/demos/5.SingleExpansion.md
index 90c9d58a..b0ae50e9 100644
--- a/packages/ui/src/components/menu/demos/5.SingleExpansion.md
+++ b/packages/ui/src/components/menu/demos/5.SingleExpansion.md
@@ -14,10 +14,13 @@ Keep the same level of the menu, expand at most one sub-menu.
 
 ```tsx
 import { DMenu, DMenuGroup, DMenuItem, DMenuSub, DIcon } from '@react-devui/ui';
+import { useImmer } from '@react-devui/ui/hooks';
 
 export default function Demo() {
+  const [expands, setExpands] = useImmer(new Set(['Sub1']));
+
   return (
-    <DMenu className="app-demo-menu" style={{ width: 320 }} dDefaultExpands={['Sub1']} dExpandOne>
+    <DMenu className="app-demo-menu" style={{ width: 320 }} dExpands={[expands, setExpands]} dExpandOne>
       <DMenuSub
         dId="Sub1"
         dTitle="Sub 1"
diff --git a/packages/ui/src/components/tooltip/README.md b/packages/ui/src/components/tooltip/README.md
index 4e15eeba..e9f23831 100644
--- a/packages/ui/src/components/tooltip/README.md
+++ b/packages/ui/src/components/tooltip/README.md
@@ -34,7 +34,7 @@ Extend `React.HTMLAttributes<HTMLDivElement>`.
 <!-- prettier-ignore-start -->
 | Property | Description | Type | Default | 
 | --- | --- | --- | --- | 
-| dVisible | Manually control the display of popup | boolean | - |
+| dVisible | Manually control the display of popup | [boolean, Updater\<boolean\>] | - |
 | dPopupContent | The contents of the popup | React.ReactNode | - |
 | dTriggerRender | The target node of the popup | `(props: DTriggerRenderProps) => React.ReactNode` | - |
 | dTriggerEl |  Custom popup target node | HTMLElement \| null | - |
diff --git a/packages/ui/src/components/tooltip/README.zh-Hant.md b/packages/ui/src/components/tooltip/README.zh-Hant.md
index 39cf2211..aff2cec9 100644
--- a/packages/ui/src/components/tooltip/README.zh-Hant.md
+++ b/packages/ui/src/components/tooltip/README.zh-Hant.md
@@ -33,7 +33,7 @@ export type DTooltipRef = DPopupRef;
 <!-- prettier-ignore-start -->
 | 参数 | 说明 | 类型 | 默认值 | 
 | --- | --- | --- | --- | 
-| dVisible | 手动控制 popup 的显示 | boolean | - |
+| dVisible | 手动控制 popup 的显示 | [boolean, Updater\<boolean\>] | - |
 | dPopupContent | popup 的内容 | React.ReactNode | - |
 | dTriggerRender | popup 的目标节点 | `(props: DTriggerRenderProps) => React.ReactNode` | - |
 | dTriggerEl |  自定义 popup 的目标节点 | HTMLElement \| null | - |
diff --git a/packages/ui/src/components/tooltip/demos/1.Basic.md b/packages/ui/src/components/tooltip/demos/1.Basic.md
index 679fe942..3e1b05ba 100644
--- a/packages/ui/src/components/tooltip/demos/1.Basic.md
+++ b/packages/ui/src/components/tooltip/demos/1.Basic.md
@@ -14,8 +14,11 @@ The simplest usage.
 
 ```tsx
 import { DTooltip, DButton } from '@react-devui/ui';
+import { useImmer } from '@react-devui/ui/hooks';
 
 export default function Demo() {
+  const [visible, seVisible] = useImmer(false);
+
   return (
     <>
       <DTooltip dTitle="Hover">
@@ -24,7 +27,7 @@ export default function Demo() {
       <DTooltip dTitle="Focus" dTrigger="focus">
         <DButton>Focus</DButton>
       </DTooltip>
-      <DTooltip dTitle="Click" dTrigger="click">
+      <DTooltip dVisible={[visible, seVisible]} dTitle="Click" dTrigger="click">
         <DButton>Click</DButton>
       </DTooltip>
     </>
diff --git a/packages/ui/src/components/tooltip/demos/3.AutoPlace.md b/packages/ui/src/components/tooltip/demos/3.AutoPlace.md
index 4953df17..d72dd67a 100644
--- a/packages/ui/src/components/tooltip/demos/3.AutoPlace.md
+++ b/packages/ui/src/components/tooltip/demos/3.AutoPlace.md
@@ -19,7 +19,7 @@ export default function Demo() {
   return (
     <div className="auto-place-container">
       <div className="overflow">
-        <DTooltip dTitle="Auto Place" dTrigger="click" dContainer=".auto-place-container">
+        <DTooltip dVisible={[true]} dTitle="Auto Place" dTrigger="click" dContainer=".auto-place-container">
           <DButton>Auto Place</DButton>
         </DTooltip>
       </div>