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

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

@@ -0,0 +1,130 @@
+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, {
+  ClickableImageDemo: () => ClickableImageDemo,
+  basicImageDemo: () => basicImageDemo,
+  default: () => A11yDemos_default,
+  errorImageDemo: () => errorImageDemo,
+  lazyImageDemo: () => lazyImageDemo,
+  noAltImageDemo: () => noAltImageDemo,
+  placeholderImageDemo: () => placeholderImageDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Image = __toESM(require("../../Image"));
+const basicImageDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Image.default,
+    {
+      src: "https://via.placeholder.com/150x100",
+      alt: "\u793A\u4F8B\u56FE\u7247",
+      width: 150,
+      height: 100
+    }
+  ));
+};
+const ClickableImageDemo = () => {
+  const [clicked, setClicked] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Image.default,
+    {
+      src: "https://via.placeholder.com/150x100",
+      alt: "\u53EF\u70B9\u51FB\u7684\u793A\u4F8B\u56FE\u7247",
+      width: 150,
+      height: 100,
+      onClick: () => {
+        setClicked(!clicked);
+        console.log("\u56FE\u7247\u88AB\u70B9\u51FB\u4E86");
+      }
+    }
+  ), clicked && /* @__PURE__ */ import_react.default.createElement("p", null, "\u56FE\u7247\u5DF2\u88AB\u70B9\u51FB"));
+};
+const placeholderImageDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Image.default,
+    {
+      src: "",
+      alt: "\u5E26\u5360\u4F4D\u7B26\u7684\u56FE\u7247",
+      width: 150,
+      height: 100,
+      placeholder: /* @__PURE__ */ import_react.default.createElement("div", null, "\u52A0\u8F7D\u4E2D...")
+    }
+  ));
+};
+const errorImageDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Image.default,
+    {
+      src: "https://invalid-url.com/nonexistent.jpg",
+      alt: "\u52A0\u8F7D\u5931\u8D25\u7684\u56FE\u7247",
+      width: 150,
+      height: 100,
+      fallback: /* @__PURE__ */ import_react.default.createElement("div", null, "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25")
+    }
+  ));
+};
+const lazyImageDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Image.default,
+    {
+      src: "https://via.placeholder.com/150x100",
+      alt: "\u61D2\u52A0\u8F7D\u56FE\u7247",
+      width: 150,
+      height: 100,
+      lazy: true
+    }
+  ));
+};
+const noAltImageDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Image.default,
+    {
+      src: "https://via.placeholder.com/150x100",
+      width: 150,
+      height: 100
+    }
+  ));
+};
+var A11yDemos_default = {
+  basicImageDemo,
+  ClickableImageDemo,
+  placeholderImageDemo,
+  errorImageDemo,
+  lazyImageDemo,
+  noAltImageDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ClickableImageDemo,
+  basicImageDemo,
+  errorImageDemo,
+  lazyImageDemo,
+  noAltImageDemo,
+  placeholderImageDemo
+});

package/dist/Image/index.css

