@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/dist/Dialog/Dialog.types.d.ts

@@ -5,12 +5,9 @@ import { ThemeProps } from '../ThemeProvider/ThemeProvider.types';
 /**
  * 对话框类型
  */
-export type DialogType = 'confirm' | 'prompt';
-export type Dispatch = (action: boolean, val?: string) => void;
-export type DialogRef = {
-    theme?: ThemeProps;
-};
-export interface DialogProps extends ModalProps {
+export type DialogType = 'confirm' | 'prompt' | 'alert';
+export type Dispatch = (action: boolean, e: React.SyntheticEvent, val?: string) => void;
+export interface DialogProps extends Omit<ModalProps, 'title' | 'content'> {
     /**
      * 对话框类型
      * @default confirm
@@ -19,11 +16,11 @@ export interface DialogProps extends ModalProps {
     /**
      * 自定义标题
      */
-    header?: ReactNode;
+    title?: ReactNode;
     /**
      * 自定义内容
      */
-    message?: ReactNode;
+    content?: ReactNode;
     /**
      * 输入框占位文本
      */
@@ -33,9 +30,9 @@ export interface DialogProps extends ModalProps {
      */
     InputProps?: Partial<InputProps>;
     /**
-     * 确认文本内容
+     * 确认按钮文本内容
      */
-    confirmText?: ReactNode;
+    okText?: ReactNode;
     /**
      * 取消文本内容
      */
@@ -44,27 +41,36 @@ export interface DialogProps extends ModalProps {
      * theme 主题定制
      */
     theme?: ThemeProps;
+    /**
+     * 渲染Dialog的根容器
+     * @default document.body
+     */
+    container?: HTMLElement | (() => HTMLElement);
     /**
      * 确认回调
      */
-    onOk?: (val?: string) => void;
+    onOk?: (e: React.SyntheticEvent, data: {
+        value: string;
+    }) => void;
     /**
      * 取消回调
      */
-    onClose?: () => void;
+    onCancel?: (e: React.SyntheticEvent) => void;
 }
 /**
  * 函数式调用配置参数
  */
-export type DialogOptions = Omit<DialogProps, 'placeholder' | 'inputProps' | 'onOk' | 'onClose'> & {
+export type DialogOptions = Omit<DialogProps, 'placeholder' | 'inputProps' | 'onOk' | 'onCancel'> & {
     /**
      * 确认回调
      */
-    onConfirm?: (val?: string) => void | Promise<void>;
+    onOk?: (e: React.SyntheticEvent, data: {
+        value: string;
+    }) => void;
     /**
      * 取消回调
      */
-    onCancel?: () => void | Promise<void>;
+    onCancel?: (e: React.SyntheticEvent) => void;
 };
 /**
  * prompt函数式调用配置参数
@@ -83,6 +89,10 @@ export type PromptOptions = (DialogOptions & {
  * confirm函数式调用配置参数
  */
 export type ConfirmOptions = DialogOptions | string;
+/**
+ * alert函数式调用配置参数
+ */
+export type AlertOptions = DialogOptions | string;
 /**
  * Dialog函数式调用返回值类型
  */
@@ -91,19 +101,37 @@ export type DialogPromise = Promise<boolean | string>;
  * Dialog Instance
  */
 export interface DialogFunction {
-    /**
-     * 直接调用显示确认框 Dialog
-     */
-    (options: ConfirmOptions): DialogPromise;
     /**
      * 显示确认框 Dialog.confirm
      */
-    confirm?: (options: ConfirmOptions) => DialogPromise;
+    confirm?: (options: ConfirmOptions) => Promise<boolean>;
     /**
      * 显示提示对话框 Dialog.prompt
      */
-    prompt?: (options: PromptOptions, val?: string) => DialogPromise;
+    prompt?: (options: PromptOptions, val?: string) => Promise<string | null>;
+    /**
+     * 显示警告对话框 Dialog.alert
+     */
+    alert?: (options: AlertOptions) => Promise<boolean>;
 }
-export interface DialogInstance extends DialogFunction {
+/**
+ * Dialog组件类型，支持组件式调用和函数式调用
+ */
+export interface DialogComponent extends React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>> {
+    /**
+     * 显示确认框
+     */
+    confirm: (options: ConfirmOptions) => Promise<boolean>;
+    /**
+     * 显示提示对话框
+     */
+    prompt: (options: PromptOptions) => Promise<string | null>;
+    /**
+     * 显示警告对话框
+     */
+    alert: (options: AlertOptions) => Promise<boolean>;
+    /**
+     * 使用Dialog Hook
+     */
     useDialog: () => [DialogFunction, React.JSX.Element];
 }

package/dist/Dialog/FunctionalDialog.d.ts

@@ -1,3 +1,10 @@
-import { DialogInstance } from './Dialog.types';
-declare const Dialog: DialogInstance;
-export default Dialog;
+import React from 'react';
+import { DialogPromise, PromptOptions, ConfirmOptions, AlertOptions, DialogOptions, DialogFunction } from './Dialog.types';
+declare const FunctionalDialog: {
+    (props: DialogOptions | string): DialogPromise;
+    confirm: (options: ConfirmOptions) => Promise<boolean>;
+    prompt: (options: PromptOptions) => Promise<string>;
+    alert: (options: AlertOptions) => Promise<boolean>;
+    useDialog: () => [DialogFunction, React.JSX.Element];
+};
+export default FunctionalDialog;

package/dist/Dialog/FunctionalDialog.js

@@ -82,130 +82,152 @@ module.exports = __toCommonJS(FunctionalDialog_exports);
 var import_react = __toESM(require("react"));
 var import_utils = require("@bifrostui/utils");
 var import_Dialog = __toESM(require("./Dialog"));
-const { isValidElement, Component } = import_react.default;
+const { isValidElement } = import_react.default;
 const formatProps = (props) => {
   if (typeof props === "string" || isValidElement(props)) {
-    return { message: props };
+    return { content: props };
   }
   return props;
 };
 const DialogGenerator = (options) => {
-  const rootWrapper = document.createElement("div");
-  const rootElement = (0, import_utils.getRootElement)();
-  rootElement.appendChild(rootWrapper);
-  const DialogComponent = () => {
-    const _a = options, { onConfirm, onCancel, ref } = _a, others = __objRest(_a, ["onConfirm", "onCancel", "ref"]);
-    const [visible, setVisible] = (0, import_react.useState)(false);
+  const dialogFragment = import_utils.isMini ? document.createElement("div") : document.createDocumentFragment();
+  const rootElement = (0, import_utils.getRootContainer)(options == null ? void 0 : options.container);
+  rootElement.appendChild(dialogFragment);
+  const DialogWrapper = () => {
+    const _a = options, { onOk, onCancel } = _a, rest = __objRest(_a, ["onOk", "onCancel"]);
     const close = (0, import_react.useCallback)(() => {
-      setVisible(false);
       setTimeout(() => {
-        const unmountRes = (0, import_utils.unmount)(rootWrapper);
-        if (unmountRes && rootWrapper.parentNode) {
-          rootWrapper.parentNode.removeChild(rootWrapper);
+        const unmountRes = (0, import_utils.unmount)(dialogFragment);
+        if (unmountRes && dialogFragment.parentNode) {
+          dialogFragment.parentNode.removeChild(dialogFragment);
         }
       }, 150);
-    }, [rootWrapper]);
-    (0, import_react.useEffect)(() => {
-      setVisible(true);
-    }, []);
-    const dispatch = (action, val) => __async(void 0, null, function* () {
+    }, [dialogFragment]);
+    const dispatch = (action, e, val = "") => __async(void 0, null, function* () {
       if (action === true) {
-        try {
-          yield onConfirm == null ? void 0 : onConfirm(val);
-        } catch (error) {
-        }
+        yield onOk == null ? void 0 : onOk(e, { value: val });
       } else if (action === false) {
-        try {
-          yield onCancel == null ? void 0 : onCancel();
-        } catch (error) {
-        }
+        yield onCancel == null ? void 0 : onCancel(e);
       }
       close();
     });
     return /* @__PURE__ */ import_react.default.createElement(
       import_Dialog.default,
-      __spreadProps(__spreadValues({
-        ref
-      }, others), {
-        open: visible,
-        onOk: (val) => dispatch(true, val),
-        onClose: () => dispatch(false)
+      __spreadProps(__spreadValues({}, rest), {
+        open: true,
+        onOk: (e, { value }) => dispatch(true, e, value),
+        onCancel: (e) => dispatch(false, e)
       })
     );
   };
-  return (0, import_utils.render)(/* @__PURE__ */ import_react.default.createElement(DialogComponent, null), rootWrapper);
+  return (0, import_utils.render)(/* @__PURE__ */ import_react.default.createElement(DialogWrapper, null), dialogFragment);
 };
-const Dialog = (props) => {
+const FunctionalDialog = (props) => {
   const options = formatProps(props);
-  const _a = options, { onConfirm, onCancel } = _a, rest = __objRest(_a, ["onConfirm", "onCancel"]);
+  const _a = options, { onOk, onCancel } = _a, rest = __objRest(_a, ["onOk", "onCancel"]);
   return new Promise((resolve) => {
     DialogGenerator(__spreadProps(__spreadValues({}, rest), {
-      onConfirm: (val) => __async(void 0, null, function* () {
-        yield onConfirm == null ? void 0 : onConfirm(val);
+      onOk: (_0, _1) => __async(void 0, [_0, _1], function* (e, { value: val }) {
+        yield onOk == null ? void 0 : onOk(e, { value: val });
         if (rest.type === "prompt")
           resolve(val);
         else
           resolve(true);
       }),
-      onCancel: () => __async(void 0, null, function* () {
-        yield onCancel == null ? void 0 : onCancel();
-        resolve(false);
+      onCancel: (e) => __async(void 0, null, function* () {
+        yield onCancel == null ? void 0 : onCancel(e);
+        if (rest.type === "prompt")
+          resolve(null);
+        else
+          resolve(false);
       })
     }));
   });
 };
-Dialog.prototype = Component.prototype;
 const confirm = (options) => {
-  return Dialog(__spreadValues({
+  return FunctionalDialog(__spreadValues({
     type: "confirm"
   }, formatProps(options)));
 };
 const prompt = (options) => {
-  return Dialog(__spreadValues({
+  return FunctionalDialog(__spreadValues({
     type: "prompt"
   }, formatProps(options)));
 };
+const alert = (options) => {
+  return FunctionalDialog(__spreadValues({
+    type: "alert"
+  }, formatProps(options)));
+};
 const useDialog = () => {
-  const holderRef = import_react.default.useRef(null);
-  const wrapAPI = (props) => {
-    var _a;
-    const options = __spreadValues({ theme: (_a = holderRef.current) == null ? void 0 : _a.theme }, formatProps(props));
-    const _b = options, { onConfirm, onCancel } = _b, rest = __objRest(_b, ["onConfirm", "onCancel"]);
+  const [elements, setElements] = (0, import_react.useState)([]);
+  const createDialog = (0, import_react.useCallback)((config) => {
     return new Promise((resolve) => {
-      DialogGenerator(__spreadProps(__spreadValues({}, rest), {
-        onConfirm: (val) => __async(void 0, null, function* () {
-          yield onConfirm == null ? void 0 : onConfirm(val);
-          if (rest.type === "prompt")
-            resolve(val);
-          else
-            resolve(true);
-        }),
-        onCancel: () => __async(void 0, null, function* () {
-          yield onCancel == null ? void 0 : onCancel();
+      const key = `dialog-${Date.now()}-${Math.random()}`;
+      const destroy = () => {
+        setElements((prev) => prev.filter((el) => el.key !== key));
+      };
+      const onInternalOk = (e, data) => __async(void 0, null, function* () {
+        var _a;
+        yield (_a = config.onOk) == null ? void 0 : _a.call(config, e, data);
+        if (config.type === "prompt")
+          resolve(data.value);
+        else
+          resolve(true);
+        destroy();
+      });
+      const onInternalCancel = (e) => __async(void 0, null, function* () {
+        var _a;
+        yield (_a = config.onCancel) == null ? void 0 : _a.call(config, e);
+        if (config.type === "prompt")
+          resolve(null);
+        else
           resolve(false);
+        destroy();
+      });
+      const dialogElement = /* @__PURE__ */ import_react.default.createElement(
+        import_Dialog.default,
+        __spreadProps(__spreadValues({
+          key
+        }, config), {
+          open: true,
+          onOk: onInternalOk,
+          onCancel: onInternalCancel
         })
-      }));
+      );
+      setElements((prev) => [...prev, dialogElement]);
     });
-  };
-  wrapAPI.confirm = (options) => {
-    var _a;
-    return Dialog(__spreadProps(__spreadValues({
-      type: "confirm"
-    }, formatProps(options)), {
-      theme: (_a = holderRef.current) == null ? void 0 : _a.theme
-    }));
-  };
-  wrapAPI.prompt = (options) => {
-    var _a;
-    return Dialog(__spreadProps(__spreadValues({
-      type: "prompt"
-    }, formatProps(options)), {
-      theme: (_a = holderRef.current) == null ? void 0 : _a.theme
-    }));
-  };
-  return [wrapAPI, /* @__PURE__ */ import_react.default.createElement(import_Dialog.default, { key: "dialog-holder", ref: holderRef })];
+  }, []);
+  const wrapAPI = {};
+  wrapAPI.confirm = (0, import_react.useCallback)(
+    (options) => {
+      return createDialog(__spreadValues({
+        type: "confirm"
+      }, formatProps(options)));
+    },
+    [createDialog]
+  );
+  wrapAPI.prompt = (0, import_react.useCallback)(
+    (options) => {
+      return createDialog(__spreadValues({
+        type: "prompt"
+      }, formatProps(options)));
+    },
+    [createDialog]
+  );
+  wrapAPI.alert = (0, import_react.useCallback)(
+    (options) => {
+      return createDialog(__spreadValues({
+        type: "alert"
+      }, formatProps(options)));
+    },
+    [createDialog]
+  );
+  const contextHolder = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, elements);
+  return [wrapAPI, contextHolder];
 };
-Dialog.confirm = confirm;
-Dialog.prompt = prompt;
-Dialog.useDialog = useDialog;
-var FunctionalDialog_default = Dialog;
+FunctionalDialog.confirm = confirm;
+FunctionalDialog.prompt = prompt;
+FunctionalDialog.alert = alert;
+FunctionalDialog.useDialog = useDialog;
+var FunctionalDialog_default = FunctionalDialog;

package/dist/Dialog/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * 自定义 Dialog 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 A11yDemos.tsx（固定约定）
+ */
+export declare const basicDialogDemo: () => React.JSX.Element;
+export declare const promptDialogDemo: () => React.JSX.Element;
+export declare const alertDialogDemo: () => React.JSX.Element;

package/dist/Dialog/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,78 @@
+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);
+var A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  alertDialogDemo: () => alertDialogDemo,
+  basicDialogDemo: () => basicDialogDemo,
+  promptDialogDemo: () => promptDialogDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Dialog = __toESM(require("../../Dialog"));
+const basicDialogDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_Dialog.default,
+    {
+      open: true,
+      disablePortal: true,
+      title: "\u57FA\u7840\u5BF9\u8BDD\u6846",
+      content: "\u8FD9\u662F\u4E00\u4E2A\u57FA\u7840\u7684 Dialog \u7EC4\u4EF6\u793A\u4F8B"
+    }
+  );
+};
+const promptDialogDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_Dialog.default,
+    {
+      open: true,
+      disablePortal: true,
+      type: "prompt",
+      title: "\u8F93\u5165\u5BF9\u8BDD\u6846",
+      content: "\u8BF7\u8F93\u5165\u60A8\u7684\u59D3\u540D\uFF1A",
+      placeholder: "\u8BF7\u8F93\u5165\u59D3\u540D"
+    }
+  );
+};
+const alertDialogDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_Dialog.default,
+    {
+      open: true,
+      disablePortal: true,
+      title: "\u8B66\u544A",
+      content: "\u8FD9\u662F\u4E00\u4E2A\u8B66\u544A\u5BF9\u8BDD\u6846\uFF0C\u8BF7\u6CE8\u610F\uFF01",
+      type: "alert"
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  alertDialogDemo,
+  basicDialogDemo,
+  promptDialogDemo
+});

package/dist/Dialog/index.css

@@ -4,21 +4,21 @@ xhs-page {
   --bui-dialog-max-width: 300px;
   --bui-dialog-border-radius: var(--bui-shape-radius-drawer);
   --bui-dialog-title-padding: 0 40px 9px;
-  --bui-dialog-desc-padding: 0 24px;
-  --bui-dialog-footer-margin-top: 15px;
+  --bui-dialog-content-padding: 0 24px;
+  --bui-dialog-actions-margin: 15px 0 0 0;
   --bui-dialog-button-height: 53px;
   --bui-dialog-button-line-height: 25px;
   --bui-dialog-button-padding: 12px 0 13px;
   --bui-dialog-button-font-size: 17px;
   --bui-dialog-button-border-left: 1px solid rgba(0, 0, 0, 0.05);
-  --bui-dialog-button-active-background-color: rgba(54, 57, 64, 0.05);
+  --bui-dialog-button-active-bg-color: rgba(54, 57, 64, 0.05);
 }
 .bui-dialog {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.bui-dialog-body {
+.bui-dialog-container {
   padding-top: 21px;
   min-width: var(--bui-dialog-max-width);
   margin: 0 auto;
@@ -27,35 +27,31 @@ xhs-page {
   background-color: var(--bui-color-bg-view);
   line-height: 21px;
 }
-.bui-dialog-body-title {
+.bui-dialog-title {
   padding: var(--bui-dialog-title-padding);
   font-size: var(--bui-title-size-2);
   text-align: center;
   color: var(--bui-color-fg-default);
   font-weight: var(--bui-font-weight-medium);
 }
-.bui-dialog-body-title + .bui-dialog-body-footer {
+.bui-dialog-title + .bui-dialog-actions {
   margin-top: var(--bui-spacing-sm);
 }
-.bui-dialog-body-desc {
-  padding: var(--bui-dialog-desc-padding);
+.bui-dialog-content {
+  padding: var(--bui-dialog-content-padding);
   color: var(--bui-color-fg-muted);
   font-size: var(--bui-title-size-4);
   text-align: center;
 }
-.bui-dialog-body-desc:first-child {
+.bui-dialog-content:first-child {
   padding-top: 0;
 }
-.bui-dialog-body-footer {
-  margin-top: var(--bui-dialog-footer-margin-top);
+.bui-dialog-actions {
+  margin: var(--bui-dialog-actions-margin);
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   display: flex;
 }
-.bui-dialog-body-input {
-  width: calc(100% - 48px);
-  margin: 14px 24px 0;
-}
-.bui-dialog-body-button {
+.bui-dialog-actions-btn {
   flex: 1;
   display: block;
   width: 100%;
@@ -70,9 +66,13 @@ xhs-page {
   text-align: center;
   box-sizing: border-box;
 }
-.bui-dialog-body-button:first-child {
+.bui-dialog-actions-btn:first-child {
   border: none;
 }
-.bui-dialog-body-button:active {
-  background-color: var(--bui-dialog-button-active-background-color);
+.bui-dialog-actions-btn:active {
+  background-color: var(--bui-dialog-button-active-bg-color);
+}
+.bui-dialog-input {
+  width: calc(100% - 48px);
+  margin: 14px 24px 0;
 }

package/dist/Dialog/index.d.ts

@@ -1,2 +1,5 @@
-export { default, default as Dialog } from './FunctionalDialog';
+import { DialogComponent as DialogComponentType } from './Dialog.types';
+declare const DialogWithMethods: DialogComponentType;
+export default DialogWithMethods;
+export { DialogWithMethods as Dialog };
 export * from './Dialog.types';

package/dist/Dialog/index.js

@@ -28,12 +28,19 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Dialog_exports = {};
 __export(Dialog_exports, {
-  Dialog: () => import_FunctionalDialog.default,
-  default: () => import_FunctionalDialog.default
+  Dialog: () => DialogWithMethods,
+  default: () => Dialog_default
 });
 module.exports = __toCommonJS(Dialog_exports);
+var import_Dialog = __toESM(require("./Dialog"));
 var import_FunctionalDialog = __toESM(require("./FunctionalDialog"));
 __reExport(Dialog_exports, require("./Dialog.types"), module.exports);
+const DialogWithMethods = import_Dialog.default;
+DialogWithMethods.confirm = import_FunctionalDialog.default.confirm;
+DialogWithMethods.prompt = import_FunctionalDialog.default.prompt;
+DialogWithMethods.alert = import_FunctionalDialog.default.alert;
+DialogWithMethods.useDialog = import_FunctionalDialog.default.useDialog;
+var Dialog_default = DialogWithMethods;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Dialog,

package/dist/Drawer/Drawer.js

@@ -98,7 +98,6 @@ const Drawer = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     "transitionDuration"
   ]);
   const anchorInvariant = oppositeDirection[anchorProp];
-  const [keepMounted, setKeepMounted] = (0, import_react.useState)(open);
   return /* @__PURE__ */ import_react.default.createElement(
     import_Modal.default,
     __spreadValues({
@@ -108,17 +107,14 @@ const Drawer = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       hideBackdrop,
       ref,
       className: (0, import_clsx.default)(prefixCls, className),
-      disablePortal,
-      keepMounted
+      disablePortal
     }, others),
     /* @__PURE__ */ import_react.default.createElement(
       import_Slide.default,
       __spreadValues({
         in: open,
         direction: anchorInvariant,
-        timeout: transitionDuration,
-        onEnter: () => setKeepMounted(true),
-        onExited: () => setKeepMounted(false)
+        timeout: transitionDuration
       }, SlideProps),
       /* @__PURE__ */ import_react.default.createElement(
         "div",
@@ -127,7 +123,11 @@ const Drawer = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
             `${prefixCls}-content`,
             `${prefixCls}-content-${anchorProp}`,
             contentProps == null ? void 0 : contentProps.className
-          )
+          ),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": (contentProps == null ? void 0 : contentProps["aria-label"]) || "Drawer",
+          tabIndex: -1
         }),
         children
       )

package/dist/Drawer/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+/**
+ * 自定义 Drawer 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 A11yDemos.tsx（固定约定）
+ */
+export declare const basicDrawerDemo: () => React.JSX.Element;
+export declare const leftDrawerDemo: () => React.JSX.Element;
+export declare const rightDrawerDemo: () => React.JSX.Element;
+export declare const topDrawerDemo: () => React.JSX.Element;
+export declare const noBackdropDrawerDemo: () => React.JSX.Element;
+export declare const interactiveDrawerDemo: () => React.JSX.Element;
+declare const _default: {
+    basicDrawerDemo: () => React.JSX.Element;
+    leftDrawerDemo: () => React.JSX.Element;
+    rightDrawerDemo: () => React.JSX.Element;
+    topDrawerDemo: () => React.JSX.Element;
+    noBackdropDrawerDemo: () => React.JSX.Element;
+    interactiveDrawerDemo: () => React.JSX.Element;
+};
+export default _default;