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

package/dist/Toast/Toast.js

@@ -59,11 +59,11 @@ __export(Toast_exports, {
   default: () => Toast_default
 });
 module.exports = __toCommonJS(Toast_exports);
-var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
 var import_icons = require("@bifrostui/icons");
 var import_Fade = __toESM(require("../Fade"));
-var import_ThemeProvider = require("../ThemeProvider");
+var import_Backdrop = __toESM(require("../Backdrop"));
 var import_index = require("./index.css");
 const prefixCls = "bui-toast";
 const ToastComponent = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
@@ -76,7 +76,8 @@ const ToastComponent = /* @__PURE__ */ import_react.default.forwardRef((props, r
     message,
     position = "center",
     disableClick = false,
-    theme
+    appear = false,
+    transitionDuration = 150
   } = _a, others = __objRest(_a, [
     "className",
     "style",
@@ -86,35 +87,75 @@ const ToastComponent = /* @__PURE__ */ import_react.default.forwardRef((props, r
     "message",
     "position",
     "disableClick",
-    "theme"
+    "appear",
+    "transitionDuration"
   ]);
-  const themeConfig = (0, import_ThemeProvider.useTheme)(theme);
-  (0, import_react.useImperativeHandle)(ref, () => {
-    return { theme: themeConfig };
-  }, []);
   const iconMap = {
-    fail: /* @__PURE__ */ import_react.default.createElement(import_icons.ErrorCircleFilledBoldIcon, { htmlColor: "var(--bui-color-white)" }),
-    loading: /* @__PURE__ */ import_react.default.createElement(import_icons.AccessTimeCircleFilledBoldIcon, { htmlColor: "var(--bui-color-white)" }),
-    warning: /* @__PURE__ */ import_react.default.createElement(import_icons.AlertCircleFilledBoldIcon, { htmlColor: "var(--bui-color-white)" }),
-    success: /* @__PURE__ */ import_react.default.createElement(import_icons.SuccessCircleFilledBoldIcon, { htmlColor: "var(--bui-color-white)" })
+    fail: /* @__PURE__ */ import_react.default.createElement(
+      import_icons.ErrorCircleFilledBoldIcon,
+      {
+        htmlColor: "var(--bui-color-white)",
+        "aria-hidden": "true"
+      }
+    ),
+    loading: /* @__PURE__ */ import_react.default.createElement(
+      import_icons.AccessTimeCircleFilledBoldIcon,
+      {
+        htmlColor: "var(--bui-color-white)",
+        "aria-hidden": "true"
+      }
+    ),
+    warning: /* @__PURE__ */ import_react.default.createElement(
+      import_icons.AlertCircleFilledBoldIcon,
+      {
+        htmlColor: "var(--bui-color-white)",
+        "aria-hidden": "true"
+      }
+    ),
+    success: /* @__PURE__ */ import_react.default.createElement(
+      import_icons.SuccessCircleFilledBoldIcon,
+      {
+        htmlColor: "var(--bui-color-white)",
+        "aria-hidden": "true"
+      }
+    )
   };
   const iconDom = iconMap[type] || icon;
-  return /* @__PURE__ */ import_react.default.createElement(import_Fade.default, __spreadProps(__spreadValues({}, others), { in: open, appear: false, unmountOnExit: true }), /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: (0, import_clsx.default)(
-        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__ */ import_react.default.createElement(import_react.default.Fragment, null, disableClick && /* @__PURE__ */ import_react.default.createElement(import_Backdrop.default, { invisible: true, open: true }), /* @__PURE__ */ import_react.default.createElement(
+    import_Fade.default,
+    __spreadProps(__spreadValues({}, others), {
+      in: open,
+      appear,
+      timeout: transitionDuration,
+      unmountOnExit: true
+    }),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx.default)(
+          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/dist/Toast/Toast.types.d.ts

@@ -1,9 +1,6 @@
-import React from 'react';
+import React, { MutableRefObject } from 'react';
 import { FadeProps } from '../Fade/Fade.types';
-import { ThemeProps } from '../ThemeProvider/ThemeProvider.types';
-export type ToastRef = {
-    theme?: ThemeProps;
-};
+import { TransitionProps } from '../Transition';
 /**
  * 提示类型
  */
@@ -35,24 +32,30 @@ export interface ToastProps extends FadeProps {
      * 是否允许同时存在多个Toast
      * @default false
      */
-    allowMultiple?: boolean;
+    multiple?: boolean;
     /**
      * 自定义图标
      */
     icon?: React.ReactNode;
-    /**
-     * theme 主题定制
-     */
-    theme?: ThemeProps;
     /**
      * 展示Toast时，页面内容是否可以点击
      * @default false
      */
     disableClick?: boolean;
+    /**
+     * 渲染Toast的根容器
+     * @default document.body
+     */
+    container?: HTMLElement | (() => HTMLElement);
     /**
      * 关闭时的回调函数
      */
     onClose?: () => void;
+    /**
+     * Toast动画时长(ms)
+     */
+    transitionDuration?: TransitionProps['timeout'];
+    ref?: MutableRefObject<HTMLDivElement>;
 }
 /**
  * 函数式调用配置参数

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ToastDemo: () => React.JSX.Element;

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

@@ -0,0 +1,54 @@
+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, {
+  ToastDemo: () => ToastDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Button = require("../../../Button");
+var import_FunctionalToast = __toESM(require("../../FunctionalToast"));
+const ToastDemo = () => {
+  const [toast] = import_FunctionalToast.default.useToast();
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_Button.Button,
+    {
+      onClick: () => {
+        toast({
+          message: "Hello World",
+          duration: 0
+        });
+      }
+    },
+    "\u57FA\u7840 Toast"
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToastDemo
+});

package/dist/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);

package/dist/Tooltip/Tooltip.js

@@ -1,6 +1,8 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -18,6 +20,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -58,8 +61,8 @@ __export(Tooltip_exports, {
 module.exports = __toCommonJS(Tooltip_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_utils = require("@bifrostui/utils");
 var import_Portal = __toESM(require("../Portal"));
+var import_useTooltip = require("./useTooltip");
 var import_index = require("./index.css");
 const prefixCls = "bui-tooltip";
 const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
@@ -68,127 +71,80 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     style,
     children,
     title,
-    defaultOpen,
-    offsetSpacing = 0,
+    defaultOpen = false,
+    offset,
     placement = "top",
     trigger = "click",
+    open,
     onOpenChange,
-    open
+    role: role = "tooltip",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    autoFocus = false,
+    closeOnEscape = false,
+    "aria-hidden": ariaHidden = false
   } = _a, others = __objRest(_a, [
     "className",
     "style",
     "children",
     "title",
     "defaultOpen",
-    "offsetSpacing",
+    "offset",
     "placement",
     "trigger",
+    "open",
     "onOpenChange",
-    "open"
+    // 无障碍功能相关属性
+    "role",
+    "aria-label",
+    "aria-labelledby",
+    "autoFocus",
+    "closeOnEscape",
+    "aria-hidden"
   ]);
-  const controlByUser = typeof open !== "undefined";
-  const { direction, location = "center" } = (0, import_utils.parsePlacement)(placement);
-  const childrenRef = (0, import_react.useRef)();
-  const [openStatus, setOpenStatus] = (0, import_react.useState)(defaultOpen);
-  const [arrowDirection, setArrowDirection] = (0, import_react.useState)(direction);
-  const [arrowLocation, setArrowLocation] = (0, import_react.useState)(location);
-  const [tooltyles, setTooltyles] = (0, import_react.useState)({});
-  const ttId = (0, import_utils.useUniqueId)();
-  const changeOpenStatus = (event, status) => {
-    if (controlByUser)
-      return;
-    setOpenStatus(status);
-    onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
-  };
-  const triggerClick = (event) => {
-    event.stopPropagation();
-    const targetStatus = !openStatus;
-    changeOpenStatus(event, targetStatus);
-  };
-  const hideTooltip = (event) => {
-    changeOpenStatus(event, false);
-  };
-  const showTooltip = (event) => {
-    changeOpenStatus(event, true);
-  };
-  (0, import_react.useEffect)(() => {
-    if (!controlByUser)
-      return;
-    setOpenStatus(open);
-  }, [open]);
-  const clickEventHandler = (event) => {
-    if (trigger === "hover" || (trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")
-      return;
-    hideTooltip(event);
-  };
-  const onRootElementMouted = (0, import_utils.throttle)(() => {
-    const {
-      direction: newParsedDirection,
-      location: newParsedLocation = "center"
-    } = (0, import_utils.parsePlacement)(placement);
-    const result = (0, import_utils.getStylesAndLocation)({
-      childrenRef,
-      arrowDirection: newParsedDirection,
-      arrowLocation: newParsedLocation,
-      offsetSpacing,
-      selector: `[data-id="tt_${ttId}"]`
-    });
-    if (!result)
-      return;
-    const { styles, newArrowDirection, newArrowLocation } = result;
-    if (newArrowDirection !== arrowDirection) {
-      setArrowDirection(newArrowDirection);
-    }
-    if (newArrowLocation !== arrowLocation) {
-      setArrowLocation(newArrowLocation);
-    }
-    setTooltyles(styles);
-  }, 100);
-  const bindEvent = () => {
-    if (!controlByUser) {
-      document.addEventListener("click", clickEventHandler);
-    }
-    window.addEventListener("resize", onRootElementMouted);
-  };
-  const unbindEvent = () => {
-    if (!controlByUser) {
-      document.removeEventListener("click", clickEventHandler);
-    }
-    window.removeEventListener("resize", onRootElementMouted);
-  };
-  (0, import_react.useEffect)(() => {
-    bindEvent();
-    return () => {
-      unbindEvent();
-    };
-  }, []);
-  let triggerEventOption;
-  if (!controlByUser) {
-    triggerEventOption = (0, import_utils.triggerEventTransform)({
-      trigger,
-      click: triggerClick,
-      show: showTooltip,
-      hide: hideTooltip
-    });
+  const {
+    getTooltipProps,
+    getChildProps,
+    getPortalProps,
+    isOpen,
+    toolStyles,
+    arrowDirection,
+    arrowLocation
+  } = (0, import_useTooltip.useTooltip)({
+    title,
+    defaultOpen,
+    open,
+    offset,
+    placement,
+    trigger,
+    onOpenChange,
+    autoFocus,
+    closeOnEscape,
+    children,
+    rootRef: ref
+  });
+  if (!import_react.default.isValidElement(children)) {
+    console.warn(
+      "BUI Tooltip: children must be a valid React element that can accept a ref."
+    );
+    return children;
   }
-  const childrenOptions = __spreadValues({
-    ref: childrenRef
-  }, triggerEventOption);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { onRootElementMouted, ref }, /* @__PURE__ */ import_react.default.createElement(
+  const tooltipProps = getTooltipProps(__spreadProps(__spreadValues({}, others), {
+    className: (0, import_clsx.default)(prefixCls, className, `tooltip-${arrowDirection}`),
+    style: __spreadValues(__spreadValues({}, style), toolStyles),
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-hidden": ariaHidden
+  }));
+  const childProps = getChildProps();
+  const portalProps = getPortalProps();
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, isOpen && title ? /* @__PURE__ */ import_react.default.createElement(import_Portal.default, __spreadValues({}, portalProps), /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({}, tooltipProps), /* @__PURE__ */ import_react.default.createElement(
     "div",
-    __spreadValues({
-      className: (0, import_clsx.default)(prefixCls, className, `tooltip-${arrowDirection}`),
-      style: __spreadValues(__spreadValues({}, style), tooltyles),
-      "data-id": `tt_${ttId}`
-    }, others),
-    /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_clsx.default)("bui-tooltip-arrow", `location-${arrowLocation}`)
-      }
-    ),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-tooltip-content" }, title)
-  )) : null, import_react.default.isValidElement(children) ? import_react.default.cloneElement(children, childrenOptions) : children);
+    {
+      className: (0, import_clsx.default)("bui-tooltip-arrow", `location-${arrowLocation}`)
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-tooltip-content" }, title))) : null, import_react.default.cloneElement(children, childProps));
 });
 Tooltip.displayName = "BuiTooltip";
 var Tooltip_default = Tooltip;

package/dist/Tooltip/Tooltip.types.d.ts

@@ -1,48 +1,99 @@
 import React from 'react';
 import { OverrideProps } from '@bifrostui/types';
-type triggerType = 'click' | 'hover';
+/**
+ * 触发 Tooltip 显示的事件类型
+ */
+export type TooltipTriggerType = 'click' | 'hover';
+/**
+ * Tooltip 的位置选项
+ */
+export type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+/**
+ * onOpenChange 回调函数的数据参数
+ */
+export interface TooltipOpenChangeData {
+    /** 浮层显隐状态 */
+    open: boolean;
+}
+/**
+ * Tooltip 组件的属性接口
+ */
+export interface TooltipBaseProps {
+    /**
+     * 气泡浮层显示内容
+     * 支持文本、React 节点等
+     */
+    title?: React.ReactNode;
+    /**
+     * 默认是否显隐
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * 用于手动控制气泡浮层显隐
+     * 当提供此属性时，组件变为受控模式
+     */
+    open?: boolean;
+    /**
+     * 浮层与目标元素的偏移距离（像素）
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * 气泡框相对于目标元素的位置
+     * @default 'top'
+     */
+    placement?: TooltipPlacement;
+    /**
+     * 触发 Tooltip 显示的事件类型
+     * - 'click': 点击触发
+     * - 'hover': 悬停触发
+     * - 可以传递数组来组合多种触发方式
+     * @default 'click'
+     */
+    trigger?: TooltipTriggerType | TooltipTriggerType[];
+    /**
+     * 显隐状态变化时的回调函数
+     * @param event - 触发事件
+     * @param data - 回调数据，包含当前的显隐状态
+     */
+    onOpenChange?: (event: React.SyntheticEvent, data: TooltipOpenChangeData) => void;
+    /**
+     * 子元素，必须是可以接收 ref 的 React 元素
+     */
+    children?: React.ReactElement;
+    /**
+     * 无障碍功能：Tooltip的角色
+     * @default 'tooltip'
+     */
+    role?: 'tooltip' | 'dialog' | 'status' | 'alert';
+    /**
+     * 无障碍功能：为Tooltip提供可访问的标签
+     */
+    'aria-label'?: string;
+    /**
+     * 无障碍功能：引用描述此Tooltip的元素ID
+     */
+    'aria-labelledby'?: string;
+    /**
+     * 无障碍功能：是否自动管理焦点
+     * 当为true时，Tooltip显示时会自动获取焦点，关闭时焦点返回到触发元素
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * 无障碍功能：是否支持Escape键关闭
+     * @default false
+     */
+    closeOnEscape?: boolean;
+    /**
+     * 无障碍功能：是否对屏幕阅读器隐藏Tooltip
+     * 当为true时，Tooltip将被屏幕阅读器忽略
+     * @default false
+     */
+    'aria-hidden'?: boolean;
+}
 export type TooltipProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        /**
-         * 气泡浮层显示内容
-         */
-        title?: string;
-        /**
-         * 默认是否显隐
-         * @default false
-         */
-        defaultOpen?: boolean;
-        /**
-         * 用于手动控制气泡浮层显隐
-         */
-        open?: boolean;
-        /**
-         * 用于控制气泡浮层和目标元素偏移量
-         */
-        offsetSpacing?: number;
-        /**
-         * 气泡框位置
-         * @default 'top'
-         */
-        placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
-        /**
-         * 触发行为
-         * - click: 点击触发
-         * - hover: hover触发
-         * - 或者是他们的数组
-         * @default 'click'
-         */
-        trigger?: triggerType | triggerType[];
-        /**
-         * 点击事件回调方法
-         * - event 触发事件
-         * - data.open 浮层显隐状态
-         * @returns
-         */
-        onOpenChange?: (event: React.SyntheticEvent, data: {
-            open: boolean;
-        }) => void;
-    };
+    props: P & TooltipBaseProps;
     defaultComponent: D;
 }, D>;
-export {};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+/**
+ * 自定义 Tooltip 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 A11yDemos.tsx（固定约定）
+ */
+export declare const basicTooltipDemo: () => React.JSX.Element;
+export declare const placementTooltipDemo: () => React.JSX.Element;
+export declare const triggerTooltipDemo: () => React.JSX.Element;
+export declare const accessibilityTooltipDemo: () => React.JSX.Element;
+export declare const complexInteractionTooltipDemo: () => React.JSX.Element;
+export declare const complexContentTooltipDemo: () => React.JSX.Element;
+export declare const offsetTooltipDemo: () => React.JSX.Element;
+export declare const edgeCaseTooltipDemo: () => React.JSX.Element;
+declare const _default: {
+    basicTooltipDemo: () => React.JSX.Element;
+    placementTooltipDemo: () => React.JSX.Element;
+    triggerTooltipDemo: () => React.JSX.Element;
+    accessibilityTooltipDemo: () => React.JSX.Element;
+    complexInteractionTooltipDemo: () => React.JSX.Element;
+    complexContentTooltipDemo: () => React.JSX.Element;
+    offsetTooltipDemo: () => React.JSX.Element;
+    edgeCaseTooltipDemo: () => React.JSX.Element;
+};
+export default _default;