@oceanbase/ui 1.0.0-alpha.8 → 1.0.0

package/lib/Dialog/index.js

@@ -1,66 +1,43 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Dialog/index.tsx
-var Dialog_exports = {};
-__export(Dialog_exports, {
-  default: () => Dialog_default
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(Dialog_exports);
-var import_icons = require("@oceanbase/icons");
-var import_react = __toESM(require("react"));
-var import_design = require("@oceanbase/design");
-var import_react_dom = require("react-dom");
-var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_Anchor = require("./Anchor");
-var import_Dock = require("./Dock");
-var import_EventProxy = require("./EventProxy");
-var import_zh_CN = __toESM(require("./locale/zh-CN"));
-var import_style = __toESM(require("./style"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var DEFAULT_LEFT = 0.1;
-var DEFAULT_TOP = 0.1;
-var MINIMIZE_HEIGHT = 36;
-var MINIMIZE_WIDTH = 320;
-var DEFAULT_MIN = [320, 256];
-var DEFAULT_WIDTH_MEMBER = 520;
-var DEFAULT_HEIGHT_MEMBER = 600;
-var DEFAULT_BORDER_WIDTH = 24;
-var SCROLL_BAR_WIDTH = 1;
-var _container = null;
-var getContainer = () => {
+exports.default = void 0;
+var _icons = require("@oceanbase/icons");
+var _react = _interopRequireWildcard(require("react"));
+var _design = require("@oceanbase/design");
+var _reactDom = require("react-dom");
+var _LocaleWrapper = _interopRequireDefault(require("../locale/LocaleWrapper"));
+var _Anchor = require("./Anchor");
+var _Dock = require("./Dock");
+var _EventProxy = require("./EventProxy");
+var _zhCN = _interopRequireDefault(require("./locale/zh-CN"));
+var _style = _interopRequireDefault(require("./style"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const DEFAULT_LEFT = 0.1;
+const DEFAULT_TOP = 0.1;
+const MINIMIZE_HEIGHT = 36;
+const MINIMIZE_WIDTH = 320;
+const DEFAULT_MIN = [320, 256];
+const DEFAULT_WIDTH_MEMBER = 520;
+const DEFAULT_HEIGHT_MEMBER = 600;
+const DEFAULT_BORDER_WIDTH = 24;
+// 预留滚动条宽度
+const SCROLL_BAR_WIDTH = 1;
+// Static container for portal
+let _container = null;
+const getContainer = () => {
   if (!_container) {
-    _container = document.createElement("div");
+    _container = document.createElement('div');
     document.body.appendChild(_container);
   }
   return _container;
 };
-var DialogComp = (props) => {
+const DialogComp = props => {
   const {
     className,
     visible,
@@ -83,35 +60,42 @@ var DialogComp = (props) => {
     setRootWidth,
     isEmbed = false
   } = props;
-  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls("dialog");
-  const { wrapSSR } = (0, import_style.default)(prefixCls);
-  const hostRef = (0, import_react.useRef)(null);
-  const clientXRef = (0, import_react.useRef)(0);
-  const clientYRef = (0, import_react.useRef)(0);
-  const isPointDownRef = (0, import_react.useRef)(false);
-  const originInfoRef = (0, import_react.useRef)({});
-  const [mask, setMask] = (0, import_react.useState)(true);
-  const [dialogWidth, setDialogWidth] = (0, import_react.useState)(width ?? DEFAULT_WIDTH_MEMBER);
-  const [dialogHeight, setDialogHeight] = (0, import_react.useState)(height ?? DEFAULT_HEIGHT_MEMBER);
-  const [dialogLeft, setDialogLeft] = (0, import_react.useState)(
-    left ?? clientWidth - (width ?? DEFAULT_WIDTH_MEMBER) - DEFAULT_BORDER_WIDTH
-  );
-  const [dialogTop, setDialogTop] = (0, import_react.useState)(
-    top ?? clientHeight - (height ?? DEFAULT_HEIGHT_MEMBER) - DEFAULT_BORDER_WIDTH
-  );
-  const [moveX, setMoveX] = (0, import_react.useState)(0);
-  const [moveY, setMoveY] = (0, import_react.useState)(0);
-  const [maximization, setMaximization] = (0, import_react.useState)(isEmbed);
-  const [minimize, setMinimize] = (0, import_react.useState)(false);
-  const [headerStyle, setHeaderStyle] = (0, import_react.useState)({});
-  const maxSize = (0, import_react.useMemo)(() => {
-    if (max)
-      return max;
+  const titleId = _react.default.useId();
+  const dialogRootRef = (0, _react.useRef)(null);
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('dialog');
+  const {
+    wrapSSR
+  } = (0, _style.default)(prefixCls);
+
+  // Refs for instance properties
+  const hostRef = (0, _react.useRef)(null);
+  const clientXRef = (0, _react.useRef)(0);
+  const clientYRef = (0, _react.useRef)(0);
+  const isPointDownRef = (0, _react.useRef)(false);
+  const originInfoRef = (0, _react.useRef)({});
+
+  // State
+  const [mask, setMask] = (0, _react.useState)(true);
+  const [dialogWidth, setDialogWidth] = (0, _react.useState)(width ?? DEFAULT_WIDTH_MEMBER);
+  const [dialogHeight, setDialogHeight] = (0, _react.useState)(height ?? DEFAULT_HEIGHT_MEMBER);
+  const [dialogLeft, setDialogLeft] = (0, _react.useState)(left ?? clientWidth - (width ?? DEFAULT_WIDTH_MEMBER) - DEFAULT_BORDER_WIDTH);
+  const [dialogTop, setDialogTop] = (0, _react.useState)(top ?? clientHeight - (height ?? DEFAULT_HEIGHT_MEMBER) - DEFAULT_BORDER_WIDTH);
+  const [moveX, setMoveX] = (0, _react.useState)(0);
+  const [moveY, setMoveY] = (0, _react.useState)(0);
+  const [maximization, setMaximization] = (0, _react.useState)(isEmbed);
+  const [minimize, setMinimize] = (0, _react.useState)(false);
+  const [headerStyle, setHeaderStyle] = (0, _react.useState)({});
+
+  // Computed values
+  const maxSize = (0, _react.useMemo)(() => {
+    if (max) return max;
     return [clientWidth, clientHeight];
   }, [max, clientWidth, clientHeight]);
-  const minSize = (0, import_react.useMemo)(() => min, [min]);
-  const getDefaultEmbedState = (0, import_react.useCallback)(() => {
+  const minSize = (0, _react.useMemo)(() => min, [min]);
+  const getDefaultEmbedState = (0, _react.useCallback)(() => {
     return {
       width: width ?? DEFAULT_WIDTH_MEMBER,
       height: height ?? DEFAULT_HEIGHT_MEMBER,
@@ -119,28 +103,22 @@ var DialogComp = (props) => {
       top: top ?? clientHeight - (height ?? DEFAULT_HEIGHT_MEMBER) - DEFAULT_BORDER_WIDTH
     };
   }, [width, height, left, top, clientWidth, clientHeight]);
-  const setRootWidthInEmbedMode = (0, import_react.useCallback)(
-    (newWidth) => {
-      const restWidth = !!newWidth ? newWidth + SCROLL_BAR_WIDTH : 0;
-      const rootWidth = (clientWidth - restWidth) / clientWidth;
-      setRootWidth == null ? void 0 : setRootWidth(`${rootWidth * 100}%`);
-    },
-    [clientWidth, setRootWidth]
-  );
-  const compatClonedModel = (0, import_react.useCallback)(
-    (model) => {
-      return {
-        left: DEFAULT_LEFT,
-        top: DEFAULT_TOP,
-        width: DEFAULT_WIDTH_MEMBER / clientWidth,
-        height: DEFAULT_HEIGHT_MEMBER / clientHeight,
-        minimize: false,
-        maximization: false,
-        ...model
-      };
-    },
-    [clientWidth, clientHeight]
-  );
+  const setRootWidthInEmbedMode = (0, _react.useCallback)(newWidth => {
+    const restWidth = !!newWidth ? newWidth + SCROLL_BAR_WIDTH : 0;
+    const rootWidth = (clientWidth - restWidth) / clientWidth;
+    setRootWidth?.(`${rootWidth * 100}%`);
+  }, [clientWidth, setRootWidth]);
+  const compatClonedModel = (0, _react.useCallback)(model => {
+    return {
+      left: DEFAULT_LEFT,
+      top: DEFAULT_TOP,
+      width: DEFAULT_WIDTH_MEMBER / clientWidth,
+      height: DEFAULT_HEIGHT_MEMBER / clientHeight,
+      minimize: false,
+      maximization: false,
+      ...model
+    };
+  }, [clientWidth, clientHeight]);
   const checkSize = (w, h) => {
     const newModel = {};
     const result = {
@@ -165,8 +143,10 @@ var DialogComp = (props) => {
     }
     return result;
   };
-  (0, import_react.useEffect)(() => {
-    const host = document.createElement("div");
+
+  // componentDidMount
+  (0, _react.useEffect)(() => {
+    const host = document.createElement('div');
     hostRef.current = host;
     getContainer().appendChild(host);
     return () => {
@@ -175,7 +155,9 @@ var DialogComp = (props) => {
       }
     };
   }, []);
-  (0, import_react.useEffect)(() => {
+
+  // componentDidUpdate
+  (0, _react.useEffect)(() => {
     if (!visible) {
       setRootWidthInEmbedMode(0);
       return;
@@ -187,64 +169,81 @@ var DialogComp = (props) => {
     setDialogTop(tempState.top);
     setRootWidthInEmbedMode(tempState.width);
   }, [visible, clientWidth, clientHeight, getDefaultEmbedState, setRootWidthInEmbedMode]);
-  (0, import_react.useEffect)(() => {
+  (0, _react.useEffect)(() => {
+    if (!visible) return;
+    const frame = requestAnimationFrame(() => {
+      if (!minimize) {
+        dialogRootRef.current?.focus({
+          preventScroll: true
+        });
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [visible, minimize]);
+  (0, _react.useEffect)(() => {
+    if (!visible) return;
+    const onDocKeyDown = e => {
+      if (e.key !== 'Escape') return;
+      const root = dialogRootRef.current;
+      const target = e.target;
+      if (root && target && !root.contains(target)) return;
+      onClose?.();
+    };
+    document.addEventListener('keydown', onDocKeyDown);
+    return () => document.removeEventListener('keydown', onDocKeyDown);
+  }, [visible, onClose]);
+  (0, _react.useEffect)(() => {
     if (isEmbed) {
       setMinimize(false);
       setMaximization(true);
     } else {
       setMinimize(false);
       setMaximization(false);
-      if (height)
-        setDialogHeight(height);
-      if (width)
-        setDialogWidth(width);
-      if (top !== void 0)
-        setDialogTop(top);
-      if (left !== void 0)
-        setDialogLeft(left);
+      if (height) setDialogHeight(height);
+      if (width) setDialogWidth(width);
+      if (top !== undefined) setDialogTop(top);
+      if (left !== undefined) setDialogLeft(left);
     }
   }, [isEmbed, height, width, top, left]);
-  const onDragStart = (event) => {
-    if (!draggable)
-      return;
-    if (maximization)
-      return;
+
+  // Drag handlers
+  const onDragStart = event => {
+    if (!draggable) return;
+    if (maximization) return;
     setMask(true);
-    if (dialogLeft === void 0) {
+    if (dialogLeft === undefined) {
       setDialogLeft(DEFAULT_LEFT);
     }
-    if (dialogTop === void 0) {
+    if (dialogTop === undefined) {
       setDialogTop(DEFAULT_TOP);
     }
     clientXRef.current = event.clientX;
     clientYRef.current = event.clientY;
     isPointDownRef.current = true;
   };
-  const onDragMove = (event) => {
-    if (!draggable || !isPointDownRef.current)
-      return;
+  const onDragMove = event => {
+    if (!draggable || !isPointDownRef.current) return;
     event.preventDefault();
     setMoveX(event.clientX - clientXRef.current);
     setMoveY(event.clientY - clientYRef.current);
   };
   const onDragEnd = () => {
-    if (!draggable)
-      return;
+    if (!draggable) return;
     isPointDownRef.current = false;
-    if (moveX === 0 && moveY === 0)
-      return;
+    if (moveX === 0 && moveY === 0) return;
     setMask(false);
-    setDialogLeft((prev) => (prev ?? 0) + moveX);
-    setDialogTop((prev) => (prev ?? 0) + moveY);
+    setDialogLeft(prev => (prev ?? 0) + moveX);
+    setDialogTop(prev => (prev ?? 0) + moveY);
     setMoveX(0);
     setMoveY(0);
   };
   const detectPointUp = () => {
     setMask(false);
   };
+
+  // Resize handlers
   const onResizeStart = () => {
-    if (minimize || !resizable)
-      return;
+    if (minimize || !resizable) return;
     originInfoRef.current = compatClonedModel({
       width: dialogWidth,
       height: dialogHeight,
@@ -255,92 +254,101 @@ var DialogComp = (props) => {
     });
     setMask(true);
   };
-  const onResizeMove = (event) => {
+  const onResizeMove = event => {
     event.preventDefault();
-    if (minimize || !resizable)
-      return;
+    if (minimize || !resizable) return;
+    // @ts-ignore
     const newWidth = originInfoRef.current.width + event.moveRight;
+    // @ts-ignore
     const newHeight = originInfoRef.current.height + event.moveBottom;
     const checkResult = checkSize(newWidth, newHeight);
     if (checkResult.widthShouldChange) {
       setRootWidthInEmbedMode(newWidth);
     }
     if (checkResult.widthShouldChange) {
+      // @ts-ignore
       setDialogLeft(originInfoRef.current.left + event.moveLeft);
       setDialogWidth(newWidth);
     }
     if (checkResult.heightShouldChange) {
+      // @ts-ignore
       setDialogTop(originInfoRef.current.top + event.moveTop);
       setDialogHeight(newHeight);
     }
   };
   const onResizeEnd = () => {
-    if (!mask || !resizable)
-      return;
+    if (!mask || !resizable) return;
     setMask(false);
   };
+
+  // Toggle handlers
   const toggleMinimize = () => {
     setMaximization(false);
-    setMinimize((prev) => !prev);
+    setMinimize(prev => !prev);
   };
   const toggleMaximization = () => {
     const enable = resizable && enableMaximization && !isEmbed;
-    if (!enable)
-      return;
-    setMaximization((prev) => !prev);
+    if (!enable) return;
+    setMaximization(prev => !prev);
     setMinimize(false);
   };
-  const handleClose = (event) => {
+  const handleClose = event => {
     event.stopPropagation();
-    onClose == null ? void 0 : onClose();
+    onClose?.();
   };
-  const getBaseStyle = (0, import_react.useCallback)(() => {
+
+  // Style calculations
+  const getBaseStyle = (0, _react.useCallback)(() => {
     return {
-      visibility: visible ? "visible" : "hidden",
+      visibility: visible ? 'visible' : 'hidden',
       opacity: visible ? 1 : 0
     };
   }, [visible]);
-  const getCompatAbsPostion = (0, import_react.useCallback)(
-    (info) => {
-      const compatInfo = compatClonedModel(info);
-      const { minimize: isMinimize } = compatInfo;
-      const ret = {};
-      ["left", "width", "top", "height"].forEach((key) => {
-        ret[key] = compatInfo[key];
-      });
-      if (maxSize && ret.width > maxSize[0]) {
-        ret.width = maxSize[0];
-      }
-      if (maxSize && ret.height > maxSize[1]) {
-        ret.height = maxSize[1];
-      }
-      if (minSize && ret.width < minSize[0]) {
-        ret.width = minSize[0];
-      }
-      if (minSize && ret.height < minSize[1]) {
-        ret.height = minSize[1];
-      }
-      ret.width = isMinimize ? MINIMIZE_WIDTH : ret.width;
-      ret.height = isMinimize ? MINIMIZE_HEIGHT : ret.height;
-      if (ret.left + ret.width > clientWidth) {
-        ret.left = clientWidth - ret.width;
-      }
-      if (ret.left < 0) {
-        ret.left = 0;
-      }
-      if (ret.top < 0) {
-        ret.top = 0;
-      }
-      if (ret.top + ret.height > clientHeight) {
-        ret.top = clientHeight - ret.height;
-      }
-      return ret;
-    },
-    [maxSize, minSize, clientWidth, clientHeight, compatClonedModel]
-  );
-  (0, import_react.useEffect)(() => {
-    if (!visible)
-      return;
+  const getCompatAbsPostion = (0, _react.useCallback)(info => {
+    const compatInfo = compatClonedModel(info);
+    const {
+      minimize: isMinimize
+    } = compatInfo;
+    const ret = {};
+    ['left', 'width', 'top', 'height'].forEach(key => {
+      ret[key] = compatInfo[key];
+    });
+
+    // Apply min/max constraints
+    if (maxSize && ret.width > maxSize[0]) {
+      ret.width = maxSize[0];
+    }
+    if (maxSize && ret.height > maxSize[1]) {
+      ret.height = maxSize[1];
+    }
+    if (minSize && ret.width < minSize[0]) {
+      ret.width = minSize[0];
+    }
+    if (minSize && ret.height < minSize[1]) {
+      ret.height = minSize[1];
+    }
+    ret.width = isMinimize ? MINIMIZE_WIDTH : ret.width;
+    ret.height = isMinimize ? MINIMIZE_HEIGHT : ret.height;
+
+    // Adjust position if out of bounds (calculate but don't setState here)
+    if (ret.left + ret.width > clientWidth) {
+      ret.left = clientWidth - ret.width;
+    }
+    if (ret.left < 0) {
+      ret.left = 0;
+    }
+    if (ret.top < 0) {
+      ret.top = 0;
+    }
+    if (ret.top + ret.height > clientHeight) {
+      ret.top = clientHeight - ret.height;
+    }
+    return ret;
+  }, [maxSize, minSize, clientWidth, clientHeight, compatClonedModel]);
+
+  // Adjust position if out of bounds
+  (0, _react.useEffect)(() => {
+    if (!visible) return;
     const adjusted = getCompatAbsPostion({
       width: dialogWidth,
       height: dialogHeight,
@@ -355,7 +363,7 @@ var DialogComp = (props) => {
       setDialogTop(adjusted.top);
     }
   }, [dialogWidth, dialogHeight, dialogLeft, dialogTop, minimize, visible, getCompatAbsPostion]);
-  const getStyle = (0, import_react.useMemo)(() => {
+  const getStyle = (0, _react.useMemo)(() => {
     const transform = `translate(${moveX}px, ${moveY}px)`;
     const baseStyle = getBaseStyle();
     if (maximization && !isEmbed) {
@@ -365,11 +373,13 @@ var DialogComp = (props) => {
         bottom: 0,
         right: 0,
         width: width || DEFAULT_WIDTH_MEMBER,
-        height: "auto",
+        height: 'auto',
         borderRadius: 0
       };
     } else if (minimize) {
-      const { height: headerHeight } = headerStyle;
+      const {
+        height: headerHeight
+      } = headerStyle;
       const position = getCompatAbsPostion({
         width: dialogWidth,
         height: dialogHeight,
@@ -397,210 +407,214 @@ var DialogComp = (props) => {
         transform
       };
     }
-  }, [
-    maximization,
-    isEmbed,
-    minimize,
-    moveX,
-    moveY,
-    width,
-    headerStyle,
-    dialogWidth,
-    dialogHeight,
-    dialogLeft,
-    dialogTop,
-    getCompatAbsPostion,
-    getBaseStyle
-  ]);
+  }, [maximization, isEmbed, minimize, moveX, moveY, width, headerStyle, dialogWidth, dialogHeight, dialogLeft, dialogTop, getCompatAbsPostion, getBaseStyle]);
+
+  // Render methods
   const renderControlLink = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-item`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "a",
-      {
+    if (!extLink?.link) {
+      return null;
+    }
+    const linkText = extLink.text || locale?.openHelpCenter;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: `${prefixCls}-item`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
         className: `${prefixCls}-item-link`,
-        href: extLink == null ? void 0 : extLink.link,
+        href: extLink.link,
         target: "_blank",
         rel: "noopener noreferrer",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "svg",
-          {
-            className: "icon",
-            viewBox: "0 0 1024 1024",
-            version: "1.1",
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "16",
-            height: "16",
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M880.0256 912.0256H144.0256a31.9488 31.9488 0 0 1-32.0512-32V144.0256c0-17.7152 14.336-32.0512 32.0512-32.0512h359.936c4.4544 0 8.0384 3.584 8.0384 8.0384v56.0128c0 4.352-3.584 7.9872-7.9872 7.9872h-320v655.9744h655.9744v-320c0-4.4032 3.584-7.9872 8.0384-7.9872h55.9616c4.4032 0 8.0384 3.584 8.0384 7.9872v359.9872c0 17.7152-14.336 32-32 32zM770.8672 199.1168l-52.224-52.224a8.0384 8.0384 0 0 1 4.7104-13.568l179.4048-20.992c5.12-0.6144 9.5232 3.6864 8.9088 8.9088l-20.992 179.4048a8.0384 8.0384 0 0 1-13.6192 4.6592L824.6784 252.928l-256.2048 256.2048c-3.072 3.072-8.192 3.072-11.264 0l-42.4448-42.3936a8.0384 8.0384 0 0 1 0-11.264l256.1024-256.3584z" })
-          }
-        )
-      }
-    ) });
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: `${prefixCls}-item-link-text`,
+          children: linkText
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+          className: "icon",
+          viewBox: "0 0 1024 1024",
+          version: "1.1",
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          "aria-hidden": true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+            d: "M880.0256 912.0256H144.0256a31.9488 31.9488 0 0 1-32.0512-32V144.0256c0-17.7152 14.336-32.0512 32.0512-32.0512h359.936c4.4544 0 8.0384 3.584 8.0384 8.0384v56.0128c0 4.352-3.584 7.9872-7.9872 7.9872h-320v655.9744h655.9744v-320c0-4.4032 3.584-7.9872 8.0384-7.9872h55.9616c4.4032 0 8.0384 3.584 8.0384 7.9872v359.9872c0 17.7152-14.336 32-32 32zM770.8672 199.1168l-52.224-52.224a8.0384 8.0384 0 0 1 4.7104-13.568l179.4048-20.992c5.12-0.6144 9.5232 3.6864 8.9088 8.9088l-20.992 179.4048a8.0384 8.0384 0 0 1-13.6192 4.6592L824.6784 252.928l-256.2048 256.2048c-3.072 3.072-8.192 3.072-11.264 0l-42.4448-42.3936a8.0384 8.0384 0 0 1 0-11.264l256.1024-256.3584z"
+          })
+        })]
+      })
+    });
   };
   const renderControls = () => {
     if (isEmbed) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: `${prefixCls}-controls`, children: [
-        renderControlLink(),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-item`, onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {}) })
-      ] });
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: `${prefixCls}-controls`,
+        children: [renderControlLink(), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          className: `${prefixCls}-item`,
+          "aria-label": locale?.closeDialog,
+          onClick: handleClose,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            "aria-hidden": true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseOutlined, {})
+          })
+        })]
+      });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: `${prefixCls}-controls`, children: [
-      renderControlLink(),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-item`, onClick: toggleMinimize, children: minimize ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ExpandAltOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.MinusOutlined, {}) }),
-      enableMaximization && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-item`, onClick: toggleMaximization, children: maximization ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FullscreenExitOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FullscreenOutlined, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-item`, onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {}) })
-    ] });
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: `${prefixCls}-controls`,
+      children: [renderControlLink(), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        className: `${prefixCls}-item`,
+        "aria-label": minimize ? locale?.restoreWindow : locale?.minimize,
+        onClick: toggleMinimize,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          "aria-hidden": true,
+          children: minimize ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ExpandAltOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.MinusOutlined, {})
+        })
+      }), enableMaximization && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        className: `${prefixCls}-item`,
+        "aria-label": maximization ? locale?.exitFullscreen : locale?.maximize,
+        onClick: toggleMaximization,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          "aria-hidden": true,
+          children: maximization ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FullscreenExitOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FullscreenOutlined, {})
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        className: `${prefixCls}-item`,
+        "aria-label": locale?.closeDialog,
+        onClick: handleClose,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          "aria-hidden": true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseOutlined, {})
+        })
+      })]
+    });
   };
   const renderHeader = () => {
     const headerStyleObj = {
       ...headerStyle,
-      ...minimize ? { boxShadow: "0 2px 20px 0 rgba(4, 1, 30, 0.07)" } : {},
-      ...isEmbed ? { cursor: "initial" } : {}
+      ...(minimize ? {
+        boxShadow: '0 2px 20px 0 rgba(4, 1, 30, 0.07)'
+      } : {}),
+      ...(isEmbed ? {
+        cursor: 'initial'
+      } : {})
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "header",
-      {
-        className: `${prefixCls}-header`,
-        style: headerStyleObj,
-        onPointerDown: onDragStart,
-        onDoubleClick: toggleMaximization,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-title`, children: title || (locale == null ? void 0 : locale.helpDocument) }),
-          renderControls()
-        ]
-      }
-    );
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
+      className: `${prefixCls}-header`,
+      style: headerStyleObj,
+      onPointerDown: onDragStart,
+      onDoubleClick: toggleMaximization,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: `${prefixCls}-title`,
+        id: titleId,
+        children: title || locale?.helpDocument
+      }), renderControls()]
+    });
   };
   const renderMask = () => {
-    if (!mask)
-      return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-mask` });
+    if (!mask) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${prefixCls}-mask`
+    });
   };
   const renderContent = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: `${prefixCls}-main`, style: minimize ? { visibility: "hidden" } : {}, children: [
-      renderMask(),
-      children
-    ] });
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("main", {
+      className: `${prefixCls}-main`,
+      style: minimize ? {
+        visibility: 'hidden'
+      } : {},
+      children: [renderMask(), children]
+    });
   };
   const renderEmbedBorders = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_Anchor.Anchor,
-      {
-        prefixCls,
-        dock: import_Dock.Dock.left,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Anchor.Anchor, {
+        prefixCls: prefixCls,
+        dock: _Dock.Dock.left,
         onStart: onResizeStart,
         onMove: onResizeMove,
         onEnd: onResizeEnd
-      }
-    ) });
+      })
+    });
   };
   const renderBorders = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Anchor.Anchor,
-        {
-          prefixCls,
-          dock: import_Dock.Dock.top,
-          onStart: onResizeStart,
-          onMove: onResizeMove,
-          onEnd: onResizeEnd
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Anchor.Anchor,
-        {
-          prefixCls,
-          dock: import_Dock.Dock.right,
-          onStart: onResizeStart,
-          onMove: onResizeMove,
-          onEnd: onResizeEnd
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Anchor.Anchor,
-        {
-          prefixCls,
-          dock: import_Dock.Dock.bottom,
-          onStart: onResizeStart,
-          onMove: onResizeMove,
-          onEnd: onResizeEnd
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Anchor.Anchor,
-        {
-          prefixCls,
-          dock: import_Dock.Dock.left,
-          onStart: onResizeStart,
-          onMove: onResizeMove,
-          onEnd: onResizeEnd
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Anchor.Anchor,
-        {
-          prefixCls,
-          dock: import_Dock.Dock.topLeft,
-          onStart: onResizeStart,
-          onMove: onResizeMove,
-          onEnd: onResizeEnd
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Anchor.Anchor,
-        {
-          prefixCls,
-          dock: import_Dock.Dock.topRight,
-          onStart: onResizeStart,
-          onMove: onResizeMove,
-          onEnd: onResizeEnd
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Anchor.Anchor,
-        {
-          prefixCls,
-          dock: import_Dock.Dock.bottomLeft,
-          onStart: onResizeStart,
-          onMove: onResizeMove,
-          onEnd: onResizeEnd
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Anchor.Anchor,
-        {
-          prefixCls,
-          dock: import_Dock.Dock.bottomRight,
-          onStart: onResizeStart,
-          onMove: onResizeMove,
-          onEnd: onResizeEnd
-        }
-      )
-    ] });
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Anchor.Anchor, {
+        prefixCls: prefixCls,
+        dock: _Dock.Dock.top,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Anchor.Anchor, {
+        prefixCls: prefixCls,
+        dock: _Dock.Dock.right,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Anchor.Anchor, {
+        prefixCls: prefixCls,
+        dock: _Dock.Dock.bottom,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Anchor.Anchor, {
+        prefixCls: prefixCls,
+        dock: _Dock.Dock.left,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Anchor.Anchor, {
+        prefixCls: prefixCls,
+        dock: _Dock.Dock.topLeft,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Anchor.Anchor, {
+        prefixCls: prefixCls,
+        dock: _Dock.Dock.topRight,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Anchor.Anchor, {
+        prefixCls: prefixCls,
+        dock: _Dock.Dock.bottomLeft,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Anchor.Anchor, {
+        prefixCls: prefixCls,
+        dock: _Dock.Dock.bottomRight,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      })]
+    });
   };
   const renderDialog = () => {
     const style = getStyle;
-    return wrapSSR(
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "div",
-        {
-          className: `${prefixCls}-container ${className || ""} ${isEmbed ? `${prefixCls}-container-embed` : ""}`,
-          style,
-          ...minimize ? {} : { tabIndex: 0 },
-          children: [
-            renderHeader(),
-            renderContent(),
-            isEmbed ? renderEmbedBorders() : renderBorders(),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EventProxy.EventProxy, { onPointerMove: onDragMove, onPointerUp: onDragEnd }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EventProxy.EventProxy, { onPointerUp: detectPointUp })
-          ]
-        }
-      )
-    );
+    return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: dialogRootRef,
+      className: `${prefixCls}-container ${className || ''} ${isEmbed ? `${prefixCls}-container-embed` : ''}`,
+      style: style,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      ...(minimize ? {} : {
+        tabIndex: -1
+      }),
+      children: [renderHeader(), renderContent(), isEmbed ? renderEmbedBorders() : renderBorders(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EventProxy.EventProxy, {
+        onPointerMove: onDragMove,
+        onPointerUp: onDragEnd
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EventProxy.EventProxy, {
+        onPointerUp: detectPointUp
+      })]
+    }));
   };
-  if (!visible && !isEmbed)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, {});
-  return (0, import_react_dom.createPortal)(renderDialog(), getContainer());
+
+  // 嵌入模式通过style控制显隐
+  if (!visible && !isEmbed) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {});
+  return /*#__PURE__*/(0, _reactDom.createPortal)(renderDialog(), getContainer());
 };
-var Dialog_default = (0, import_LocaleWrapper.default)({
-  componentName: "Dialog",
-  defaultLocale: import_zh_CN.default
-})(DialogComp);
+var _default = exports.default = (0, _LocaleWrapper.default)({
+  componentName: 'Dialog',
+  defaultLocale: _zhCN.default
+})(DialogComp);