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

package/es/TextArea/TextArea.js

@@ -31,12 +31,14 @@ var __objRest = (source, exclude) => {
 };
 import { isMini, useForkRef, useValue } from "@bifrostui/utils";
 import clsx from "clsx";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { useLocaleText } from "../locales";
 import "./index.css";
 const prefixCls = "bui-textarea";
 const DEFAULT_ROWS = 2;
 const TextArea = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
+    const textareaText = useLocaleText("textarea");
     const _a = props, {
       className,
       value,
@@ -47,10 +49,19 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
       placeholder,
       disabled,
       rows = DEFAULT_ROWS,
-      maxLength,
+      maxLength: maxLength,
       autoSize = false,
-      autoFocus = false,
-      showCount = false,
+      autoFocus: autoFocus = false,
+      showCount: showCount = false,
+      // 是否展示字数统计
+      // 无障碍属性
+      "aria-label": ariaLabel = textareaText.labelName,
+      "aria-hidden": ariaHidden,
+      "aria-details": ariaDetails,
+      "aria-required": ariaRequired,
+      "aria-readonly": ariaReadonly,
+      "aria-rowindex": ariaRowindex,
+      "aria-colcount": ariaColcount,
       onChange
     } = _a, others = __objRest(_a, [
       "className",
@@ -62,10 +73,20 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
       "placeholder",
       "disabled",
       "rows",
+      // 默认行数
       "maxLength",
       "autoSize",
+      // 是否自适应高度
       "autoFocus",
+      // 是否自动聚焦
       "showCount",
+      "aria-label",
+      "aria-hidden",
+      "aria-details",
+      "aria-required",
+      "aria-readonly",
+      "aria-rowindex",
+      "aria-colcount",
       "onChange"
     ]);
     const [textAreaValue, triggerChange] = useValue({
@@ -80,7 +101,7 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
       if (autoFocus && internalRef.current) {
         internalRef.current.focus();
       }
-    }, [internalRef]);
+    }, [autoFocus]);
     const handleAutoHeight = (height) => {
       if (typeof autoSize === "object") {
         const { maxHeight, minHeight } = autoSize;
@@ -110,8 +131,7 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
       const textArea = internalRef.current;
       const { height, lineCount } = (e == null ? void 0 : e.detail) || {};
       const line = lineCount <= 1 ? rows : lineCount;
-      let textAreaHeight = line * (height / lineCount + 4);
-      textAreaHeight = handleAutoHeight(textAreaHeight);
+      const textAreaHeight = handleAutoHeight(line * (height / lineCount));
       if (!initLock.current && !autoSize && rows === DEFAULT_ROWS) {
         textArea.style.height = `${textAreaHeight}px`;
         initLock.current = true;
@@ -121,12 +141,29 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
         textArea.style.height = `${textAreaHeight}px`;
       }
     };
+    const [ariaDescription, setAriaDescription] = useState("");
     let nativeProps = {
-      [isMini ? "maxlength" : "maxLength"]: maxLength != null ? maxLength : -1
+      [isMini ? "maxlength" : "maxLength"]: maxLength != null ? maxLength : -1,
+      "aria-description": ariaDescription
     };
+    const accessibilityProps = {
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaHidden,
+      "aria-details": ariaDetails,
+      "aria-required": ariaRequired,
+      "aria-readonly": ariaReadonly,
+      "aria-rowindex": ariaRowindex,
+      "aria-colcount": ariaColcount
+    };
+    Object.keys(accessibilityProps).forEach((key) => {
+      if (accessibilityProps[key] !== void 0) {
+        nativeProps[key] = accessibilityProps[key];
+      }
+    });
     if (isMini) {
       nativeProps = __spreadProps(__spreadValues({}, nativeProps), {
         onLineChange: handleLineChange,
+        // 小程序行高变化事件
         placeholderClass: "bui-mini-placeholder",
         autoFocus,
         focus: autoFocus
@@ -162,6 +199,12 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
           },
           onInput: (e) => {
             var _a2;
+            if (showCount) {
+              const remaining = maxLength - e.target.value.length;
+              setAriaDescription(
+                `${textareaText.remaining} ${remaining} ${textareaText.characters}`
+              );
+            }
             if (isMini) {
               triggerChange(e, e.target.value);
             }

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

@@ -0,0 +1,54 @@
+import React from "react";
+import TextArea from "../../TextArea";
+const basicTextAreaDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TextArea, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9" }));
+};
+const ariaLabelTextAreaDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TextArea, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", "aria-label": "\u7528\u6237\u8BC4\u8BBA\u8F93\u5165\u6846" }));
+};
+const requiredAndReadonlyTextAreaDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TextArea, { placeholder: "\u5FC5\u586B\u9879", "aria-required": true }), /* @__PURE__ */ React.createElement(
+    TextArea,
+    {
+      placeholder: "\u53EA\u8BFB\u9879",
+      "aria-readonly": true,
+      defaultValue: "\u8FD9\u662F\u53EA\u8BFB\u5185\u5BB9"
+    }
+  ));
+};
+const showCountTextAreaDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    TextArea,
+    {
+      placeholder: "\u6700\u591A\u8F93\u516550\u4E2A\u5B57",
+      maxLength: 50,
+      showCount: true,
+      "aria-label": "\u5E26\u5B57\u6570\u7EDF\u8BA1\u7684\u8F93\u5165\u6846"
+    }
+  ));
+};
+const autoFocusTextAreaDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    TextArea,
+    {
+      placeholder: "\u81EA\u52A8\u805A\u7126",
+      autoFocus: true,
+      "aria-label": "\u81EA\u52A8\u805A\u7126\u7684\u8F93\u5165\u6846"
+    }
+  ));
+};
+var A11yDemos_default = {
+  basicTextAreaDemo,
+  ariaLabelTextAreaDemo,
+  requiredAndReadonlyTextAreaDemo,
+  showCountTextAreaDemo,
+  autoFocusTextAreaDemo
+};
+export {
+  ariaLabelTextAreaDemo,
+  autoFocusTextAreaDemo,
+  basicTextAreaDemo,
+  A11yDemos_default as default,
+  requiredAndReadonlyTextAreaDemo,
+  showCountTextAreaDemo
+};

