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

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.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
+};

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

@@ -1,6 +1,13 @@
-import { default as default2, default as default3 } from "./FunctionalDialog";
+import Dialog from "./Dialog";
+import FunctionalDialog from "./FunctionalDialog";
+const DialogWithMethods = Dialog;
+DialogWithMethods.confirm = FunctionalDialog.confirm;
+DialogWithMethods.prompt = FunctionalDialog.prompt;
+DialogWithMethods.alert = FunctionalDialog.alert;
+DialogWithMethods.useDialog = FunctionalDialog.useDialog;
+var Dialog_default = DialogWithMethods;
 export * from "./Dialog.types";
 export {
-  default3 as Dialog,
-  default2 as default
+  DialogWithMethods as Dialog,
+  Dialog_default as default
 };

package/es/Drawer/Drawer.js

@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import clsx from "clsx";
-import React, { useState } from "react";
+import React from "react";
 import Modal from "../Modal";
 import Slide from "../Slide";
 import "./index.css";
@@ -68,7 +68,6 @@ const Drawer = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "transitionDuration"
   ]);
   const anchorInvariant = oppositeDirection[anchorProp];
-  const [keepMounted, setKeepMounted] = useState(open);
   return /* @__PURE__ */ React.createElement(
     Modal,
     __spreadValues({
@@ -78,17 +77,14 @@ const Drawer = /* @__PURE__ */ React.forwardRef((props, ref) => {
       hideBackdrop,
       ref,
       className: clsx(prefixCls, className),
-      disablePortal,
-      keepMounted
+      disablePortal
     }, others),
     /* @__PURE__ */ React.createElement(
       Slide,
       __spreadValues({
         in: open,
         direction: anchorInvariant,
-        timeout: transitionDuration,
-        onEnter: () => setKeepMounted(true),
-        onExited: () => setKeepMounted(false)
+        timeout: transitionDuration
       }, SlideProps),
       /* @__PURE__ */ React.createElement(
         "div",
@@ -97,7 +93,11 @@ const Drawer = /* @__PURE__ */ React.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/es/Drawer/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,112 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React, { useState } from "react";
+import Drawer from "../../Drawer";
+const basicDrawerDemo = () => {
+  return /* @__PURE__ */ React.createElement(Drawer, { open: true, anchor: "bottom", "aria-label": "\u57FA\u7840\u62BD\u5C49", disablePortal: true }, /* @__PURE__ */ React.createElement("div", { style: { padding: "20px", minHeight: "200px" } }, /* @__PURE__ */ React.createElement("h3", null, "\u57FA\u7840\u62BD\u5C49\u5185\u5BB9"), /* @__PURE__ */ React.createElement("p", null, "\u8FD9\u662F\u4E00\u4E2A\u4ECE\u5E95\u90E8\u5F39\u51FA\u7684\u62BD\u5C49"), /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u786E\u8BA4"), /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u53D6\u6D88")));
+};
+const leftDrawerDemo = () => {
+  return /* @__PURE__ */ React.createElement(Drawer, { open: true, anchor: "left", "aria-label": "\u5DE6\u4FA7\u62BD\u5C49", disablePortal: true }, /* @__PURE__ */ React.createElement("div", { style: { padding: "20px", width: "300px", minHeight: "100vh" } }, /* @__PURE__ */ React.createElement("h3", null, "\u5DE6\u4FA7\u62BD\u5C49"), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("a", { href: "#item1" }, "\u83DC\u5355\u9879 1")), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("a", { href: "#item2" }, "\u83DC\u5355\u9879 2")), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("a", { href: "#item3" }, "\u83DC\u5355\u9879 3")))));
+};
+const rightDrawerDemo = () => {
+  return /* @__PURE__ */ React.createElement(Drawer, { open: true, anchor: "right", "aria-label": "\u53F3\u4FA7\u62BD\u5C49", disablePortal: true }, /* @__PURE__ */ React.createElement("div", { style: { padding: "20px", width: "300px", minHeight: "100vh" } }, /* @__PURE__ */ React.createElement("h3", null, "\u53F3\u4FA7\u62BD\u5C49"), /* @__PURE__ */ React.createElement("form", null, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "10px" } }, /* @__PURE__ */ React.createElement("label", { htmlFor: "name" }, "\u59D3\u540D:"), /* @__PURE__ */ React.createElement("input", { id: "name", type: "text" })), /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "10px" } }, /* @__PURE__ */ React.createElement("label", { htmlFor: "email" }, "\u90AE\u7BB1:"), /* @__PURE__ */ React.createElement("input", { id: "email", type: "email" })), /* @__PURE__ */ React.createElement("button", { type: "submit" }, "\u63D0\u4EA4"))));
+};
+const topDrawerDemo = () => {
+  return /* @__PURE__ */ React.createElement(Drawer, { open: true, anchor: "top", "aria-label": "\u9876\u90E8\u62BD\u5C49", disablePortal: true }, /* @__PURE__ */ React.createElement("div", { style: { padding: "20px", minHeight: "200px" } }, /* @__PURE__ */ React.createElement("h3", null, "\u9876\u90E8\u62BD\u5C49"), /* @__PURE__ */ React.createElement("p", null, "\u8FD9\u662F\u4E00\u4E2A\u4ECE\u9876\u90E8\u5F39\u51FA\u7684\u62BD\u5C49"), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u64CD\u4F5C\u6309\u94AE 1"), /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u64CD\u4F5C\u6309\u94AE 2"))));
+};
+const noBackdropDrawerDemo = () => {
+  return /* @__PURE__ */ React.createElement(
+    Drawer,
+    {
+      open: true,
+      anchor: "bottom",
+      hideBackdrop: true,
+      "aria-label": "\u65E0\u80CC\u666F\u906E\u7F69\u62BD\u5C49",
+      disablePortal: true
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { padding: "20px", minHeight: "150px" } }, /* @__PURE__ */ React.createElement("h3", null, "\u65E0\u80CC\u666F\u906E\u7F69"), /* @__PURE__ */ React.createElement("p", null, "\u8FD9\u4E2A\u62BD\u5C49\u6CA1\u6709\u80CC\u666F\u906E\u7F69"), /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u5173\u95ED"))
+  );
+};
+const interactiveDrawerDemo = () => {
+  const InteractiveDrawerDemo = () => {
+    const [open, setOpen] = useState(true);
+    const [formData, setFormData] = useState({ name: "", message: "" });
+    const handleClose = () => {
+      setOpen(false);
+    };
+    const handleSubmit = (e) => {
+      e.preventDefault();
+      console.log("\u63D0\u4EA4\u8868\u5355:", formData);
+      handleClose();
+    };
+    if (!open) {
+      return /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setOpen(true) }, "\u91CD\u65B0\u6253\u5F00\u62BD\u5C49");
+    }
+    return /* @__PURE__ */ React.createElement(
+      Drawer,
+      {
+        open,
+        anchor: "right",
+        onClose: handleClose,
+        "aria-label": "\u53EF\u4EA4\u4E92\u62BD\u5C49",
+        disablePortal: true
+      },
+      /* @__PURE__ */ React.createElement("div", { style: { padding: "20px", width: "350px" } }, /* @__PURE__ */ React.createElement("h3", null, "\u53CD\u9988\u8868\u5355"), /* @__PURE__ */ React.createElement("form", { onSubmit: handleSubmit }, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "15px" } }, /* @__PURE__ */ React.createElement("label", { htmlFor: "feedback-name" }, "\u59D3\u540D:"), /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          id: "feedback-name",
+          type: "text",
+          value: formData.name,
+          onChange: (e) => setFormData(__spreadProps(__spreadValues({}, formData), { name: e.target.value })),
+          required: true,
+          "aria-required": "true"
+        }
+      )), /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "15px" } }, /* @__PURE__ */ React.createElement("label", { htmlFor: "feedback-message" }, "\u53CD\u9988\u5185\u5BB9:"), /* @__PURE__ */ React.createElement(
+        "textarea",
+        {
+          id: "feedback-message",
+          value: formData.message,
+          onChange: (e) => setFormData(__spreadProps(__spreadValues({}, formData), { message: e.target.value })),
+          required: true,
+          "aria-required": "true",
+          rows: 4
+        }
+      )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("button", { type: "submit" }, "\u63D0\u4EA4\u53CD\u9988"), /* @__PURE__ */ React.createElement("button", { type: "button", onClick: handleClose }, "\u53D6\u6D88"))))
+    );
+  };
+  return /* @__PURE__ */ React.createElement(InteractiveDrawerDemo, null);
+};
+var A11yDemos_default = {
+  basicDrawerDemo,
+  leftDrawerDemo,
+  rightDrawerDemo,
+  topDrawerDemo,
+  noBackdropDrawerDemo,
+  interactiveDrawerDemo
+};
+export {
+  basicDrawerDemo,
+  A11yDemos_default as default,
+  interactiveDrawerDemo,
+  leftDrawerDemo,
+  noBackdropDrawerDemo,
+  rightDrawerDemo,
+  topDrawerDemo
+};

package/es/Fade/Fade.js

@@ -78,7 +78,7 @@ const Fade = /* @__PURE__ */ React.forwardRef(
         ref: nodeRef
       }),
       (state, childProps) => {
-        const transition = transitions.create(
+        const transition = state === "entering" || state === "exiting" ? transitions.create(
           "opacity",
           getTransitionProps(
             { timeout, style, easing: easingProp, delay },
@@ -86,7 +86,7 @@ const Fade = /* @__PURE__ */ React.forwardRef(
               mode: state
             }
           )
-        );
+        ) : "none";
         return React.cloneElement(children, __spreadValues({
           style: __spreadValues(__spreadValues({
             visibility: state === "exited" ? "hidden" : "visible",