@@ -1,7 +1,7 @@
 :root,
 page,
 xhs-page {
-  --bui-image-default-background-color: rgba(127, 127, 127, 0.2);
+  --bui-image-default-bg-color: rgba(127, 127, 127, 0.2);
 }
 .bui-image {
   width: auto;
@@ -30,11 +30,6 @@ xhs-page {
   width: 100%;
   height: 100%;
 }
-.bui-image-default-icon-wrap.bui-image-loaded {
-  opacity: 0;
-}
-.bui-image-default-icon-item {
-  width: 100%;
-  height: 100%;
-  background-color: var(--bui-image-default-background-color);
+.bui-image-default-icon-wrap.default-holder {
+  background-color: var(--bui-image-default-bg-color);
 }

package/dist/Input/Input.js

@@ -68,7 +68,7 @@ const prefixCls = "bui-input";
 const Input = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, {
     className,
-    defaultValue = "",
+    defaultValue,
     value,
     inputProps,
     inputRef,
@@ -101,6 +101,8 @@ const Input = (0, import_react.forwardRef)((props, ref) => {
     "onFocus",
     "onBlur"
   ]);
+  const { required, readOnly } = inputProps || {};
+  const ariaProps = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, required && { "aria-required": required }), readOnly && { "aria-readonly": readOnly }), disabled && { "aria-disabled": disabled }), placeholder && { "aria-placeholder": placeholder });
   const [inputValue, triggerChange] = (0, import_utils.useValue)({
     value,
     defaultValue,
@@ -156,14 +158,14 @@ const Input = (0, import_react.forwardRef)((props, ref) => {
     startIcon && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-icon ${prefixCls}-icon-start` }, startIcon),
     /* @__PURE__ */ import_react.default.createElement(
       "input",
-      __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, nativeProps), {
+      __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, nativeProps), {
         name,
         type,
         ref: inputRef,
         value: inputValue,
         disabled,
         placeholder
-      }), inputProps), {
+      }), ariaProps), inputProps), {
         onChange: handleChange,
         onFocus: handleFocus,
         onBlur: handleBlur,

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

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

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

@@ -0,0 +1,81 @@
+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, {
+  ariaLabelInputDemo: () => ariaLabelInputDemo,
+  basicInputDemo: () => basicInputDemo,
+  default: () => A11yDemos_default,
+  disabledInputDemo: () => disabledInputDemo,
+  placeholderInputDemo: () => placeholderInputDemo,
+  readOnlyInputDemo: () => readOnlyInputDemo,
+  requiredInputDemo: () => requiredInputDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Input = __toESM(require("../../Input"));
+const basicInputDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, "First name: ", /* @__PURE__ */ import_react.default.createElement(import_Input.default, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9" })));
+};
+const disabledInputDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, "First name:", /* @__PURE__ */ import_react.default.createElement(import_Input.default, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", disabled: true })));
+};
+const requiredInputDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, "First name:", /* @__PURE__ */ import_react.default.createElement(import_Input.default, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", inputProps: { required: true } })));
+};
+const readOnlyInputDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, "First name:", /* @__PURE__ */ import_react.default.createElement(import_Input.default, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", inputProps: { readOnly: true } })));
+};
+const placeholderInputDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, "First name:", /* @__PURE__ */ import_react.default.createElement(import_Input.default, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9" })));
+};
+const ariaLabelInputDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, "First name:", /* @__PURE__ */ import_react.default.createElement(
+    import_Input.default,
+    {
+      placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9",
+      inputProps: { "aria-label": "\u8F93\u5165\u6846" }
+    }
+  )));
+};
+var A11yDemos_default = {
+  basicInputDemo,
+  disabledInputDemo,
+  requiredInputDemo,
+  readOnlyInputDemo,
+  placeholderInputDemo,
+  ariaLabelInputDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ariaLabelInputDemo,
+  basicInputDemo,
+  disabledInputDemo,
+  placeholderInputDemo,
+  readOnlyInputDemo,
+  requiredInputDemo
+});

package/dist/Input/index.css

@@ -4,10 +4,10 @@ xhs-page {
   --bui-input-height: 32px;
   --bui-input-padding: 4px 10px;
   --bui-input-border-radius: var(--bui-shape-radius-default);
-  --bui-input-icon-start-margin-right: 3px;
-  --bui-input-icon-end-margin-left: 3px;
-  --bui-input-background-color: transparent;
-  --bui-input-disabled-background-color: rgba(0, 0, 0, 0.04);
+  --bui-input-icon-start-margin: 0 3px 0 0;
+  --bui-input-icon-end-margin: 0 0 0 3px;
+  --bui-input-bg-color: transparent;
+  --bui-input-disabled-bg-color: rgba(0, 0, 0, 0.04);
   --bui-input-clear-color: #ced1d6;
   --bui-input-clear-font-size: var(--bui-title-size-3);
 }
@@ -29,10 +29,10 @@ xhs-page {
   font-size: var(--bui-title-size-3);
 }
 .bui-input-icon-start {
-  margin-right: var(--bui-input-icon-start-margin-right);
+  margin: var(--bui-input-icon-start-margin);
 }
 .bui-input-icon-end {
-  margin-left: var(--bui-input-icon-end-margin-left);
+  margin: var(--bui-input-icon-end-margin);
 }
 .bui-input-input {
   flex: 1;
@@ -42,14 +42,14 @@ xhs-page {
   color: var(--bui-color-fg-default);
   border: none;
   outline: none;
-  background-color: var(--bui-input-background-color);
+  background-color: var(--bui-input-bg-color);
   font-size: var(--bui-text-size-2);
 }
 .bui-input-input::placeholder {
   color: var(--bui-color-fg-subtle);
 }
 .bui-input-disabled {
-  background-color: var(--bui-input-disabled-background-color);
+  background-color: var(--bui-input-disabled-bg-color);
 }
 .bui-input-disabled .bui-input-input {
   color: var(--bui-color-fg-disabled);

package/dist/ItemSelector/ItemSelector.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OverrideProps } from '@bifrostui/types';
 export type itemType = {
     /** Item名 */

package/dist/Modal/Modal.js

@@ -59,25 +59,25 @@ __export(Modal_exports, {
   default: () => Modal_default
 });
 module.exports = __toCommonJS(Modal_exports);
-var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_Backdrop = __toESM(require("../Backdrop"));
 var import_Portal = __toESM(require("../Portal"));
+var import_useModal = require("./useModal");
 var import_index = require("./index.css");
 const prefixCls = "bui-modal";
 const Modal = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
     className,
-    open,
+    open = false,
     BackdropProps,
     children,
     container,
-    disablePortal,
-    disableScrollLock,
-    hideBackdrop,
+    disablePortal = false,
+    disableScrollLock = false,
+    hideBackdrop = false,
     onClose,
-    keepMounted
+    keepMounted = false
   } = _a, others = __objRest(_a, [
     "className",
     "open",
@@ -90,50 +90,50 @@ const Modal = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     "onClose",
     "keepMounted"
   ]);
-  const modalRef = import_react.default.useRef(null);
-  const handleRef = (0, import_utils.useForkRef)(modalRef, ref);
-  const [backdropExited, setBackDropExited] = (0, import_react.useState)(hideBackdrop || !open);
-  const mounted = open || !backdropExited || keepMounted;
-  const handleBackdropClick = (event) => {
-    if (import_utils.isMini && event.target.id !== event.currentTarget.id) {
-      return;
-    }
-    if (!import_utils.isMini && event.target !== event.currentTarget) {
-      return;
+  const {
+    getRootProps,
+    getBackdropProps,
+    getTransitionProps,
+    portalRef,
+    exited,
+    hasTransition
+  } = (0, import_useModal.useModal)(__spreadProps(__spreadValues({}, props), {
+    container,
+    disableScrollLock,
+    children: import_react.default.isValidElement(children) ? children : void 0,
+    open,
+    onClose,
+    rootRef: ref
+  }));
+  if (!keepMounted && !open && (!hasTransition || exited)) {
+    return null;
+  }
+  const rootProps = getRootProps(__spreadProps(__spreadValues({}, others), {
+    className: (0, import_clsx.default)(
+      prefixCls,
+      {
+        [`${prefixCls}-hidden`]: !open && exited
+      },
+      className
+    )
+  }));
+  const backdropProps = getBackdropProps(__spreadProps(__spreadValues({}, BackdropProps), {
+    className: (0, import_clsx.default)(`${prefixCls}-backdrop`, BackdropProps == null ? void 0 : BackdropProps.className)
+  }));
+  const transitionProps = hasTransition ? getTransitionProps() : {};
+  const renderChildren = () => {
+    if (!children) {
+      return null;
     }
-    if (onClose) {
-      onClose(event, { from: "backdrop" });
+    if (import_react.default.isValidElement(children)) {
+      const childProps = children.props || {};
+      return import_react.default.cloneElement(children, __spreadValues(__spreadValues({
+        tabIndex: -1
+      }, childProps), transitionProps));
     }
+    return children;
   };
-  (0, import_react.useEffect)(() => {
-    let cleanup;
-    if (!import_utils.isMini && !disableScrollLock)
-      setTimeout(() => {
-        try {
-          if (open && modalRef.current) {
-            cleanup = (0, import_utils.blockTouch)(modalRef.current);
-          }
-        } catch (e) {
-        }
-      }, 0);
-    return () => {
-      cleanup == null ? void 0 : cleanup();
-    };
-  }, [open, disableScrollLock]);
-  if (!mounted) {
-    return null;
-  }
-  return /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { container, disablePortal }, /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ className: (0, import_clsx.default)(prefixCls, className), ref: handleRef }, others), !hideBackdrop ? /* @__PURE__ */ import_react.default.createElement(
-    import_Backdrop.default,
-    __spreadProps(__spreadValues({
-      open,
-      onClick: handleBackdropClick,
-      onEnter: () => setBackDropExited(false),
-      onExited: () => setBackDropExited(true)
-    }, BackdropProps), {
-      className: (0, import_clsx.default)(`${prefixCls}-backdrop`, BackdropProps == null ? void 0 : BackdropProps.className)
-    })
-  ) : null, (open || keepMounted) && children));
+  return /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { container, disablePortal, ref: portalRef }, /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({}, rootProps), !hideBackdrop && /* @__PURE__ */ import_react.default.createElement(import_Backdrop.default, __spreadValues({}, backdropProps)), renderChildren()));
 });
 Modal.displayName = "BuiModal";
 var Modal_default = Modal;

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

@@ -6,11 +6,11 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     container?: Element | (() => Element);
     hideBackdrop?: boolean;
     BackdropProps?: Partial<import("../Backdrop").BackdropProps<"div", {}>>;
-    onClose?: (e: React.SyntheticEvent<Element, Event>, detail: import("./Modal.types").CloseDetail) => void;
+    onClose?: (e: React.SyntheticEvent<Element, Event>, detail?: import("./Modal.types").ModalCloseDetail) => void;
     disableScrollLock?: boolean;
     disablePortal?: boolean;
     keepMounted?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, keyof import("@bifrostui/types").ICommonProps | "open" | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/Modal/Modal.miniapp.js

@@ -59,12 +59,12 @@ __export(Modal_miniapp_exports, {
   default: () => Modal_miniapp_default
 });
 module.exports = __toCommonJS(Modal_miniapp_exports);
-var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_components = require("@tarojs/components");
 var import_Backdrop = __toESM(require("../Backdrop"));
 var import_Portal = __toESM(require("../Portal"));
+var import_useModal = require("./useModal");
 var import_index = require("./index.css");
 const prefixCls = "bui-modal";
 const Modal = /* @__PURE__ */ import_react.default.forwardRef(
@@ -79,6 +79,7 @@ const Modal = /* @__PURE__ */ import_react.default.forwardRef(
       disableScrollLock = false,
       hideBackdrop = false,
       onClose,
+      onClick,
       keepMounted
     } = _a, others = __objRest(_a, [
       "className",
@@ -90,45 +91,60 @@ const Modal = /* @__PURE__ */ import_react.default.forwardRef(
       "disableScrollLock",
       "hideBackdrop",
       "onClose",
+      "onClick",
       "keepMounted"
     ]);
-    const modalRef = import_react.default.useRef(null);
-    const handleRef = (0, import_utils.useForkRef)(modalRef, ref);
-    const [backdropExited, setBackDropExited] = (0, import_react.useState)(hideBackdrop || !open);
-    const mounted = open || !backdropExited || keepMounted;
-    const handleBackdropClick = (event) => {
-      if (event.target.id !== event.currentTarget.id) {
-        return;
+    const {
+      getRootProps,
+      getBackdropProps,
+      getTransitionProps,
+      exited,
+      hasTransition
+    } = (0, import_useModal.useModal)(__spreadProps(__spreadValues({}, props), {
+      disableScrollLock,
+      children: import_react.default.isValidElement(children) ? children : void 0,
+      open,
+      onClose,
+      rootRef: ref
+    }));
+    if (!keepMounted && !open && (!hasTransition || exited)) {
+      return null;
+    }
+    const rootProps = getRootProps(__spreadProps(__spreadValues({}, others), {
+      className: (0, import_clsx.default)(
+        prefixCls,
+        {
+          [`${prefixCls}-hidden`]: !open && exited
+        },
+        className
+      )
+    }));
+    const backdropProps = getBackdropProps(__spreadProps(__spreadValues({}, BackdropProps), {
+      className: (0, import_clsx.default)(`${prefixCls}-backdrop`, BackdropProps == null ? void 0 : BackdropProps.className)
+    }));
+    const transitionProps = hasTransition ? getTransitionProps() : {};
+    const renderChildren = () => {
+      if (!children) {
+        return null;
       }
-      if (onClose) {
-        onClose(event, { from: "backdrop" });
+      if (import_react.default.isValidElement(children)) {
+        return import_react.default.cloneElement(children, __spreadValues(__spreadProps(__spreadValues({}, transitionProps), {
+          tabIndex: -1
+        }), children.props));
       }
+      return children;
     };
-    if (!mounted) {
-      return null;
-    }
     return /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { container, disablePortal }, /* @__PURE__ */ import_react.default.createElement(
       import_components.View,
-      __spreadValues({
-        className: (0, import_clsx.default)(prefixCls, className),
-        ref: handleRef,
+      __spreadProps(__spreadValues({
         catchMove: !disableScrollLock
-      }, others),
-      !hideBackdrop ? /* @__PURE__ */ import_react.default.createElement(
-        import_Backdrop.default,
-        __spreadProps(__spreadValues({
-          open,
-          onClick: handleBackdropClick,
-          onEnter: () => setBackDropExited(false),
-          onExited: () => setBackDropExited(true)
-        }, BackdropProps), {
-          className: (0, import_clsx.default)(
-            `${prefixCls}-backdrop`,
-            BackdropProps == null ? void 0 : BackdropProps.className
-          )
-        })
-      ) : null,
-      (open || keepMounted) && children
+      }, rootProps), {
+        onClick: (event) => {
+          onClick == null ? void 0 : onClick(event);
+        }
+      }),
+      !hideBackdrop && /* @__PURE__ */ import_react.default.createElement(import_Backdrop.default, __spreadValues({}, backdropProps)),
+      renderChildren()
     ));
   }
 );

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

@@ -2,18 +2,42 @@ import { OverrideProps } from '@bifrostui/types';
 import React, { SyntheticEvent } from 'react';
 import { BackdropProps } from '../Backdrop/Backdrop.types';
 import { PortalProps } from '../Portal/Portal.types';
-export type CloseDetail = {
+export type ModalCloseDetail = {
     from?: string;
 };
 export type ModalProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
     props: P & {
+        /**
+         * 是否打开Modal
+         */
         open?: boolean;
+        /**
+         * Portal容器
+         */
         container?: PortalProps['container'];
+        /**
+         * 是否隐藏背景遮罩
+         */
         hideBackdrop?: boolean;
+        /**
+         * 背景遮罩属性
+         */
         BackdropProps?: Partial<BackdropProps>;
-        onClose?: (e: SyntheticEvent, detail: CloseDetail) => void;
+        /**
+         * 关闭回调
+         */
+        onClose?: (e: SyntheticEvent, detail?: ModalCloseDetail) => void;
+        /**
+         * 是否禁用滚动锁定
+         */
         disableScrollLock?: boolean;
+        /**
+         * 是否禁用Portal
+         */
         disablePortal?: PortalProps['disablePortal'];
+        /**
+         * 是否保持挂载状态
+         */
         keepMounted?: boolean;
     };
     defaultComponent: D;

package/dist/Modal/ModalManager.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Modal管理器，用于管理多个弹窗的状态
+ * 参考MUI的ModalManager实现
+ */
+interface ManagedModal {
+    modalRef: HTMLElement;
+    mount: HTMLElement;
+}
+export declare function ariaHidden(element: Element, show: boolean): void;
+export declare class ModalManager {
+    private modals;
+    private containers;
+    add(modal: ManagedModal, container: Element): number;
+    mount(modal: ManagedModal, props: {
+        disableScrollLock?: boolean;
+    }): void;
+    remove(modal: ManagedModal, ariaHiddenState?: boolean): number;
+    isTopModal(modal: ManagedModal): boolean;
+}
+export declare const modalManager: ModalManager;
+export {};