@aloudata/aloudata-design 3.0.27 → 3.1.1

package/dist/Drawer/index.js

@@ -1,7 +1,8 @@
 import { cn } from "../lib/utils.js";
 import Memo from "../Icon/components/CloseLightLine.js";
-import { FloatingLayerProvider, useFloatingLayer } from "../_utils/floatingLayer.js";
-import { useBodyScrollLock } from "../_utils/overlayCoordinator.js";
+import { FLOATING_LAYER_BASE_Z_INDEX, FloatingLayerProvider } from "../_utils/floatingLayer.js";
+import { ModalLayerProvider, useModalLayer } from "../_utils/overlayCoordinator.js";
+import { focusInitialDialogTarget, markDialogEscapeEvent, useDialogAccessibility } from "../_utils/dialogAccessibility.js";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -24,11 +25,19 @@ var slideAnimationStyles = {
 	bottom: "data-[state=open]:tw-animate-drawer-in-bottom data-[state=closed]:tw-animate-drawer-out-bottom"
 };
 function Drawer(props) {
-	const { open = false, onClose, title, description, placement = "right", width, height, size = "default", closable = true, mask = true, maskClosable = true, className, rootClassName, style, contentWrapperStyle, bodyStyle, headerStyle, footer, footerStyle, extra, children, zIndex = 1e3, getContainer } = props;
+	const { open = false, onClose, title, description, placement = "right", width, height, size = "default", closable = true, mask = true, maskClosable = true, className, rootClassName, "data-testid": dataTestId, "aria-label": ariaLabel, style, contentWrapperStyle, bodyStyle, headerStyle, footer, footerStyle, extra, children, zIndex = 1e3, keyboard = true, getContainer } = props;
 	const contentRef = useRef(null);
 	const [portalContainer, setPortalContainer] = useState();
 	const inline = getContainer === false;
-	useBodyScrollLock(open);
+	const { id: drawerLayerId, maskZIndex, contentZIndex, isTop } = useModalLayer(open, zIndex);
+	const nextFloatingLevel = (maskZIndex - FLOATING_LAYER_BASE_Z_INDEX) / 10 + 1;
+	useDialogAccessibility({
+		open,
+		isTop,
+		keyboard,
+		containerRef: contentRef,
+		onEscape: (event) => onClose?.(event)
+	});
 	useLayoutEffect(() => {
 		if (getContainer === void 0 || getContainer === false) setPortalContainer(void 0);
 		else if (typeof getContainer === "string") setPortalContainer(document.querySelector(getContainer) ?? void 0);
@@ -36,31 +45,9 @@ function Drawer(props) {
 		else setPortalContainer(getContainer);
 	}, [getContainer]);
 	useEffect(() => {
-		if (!open || !contentRef.current) return;
+		if (!open || !isTop || !contentRef.current) return;
 		return hideOthers(contentRef.current);
-	}, [open]);
-	useEffect(() => {
-		if (!open || !contentRef.current) return;
-		const container = contentRef.current;
-		const handleKeyDown = (e) => {
-			if (e.key !== "Tab") return;
-			const focusable = container.querySelectorAll("a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])");
-			if (focusable.length === 0) return;
-			const first = focusable[0];
-			const last = focusable[focusable.length - 1];
-			if (e.shiftKey) {
-				if (document.activeElement === first || !container.contains(document.activeElement)) {
-					e.preventDefault();
-					last.focus();
-				}
-			} else if (document.activeElement === last || !container.contains(document.activeElement)) {
-				e.preventDefault();
-				first.focus();
-			}
-		};
-		document.addEventListener("keydown", handleKeyDown);
-		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, [open]);
+	}, [isTop, open]);
 	const isHorizontal = placement === "left" || placement === "right";
 	const preset = sizePresets[size] || sizePresets.default;
 	const sizeStyle = isHorizontal ? {
@@ -70,81 +57,107 @@ function Drawer(props) {
 		height: height ?? preset,
 		maxHeight: "100vh"
 	};
-	const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer(zIndex);
 	const drawerNode = /* @__PURE__ */ jsxs("div", {
 		className: cn("ald-drawer-root tw-pointer-events-none tw-inset-0", inline ? "tw-absolute" : "tw-fixed", rootClassName),
-		children: [mask && /* @__PURE__ */ jsx("div", {
+		children: [mask && isTop && /* @__PURE__ */ jsx("div", {
 			"data-state": open ? "open" : "closed",
 			className: "ald-drawer-mask tw-pointer-events-auto tw-absolute tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in",
 			style: { zIndex: maskZIndex },
 			onClick: maskClosable ? () => onClose?.() : void 0
 		}), /* @__PURE__ */ jsx(DialogPrimitive.Content, {
 			ref: contentRef,
-			className: cn("ald-drawer tw-pointer-events-auto tw-absolute tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-xl", placementStyles[placement], slideAnimationStyles[placement], className),
+			tabIndex: -1,
+			role: "dialog",
+			"data-testid": dataTestId,
+			"aria-modal": isTop || void 0,
+			"aria-label": ariaLabel,
+			...description ? {} : { "aria-describedby": void 0 },
+			...!isTop ? { inert: "" } : {},
+			"aria-hidden": !isTop || void 0,
+			className: cn("ald-drawer tw-pointer-events-auto tw-absolute tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-[var(--elevation-bottom-bottom-xl)]", placementStyles[placement], slideAnimationStyles[placement], className),
 			style: {
 				zIndex: contentZIndex,
 				...sizeStyle,
 				...contentWrapperStyle,
 				...style
 			},
-			onEscapeKeyDown: () => onClose?.(),
+			onOpenAutoFocus: (event) => {
+				event.preventDefault();
+				requestAnimationFrame(() => {
+					const drawer = contentRef.current;
+					if (drawer) focusInitialDialogTarget(drawer);
+				});
+			},
+			onEscapeKeyDown: (event) => {
+				if (!event.defaultPrevented) markDialogEscapeEvent(event);
+				event.preventDefault();
+			},
 			onInteractOutside: (event) => {
 				if (!maskClosable) event.preventDefault();
 			},
-			children: /* @__PURE__ */ jsxs(FloatingLayerProvider, {
-				value: nextLevel,
-				children: [
-					(title || description || closable || extra) && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
-						className: "ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--background-default)] tw-px-6 tw-pb-0 tw-pt-4",
-						style: headerStyle,
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "tw-flex tw-w-full tw-flex-col tw-gap-[6px]",
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-[var(--component-gap-sm)]",
-								children: [/* @__PURE__ */ jsx(DialogPrimitive.Title, {
-									className: "ald-drawer-title ant-drawer-header-title tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-m-0 tw-flex-[1_0_0] tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]",
-									children: title
-								}), extra || closable ? /* @__PURE__ */ jsxs("div", {
-									className: "ald-drawer-actions tw-flex tw-items-center tw-gap-[var(--component-gap-sm)]",
-									children: [extra, closable && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
-										asChild: true,
-										children: /* @__PURE__ */ jsx("button", {
-											type: "button",
-											className: "ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-[var(--action-ghost-normal)] hover:tw-bg-[var(--action-ghost-hover)]",
-											onClick: () => onClose?.(),
-											children: /* @__PURE__ */ jsx(Memo, {
-												size: 20,
-												color: "var(--content-secondary)"
+			children: /* @__PURE__ */ jsx(ModalLayerProvider, {
+				id: drawerLayerId,
+				children: /* @__PURE__ */ jsxs(FloatingLayerProvider, {
+					value: nextFloatingLevel,
+					children: [
+						!title && /* @__PURE__ */ jsx(DialogPrimitive.Title, {
+							className: "tw-sr-only",
+							children: ariaLabel || "Drawer"
+						}),
+						(title || description || closable || extra) && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
+							className: "ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--background-default)] tw-px-6 tw-pb-0 tw-pt-4",
+							style: headerStyle,
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "tw-flex tw-w-full tw-flex-col tw-gap-[6px]",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-[var(--component-gap-sm)]",
+									children: [/* @__PURE__ */ jsx(DialogPrimitive.Title, {
+										className: "ald-drawer-title ant-drawer-header-title tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-m-0 tw-flex-[1_0_0] tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]",
+										children: title
+									}), extra || closable ? /* @__PURE__ */ jsxs("div", {
+										className: "ald-drawer-actions tw-flex tw-items-center tw-gap-[var(--component-gap-sm)]",
+										children: [extra, closable && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+											asChild: true,
+											children: /* @__PURE__ */ jsx("button", {
+												type: "button",
+												className: "ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-[var(--action-ghost-normal)] hover:tw-bg-[var(--action-ghost-hover)] focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-[var(--focus-ring)] forced-colors:focus-visible:tw-outline-[Highlight]",
+												"aria-label": "Close",
+												"data-overlay-close": "true",
+												onClick: () => onClose?.(),
+												children: /* @__PURE__ */ jsx(Memo, {
+													size: 20,
+													color: "var(--content-secondary)"
+												})
 											})
-										})
-									})]
+										})]
+									}) : null]
+								}), description ? /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx("div", {
+										className: "ald-drawer-description tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-self-stretch tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]",
+										children: description
+									})
 								}) : null]
-							}), description ? /* @__PURE__ */ jsx("div", {
-								className: "ald-drawer-description tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-self-stretch tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]",
-								children: description
-							}) : null]
-						})
-					}) }),
-					/* @__PURE__ */ jsx("div", {
-						className: "ald-drawer-body ant-drawer-body tw-min-w-0 tw-flex-[1_0_0] tw-self-stretch tw-overflow-auto tw-p-[var(--component-padding-2xl)]",
-						style: bodyStyle,
-						children
-					}),
-					footer && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "ald-drawer-footer-divider tw-h-px tw-bg-[var(--border-default)]" }), /* @__PURE__ */ jsx("div", {
-						className: "ald-drawer-footer ant-drawer-footer tw-flex tw-items-center tw-justify-end tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-px-[var(--component-padding-2xl)] tw-py-[var(--component-padding-lg)]",
-						style: footerStyle,
-						children: footer
-					})] })
-				]
+							})
+						}) }),
+						/* @__PURE__ */ jsx("div", {
+							className: "ald-drawer-body ant-drawer-body tw-min-w-0 tw-flex-[1_0_0] tw-self-stretch tw-overflow-auto tw-p-[var(--component-padding-2xl)]",
+							style: bodyStyle,
+							children
+						}),
+						footer && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "ald-drawer-footer-divider tw-h-px tw-bg-[var(--border-default)]" }), /* @__PURE__ */ jsx("div", {
+							className: "ald-drawer-footer ant-drawer-footer tw-flex tw-items-center tw-justify-end tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-px-[var(--component-padding-2xl)] tw-py-[var(--component-padding-lg)]",
+							style: footerStyle,
+							children: footer
+						})] })
+					]
+				})
 			})
 		})]
 	});
 	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
 		open,
 		modal: false,