package/es/TextArea/index.css

@@ -3,9 +3,9 @@ page,
 xhs-page {
   --bui-textarea-border-radius: var(--bui-shape-radius-label);
   --bui-textarea-width: 100%;
-  --bui-textarea-background-color: var(--bui-color-bg-default);
+  --bui-textarea-bg-color: var(--bui-color-bg-default);
   --bui-textarea-text-color: var(--bui-color-fg-subtle);
-  --bui-textarea-count-background-color: var(--bui-textarea-background-color, var(--bui-color-bg-default));
+  --bui-textarea-count-bg-color: var(--bui-textarea-bg-color, var(--bui-color-bg-default));
   --bui-textarea-count-color: var(--bui-color-fg-subtle);
   --bui-textarea-text-font-size: var(--bui-text-size-2);
   --bui-textarea-count-font-size: var(--bui-title-size-3);
@@ -37,7 +37,7 @@ xhs-page {
 .bui-textarea-content {
   width: var(--bui-textarea-width);
   resize: none;
-  background-color: var(--bui-textarea-background-color);
+  background-color: var(--bui-textarea-bg-color);
   padding: var(--bui-textarea-padding);
   border: none;
   outline: none;
@@ -49,7 +49,7 @@ xhs-page {
   line-height: var(--bui-textarea-placeholder-line-height);
 }
 .bui-textarea-count {
-  background-color: var(--bui-textarea-count-background-color);
+  background-color: var(--bui-textarea-count-bg-color);
   color: var(--bui-textarea-count-color);
   text-align: right;
   padding: var(--bui-textarea-count-padding);

package/es/Toast/FunctionalToast.js

@@ -29,129 +29,229 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { render, unmount, getRootElement } from "@bifrostui/utils";
-import React, { useCallback, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  useRef
+} from "react";
+import { render, unmount, getRootContainer } from "@bifrostui/utils";
+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 = getRootElement();
+  const rootElement = getRootContainer(container);
   rootElement.appendChild(rootWrapper);
   const ToastComponent = () => {
-    const _a = options, { duration, allowMultiple, onClose } = _a, others = __objRest(_a, ["duration", "allowMultiple", "onClose"]);
-    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,7 +38,7 @@ import {
   SuccessCircleFilledBoldIcon
 } from "@bifrostui/icons";
 import Fade from "../Fade";
-import { useTheme } from "../ThemeProvider";
+import Backdrop from "../Backdrop";
 import "./index.css";
 const prefixCls = "bui-toast";
 const ToastComponent = /* @__PURE__ */ React.forwardRef((props, ref) => {
@@ -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: "var(--bui-color-white)" }),
-    loading: /* @__PURE__ */ React.createElement(AccessTimeCircleFilledBoldIcon, { htmlColor: "var(--bui-color-white)" }),
-    warning: /* @__PURE__ */ React.createElement(AlertCircleFilledBoldIcon, { htmlColor: "var(--bui-color-white)" }),
-    success: /* @__PURE__ */ React.createElement(SuccessCircleFilledBoldIcon, { htmlColor: "var(--bui-color-white)" })
+    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

@@ -17,7 +17,6 @@ xhs-page {
   position: fixed;
   left: 50%;
   z-index: var(--bui-z-index-toast);
-  width: fit-content;
   min-width: var(--bui-toast-min-width);
   max-width: var(--bui-toast-max-width);
   padding: var(--bui-toast-padding);