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

package/es/Dialog/Dialog.js

@@ -30,7 +30,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import clsx from "clsx";
-import React, { useImperativeHandle, useRef } from "react";
+import React, { useRef } from "react";
+import { useUniqueId } from "@bifrostui/utils";
 import { Input } from "../Input";
 import { Button } from "../Button";
 import { useLocaleText } from "../locales";
@@ -42,11 +43,11 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
     open,
     onOk,
-    onClose,
-    header,
-    message,
-    type,
-    confirmText,
+    onCancel,
+    title,
+    content,
+    type = "confirm",
+    okText,
     cancelText,
     placeholder,
     InputProps,
@@ -55,33 +56,42 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
   } = _a, others = __objRest(_a, [
     "open",
     "onOk",
-    "onClose",
-    "header",
-    "message",
+    "onCancel",
+    "title",
+    "content",
     "type",
-    "confirmText",
+    "okText",
     "cancelText",
     "placeholder",
     "InputProps",
     "className",
     "theme"
   ]);
-  const InputRef = useRef(null);
+  const inputRef = useRef(null);
+  const titleId = useUniqueId();
+  const contentId = useUniqueId();
   const themeConfig = useTheme(theme);
   const {
     cancel,
-    confirm,
+    ok,
     placeholder: placeholderLocaleName
   } = useLocaleText("dialog", themeConfig);
-  useImperativeHandle(ref, () => {
-    return { theme: themeConfig };
-  });
-  const footerNode = /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body-footer` }, /* @__PURE__ */ React.createElement(
+  const isAlertMode = type === "alert";
+  const isPromptMode = type === "prompt";
+  const handleOk = (event) => {
+    var _a2;
+    const inputValue = ((_a2 = inputRef.current) == null ? void 0 : _a2.value) || "";
+    onOk == null ? void 0 : onOk(event, { value: inputValue });
+  };
+  const handleCancel = (event) => {
+    onCancel == null ? void 0 : onCancel(event);
+  };
+  const actionsNode = /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-actions` }, !isAlertMode && /* @__PURE__ */ React.createElement(
     Button,
     {
       variant: "text",
-      onClick: onClose,
-      className: `${prefixCls}-body-button`
+      onClick: handleCancel,
+      className: `${prefixCls}-actions-btn`
     },
     cancelText || cancel
   ), /* @__PURE__ */ React.createElement(
@@ -89,33 +99,45 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
     {
       variant: "text",
       color: "primary",
-      onClick: () => {
-        var _a2;
-        onOk((_a2 = InputRef == null ? void 0 : InputRef.current) == null ? void 0 : _a2.value);
-      },
-      className: `${prefixCls}-body-button`
+      onClick: handleOk,
+      className: `${prefixCls}-actions-btn`
     },
-    confirmText || confirm
+    okText || ok
   ));