-		onOpenChange: (val) => {
-			if (!val) onClose?.();
-		},
 		children: inline ? open ? drawerNode : null : /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
 			container: portalContainer,
 			children: drawerNode

package/dist/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Drawer/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { CloseLightLine } from '../Icon';\nimport {\n  FloatingLayerProvider,\n  useFloatingLayer,\n} from '../_utils/floatingLayer';\nimport { useBodyScrollLock } from '../_utils/overlayCoordinator';\nimport { cn } from '../lib/utils';\n\nexport interface DrawerProps {\n  open?: boolean;\n  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  width?: number | string;\n  height?: number | string;\n  size?: 'default' | 'large';\n  closable?: boolean;\n  mask?: boolean;\n  maskClosable?: boolean;\n  destroyOnClose?: boolean;\n  className?: string;\n  rootClassName?: string;\n  style?: React.CSSProperties;\n  contentWrapperStyle?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  headerStyle?: React.CSSProperties;\n  maskStyle?: React.CSSProperties;\n  footer?: React.ReactNode;\n  footerStyle?: React.CSSProperties;\n  extra?: React.ReactNode;\n  children?: React.ReactNode;\n  zIndex?: number;\n  keyboard?: boolean;\n  getContainer?:\n    | string\n    | Element\n    | DocumentFragment\n    | (() => Element | DocumentFragment)\n    | false;\n}\n\nconst sizePresets: Record<string, number> = {\n  default: 378,\n  large: 736,\n};\n\nconst placementStyles: Record<string, string> = {\n  right: 'tw-inset-y-0 tw-right-0 tw-h-full',\n  left: 'tw-inset-y-0 tw-left-0 tw-h-full',\n  top: 'tw-inset-x-0 tw-top-0 tw-w-full',\n  bottom: 'tw-inset-x-0 tw-bottom-0 tw-w-full',\n};\n\nconst slideAnimationStyles: Record<string, string> = {\n  right:\n    'data-[state=open]:tw-animate-drawer-in-right data-[state=closed]:tw-animate-drawer-out-right',\n  left: 'data-[state=open]:tw-animate-drawer-in-left data-[state=closed]:tw-animate-drawer-out-left',\n  top: 'data-[state=open]:tw-animate-drawer-in-top data-[state=closed]:tw-animate-drawer-out-top',\n  bottom:\n    'data-[state=open]:tw-animate-drawer-in-bottom data-[state=closed]:tw-animate-drawer-out-bottom',\n};\n\nfunction Drawer(props: DrawerProps) {\n  const {\n    open = false,\n    onClose,\n    title,\n    description,\n    placement = 'right',\n    width,\n    height,\n    size = 'default',\n    closable = true,\n    mask = true,\n    maskClosable = true,\n    className,\n    rootClassName,\n    style,\n    contentWrapperStyle,\n    bodyStyle,\n    headerStyle,\n    footer,\n    footerStyle,\n    extra,\n    children,\n    zIndex = 1000,\n    getContainer,\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [portalContainer, setPortalContainer] = useState<\n    Element | DocumentFragment\n  >();\n  const inline = getContainer === false;\n  useBodyScrollLock(open);\n\n  useLayoutEffect(() => {\n    if (getContainer === undefined || getContainer === false) {\n      setPortalContainer(undefined);\n    } else if (typeof getContainer === 'string') {\n      setPortalContainer(document.querySelector(getContainer) ?? undefined);\n    } else if (typeof getContainer === 'function') {\n      setPortalContainer(getContainer());\n    } else {\n      setPortalContainer(getContainer);\n    }\n  }, [getContainer]);\n\n  // ---- modal={false} 补偿：aria-hidden（屏幕阅读器只感知抽屉） ----\n  useEffect(() => {\n    if (!open || !contentRef.current) return;\n    return hideOthers(contentRef.current);\n  }, [open]);\n\n  // ---- modal={false} 补偿：Tab 焦点循环（不使用 MutationObserver，避免 FocusScope 劫持焦点）----\n  useEffect(() => {\n    if (!open || !contentRef.current) return;\n    const container = contentRef.current;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return;\n      const focusable = container.querySelectorAll<HTMLElement>(\n        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n      );\n      if (focusable.length === 0) return;\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      if (e.shiftKey) {\n        if (\n          document.activeElement === first ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (\n          document.activeElement === last ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [open]);\n\n  const isHorizontal = placement === 'left' || placement === 'right';\n  const preset = sizePresets[size] || sizePresets.default;\n  const effectiveWidth = width ?? preset;\n  const effectiveHeight = height ?? preset;\n  const sizeStyle = isHorizontal\n    ? { width: effectiveWidth, maxWidth: '100vw' }\n    : { height: effectiveHeight, maxHeight: '100vh' };\n  const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer(zIndex);\n\n  const drawerNode = (\n    <div\n      className={cn(\n        'ald-drawer-root tw-pointer-events-none tw-inset-0',\n        inline ? 'tw-absolute' : 'tw-fixed',\n        rootClassName,\n      )}\n    >\n      {/* modal={false} 时 DialogPrimitive.Overlay 不渲染，用普通 div 替代 */}\n      {mask && (\n        <div\n          data-state={open ? 'open' : 'closed'}\n          className=\"ald-drawer-mask tw-pointer-events-auto tw-absolute tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in\"\n          style={{ zIndex: maskZIndex }}\n          onClick={maskClosable ? () => onClose?.() : undefined}\n        />\n      )}\n      <DialogPrimitive.Content\n        ref={contentRef}\n        className={cn(\n          'ald-drawer tw-pointer-events-auto tw-absolute tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-xl',\n          placementStyles[placement],\n          slideAnimationStyles[placement],\n          className,\n        )}\n        style={{\n          zIndex: contentZIndex,\n          ...sizeStyle,\n          ...contentWrapperStyle,\n          ...style,\n        }}\n        onEscapeKeyDown={() => onClose?.()}\n        onInteractOutside={(event) => {\n          if (!maskClosable) {\n            event.preventDefault();\n          }\n        }}\n      >\n        <FloatingLayerProvider value={nextLevel}>\n          {(title || description || closable || extra) && (\n            <>\n              {/* antd 兼容：保留 ant-drawer-header / ant-drawer-header-title class，消费方 CSS 可能依赖这些选择器 */}\n              <div\n                className=\"ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--background-default)] tw-px-6 tw-pb-0 tw-pt-4\"\n                style={headerStyle}\n              >\n                <div className=\"tw-flex tw-w-full tw-flex-col tw-gap-[6px]\">\n                  <div className=\"tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-[var(--component-gap-sm)]\">\n                    <DialogPrimitive.Title className='ald-drawer-title ant-drawer-header-title tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-m-0 tw-flex-[1_0_0] tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]'>\n                      {title}\n                    </DialogPrimitive.Title>\n                    {extra || closable ? (\n                      <div className=\"ald-drawer-actions tw-flex tw-items-center tw-gap-[var(--component-gap-sm)]\">\n                        {extra}\n                        {closable && (\n                          <DialogPrimitive.Close asChild>\n                            <button\n                              type=\"button\"\n                              className=\"ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-[var(--action-ghost-normal)] hover:tw-bg-[var(--action-ghost-hover)]\"\n                              onClick={() => onClose?.()}\n                            >\n                              <CloseLightLine\n                                size={20}\n                                color=\"var(--content-secondary)\"\n                              />\n                            </button>\n                          </DialogPrimitive.Close>\n                        )}\n                      </div>\n                    ) : null}\n                  </div>\n                  {description ? (\n                    <div className='ald-drawer-description tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-self-stretch tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]'>\n                      {description}\n                    </div>\n                  ) : null}\n                </div>\n              </div>\n            </>\n          )}\n          {/* antd 兼容：保留 ant-drawer-body class */}\n          <div\n            className=\"ald-drawer-body ant-drawer-body tw-min-w-0 tw-flex-[1_0_0] tw-self-stretch tw-overflow-auto tw-p-[var(--component-padding-2xl)]\"\n            style={bodyStyle}\n          >\n            {children}\n          </div>\n          {footer && (\n            <>\n              <div className=\"ald-drawer-footer-divider tw-h-px tw-bg-[var(--border-default)]\" />\n              {/* antd 兼容：antd .ant-drawer-footer 使用 text-align:right 让 inline 按钮右对齐，\n                此处加 tw-text-right 保持消费方传入 width:100% 子容器时 inline 元素仍右对齐。 */}\n              <div\n                className=\"ald-drawer-footer ant-drawer-footer tw-flex tw-items-center tw-justify-end tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-px-[var(--component-padding-2xl)] tw-py-[var(--component-padding-lg)]\"\n                style={footerStyle}\n              >\n                {footer}\n              </div>\n            </>\n          )}\n        </FloatingLayerProvider>\n      </DialogPrimitive.Content>\n    </div>\n  );\n\n  // modal={false}：禁用 Radix FocusScope 的 MutationObserver，\n  // 避免表单校验触发 DOM 变动时劫持焦点。手动补偿滚动锁定、aria-hidden、Tab 循环。\n  return (\n    <DialogPrimitive.Root\n      open={open}\n      modal={false}\n      onOpenChange={(val) => {\n        if (!val) onClose?.();\n      }}\n    >\n      {inline ? (\n        open ? (\n          drawerNode\n        ) : null\n      ) : (\n        <DialogPrimitive.Portal container={portalContainer}>\n          {drawerNode}\n        </DialogPrimitive.Portal>\n      )}\n    </DialogPrimitive.Root>\n  );\n}\n\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Drawer/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { CloseLightLine } from '../Icon';\nimport {\n  FLOATING_LAYER_BASE_Z_INDEX,\n  FLOATING_LAYER_STEP,\n  FloatingLayerProvider,\n} from '../_utils/floatingLayer';\nimport {\n  ModalLayerProvider,\n  useModalLayer,\n} from '../_utils/overlayCoordinator';\nimport {\n  focusInitialDialogTarget,\n  markDialogEscapeEvent,\n  useDialogAccessibility,\n} from '../_utils/dialogAccessibility';\nimport { cn } from '../lib/utils';\n\nexport interface DrawerProps {\n  open?: boolean;\n  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  width?: number | string;\n  height?: number | string;\n  size?: 'default' | 'large';\n  closable?: boolean;\n  mask?: boolean;\n  maskClosable?: boolean;\n  destroyOnClose?: boolean;\n  className?: string;\n  rootClassName?: string;\n  /** Pass through to the drawer content root for automated testing. */\n  'data-testid'?: string;\n  /** Pass through to the drawer content root when no title is rendered. */\n  'aria-label'?: string;\n  style?: React.CSSProperties;\n  contentWrapperStyle?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  headerStyle?: React.CSSProperties;\n  maskStyle?: React.CSSProperties;\n  footer?: React.ReactNode;\n  footerStyle?: React.CSSProperties;\n  extra?: React.ReactNode;\n  children?: React.ReactNode;\n  zIndex?: number;\n  keyboard?: boolean;\n  getContainer?:\n    | string\n    | Element\n    | DocumentFragment\n    | (() => Element | DocumentFragment)\n    | false;\n}\n\nconst sizePresets: Record<string, number> = {\n  default: 378,\n  large: 736,\n};\n\nconst placementStyles: Record<string, string> = {\n  right: 'tw-inset-y-0 tw-right-0 tw-h-full',\n  left: 'tw-inset-y-0 tw-left-0 tw-h-full',\n  top: 'tw-inset-x-0 tw-top-0 tw-w-full',\n  bottom: 'tw-inset-x-0 tw-bottom-0 tw-w-full',\n};\n\nconst slideAnimationStyles: Record<string, string> = {\n  right:\n    'data-[state=open]:tw-animate-drawer-in-right data-[state=closed]:tw-animate-drawer-out-right',\n  left: 'data-[state=open]:tw-animate-drawer-in-left data-[state=closed]:tw-animate-drawer-out-left',\n  top: 'data-[state=open]:tw-animate-drawer-in-top data-[state=closed]:tw-animate-drawer-out-top',\n  bottom:\n    'data-[state=open]:tw-animate-drawer-in-bottom data-[state=closed]:tw-animate-drawer-out-bottom',\n};\n\nfunction Drawer(props: DrawerProps) {\n  const {\n    open = false,\n    onClose,\n    title,\n    description,\n    placement = 'right',\n    width,\n    height,\n    size = 'default',\n    closable = true,\n    mask = true,\n    maskClosable = true,\n    className,\n    rootClassName,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\n    style,\n    contentWrapperStyle,\n    bodyStyle,\n    headerStyle,\n    footer,\n    footerStyle,\n    extra,\n    children,\n    zIndex = 1000,\n    keyboard = true,\n    getContainer,\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [portalContainer, setPortalContainer] = useState<\n    Element | DocumentFragment\n  >();\n  const inline = getContainer === false;\n  const drawerLayer = useModalLayer(open, zIndex);\n  const { id: drawerLayerId, maskZIndex, contentZIndex, isTop } = drawerLayer;\n  const nextFloatingLevel =\n    (maskZIndex - FLOATING_LAYER_BASE_Z_INDEX) / FLOATING_LAYER_STEP + 1;\n\n  useDialogAccessibility({\n    open,\n    isTop,\n    keyboard,\n    containerRef: contentRef,\n    onEscape: (event) => onClose?.(event as unknown as React.KeyboardEvent),\n  });\n\n  useLayoutEffect(() => {\n    if (getContainer === undefined || getContainer === false) {\n      setPortalContainer(undefined);\n    } else if (typeof getContainer === 'string') {\n      setPortalContainer(document.querySelector(getContainer) ?? undefined);\n    } else if (typeof getContainer === 'function') {\n      setPortalContainer(getContainer());\n    } else {\n      setPortalContainer(getContainer);\n    }\n  }, [getContainer]);\n\n  // ---- modal={false} 补偿：aria-hidden（屏幕阅读器只感知抽屉） ----\n  useEffect(() => {\n    if (!open || !isTop || !contentRef.current) return;\n    return hideOthers(contentRef.current);\n  }, [isTop, open]);\n\n  const isHorizontal = placement === 'left' || placement === 'right';\n  const preset = sizePresets[size] || sizePresets.default;\n  const effectiveWidth = width ?? preset;\n  const effectiveHeight = height ?? preset;\n  const sizeStyle = isHorizontal\n    ? { width: effectiveWidth, maxWidth: '100vw' }\n    : { height: effectiveHeight, maxHeight: '100vh' };\n  const drawerNode = (\n    <div\n      className={cn(\n        'ald-drawer-root tw-pointer-events-none tw-inset-0',\n        inline ? 'tw-absolute' : 'tw-fixed',\n        rootClassName,\n      )}\n    >\n      {/* modal={false} 时 DialogPrimitive.Overlay 不渲染，用普通 div 替代 */}\n      {mask && isTop && (\n        <div\n          data-state={open ? 'open' : 'closed'}\n          className=\"ald-drawer-mask tw-pointer-events-auto tw-absolute tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in\"\n          style={{ zIndex: maskZIndex }}\n          onClick={maskClosable ? () => onClose?.() : undefined}\n        />\n      )}\n      <DialogPrimitive.Content\n        ref={contentRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        data-testid={dataTestId}\n        aria-modal={isTop || undefined}\n        aria-label={ariaLabel}\n        {...(description ? {} : { 'aria-describedby': undefined })}\n        {...(!isTop ? { inert: '' } : {})}\n        aria-hidden={!isTop || undefined}\n        className={cn(\n          'ald-drawer tw-pointer-events-auto tw-absolute tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-[var(--elevation-bottom-bottom-xl)]',\n          placementStyles[placement],\n          slideAnimationStyles[placement],\n          className,\n        )}\n        style={{\n          zIndex: contentZIndex,\n          ...sizeStyle,\n          ...contentWrapperStyle,\n          ...style,\n        }}\n        onOpenAutoFocus={(event) => {\n          event.preventDefault();\n          requestAnimationFrame(() => {\n            const drawer = contentRef.current;\n            if (drawer) focusInitialDialogTarget(drawer);\n          });\n        }}\n        onEscapeKeyDown={(event) => {\n          if (!event.defaultPrevented) markDialogEscapeEvent(event);\n          event.preventDefault();\n        }}\n        onInteractOutside={(event) => {\n          if (!maskClosable) {\n            event.preventDefault();\n          }\n        }}\n      >\n        <ModalLayerProvider id={drawerLayerId}>\n          <FloatingLayerProvider value={nextFloatingLevel}>\n            {!title && (\n              <DialogPrimitive.Title className=\"tw-sr-only\">\n                {ariaLabel || 'Drawer'}\n              </DialogPrimitive.Title>\n            )}\n            {(title || description || closable || extra) && (\n              <>\n                {/* antd 兼容：保留 ant-drawer-header / ant-drawer-header-title class，消费方 CSS 可能依赖这些选择器 */}\n                <div\n                  className=\"ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--background-default)] tw-px-6 tw-pb-0 tw-pt-4\"\n                  style={headerStyle}\n                >\n                  <div className=\"tw-flex tw-w-full tw-flex-col tw-gap-[6px]\">\n                    <div className=\"tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-[var(--component-gap-sm)]\">\n                      <DialogPrimitive.Title className='ald-drawer-title ant-drawer-header-title tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-m-0 tw-flex-[1_0_0] tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]'>\n                        {title}\n                      </DialogPrimitive.Title>\n                      {extra || closable ? (\n                        <div className=\"ald-drawer-actions tw-flex tw-items-center tw-gap-[var(--component-gap-sm)]\">\n                          {extra}\n                          {closable && (\n                            <DialogPrimitive.Close asChild>\n                              <button\n                                type=\"button\"\n                                className=\"ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-[var(--action-ghost-normal)] hover:tw-bg-[var(--action-ghost-hover)] focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-[var(--focus-ring)] forced-colors:focus-visible:tw-outline-[Highlight]\"\n                                aria-label=\"Close\"\n                                data-overlay-close=\"true\"\n                                onClick={() => onClose?.()}\n                              >\n                                <CloseLightLine\n                                  size={20}\n                                  color=\"var(--content-secondary)\"\n                                />\n                              </button>\n                            </DialogPrimitive.Close>\n                          )}\n                        </div>\n                      ) : null}\n                    </div>\n                    {description ? (\n                      <DialogPrimitive.Description asChild>\n                        <div className='ald-drawer-description tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-self-stretch tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]'>\n                          {description}\n                        </div>\n                      </DialogPrimitive.Description>\n                    ) : null}\n                  </div>\n                </div>\n              </>\n            )}\n            {/* antd 兼容：保留 ant-drawer-body class */}\n            <div\n              className=\"ald-drawer-body ant-drawer-body tw-min-w-0 tw-flex-[1_0_0] tw-self-stretch tw-overflow-auto tw-p-[var(--component-padding-2xl)]\"\n              style={bodyStyle}\n            >\n              {children}\n            </div>\n            {footer && (\n              <>\n                <div className=\"ald-drawer-footer-divider tw-h-px tw-bg-[var(--border-default)]\" />\n                {/* antd 兼容：antd .ant-drawer-footer 使用 text-align:right 让 inline 按钮右对齐，\n                此处加 tw-text-right 保持消费方传入 width:100% 子容器时 inline 元素仍右对齐。 */}\n                <div\n                  className=\"ald-drawer-footer ant-drawer-footer tw-flex tw-items-center tw-justify-end tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-px-[var(--component-padding-2xl)] tw-py-[var(--component-padding-lg)]\"\n                  style={footerStyle}\n                >\n                  {footer}\n                </div>\n              </>\n            )}\n          </FloatingLayerProvider>\n        </ModalLayerProvider>\n      </DialogPrimitive.Content>\n    </div>\n  );\n\n  // modal={false}：禁用 Radix FocusScope 的 MutationObserver，\n  // 避免表单校验触发 DOM 变动时劫持焦点。手动补偿滚动锁定、aria-hidden、Tab 循环。\n  return (\n    <DialogPrimitive.Root open={open} modal={false}>\n      {inline ? (\n        open ? (\n          drawerNode\n        ) : null\n      ) : (\n        <DialogPrimitive.Portal container={portalContainer}>\n          {drawerNode}\n        </DialogPrimitive.Portal>\n      )}\n    </DialogPrimitive.Root>\n  );\n}\n\nexport default Drawer;\n"],"mappings":"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"}

package/dist/Dropdown/index.d.ts

@@ -1,7 +1,7 @@
 import { FloatingFocusManagerProps, OffsetOptions, UseHoverProps } from '@floating-ui/react';
 import { default as React } from 'react';
 import { MenuProps } from '../Menu';
-export type ActionType = 'hover' | 'click';
+export type ActionType = 'hover' | 'click' | 'contextMenu';
 export type PlacementType = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 export interface IDropdownProps {
     children: React.ReactNode;

package/dist/Dropdown/index.js

@@ -3,13 +3,13 @@ import { useFloatingPopupZIndex } from "../_utils/floatingLayer.js";
 /* empty css         */
 import Menu from "../Menu/index.js";
 import { ensureWeakRefFallback } from "../_utils/weakRefFallback.js";
-import { cloneElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { cloneElement, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import ReactDOM from "react-dom";
-import { FloatingFocusManager, FloatingNode, FloatingTree, autoUpdate, flip, offset, safePolygon, shift, size, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useHover, useId as useId$1, useInteractions, useRole } from "@floating-ui/react";
+import { FloatingFocusManager, FloatingNode, FloatingTree, autoUpdate, flip, offset, safePolygon, shift, size, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useHover, useId as useId$1, useInteractions, useTransitionStyles } from "@floating-ui/react";
 import { useMemoizedFn } from "ahooks";
 //#region src/Dropdown/index.tsx
-var OVERLAY_EXIT_ANIMATION_MS = 200;
+var OVERLAY_TRANSITION_MS = 200;
 ensureWeakRefFallback();
 function resolvePlacementSide(currentPlacement) {
 	const [side] = currentPlacement.split("-");
@@ -42,83 +42,29 @@ function hasTrigger(trigger, action) {
 function Dropdown(props) {
 	const { children, destroyPopupOnHide = true, getPopupContainer, menu, overlayClassName, placement = "bottom-start", trigger = "click", open, onOpenChange = () => {}, closeOnFocusOut = true, overlayStyle, overlayInnerStyle, dropdownRender, disabled, offset: offsetProps = 4, delay = 0, autoUpdatePos = false, initialFocus = -1, popupMatchTriggerWidth = false, allowOverlap = false } = props;
 	const [isOpen, setIsOpen] = useState(open || false);
-	const [isAnimatingOut, setIsAnimatingOut] = useState(false);
-	const closeAnimationTimerRef = useRef(null);
 	const lastResolvedFloatingStylesRef = useRef(null);
 	const lastResolvedSideRef = useRef(resolvePlacementSide(placement));
 	const currentFloatingStylesRef = useRef(null);
 	const currentFloatingSideRef = useRef(resolvePlacementSide(placement));
 	const [targetElement, setTargetElement] = useState(null);
+	const [menuInitialFocus, setMenuInitialFocus] = useState("first");
 	const popupMatchTriggerWidthNumber = parsePopupMatchWidth(popupMatchTriggerWidth);
 	const [matchedTriggerWidth, setMatchedTriggerWidth] = useState(popupMatchTriggerWidthNumber);
 	const popupZIndex = useFloatingPopupZIndex();
 	const onOpenChangeFn = useMemoizedFn(onOpenChange);
 	const isOpenControlled = open !== void 0;
-	const clearCloseAnimationTimer = useCallback(() => {
-		if (closeAnimationTimerRef.current) {
-			clearTimeout(closeAnimationTimerRef.current);
-			closeAnimationTimerRef.current = null;
-		}
-	}, []);
-	const stopCloseAnimation = useCallback(() => {
-		clearCloseAnimationTimer();
-		document.body.classList.remove("ald-dropdown-root-closing");
-		setIsAnimatingOut(false);
-	}, [clearCloseAnimationTimer]);
 	const markRootClosing = useCallback(() => {
 		document.body.classList.add("ald-dropdown-root-closing");
 		lastResolvedFloatingStylesRef.current = currentFloatingStylesRef.current ?? lastResolvedFloatingStylesRef.current;
 		lastResolvedSideRef.current = currentFloatingSideRef.current ?? lastResolvedSideRef.current;
 	}, []);
-	const startCloseAnimation = useCallback(() => {
-		clearCloseAnimationTimer();
-		markRootClosing();
-		setIsAnimatingOut(true);
-		closeAnimationTimerRef.current = setTimeout(() => {
-			document.body.classList.remove("ald-dropdown-root-closing");
-			setIsAnimatingOut(false);
-			closeAnimationTimerRef.current = null;
-		}, OVERLAY_EXIT_ANIMATION_MS);
-	}, [clearCloseAnimationTimer, markRootClosing]);
 	useLayoutEffect(() => {
-		if (!isOpenControlled) return;
-		if (open) {
-			stopCloseAnimation();
-			setIsOpen(true);
-			return;
-		}
-		if (isOpen) startCloseAnimation();
-		setIsOpen(false);
-	}, [
-		isOpen,
-		isOpenControlled,
-		open,
-		startCloseAnimation,
-		stopCloseAnimation
-	]);
-	useEffect(() => {
-		return () => {
-			clearCloseAnimationTimer();
-		};
-	}, [clearCloseAnimationTimer]);
-	useEffect(() => {
-		return () => {
-			document.body.classList.remove("ald-dropdown-root-closing");
-		};
-	}, []);
+		if (isOpenControlled) setIsOpen(!!open);
+	}, [isOpenControlled, open]);
 	const onChangeOpen = useCallback((newOpen) => {
-		if (!isOpenControlled) {
-			if (newOpen) stopCloseAnimation();
-			else startCloseAnimation();
-			setIsOpen(newOpen);
-		}
+		if (!isOpenControlled) setIsOpen(newOpen);
 		onOpenChangeFn(newOpen);
-	}, [
-		isOpenControlled,
-		onOpenChangeFn,
-		startCloseAnimation,
-		stopCloseAnimation
-	]);
+	}, [isOpenControlled, onOpenChangeFn]);
 	const nodeId = useFloatingNodeId();
 	const { refs, floatingStyles, context, placement: floatingPlacement, x, y } = useFloating({
 		nodeId,
@@ -128,9 +74,7 @@ function Dropdown(props) {
 		middleware: [
 			offset(allowOverlap ? 0 : offsetProps),
 			flip({
-				altBoundary: true,
 				padding: 8,
-				fallbackAxisSideDirection: "end",
 				...allowOverlap && { fallbackStrategy: "bestFit" }
 			}),
 			shift({
@@ -142,15 +86,32 @@ function Dropdown(props) {
 				...allowOverlap && { padding: 8 },
 				apply({ availableHeight, elements }) {
 					if (!allowOverlap) return;
-					Object.assign(elements.floating.style, {
-						maxHeight: `${Math.max(100, availableHeight)}px`,
-						overflowY: "auto"
-					});
+					elements.floating.style.setProperty("--ald-dropdown-max-height", `${Math.max(100, availableHeight)}px`);
 				}
 			})
 		],
 		whileElementsMounted: autoUpdatePos ? autoUpdate : void 0
 	});
+	const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+		duration: OVERLAY_TRANSITION_MS,
+		initial: {
+			opacity: 0,
+			transform: "var(--ald-dropdown-enter-transform)"
+		},
+		close: {
+			opacity: 0,
+			transform: "var(--ald-dropdown-exit-transform)"
+		},
+		common: { transitionTimingFunction: "ease-in-out" }
+	});
+	const isAnimatingOut = !isOpen && isMounted;
+	useLayoutEffect(() => {
+		if (isAnimatingOut) document.body.classList.add("ald-dropdown-root-closing");
+		else document.body.classList.remove("ald-dropdown-root-closing");
+		return () => {
+			if (isAnimatingOut) document.body.classList.remove("ald-dropdown-root-closing");
+		};
+	}, [isAnimatingOut]);
 	const click = useClick(context, { enabled: hasTrigger(trigger, "click") });
 	const hover = useHover(context, {
 		enabled: hasTrigger(trigger, "hover"),
@@ -158,9 +119,8 @@ function Dropdown(props) {
 		delay
 	});
 	const dismiss = useDismiss(context, {});
-	const role = useRole(context);
 	const { getReferenceProps, getFloatingProps } = useInteractions(useMemo(() => {
-		const res = [dismiss, role];
+		const res = [dismiss];
 		if (hasTrigger(trigger, "hover")) res.unshift(hover);
 		if (hasTrigger(trigger, "click")) res.unshift(click);
 		return res;
@@ -168,7 +128,6 @@ function Dropdown(props) {
 		trigger,
 		click,
 		dismiss,
-		role,
 		hover
 	]));
 	const headingId = useId$1();
@@ -221,15 +180,58 @@ function Dropdown(props) {
 			return currentWidth === nextWidth ? currentWidth : nextWidth;
 		});
 	}, [popupMatchTriggerWidth, popupMatchTriggerWidthNumber]);
+	const openMenuFromKeyboard = useCallback((event, position) => {
+		if (disabled) return;
+		event.preventDefault();
+		refs.setPositionReference(event.currentTarget);
+		updateMatchedWidthFromElement(event.currentTarget);
+		setMenuInitialFocus(position);
+		onChangeOpen(true);
+	}, [
+		disabled,
+		onChangeOpen,
+		refs,
+		updateMatchedWidthFromElement
+	]);
 	const modifiedChild = cloneElement(child, {
 		...childProps,
 		disabled,
 		...referenceProps,
+		"aria-haspopup": menu ? "menu" : void 0,
+		"aria-expanded": menu ? isOpen : void 0,
 		onClick: (event) => {
+			refs.setPositionReference(event.currentTarget);
 			updateMatchedWidthFromElement(event.currentTarget);
+			setMenuInitialFocus("first");
 			childProps.onClick?.(event);
 			const { onClick: referenceOnClick } = referenceProps;
 			if (typeof referenceOnClick === "function") referenceOnClick(event);
+		},
+		onKeyDown: (event) => {
+			childProps.onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			if (event.key === "ArrowDown") {
+				openMenuFromKeyboard(event, "first");
+				return;
+			}
+			if (event.key === "ArrowUp") {
+				openMenuFromKeyboard(event, "last");
+				return;
+			}
+			if (event.key === "Enter" || event.key === " ") {
+				openMenuFromKeyboard(event, "first");
+				return;
+			}
+			const { onKeyDown: referenceOnKeyDown } = referenceProps;
+			if (typeof referenceOnKeyDown === "function") referenceOnKeyDown(event);
+		},
+		onContextMenu: (event) => {
+			childProps.onContextMenu?.(event);
+			if (event.defaultPrevented || disabled || !hasTrigger(trigger, "contextMenu")) return;
+			event.preventDefault();
+			refs.setPositionReference({ getBoundingClientRect: () => new DOMRect(event.clientX, event.clientY, 0, 0) });
+			setMenuInitialFocus("first");
+			onChangeOpen(true);
 		}
 	});
 	const onMenuItemClick = useCallback((info) => {
@@ -240,6 +242,15 @@ function Dropdown(props) {
 		}
 		onChangeOpen(false);
 	}, [menu, onChangeOpen]);
+	const onMenuRequestClose = useCallback((reason) => {
+		if (reason === "blur" && !closeOnFocusOut) return;
+		onChangeOpen(false);
+		if (reason === "cancel") window.setTimeout(() => targetElement?.focus(), 0);
+	}, [
+		closeOnFocusOut,
+		onChangeOpen,
+		targetElement
+	]);
 	const menuInstance = useMemo(() => {
 		return /* @__PURE__ */ jsx(Menu, {
 			...menu,
@@ -254,6 +265,8 @@ function Dropdown(props) {
 			},
 			onBeforeLeafItemClick: isOpenControlled ? void 0 : markRootClosing,
 			rootClosing: isAnimatingOut,
+			initialFocus: menuInitialFocus,
+			onRequestClose: onMenuRequestClose,
 			onClick: onMenuItemClick,
 			externalOverflow: allowOverlap
 		});
@@ -264,7 +277,9 @@ function Dropdown(props) {
 		markRootClosing,
 		menu,
 		onMenuItemClick,
-		popupMatchTriggerWidth
+		onMenuRequestClose,
+		popupMatchTriggerWidth,
+		menuInitialFocus
 	]);
 	const popupElement = useMemo(() => {
 		return typeof dropdownRender === "function" ? dropdownRender(menuInstance) : menuInstance;
@@ -280,7 +295,7 @@ function Dropdown(props) {
 		maxWidth: "none"
 	} : void 0;
 	const floatingSide = resolvePlacementSide(String(floatingPlacement));
-	const shouldKeepMounted = !destroyPopupOnHide || isOpen || isAnimatingOut;
+	const shouldKeepMounted = !destroyPopupOnHide || isMounted;
 	const isPositionReady = x !== null && y !== null;
 	const overlayHidden = !isOpen && !isAnimatingOut || isOpen && !isPositionReady;
 	const resolvedFloatingStyles = isAnimatingOut ? lastResolvedFloatingStylesRef.current ?? floatingStyles : floatingStyles;
@@ -292,34 +307,35 @@ function Dropdown(props) {
 		lastResolvedSideRef.current = floatingSide;
 	}
 	const renderFloatingContent = useCallback(() => {
-		const surface = /* @__PURE__ */ jsx("div", {
-			...isAnimatingOut ? {} : getFloatingProps(),
-			className: cn("ald-dropdown-overlay", "tw-pointer-events-auto tw-z-[1001] tw-max-w-none tw-outline-none", overlayClassName, { "ald-dropdown-overlay-hidden": overlayHidden }),
-			ref: refs.setFloating,
-			style: {
-				zIndex: popupZIndex,
-				...resolvedFloatingStyles,
-				...matchedOverlayStyle,
-				...overlayStyle
-			},
-			"aria-labelledby": headingId,
-			children: /* @__PURE__ */ jsx("div", {
-				className: cn("ald-dropdown-surface", "tw-flex tw-flex-col tw-items-start tw-text-sm"),
-				style: {
-					...matchedSurfaceStyle,
-					...overlayInnerStyle
-				},
-				"data-state": isOpen ? "open" : "closed",
-				"data-side": resolvedFloatingSide,
-				children: popupElement
-			})
-		});
-		const popupElem = isAnimatingOut && !isOpen ? surface : /* @__PURE__ */ jsx(FloatingFocusManager, {
+		const popupElem = /* @__PURE__ */ jsx(FloatingFocusManager, {
 			context,
+			disabled: isAnimatingOut,
 			modal: false,
 			initialFocus,
 			closeOnFocusOut,
-			children: surface
+			children: /* @__PURE__ */ jsx("div", {
+				...isAnimatingOut ? {} : getFloatingProps(),
+				className: cn("ald-dropdown-overlay", "tw-pointer-events-auto tw-z-[1001] tw-max-w-none tw-outline-none", overlayClassName, { "ald-dropdown-overlay-hidden": overlayHidden }),
+				ref: refs.setFloating,
+				style: {
+					zIndex: popupZIndex,
+					...resolvedFloatingStyles,
+					...matchedOverlayStyle,
+					...overlayStyle
+				},
+				"aria-labelledby": headingId,
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn("ald-dropdown-surface", allowOverlap && "ald-dropdown-surface-overlap", "tw-flex tw-flex-col tw-items-start tw-text-sm"),
+					style: {
+						...matchedSurfaceStyle,
+						...overlayInnerStyle,
+						...transitionStyles
+					},
+					"data-state": isOpen ? "open" : "closed",
+					"data-side": resolvedFloatingSide,
+					children: popupElement
+				})
+			})
 		});
 		const popupContainer = typeof getPopupContainer === "function" ? getPopupContainer() : document.body;
 		return ReactDOM.createPortal(popupElem, popupContainer);
@@ -335,6 +351,7 @@ function Dropdown(props) {
 		overlayInnerStyle,
 		matchedOverlayStyle,
 		matchedSurfaceStyle,
+		transitionStyles,
 		popupZIndex,
 		overlayHidden,
 		isAnimatingOut,
@@ -342,7 +359,8 @@ function Dropdown(props) {
 		initialFocus,
 		closeOnFocusOut,
 		resolvedFloatingSide,
-		resolvedFloatingStyles
+		resolvedFloatingStyles,
+		allowOverlap
 	]);
 	const popup = shouldKeepMounted ? renderFloatingContent() : null;
 	const { setReference } = refs;