@bifrostui/react 2.0.0-alpha.21 → 2.0.0-alpha.23

package/dist/Dialog/Dialog.js

@@ -82,7 +82,9 @@ const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     placeholder,
     InputProps,
     className,
-    theme
+    theme,
+    okButtonProps,
+    cancelButtonProps
   } = _a, others = __objRest(_a, [
     "open",
     "onOk",
@@ -95,7 +97,9 @@ const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     "placeholder",
     "InputProps",
     "className",
-    "theme"
+    "theme",
+    "okButtonProps",
+    "cancelButtonProps"
   ]);
   const inputRef = (0, import_react.useRef)(null);
   const titleId = (0, import_utils.useUniqueId)();
@@ -118,20 +122,23 @@ const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   };
   const actionsNode = /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-actions` }, !isAlertMode && /* @__PURE__ */ import_react.default.createElement(
     import_Button.Button,
-    {
-      variant: "text",
+    __spreadValues({
+      variant: "subtle",
+      color: "primary",
+      size: "full",
       onClick: handleCancel,
-      className: `${prefixCls}-actions-btn`
-    },
+      className: `${prefixCls}-actions-btn-cancel`
+    }, cancelButtonProps),
     cancelText || cancel
   ), /* @__PURE__ */ import_react.default.createElement(
     import_Button.Button,
-    {
-      variant: "text",
+    __spreadValues({
+      variant: "contained",
       color: "primary",
+      size: "full",
       onClick: handleOk,
-      className: `${prefixCls}-actions-btn`
-    },
+      className: `${prefixCls}-actions-btn-ok`
+    }, okButtonProps),
     okText || ok
   ));
   const inputNode = isPromptMode && /* @__PURE__ */ import_react.default.createElement(
@@ -148,12 +155,12 @@ const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const ariaDescribedBy = content ? contentId : void 0;
   return /* @__PURE__ */ import_react.default.createElement(
     import_Modal.default,
-    __spreadProps(__spreadValues({}, others), {
+    __spreadValues({
       open,
       ref,
       className: (0, import_clsx.default)(prefixCls, `${prefixCls}-${type}`, className),
       onClose: handleCancel
-    }),
+    }, others),
     /* @__PURE__ */ import_react.default.createElement(
       "div",
       {

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

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { ModalProps } from '../Modal/Modal.types';
 import { InputProps } from '../Input/Input.types';
+import { ButtonProps } from '../Button/Button.types';
 import { ThemeProps } from '../ThemeProvider/ThemeProvider.types';
 /**
  * 对话框类型
@@ -29,6 +30,14 @@ export interface DialogProps extends Omit<ModalProps, 'title' | 'content'> {
      * 透传给内部Input组件的属性
      */
     InputProps?: Partial<InputProps>;
+    /**
+     * 透传给内部Button组件的属性
+     */
+    okButtonProps?: Partial<ButtonProps> & Record<`data-${string}`, string>;
+    /**
+     * 透传给内部Button组件的属性
+     */
+    cancelButtonProps?: Partial<ButtonProps> & Record<`data-${string}`, string>;
     /**
      * 确认按钮文本内容
      */

package/dist/Dialog/FunctionalDialog.js

@@ -92,7 +92,7 @@ const formatProps = (props) => {
 const DialogGenerator = (options) => {
   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);
+  rootElement == null ? void 0 : rootElement.appendChild(dialogFragment);
   const DialogWrapper = () => {
     const _a = options, { onOk, onCancel } = _a, rest = __objRest(_a, ["onOk", "onCancel"]);
     const close = (0, import_react.useCallback)(() => {

package/dist/Dialog/index.css

@@ -1,17 +1,9 @@
 :root,
 page,
 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-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-bg-color: rgba(54, 57, 64, 0.05);
+  --bui-dialog-width: 300px;
+  --bui-dialog-border-radius: var(--bui-radius-8);
+  --bui-dialog-padding: 24px;
 }
 .bui-dialog {
   display: flex;
@@ -19,60 +11,42 @@ xhs-page {
   justify-content: center;
 }
 .bui-dialog-container {
-  padding-top: 21px;
-  min-width: var(--bui-dialog-max-width);
+  padding: var(--bui-dialog-padding);
+  position: relative;
+  width: var(--bui-dialog-width);
   margin: 0 auto;
   border-radius: var(--bui-dialog-border-radius);
   background-clip: padding-box;
   background-color: var(--bui-color-bg-view);
-  line-height: 21px;
 }
 .bui-dialog-title {
-  padding: var(--bui-dialog-title-padding);
+  padding-bottom: 12px;
   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-title + .bui-dialog-actions {
-  margin-top: var(--bui-spacing-sm);
+  font-weight: var(--bui-font-weight-semibold);
+  line-height: 1.4;
+  margin: 0;
 }
 .bui-dialog-content {
-  padding: var(--bui-dialog-content-padding);
+  padding-bottom: 18px;
   color: var(--bui-color-fg-muted);
   font-size: var(--bui-title-size-4);
   text-align: center;
+  line-height: 1.5;
 }
 .bui-dialog-content:first-child {
   padding-top: 0;
 }
+.bui-dialog-content:last-child {
+  padding-bottom: 0;
+}
 .bui-dialog-actions {
-  margin: var(--bui-dialog-actions-margin);
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
   display: flex;
-}
-.bui-dialog-actions-btn {
-  flex: 1;
-  display: block;
-  width: 100%;
-  height: var(--bui-dialog-button-height);
-  line-height: var(--bui-dialog-button-line-height);
-  padding: var(--bui-dialog-button-padding);
-  font-size: var(--bui-dialog-button-font-size);
-  border: 0;
-  outline: 0;
-  border-left: var(--bui-dialog-button-border-left);
-  border-radius: 0;
-  text-align: center;
-  box-sizing: border-box;
-}
-.bui-dialog-actions-btn:first-child {
-  border: none;
-}
-.bui-dialog-actions-btn:active {
-  background-color: var(--bui-dialog-button-active-bg-color);
+  gap: var(--bui-spacing-lg);
+  align-items: center;
+  justify-content: center;
 }
 .bui-dialog-input {
-  width: calc(100% - 48px);
-  margin: 14px 24px 0;
+  margin-bottom: 18px;
 }

package/dist/Modal/Modal.js

@@ -75,6 +75,8 @@ const Modal = /* @__PURE__ */ React.forwardRef((props, ref) => {
     container,
     disablePortal = false,
     disableScrollLock = false,
+    disableAutoFocus = false,
+    disableRestoreFocus = false,
     hideBackdrop = false,
     onClose,
     keepMounted = false
@@ -86,6 +88,8 @@ const Modal = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "container",
     "disablePortal",
     "disableScrollLock",
+    "disableAutoFocus",
+    "disableRestoreFocus",
     "hideBackdrop",
     "onClose",
     "keepMounted"
@@ -100,7 +104,9 @@ const Modal = /* @__PURE__ */ React.forwardRef((props, ref) => {
   } = (0, import_useModal.useModal)(__spreadProps(__spreadValues({}, props), {
     container,
     disableScrollLock,
-    children: React.isValidElement(children) ? children : void 0,
+    disableAutoFocus,
+    disableRestoreFocus,
+    children,
     open,
     onClose,
     rootRef: ref

package/dist/Modal/Modal.miniapp.d.ts

@@ -10,7 +10,9 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     disableScrollLock?: boolean;
     disablePortal?: boolean;
     keepMounted?: boolean;
+    disableAutoFocus?: boolean;
+    disableRestoreFocus?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted" | "disableAutoFocus" | "disableRestoreFocus">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/Modal/Modal.types.d.ts

@@ -39,6 +39,19 @@ export type ModalProps<D extends React.ElementType = 'div', P = {}> = OverridePr
          * 是否保持挂载状态
          */
         keepMounted?: boolean;
+        /**
+         * 是否禁用自动焦点管理
+         * 仅web端生效
+         * @default false
+         *
+         */
+        disableAutoFocus?: boolean;
+        /**
+         * 是否禁用在关闭时恢复焦点到触发元素
+         * 仅web端生效
+         * @default false
+         */
+        disableRestoreFocus?: boolean;
     };
     defaultComponent: D;
 }, D>;

package/dist/Modal/useModal.d.ts

@@ -2,11 +2,14 @@ import React from 'react';
 export interface UseModalParameters {
     container?: Element | (() => Element | null) | null;
     disableScrollLock?: boolean;
+    disableAutoFocus?: boolean;
+    disableRestoreFocus?: boolean;
     onClose?: (event: React.SyntheticEvent<Element, Event>, detail?: {
         from: 'backdropClick' | 'escapeKeyDown';
     }) => void;
     open: boolean;
     rootRef?: React.Ref<Element>;
+    children?: React.ReactElement;
     [key: string]: any;
 }
 export interface UseModalReturnValue {

package/dist/Modal/useModal.js

@@ -53,6 +53,8 @@ function useModal(parameters) {
   const {
     container,
     disableScrollLock = false,
+    disableAutoFocus = false,
+    disableRestoreFocus = false,
     onClose,
     open,
     rootRef,
@@ -67,6 +69,7 @@ function useModal(parameters) {
   const handleRef = (0, import_utils.useForkRef)(modalRef, rootRef);
   const [exited, setExited] = (0, import_react.useState)(!open);
   const hasTransition = getHasTransition(children);
+  const lastFocusedElement = (0, import_react.useRef)(null);
   let ariaHiddenProp = true;
   if (parameters["aria-hidden"] === "false" || parameters["aria-hidden"] === false) {
     ariaHiddenProp = false;
@@ -120,6 +123,38 @@ function useModal(parameters) {
       handleClose();
     }
   }, [open, handleClose, hasTransition, handleOpen]);
+  (0, import_react.useEffect)(() => {
+    if (open && modalRef.current) {
+      const doc = modalRef.current.ownerDocument || document;
+      if (!lastFocusedElement.current) {
+        lastFocusedElement.current = doc.activeElement;
+      }
+      if (!disableAutoFocus) {
+        if (!modalRef.current.contains(doc.activeElement)) {
+          if (!modalRef.current.hasAttribute("tabIndex")) {
+            modalRef.current.setAttribute("tabIndex", "-1");
+          }
+          const autoFocusElement = modalRef.current.querySelector(
+            '[autofocus], [tabindex="-1"]'
+          );
+          if (autoFocusElement) {
+            autoFocusElement.focus();
+          } else {
+            modalRef.current.focus();
+          }
+        }
+      }
+      return () => {
+        if (!disableRestoreFocus && lastFocusedElement.current) {
+          if (lastFocusedElement.current && typeof lastFocusedElement.current.focus === "function") {
+            lastFocusedElement.current.focus();
+          }
+          lastFocusedElement.current = null;
+        }
+      };
+    }
+    return void 0;
+  }, [open, disableAutoFocus, disableRestoreFocus, children]);
   const createHandleBackdropClick = (backdropHandlers = {}) => (event) => {
     var _a;
     (_a = backdropHandlers.onClick) == null ? void 0 : _a.call(backdropHandlers, event);

package/dist/Toast/FunctionalToast.js

@@ -87,7 +87,7 @@ const Toast = (props) => {
   const _a = options, { container } = _a, restOptions = __objRest(_a, ["container"]);
   const rootWrapper = document.createElement("div");
   const rootElement = (0, import_utils.getRootContainer)(container);
-  rootElement.appendChild(rootWrapper);
+  rootElement == null ? void 0 : rootElement.appendChild(rootWrapper);
   const ToastComponent = () => {
     const _a2 = restOptions, { duration, multiple, onClose, onExited } = _a2, others = __objRest(_a2, ["duration", "multiple", "onClose", "onExited"]);
     const [open, setOpen] = (0, import_react.useState)(true);
@@ -164,7 +164,6 @@ const UseToastComponent = (props) => {
   ]);
   const options = __spreadValues(__spreadValues({}, defaultProps), formatProps(restProps));
   const _b = options, { duration, multiple, onClose, container } = _b, others = __objRest(_b, ["duration", "multiple", "onClose", "container"]);
-  const rootElement = (0, import_utils.getRootContainer)(container);
   const timerRef = (0, import_react.useRef)(null);
   const close = () => {
     onSetOpenFalse == null ? void 0 : onSetOpenFalse();
@@ -192,7 +191,7 @@ const UseToastComponent = (props) => {
     onEnd == null ? void 0 : onEnd();
     onExited == null ? void 0 : onExited();
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { container: rootElement }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { container }, /* @__PURE__ */ import_react.default.createElement(
     import_Toast.default,
     __spreadProps(__spreadValues({}, others), {
       open,

package/dist/Toast/Toast.types.d.ts

@@ -46,7 +46,7 @@ export interface ToastProps extends FadeProps {
      * 渲染Toast的根容器
      * @default document.body
      */
-    container?: HTMLElement | (() => HTMLElement);
+    container?: HTMLElement | (() => HTMLElement) | null;
     /**
      * 关闭时的回调函数
      */

package/es/Dialog/Dialog.js

@@ -52,7 +52,9 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
     placeholder,
     InputProps,
     className,
-    theme
+    theme,
+    okButtonProps,
+    cancelButtonProps
   } = _a, others = __objRest(_a, [
     "open",
     "onOk",
@@ -65,7 +67,9 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "placeholder",
     "InputProps",
     "className",
-    "theme"
+    "theme",
+    "okButtonProps",
+    "cancelButtonProps"
   ]);
   const inputRef = useRef(null);
   const titleId = useUniqueId();
@@ -88,20 +92,23 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
   };
   const actionsNode = /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-actions` }, !isAlertMode && /* @__PURE__ */ React.createElement(
     Button,
-    {
-      variant: "text",
+    __spreadValues({
+      variant: "subtle",
+      color: "primary",
+      size: "full",
       onClick: handleCancel,
-      className: `${prefixCls}-actions-btn`
-    },
+      className: `${prefixCls}-actions-btn-cancel`
+    }, cancelButtonProps),
     cancelText || cancel
   ), /* @__PURE__ */ React.createElement(
     Button,
-    {
-      variant: "text",
+    __spreadValues({
+      variant: "contained",
       color: "primary",
+      size: "full",
       onClick: handleOk,
-      className: `${prefixCls}-actions-btn`
-    },
+      className: `${prefixCls}-actions-btn-ok`
+    }, okButtonProps),
     okText || ok
   ));
   const inputNode = isPromptMode && /* @__PURE__ */ React.createElement(
@@ -118,12 +125,12 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const ariaDescribedBy = content ? contentId : void 0;
   return /* @__PURE__ */ React.createElement(
     Modal,
-    __spreadProps(__spreadValues({}, others), {
+    __spreadValues({
       open,
       ref,
       className: clsx(prefixCls, `${prefixCls}-${type}`, className),
       onClose: handleCancel
-    }),
+    }, others),
     /* @__PURE__ */ React.createElement(
       "div",
       {

package/es/Dialog/Dialog.types.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { ModalProps } from '../Modal/Modal.types';
 import { InputProps } from '../Input/Input.types';
+import { ButtonProps } from '../Button/Button.types';
 import { ThemeProps } from '../ThemeProvider/ThemeProvider.types';
 /**
  * 对话框类型
@@ -29,6 +30,14 @@ export interface DialogProps extends Omit<ModalProps, 'title' | 'content'> {
      * 透传给内部Input组件的属性
      */
     InputProps?: Partial<InputProps>;
+    /**
+     * 透传给内部Button组件的属性
+     */
+    okButtonProps?: Partial<ButtonProps> & Record<`data-${string}`, string>;
+    /**
+     * 透传给内部Button组件的属性
+     */
+    cancelButtonProps?: Partial<ButtonProps> & Record<`data-${string}`, string>;
     /**
      * 确认按钮文本内容
      */

package/es/Dialog/FunctionalDialog.js

@@ -62,7 +62,7 @@ const formatProps = (props) => {
 const DialogGenerator = (options) => {
   const dialogFragment = isMini ? document.createElement("div") : document.createDocumentFragment();
   const rootElement = getRootContainer(options == null ? void 0 : options.container);
-  rootElement.appendChild(dialogFragment);
+  rootElement == null ? void 0 : rootElement.appendChild(dialogFragment);
   const DialogWrapper = () => {
     const _a = options, { onOk, onCancel } = _a, rest = __objRest(_a, ["onOk", "onCancel"]);
     const close = useCallback(() => {

package/es/Dialog/index.css

@@ -1,17 +1,9 @@
 :root,
 page,
 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-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-bg-color: rgba(54, 57, 64, 0.05);
+  --bui-dialog-width: 300px;
+  --bui-dialog-border-radius: var(--bui-radius-8);
+  --bui-dialog-padding: 24px;
 }
 .bui-dialog {
   display: flex;
@@ -19,60 +11,42 @@ xhs-page {
   justify-content: center;
 }
 .bui-dialog-container {
-  padding-top: 21px;
-  min-width: var(--bui-dialog-max-width);
+  padding: var(--bui-dialog-padding);
+  position: relative;
+  width: var(--bui-dialog-width);
   margin: 0 auto;
   border-radius: var(--bui-dialog-border-radius);
   background-clip: padding-box;
   background-color: var(--bui-color-bg-view);
-  line-height: 21px;
 }
 .bui-dialog-title {
-  padding: var(--bui-dialog-title-padding);
+  padding-bottom: 12px;
   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-title + .bui-dialog-actions {
-  margin-top: var(--bui-spacing-sm);
+  font-weight: var(--bui-font-weight-semibold);
+  line-height: 1.4;
+  margin: 0;
 }
 .bui-dialog-content {
-  padding: var(--bui-dialog-content-padding);
+  padding-bottom: 18px;
   color: var(--bui-color-fg-muted);
   font-size: var(--bui-title-size-4);
   text-align: center;
+  line-height: 1.5;
 }
 .bui-dialog-content:first-child {
   padding-top: 0;
 }
+.bui-dialog-content:last-child {
+  padding-bottom: 0;
+}
 .bui-dialog-actions {
-  margin: var(--bui-dialog-actions-margin);
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
   display: flex;
-}
-.bui-dialog-actions-btn {
-  flex: 1;
-  display: block;
-  width: 100%;
-  height: var(--bui-dialog-button-height);
-  line-height: var(--bui-dialog-button-line-height);
-  padding: var(--bui-dialog-button-padding);
-  font-size: var(--bui-dialog-button-font-size);
-  border: 0;
-  outline: 0;
-  border-left: var(--bui-dialog-button-border-left);
-  border-radius: 0;
-  text-align: center;
-  box-sizing: border-box;
-}
-.bui-dialog-actions-btn:first-child {
-  border: none;
-}
-.bui-dialog-actions-btn:active {
-  background-color: var(--bui-dialog-button-active-bg-color);
+  gap: var(--bui-spacing-lg);
+  align-items: center;
+  justify-content: center;
 }
 .bui-dialog-input {
-  width: calc(100% - 48px);
-  margin: 14px 24px 0;
+  margin-bottom: 18px;
 }

package/es/Modal/Modal.js

@@ -45,6 +45,8 @@ const Modal = /* @__PURE__ */ React.forwardRef((props, ref) => {
     container,
     disablePortal = false,
     disableScrollLock = false,
+    disableAutoFocus = false,
+    disableRestoreFocus = false,
     hideBackdrop = false,
     onClose,
     keepMounted = false
@@ -56,6 +58,8 @@ const Modal = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "container",
     "disablePortal",
     "disableScrollLock",
+    "disableAutoFocus",
+    "disableRestoreFocus",
     "hideBackdrop",
     "onClose",
     "keepMounted"
@@ -70,7 +74,9 @@ const Modal = /* @__PURE__ */ React.forwardRef((props, ref) => {
   } = useModal(__spreadProps(__spreadValues({}, props), {
     container,
     disableScrollLock,
-    children: React.isValidElement(children) ? children : void 0,
+    disableAutoFocus,
+    disableRestoreFocus,
+    children,
     open,
     onClose,
     rootRef: ref

package/es/Modal/Modal.miniapp.d.ts

@@ -10,7 +10,9 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     disableScrollLock?: boolean;
     disablePortal?: boolean;
     keepMounted?: boolean;
+    disableAutoFocus?: boolean;
+    disableRestoreFocus?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted" | "disableAutoFocus" | "disableRestoreFocus">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/es/Modal/Modal.types.d.ts

@@ -39,6 +39,19 @@ export type ModalProps<D extends React.ElementType = 'div', P = {}> = OverridePr
          * 是否保持挂载状态
          */
         keepMounted?: boolean;
+        /**
+         * 是否禁用自动焦点管理
+         * 仅web端生效
+         * @default false
+         *
+         */
+        disableAutoFocus?: boolean;
+        /**
+         * 是否禁用在关闭时恢复焦点到触发元素
+         * 仅web端生效
+         * @default false
+         */
+        disableRestoreFocus?: boolean;
     };
     defaultComponent: D;
 }, D>;

package/es/Modal/useModal.d.ts

@@ -2,11 +2,14 @@ import React from 'react';
 export interface UseModalParameters {
     container?: Element | (() => Element | null) | null;
     disableScrollLock?: boolean;
+    disableAutoFocus?: boolean;
+    disableRestoreFocus?: boolean;
     onClose?: (event: React.SyntheticEvent<Element, Event>, detail?: {
         from: 'backdropClick' | 'escapeKeyDown';
     }) => void;
     open: boolean;
     rootRef?: React.Ref<Element>;
+    children?: React.ReactElement;
     [key: string]: any;
 }
 export interface UseModalReturnValue {

package/es/Modal/useModal.js

@@ -33,6 +33,8 @@ function useModal(parameters) {
   const {
     container,
     disableScrollLock = false,
+    disableAutoFocus = false,
+    disableRestoreFocus = false,
     onClose,
     open,
     rootRef,
@@ -47,6 +49,7 @@ function useModal(parameters) {
   const handleRef = useForkRef(modalRef, rootRef);
   const [exited, setExited] = useState(!open);
   const hasTransition = getHasTransition(children);
+  const lastFocusedElement = useRef(null);
   let ariaHiddenProp = true;
   if (parameters["aria-hidden"] === "false" || parameters["aria-hidden"] === false) {
     ariaHiddenProp = false;
@@ -100,6 +103,38 @@ function useModal(parameters) {
       handleClose();
     }
   }, [open, handleClose, hasTransition, handleOpen]);
+  useEffect(() => {
+    if (open && modalRef.current) {
+      const doc = modalRef.current.ownerDocument || document;
+      if (!lastFocusedElement.current) {
+        lastFocusedElement.current = doc.activeElement;
+      }
+      if (!disableAutoFocus) {
+        if (!modalRef.current.contains(doc.activeElement)) {
+          if (!modalRef.current.hasAttribute("tabIndex")) {
+            modalRef.current.setAttribute("tabIndex", "-1");
+          }
+          const autoFocusElement = modalRef.current.querySelector(
+            '[autofocus], [tabindex="-1"]'
+          );
+          if (autoFocusElement) {
+            autoFocusElement.focus();
+          } else {
+            modalRef.current.focus();
+          }
+        }
+      }
+      return () => {
+        if (!disableRestoreFocus && lastFocusedElement.current) {
+          if (lastFocusedElement.current && typeof lastFocusedElement.current.focus === "function") {
+            lastFocusedElement.current.focus();
+          }
+          lastFocusedElement.current = null;
+        }
+      };
+    }
+    return void 0;
+  }, [open, disableAutoFocus, disableRestoreFocus, children]);
   const createHandleBackdropClick = (backdropHandlers = {}) => (event) => {
     var _a;
     (_a = backdropHandlers.onClick) == null ? void 0 : _a.call(backdropHandlers, event);

package/es/Toast/FunctionalToast.js

@@ -62,7 +62,7 @@ const Toast = (props) => {
   const _a = options, { container } = _a, restOptions = __objRest(_a, ["container"]);
   const rootWrapper = document.createElement("div");
   const rootElement = getRootContainer(container);
-  rootElement.appendChild(rootWrapper);
+  rootElement == null ? void 0 : rootElement.appendChild(rootWrapper);
   const ToastComponent = () => {
     const _a2 = restOptions, { duration, multiple, onClose, onExited } = _a2, others = __objRest(_a2, ["duration", "multiple", "onClose", "onExited"]);
     const [open, setOpen] = useState(true);
@@ -139,7 +139,6 @@ const UseToastComponent = (props) => {
   ]);
   const options = __spreadValues(__spreadValues({}, defaultProps), formatProps(restProps));
   const _b = options, { duration, multiple, onClose, container } = _b, others = __objRest(_b, ["duration", "multiple", "onClose", "container"]);
-  const rootElement = getRootContainer(container);
   const timerRef = useRef(null);
   const close = () => {
     onSetOpenFalse == null ? void 0 : onSetOpenFalse();
@@ -167,7 +166,7 @@ const UseToastComponent = (props) => {
     onEnd == null ? void 0 : onEnd();
     onExited == null ? void 0 : onExited();
   };
-  return /* @__PURE__ */ React.createElement(Portal, { container: rootElement }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Portal, { container }, /* @__PURE__ */ React.createElement(
     ToastView,
     __spreadProps(__spreadValues({}, others), {
       open,

package/es/Toast/Toast.types.d.ts

@@ -46,7 +46,7 @@ export interface ToastProps extends FadeProps {
      * 渲染Toast的根容器
      * @default document.body
      */
-    container?: HTMLElement | (() => HTMLElement);
+    container?: HTMLElement | (() => HTMLElement) | null;
     /**
      * 关闭时的回调函数
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "2.0.0-alpha.21",
+  "version": "2.0.0-alpha.23",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -43,10 +43,10 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/styles": "2.0.0-alpha.21",
-    "@bifrostui/types": "2.0.0-alpha.21",
-    "@bifrostui/utils": "2.0.0-alpha.21",
-    "@bifrostui/icons": "2.0.0-alpha.21"
+    "@bifrostui/icons": "2.0.0-alpha.23",
+    "@bifrostui/utils": "2.0.0-alpha.23",
+    "@bifrostui/styles": "2.0.0-alpha.23",
+    "@bifrostui/types": "2.0.0-alpha.23"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",