-  const inputNode = type === "prompt" && /* @__PURE__ */ React.createElement(
+  const inputNode = isPromptMode && /* @__PURE__ */ React.createElement(
     Input,
     __spreadProps(__spreadValues({}, InputProps), {
-      inputRef: InputRef,
-      className: `${prefixCls}-body-input`,
-      placeholder: `${placeholder || placeholderLocaleName}`
+      inputRef,
+      className: `${prefixCls}-input`,
+      placeholder: placeholder || placeholderLocaleName,
+      autoFocus: true,
+      "aria-describedby": content ? contentId : void 0
     })
   );
-  if (!open)
-    return null;
+  const ariaLabelledBy = title ? titleId : void 0;
+  const ariaDescribedBy = content ? contentId : void 0;
   return /* @__PURE__ */ React.createElement(
     Modal,
     __spreadProps(__spreadValues({}, others), {
-      open: true,
-      className: clsx(prefixCls, className),
-      disablePortal: true,
-      onClose
+      open,
+      ref,
+      className: clsx(prefixCls, `${prefixCls}-${type}`, className),
+      onClose: handleCancel
     }),
-    /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body` }, header && /* @__PURE__ */ React.createElement("h1", { className: `${prefixCls}-body-title` }, header), message && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body-desc` }, message), inputNode, footerNode)
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${prefixCls}-container`,
+        role: type === "alert" ? "alertdialog" : "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy
+      },
+      title && /* @__PURE__ */ React.createElement("h1", { id: titleId, className: `${prefixCls}-title` }, title),
+      content && /* @__PURE__ */ React.createElement("div", { id: contentId, className: `${prefixCls}-content` }, content),
+      inputNode,
+      actionsNode
+    )
   );
 });
 Dialog.displayName = "BuiDialog";

package/es/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/es/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/es/Dialog/FunctionalDialog.js

@@ -49,136 +49,158 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import React, { useCallback, useEffect, useState } from "react";
-import { getRootElement, render, unmount } from "@bifrostui/utils";
-import Popup from "./Dialog";
-const { isValidElement, Component } = React;
+import React, { useCallback, useState } from "react";
+import { getRootContainer, render, unmount, isMini } from "@bifrostui/utils";
+import Dialog from "./Dialog";
+const { isValidElement } = React;
 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 = getRootElement();
-  rootElement.appendChild(rootWrapper);
-  const DialogComponent = () => {
-    const _a = options, { onConfirm, onCancel, ref } = _a, others = __objRest(_a, ["onConfirm", "onCancel", "ref"]);
-    const [visible, setVisible] = useState(false);
+  const dialogFragment = isMini ? document.createElement("div") : document.createDocumentFragment();
+  const rootElement = 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 = useCallback(() => {
-      setVisible(false);
       setTimeout(() => {
-        const unmountRes = unmount(rootWrapper);
-        if (unmountRes && rootWrapper.parentNode) {
-          rootWrapper.parentNode.removeChild(rootWrapper);
+        const unmountRes = unmount(dialogFragment);
+        if (unmountRes && dialogFragment.parentNode) {
+          dialogFragment.parentNode.removeChild(dialogFragment);
         }
       }, 150);
-    }, [rootWrapper]);
-    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__ */ React.createElement(
-      Popup,
-      __spreadProps(__spreadValues({
-        ref
-      }, others), {
-        open: visible,
-        onOk: (val) => dispatch(true, val),
-        onClose: () => dispatch(false)
+      Dialog,
+      __spreadProps(__spreadValues({}, rest), {
+        open: true,
+        onOk: (e, { value }) => dispatch(true, e, value),
+        onCancel: (e) => dispatch(false, e)
       })
     );
   };
-  return render(/* @__PURE__ */ React.createElement(DialogComponent, null), rootWrapper);
+  return render(/* @__PURE__ */ React.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 = React.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] = useState([]);
+  const createDialog = 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__ */ React.createElement(
+        Dialog,
+        __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__ */ React.createElement(Popup, { key: "dialog-holder", ref: holderRef })];
+  }, []);
+  const wrapAPI = {};
+  wrapAPI.confirm = useCallback(
+    (options) => {
+      return createDialog(__spreadValues({
+        type: "confirm"
+      }, formatProps(options)));
+    },
+    [createDialog]
+  );
+  wrapAPI.prompt = useCallback(
+    (options) => {
+      return createDialog(__spreadValues({
+        type: "prompt"
+      }, formatProps(options)));
+    },
+    [createDialog]
+  );
+  wrapAPI.alert = useCallback(
+    (options) => {
+      return createDialog(__spreadValues({
+        type: "alert"
+      }, formatProps(options)));
+    },
+    [createDialog]
+  );
+  const contextHolder = /* @__PURE__ */ React.createElement(React.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;
 export {
   FunctionalDialog_default as default
 };

package/es/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/es/Dialog/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,43 @@
+import React from "react";
+import Dialog from "../../Dialog";
+const basicDialogDemo = () => {
+  return /* @__PURE__ */ React.createElement(
+    Dialog,
+    {
+      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__ */ React.createElement(
+    Dialog,
+    {
+      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__ */ React.createElement(
+    Dialog,
+    {
+      open: true,
+      disablePortal: true,
+      title: "\u8B66\u544A",
+      content: "\u8FD9\u662F\u4E00\u4E2A\u8B66\u544A\u5BF9\u8BDD\u6846\uFF0C\u8BF7\u6CE8\u610F\uFF01",
+      type: "alert"
+    }
+  );
+};
+export {
+  alertDialogDemo,
+  basicDialogDemo,
+  promptDialogDemo
+};