@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/es/ThemeProvider/ThemeProvider.js

@@ -13,7 +13,6 @@ const ThemeProvider = /* @__PURE__ */ React.forwardRef(
       defaultLightToken,
       defaultDarkToken,
       dmLightToken,
-      dmDarkToken,
       token,
       children
     } = props;
@@ -29,7 +28,7 @@ const ThemeProvider = /* @__PURE__ */ React.forwardRef(
       });
     }
     useEffect(() => {
-      if (responsive || defaultLightToken || defaultDarkToken || dmLightToken || dmDarkToken || token) {
+      if (responsive || defaultLightToken || defaultDarkToken || dmLightToken || token) {
         mountTokens({
           isRoot,
           containerId,
@@ -38,7 +37,6 @@ const ThemeProvider = /* @__PURE__ */ React.forwardRef(
           defaultLightToken,
           defaultDarkToken,
           dmLightToken,
-          dmDarkToken,
           token
         });
       }
@@ -49,7 +47,6 @@ const ThemeProvider = /* @__PURE__ */ React.forwardRef(
       defaultLightToken,
       defaultDarkToken,
       dmLightToken,
-      dmDarkToken,
       token
     ]);
     return /* @__PURE__ */ React.createElement(ThemeContext.Provider, { value: theme }, childrenNode);

package/es/ThemeProvider/utils/constants.js

@@ -30,7 +30,10 @@ const rootSelector = {
   ],
   defaultDark: [".bui-dark", '[data-color-mode="dark"][data-theme="default"]'],
   dmLight: [".bui-dm-light", '[data-color-mode="light"][data-theme="dm"]'],
-  dmDark: [".bui-dm-dark", '[data-color-mode="dark"][data-theme="dm"]']
+  pioneerLight: [
+    ".bui-pioneer-light",
+    '[data-color-mode="light"][data-theme="pioneer"]'
+  ]
 };
 const BUI_VAR_PREFIX = "bui-var-";
 export {

package/es/Toast/FunctionalToast.js

@@ -29,140 +29,229 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  useRef
+} from "react";
 import { render, unmount, getRootContainer } from "@bifrostui/utils";
-import React, { useCallback, useEffect, useState } from "react";
+import Portal from "../Portal";
 import ToastView from "./Toast";
-let toastCloses = [];
+const defaultProps = {
+  duration: 2e3,
+  position: "center",
+  multiple: false,
+  disableClick: false
+};
+const toastCloses = [];
 const formatProps = (props) => {
-  if (typeof props === "string") {
-    return { message: props };
-  }
-  return props;
+  return typeof props === "string" ? { message: props } : props;
 };
-const destroyAll = () => {
-  let closeToast = toastCloses.pop();
-  while (closeToast) {
-    closeToast();
-    closeToast = toastCloses.pop();
-  }
+const destroyAll = (closes) => {
+  do {
+    const closeToast = closes.pop();
+    closeToast == null ? void 0 : closeToast();
+  } while (closes.length > 0);
 };
-const functionalToast = (props) => {
-  const options = __spreadValues({
-    duration: 2e3,
-    position: "center",
-    allowMultiple: false,
-    disableClick: false
-  }, formatProps(props));
+const Toast = (props) => {
+  const options = __spreadValues(__spreadValues({}, defaultProps), formatProps(props));
   const instance = {
     close: () => null
   };
+  const _a = options, { container } = _a, restOptions = __objRest(_a, ["container"]);
   const rootWrapper = document.createElement("div");
-  if (options.disableClick) {
-    const styles = {
-      position: "fixed",
-      top: "0",
-      bottom: "0",
-      left: "0",
-      right: "0",
-      zIndex: "var(--bui-z-index-toast)"
-    };
-    Object.keys(styles).forEach((property) => {
-      rootWrapper.style[property] = styles[property];
-    });
-  }
-  const rootElement = getRootContainer(options == null ? void 0 : options.container);
+  const rootElement = getRootContainer(container);
   rootElement.appendChild(rootWrapper);
   const ToastComponent = () => {
-    const _a = options, {
-      duration,
-      allowMultiple,
-      onClose,
-      container: container
-    } = _a, others = __objRest(_a, [
-      "duration",
-      "allowMultiple",
-      "onClose",
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      "container"
-    ]);
-    const [open, setOpen] = useState(false);
-    let timer;
-    const fadeTimeout = {
-      enter: 350,
-      exit: 150
-    };
+    const _a2 = restOptions, { duration, multiple, onClose, onExited } = _a2, others = __objRest(_a2, ["duration", "multiple", "onClose", "onExited"]);
+    const [open, setOpen] = useState(true);
+    const timerRef = useRef(null);
     const close = useCallback(() => {
       setOpen(false);
-      setTimeout(() => {
-        const unmountRes = unmount(rootWrapper);
-        if (unmountRes && rootWrapper.parentNode) {
-          rootWrapper.parentNode.removeChild(rootWrapper);
-        }
-      }, fadeTimeout.exit);
       onClose == null ? void 0 : onClose();
-    }, [rootWrapper]);
+    }, [rootWrapper, onClose]);
     useEffect(() => {
-      setOpen(true);
-      if (!allowMultiple)
-        destroyAll();
+      if (!multiple)
+        destroyAll(toastCloses);
       toastCloses.push(close);
       if (duration !== 0 && typeof duration === "number") {
-        timer = setTimeout(() => {
+        timerRef.current = window.setTimeout(() => {
           close();
-          if (!allowMultiple) {
-            toastCloses = [];
+          if (!multiple) {
+            const index = toastCloses.indexOf(close);
+            if (index > -1) {
+              toastCloses.splice(index, 1);
+            }
           }
         }, duration);
       }
       return () => {
-        clearTimeout(timer);
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+        }
       };
     }, []);
+    const onProxyExited = () => {
+      onExited == null ? void 0 : onExited();
+      const unmountRes = unmount(rootWrapper);
+      if (unmountRes && rootWrapper.parentNode) {
+        rootWrapper.parentNode.removeChild(rootWrapper);
+      }
+    };
     instance.close = close;
-    return /* @__PURE__ */ React.createElement(
-      ToastView,
-      __spreadProps(__spreadValues({}, others), {
-        open,
-        timeout: fadeTimeout,
-        onClose: close
-      })
-    );
+    return /* @__PURE__ */ React.createElement(ToastView, __spreadProps(__spreadValues({}, others), { open, onExited: onProxyExited }));
   };
   render(/* @__PURE__ */ React.createElement(ToastComponent, null), rootWrapper);
   return instance;
 };
-["warning", "loading", "success", "fail"].forEach((methodName) => {
-  functionalToast[methodName] = (options) => functionalToast(__spreadValues({
-    type: methodName
-  }, formatProps(options)));
-});
-functionalToast.clear = () => {
+["warning", "loading", "success", "fail"].forEach(
+  (methodName) => {
+    Toast[methodName] = (options) => Toast(__spreadValues({
+      type: methodName
+    }, formatProps(options)));
+  }
+);
+Toast.clear = () => {
   setTimeout(() => {
-    destroyAll();
+    destroyAll(toastCloses);
   });
 };
+const UseToastComponent = (props) => {
+  const _a = props, {
+    domRef,
+    onExited,
+    onSetOpenFalse,
+    onEnd,
+    destroyAllCloses,
+    addClose,
+    removeClose,
+    open
+  } = _a, restProps = __objRest(_a, [
+    "domRef",
+    "onExited",
+    "onSetOpenFalse",
+    "onEnd",
+    "destroyAllCloses",
+    "addClose",
+    "removeClose",
+    "open"
+  ]);
+  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();
+    onClose == null ? void 0 : onClose();
+  };
+  useEffect(() => {
+    if (!multiple)
+      destroyAllCloses();
+    addClose(close);
+    if (duration !== 0 && typeof duration === "number") {
+      timerRef.current = window.setTimeout(() => {
+        close();
+        if (!multiple) {
+          removeClose(close);
+        }
+      }, duration);
+    }
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+  const onProxyExited = () => {
+    onEnd == null ? void 0 : onEnd();
+    onExited == null ? void 0 : onExited();
+  };
+  return /* @__PURE__ */ React.createElement(Portal, { container: rootElement }, /* @__PURE__ */ React.createElement(
+    ToastView,
+    __spreadProps(__spreadValues({}, others), {
+      open,
+      onExited: onProxyExited,
+      ref: domRef
+    })
+  ));
+};
+UseToastComponent.displayName = "UseToastComponent";
 const useToast = () => {
-  const holderRef = React.useRef(null);
-  ["warning", "loading", "success", "fail"].forEach((methodName) => {
-    functionalToast[methodName] = (options) => {
-      var _a;
-      return functionalToast(__spreadProps(__spreadValues({
-        type: methodName
-      }, formatProps(options)), {
-        theme: (_a = holderRef.current) == null ? void 0 : _a.theme
-      }));
+  const [elements, setElements] = useState([]);
+  const hookToastClosesRef = useRef([]);
+  const createToast = (options) => {
+    const key = `toast-${Date.now()}-${Math.random()}`;
+    const _a = options, { ref } = _a, restOptions = __objRest(_a, ["ref"]);
+    const instance = {
+      close: () => {
+        setElements(
+          (prev) => prev.map(
+            (element) => element.key === key ? __spreadProps(__spreadValues({}, element), { open: false }) : element
+          )
+        );
+      }
     };
-  });
-  functionalToast.clear = () => {
+    const handleAnimationEnd = () => {
+      setElements((prev) => prev.filter((element) => element.key !== key));
+    };
+    const toastElement = {
+      key,
+      open: true,
+      props: __spreadProps(__spreadValues({}, restOptions), {
+        onEnd: handleAnimationEnd
+      }),
+      ref
+    };
+    setElements((prev) => [...prev, toastElement]);
+    return instance;
+  };
+  const hookToast = (options) => createToast(__spreadValues({}, formatProps(options)));
+  ["warning", "loading", "success", "fail"].forEach(
+    (methodName) => {
+      hookToast[methodName] = (options) => createToast(__spreadValues({
+        type: methodName
+      }, formatProps(options)));
+    }
+  );
+  hookToast.clear = () => {
     setTimeout(() => {
-      destroyAll();
+      destroyAll(hookToastClosesRef.current);
     });
   };
-  const wrapAPI = functionalToast;
-  return [wrapAPI, /* @__PURE__ */ React.createElement(ToastView, { key: "toast-holder", ref: holderRef })];
+  const destroyAllCloses = () => {
+    destroyAll(hookToastClosesRef.current);
+  };
+  const renderedElements = elements.map((element) => {
+    const onSetOpenFalse = () => {
+      setElements(
+        (prev) => prev.map(
+          (el) => el.key === element.key ? __spreadProps(__spreadValues({}, el), { open: false }) : el
+        )
+      );
+    };
+    return /* @__PURE__ */ React.createElement(
+      UseToastComponent,
+      __spreadProps(__spreadValues({
+        key: element.key
+      }, element.props), {
+        open: element.open,
+        onSetOpenFalse,
+        domRef: element.ref,
+        destroyAllCloses,
+        addClose: (close) => hookToastClosesRef.current.push(close),
+        removeClose: (close) => {
+          const index = hookToastClosesRef.current.indexOf(close);
+          if (index > -1) {
+            hookToastClosesRef.current.splice(index, 1);
+          }
+        }
+      })
+    );
+  });
+  return [hookToast, /* @__PURE__ */ React.createElement(React.Fragment, null, renderedElements)];
 };
-functionalToast.useToast = useToast;
-const Toast = functionalToast;
+Toast.useToast = useToast;
 var FunctionalToast_default = Toast;
 export {
   FunctionalToast_default as default

package/es/Toast/Toast.js

@@ -29,8 +29,8 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import React from "react";
 import clsx from "clsx";
-import React, { useImperativeHandle } from "react";
 import {
   ErrorCircleFilledBoldIcon,
   AccessTimeCircleFilledBoldIcon,
@@ -38,8 +38,8 @@ import {
   SuccessCircleFilledBoldIcon
 } from "@bifrostui/icons";
 import Fade from "../Fade";
-import { useTheme } from "../ThemeProvider";
-import "./Toast.css";
+import Backdrop from "../Backdrop";
+import "./index.css";
 const prefixCls = "bui-toast";
 const ToastComponent = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
@@ -51,7 +51,8 @@ const ToastComponent = /* @__PURE__ */ React.forwardRef((props, ref) => {
     message,
     position = "center",
     disableClick = false,
-    theme
+    appear = false,
+    transitionDuration = 150
   } = _a, others = __objRest(_a, [
     "className",
     "style",
@@ -61,35 +62,75 @@ const ToastComponent = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "message",
     "position",
     "disableClick",
-    "theme"
+    "appear",
+    "transitionDuration"
   ]);
-  const themeConfig = useTheme(theme);
-  useImperativeHandle(ref, () => {
-    return { theme: themeConfig };
-  }, []);
   const iconMap = {
-    fail: /* @__PURE__ */ React.createElement(ErrorCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-    loading: /* @__PURE__ */ React.createElement(AccessTimeCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-    warning: /* @__PURE__ */ React.createElement(AlertCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-    success: /* @__PURE__ */ React.createElement(SuccessCircleFilledBoldIcon, { htmlColor: "#ffffff" })
+    fail: /* @__PURE__ */ React.createElement(
+      ErrorCircleFilledBoldIcon,
+      {
+        htmlColor: "var(--bui-color-white)",
+        "aria-hidden": "true"
+      }
+    ),
+    loading: /* @__PURE__ */ React.createElement(
+      AccessTimeCircleFilledBoldIcon,
+      {
+        htmlColor: "var(--bui-color-white)",
+        "aria-hidden": "true"
+      }
+    ),
+    warning: /* @__PURE__ */ React.createElement(
+      AlertCircleFilledBoldIcon,
+      {
+        htmlColor: "var(--bui-color-white)",
+        "aria-hidden": "true"
+      }
+    ),
+    success: /* @__PURE__ */ React.createElement(
+      SuccessCircleFilledBoldIcon,
+      {
+        htmlColor: "var(--bui-color-white)",
+        "aria-hidden": "true"
+      }
+    )
   };
   const iconDom = iconMap[type] || icon;
-  return /* @__PURE__ */ React.createElement(Fade, __spreadProps(__spreadValues({}, others), { in: open, appear: false, unmountOnExit: true }), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: clsx(
-        prefixCls,
-        `${prefixCls}-${position}`,
-        {
-          [`${prefixCls}-icon`]: !!iconDom,
-          [`${prefixCls}-allow-click`]: !disableClick
-        },
-        className
-      ),
-      style
-    },
-    iconDom,
-    message
+  let role = "status";
+  let ariaLive = "polite";
+  if (type === "fail" || type === "warning") {
+    role = "alert";
+    ariaLive = "assertive";
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, disableClick && /* @__PURE__ */ React.createElement(Backdrop, { invisible: true, open: true }), /* @__PURE__ */ React.createElement(
+    Fade,
+    __spreadProps(__spreadValues({}, others), {
+      in: open,
+      appear,
+      timeout: transitionDuration,
+      unmountOnExit: true
+    }),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        className: clsx(
+          prefixCls,
+          `${prefixCls}-${position}`,
+          {
+            [`${prefixCls}-icon`]: !!iconDom,
+            [`${prefixCls}-allow-click`]: !disableClick
+          },
+          className
+        ),
+        style,
+        role,
+        "aria-live": ariaLive,
+        "aria-atomic": "true"
+      },
+      iconDom,
+      message
+    )
   ));
 });
 ToastComponent.displayName = "BuiToast";

package/es/Toast/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { Button } from "../../../Button";
+import Toast from "../../FunctionalToast";
+const ToastDemo = () => {
+  const [toast] = Toast.useToast();
+  return /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      onClick: () => {
+        toast({
+          message: "Hello World",
+          duration: 0
+        });
+      }
+    },
+    "\u57FA\u7840 Toast"
+  );
+};
+export {
+  ToastDemo
+};

package/es/Toast/index.css

@@ -0,0 +1,57 @@
+:root,
+page,
+xhs-page {
+  --bui-toast-min-width: 86px;
+  --bui-toast-max-width: 80%;
+  --bui-toast-text-align: center;
+  --bui-toast-flex-direction: column;
+  --bui-toast-padding: var(--bui-spacing-xl);
+  --bui-toast-position-top: 15%;
+  --bui-toast-position-bottom: 85%;
+  --bui-toast-bg-color: rgba(0, 0, 0, 0.8);
+  --bui-toast-border-radius: var(--bui-shape-radius-default);
+  --bui-toast-icon-margin: 0 0 8px;
+  --bui-toast-icon-font-size: 30px;
+}
+.bui-toast {
+  position: fixed;
+  left: 50%;
+  z-index: var(--bui-z-index-toast);
+  min-width: var(--bui-toast-min-width);
+  max-width: var(--bui-toast-max-width);
+  padding: var(--bui-toast-padding);
+  font-size: var(--bui-text-size-1);
+  color: var(--bui-color-white);
+  border-radius: var(--bui-toast-border-radius);
+  word-break: break-all;
+  white-space: pre-wrap;
+  background-color: var(--bui-toast-bg-color);
+  text-align: var(--bui-toast-text-align);
+  font-family: var(--bui-font-family);
+}
+.bui-toast.bui-toast-allow-click {
+  position: fixed;
+  right: unset;
+  bottom: unset;
+}
+.bui-toast-center {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.bui-toast-top {
+  top: var(--bui-toast-position-top);
+  transform: translate(-50%, calc(-1 * var(--bui-toast-position-top)));
+}
+.bui-toast-bottom {
+  top: var(--bui-toast-position-bottom);
+  transform: translate(-50%, calc(-1 * var(--bui-toast-position-bottom)));
+}
+.bui-toast-icon {
+  display: flex;
+  flex-direction: var(--bui-toast-flex-direction);
+  align-items: center;
+}
+.bui-toast-icon .bui-svg-icon {
+  margin: var(--bui-toast-icon-margin);
+  font-size: var(--bui-toast-icon-font-size);
+}