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

package/es/Portal/Portal.miniapp.js

@@ -18,28 +18,37 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import Taro from "@tarojs/taro";
-import React, { forwardRef, useMemo } from "react";
+import React, { forwardRef, useLayoutEffect, useState, useMemo } from "react";
 import PortalCore from "./PortalCore";
 const Portal = forwardRef((props, ref) => {
   const { disablePortal } = props;
-  const rootWrapperElement = useMemo(() => {
-    if (!disablePortal) {
-      const currentPages = Taro.getCurrentPages() || [];
-      const currentPage = currentPages[currentPages.length - 1];
-      const pageElement = currentPage == null ? void 0 : currentPage.$taroPath;
-      const rootElement = document.getElementById(pageElement);
-      const portalId = (rootElement == null ? void 0 : rootElement.sid) ? `${rootElement == null ? void 0 : rootElement.sid}_portalId` : `${pageElement}_portalId`;
+  const [rootWrapperElement, setRootWrapperElement] = useState();
+  const initialPageInfo = useMemo(() => {
+    const currentPages = Taro.getCurrentPages() || [];
+    const currentPage = currentPages[currentPages.length - 1];
+    return {
+      path: currentPage == null ? void 0 : currentPage.$taroPath
+    };
+  }, []);
+  useLayoutEffect(() => {
+    let root;
+    if (!disablePortal && initialPageInfo.path) {
+      const { path } = initialPageInfo;
+      const rootElement = document.getElementById(path);
+      const elementWithSid = rootElement;
+      const portalId = (elementWithSid == null ? void 0 : elementWithSid.sid) ? `${elementWithSid.sid}_portalId` : `${path}_portalId`;
       const portalWrapperElement = document.getElementById(portalId);
       if (!portalWrapperElement) {
         const view = document.createElement("view");
         view.id = portalId;
         rootElement == null ? void 0 : rootElement.appendChild(view);
-        return view;
+        root = view;
+      } else {
+        root = portalWrapperElement;
       }
-      return portalWrapperElement;
     }
-    return void 0;
-  }, []);
+    setRootWrapperElement(root);
+  }, [disablePortal, initialPageInfo.path]);
   return /* @__PURE__ */ React.createElement(PortalCore, __spreadProps(__spreadValues({}, props), { ref, rootElement: rootWrapperElement }));
 });
 Portal.displayName = "BuiPortal";

package/es/Portal/Portal.types.d.ts

@@ -21,6 +21,6 @@ export interface PortalCoreProps {
     /**
      * 挂载成功的回调方法
      */
-    onRootElementMouted?: (e: Element) => void;
+    onMounted?: (e: Element) => void;
 }
 export type PortalProps = Omit<PortalCoreProps, 'rootElement'>;

package/es/Portal/PortalCore.js

@@ -11,7 +11,7 @@ const PortalCore = /* @__PURE__ */ React.forwardRef(
       container,
       disablePortal = false,
       rootElement,
-      onRootElementMouted
+      onMounted
     } = props;
     const [mountNode, setMountNode] = React.useState(null);
     const handleRef = useForkRef(
@@ -27,7 +27,7 @@ const PortalCore = /* @__PURE__ */ React.forwardRef(
     useLayoutEffect(() => {
       if (mountNode && !disablePortal) {
         setRef(ref, mountNode);
-        onRootElementMouted == null ? void 0 : onRootElementMouted(mountNode);
+        onMounted == null ? void 0 : onMounted(mountNode);
         return () => {
           setRef(ref, null);
         };

package/es/Progress/Progress.js

@@ -28,6 +28,7 @@ var __objRest = (source, exclude) => {
 };
 import clsx from "clsx";
 import React from "react";
+import { useLocaleText } from "../locales";
 import "./index.css";
 const prefixCls = "bui-progress";
 function validProgress(progress) {
@@ -63,20 +64,55 @@ const handleGradient = (strokeColor) => {
   }
   return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` };
 };
+function getAriaValueText(progress, t) {
+  const validatedProgress = validProgress(progress);
+  if (validatedProgress === 0)
+    return t.notStarted;
+  if (validatedProgress < 10)
+    return t.justBegun;
+  if (validatedProgress < 25)
+    return t.gettingStarted;
+  if (validatedProgress < 50)
+    return t.inProgress;
+  if (validatedProgress < 75)
+    return t.moreThanHalfway;
+  if (validatedProgress < 90)
+    return t.nearingCompletion;
+  if (validatedProgress < 100)
+    return t.almostComplete;
+  return t.complete;
+}
 const Progress = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
+    const progressText = useLocaleText("progress");
     const _a = props, {
       className,
-      percent,
-      strokeWidth,
-      strokeColor,
-      trailColor
+      percent = 0,
+      strokeWidth: strokeWidth,
+      strokeColor: strokeColor,
+      trailColor: trailColor,
+      // 轨道颜色
+      "aria-label": ariaLabel = progressText.labelName,
+      "aria-labelledby": ariaLabelledby = "",
+      "aria-valuenow": ariaValueNow,
+      "aria-valuemin": ariaValueMin = 0,
+      "aria-valuemax": ariaValueMax = 100,
+      "aria-valuetext": ariaValueText
     } = _a, others = __objRest(_a, [
       "className",
       "percent",
+      // 当前进度百分比
       "strokeWidth",
+      // 进度条高度
       "strokeColor",
-      "trailColor"
+      // 进度条颜色或渐变
+      "trailColor",
+      "aria-label",
+      "aria-labelledby",
+      "aria-valuenow",
+      "aria-valuemin",
+      "aria-valuemax",
+      "aria-valuetext"
     ]);
     const backgroundProps = strokeColor && typeof strokeColor !== "string" ? handleGradient(strokeColor) : {
       background: strokeColor
@@ -88,7 +124,26 @@ const Progress = /* @__PURE__ */ React.forwardRef(
     const trailStyle = {
       background: trailColor || void 0
     };
-    return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: clsx(prefixCls, className), ref }, others), /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-inner`, style: trailStyle }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-bg`, style: percentStyle })));
+    const accessibilityProps = {
+      "aria-valuenow": typeof ariaValueNow === "number" ? ariaValueNow : validProgress(percent),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-valuemin": ariaValueMin,
+      "aria-valuemax": ariaValueMax,
+      "aria-valuetext": ariaValueText !== void 0 ? ariaValueText : getAriaValueText(percent, progressText),
+      role: "progressbar"
+    };
+    return (
+      // 外层容器
+      /* @__PURE__ */ React.createElement(
+        "div",
+        __spreadValues(__spreadValues({
+          className: clsx(prefixCls, className),
+          ref
+        }, accessibilityProps), others),
+        /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-inner`, style: trailStyle }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-bg`, style: percentStyle }))
+      )
+    );
   }
 );
 Progress.displayName = "BuiProgress";

package/es/Progress/Progress.types.d.ts

@@ -22,6 +22,50 @@ export type ProgressProps<D extends React.ElementType = 'div', P = {}> = Overrid
         trailColor?: string;
         /** 进度条线的宽度，单位 */
         strokeWidth?: number | string;
+        /**
+         * 无障碍功能：ARIA标签
+         */
+        'aria-label'?: string;
+        /**
+         * 无障碍功能：描述元素的详细信息
+         */
+        'aria-describedby'?: string;
+        /**
+         * 无障碍功能：是否隐藏元素
+         */
+        'aria-hidden'?: boolean;
+        /**
+         * 无障碍功能：元素在无障碍树中的细节程度
+         */
+        'aria-details'?: string;
+        /**
+         * 无障碍功能：当前元素是否处于忙碌状态
+         */
+        'aria-busy'?: boolean;
+        /**
+         * 无障碍功能：当前元素是否为只读
+         */
+        'aria-readonly'?: boolean;
+        /**
+         * 无障碍功能：当前元素是否为必填
+         */
+        'aria-required'?: boolean;
+        /**
+         * 无障碍功能：进度条的当前值
+         */
+        'aria-valuenow'?: number;
+        /**
+         * 无障碍功能：进度条的最小值
+         */
+        'aria-valuemin'?: number;
+        /**
+         * 无障碍功能：进度条的最大值
+         */
+        'aria-valuemax'?: number;
+        /**
+         * 无障碍功能：进度条的文本描述
+         */
+        'aria-valuetext'?: string;
     };
     defaultComponent: D;
 }, D>;

package/es/Progress/__tests__/fixtures/A11yDemos.d.ts

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

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

@@ -0,0 +1,62 @@
+import React from "react";
+import Progress from "../../Progress";
+const basicProgressDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Progress, { percent: 40 }));
+};
+const coloredProgressDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Progress, { percent: 40, strokeColor: "var(--bui-color-primary)" }), /* @__PURE__ */ React.createElement(Progress, { percent: 50, strokeColor: "var(--bui-color-info)" }), /* @__PURE__ */ React.createElement(Progress, { percent: 30, strokeColor: "var(--bui-color-success)" }), /* @__PURE__ */ React.createElement(Progress, { percent: 80, strokeColor: "var(--bui-color-warning)" }), /* @__PURE__ */ React.createElement(Progress, { percent: 90, strokeColor: "var(--bui-color-vip)" }));
+};
+const sizedProgressDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Progress, { percent: 60, strokeWidth: 10 }), /* @__PURE__ */ React.createElement(Progress, { percent: 60, strokeWidth: 15 }), /* @__PURE__ */ React.createElement(Progress, { percent: 60, strokeWidth: 20 }));
+};
+const gradientProgressDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Progress,
+    {
+      percent: 60,
+      strokeColor: {
+        from: "var(--bui-color-primary)",
+        to: "var(--bui-color-primary-light)"
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Progress,
+    {
+      percent: 90,
+      strokeColor: {
+        "0%": "var(--bui-color-orange)",
+        "100%": "var(--bui-color-orange-light)"
+      }
+    }
+  ));
+};
+const customTrailColorProgressDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Progress, { percent: 60, trailColor: "var(--bui-color-primary-light)" }), /* @__PURE__ */ React.createElement(Progress, { percent: 80, trailColor: "var(--bui-color-gray-light)" }));
+};
+const accessibilityProgressDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Progress, { percent: 50, "aria-label": "\u6587\u4EF6\u4E0B\u8F7D\u8FDB\u5EA6" }), /* @__PURE__ */ React.createElement(
+    Progress,
+    {
+      percent: 75,
+      "aria-label": "\u6570\u636E\u52A0\u8F7D\u8FDB\u5EA6",
+      "aria-valuetext": "\u5DF2\u5B8C\u621075%"
+    }
+  ), /* @__PURE__ */ React.createElement(Progress, { percent: 30, "aria-describedby": "progress-description" }), /* @__PURE__ */ React.createElement("span", { id: "progress-description", style: { display: "none" } }, "\u8FD9\u662F\u8FDB\u5EA6\u6761\u7684\u8BE6\u7EC6\u63CF\u8FF0\u4FE1\u606F"));
+};
+var A11yDemos_default = {
+  basicProgressDemo,
+  coloredProgressDemo,
+  sizedProgressDemo,
+  gradientProgressDemo,
+  customTrailColorProgressDemo,
+  accessibilityProgressDemo
+};
+export {
+  accessibilityProgressDemo,
+  basicProgressDemo,
+  coloredProgressDemo,
+  customTrailColorProgressDemo,
+  A11yDemos_default as default,
+  gradientProgressDemo,
+  sizedProgressDemo
+};

package/es/Radio/Radio.js

@@ -40,7 +40,7 @@ const Radio = forwardRef((props, ref) => {
   const _a = props, {
     className,
     defaultChecked = false,
-    checked,
+    checked = false,
     inputProps,
     inputRef,
     name,
@@ -66,6 +66,7 @@ const Radio = forwardRef((props, ref) => {
     "onChange",
     "children"
   ]);
+  const ariaProps = __spreadValues({}, disabled && { "aria-disabled": disabled });
   const groupContext = useContext(RadioContext);
   let validDefaultChecked = defaultChecked;
   let validChecked = checked;
@@ -86,7 +87,7 @@ const Radio = forwardRef((props, ref) => {
   }
   const radioCheckIcon = checkedIcon || /* @__PURE__ */ React.createElement(RadioButtonIcon, { checked: true });
   const radioUncheckIcon = icon || /* @__PURE__ */ React.createElement(RadioButtonIcon, { checked: false });
-  const radioDisabled = disabled !== void 0 ? disabled : groupContext == null ? void 0 : groupContext.disabled;
+  const radioDisabled = disabled !== void 0 ? disabled : (groupContext == null ? void 0 : groupContext.disabled) || false;
   const changeAction = (e, isChecked) => {
     var _a2;
     if (!groupContext) {
@@ -130,14 +131,14 @@ const Radio = forwardRef((props, ref) => {
     }),
     /* @__PURE__ */ React.createElement(
       "input",
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadValues({
         ref: inputRef,
         type: "radio",
         value,
         name,
         checked: radioChecked,
         disabled: radioDisabled
-      }, inputProps), {
+      }, ariaProps), inputProps), {
         onChange: handleChange,
         className: clsx(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
       })

package/es/Radio/RadioGroup.js

@@ -38,7 +38,7 @@ const RadioGroup = forwardRef((props, ref) => {
     defaultValue,
     value,
     onChange,
-    disabled,
+    disabled = false,
     children
   } = _a, others = __objRest(_a, [
     "className",

package/es/Radio/__tests__/fixtures/A11yDemos.d.ts

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

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

@@ -0,0 +1,22 @@
+import React from "react";
+import Radio from "../../Radio";
+const basicRadioDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement(Radio, { checked: true }), "Radio"));
+};
+const disabledRadioDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement(Radio, { disabled: true }), "Radio"));
+};
+const ariaLabelRadioDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Radio, { inputProps: { "aria-label": "\u5355\u9009\u6846" } }, "Radio"));
+};
+var A11yDemos_default = {
+  basicRadioDemo,
+  disabledRadioDemo,
+  ariaLabelRadioDemo
+};
+export {
+  ariaLabelRadioDemo,
+  basicRadioDemo,
+  A11yDemos_default as default,
+  disabledRadioDemo
+};

package/es/Rating/index.css

@@ -2,19 +2,15 @@
 page,
 xhs-page {
   --bui-rating-xsmall-font-size: var(--bui-text-size-5);
-  --bui-rating-xsmall-margin-right: 0;
-  --bui-rating-small-margin-right: 0.5px;
+  --bui-rating-xsmall-margin: 0;
+  --bui-rating-small-margin: 0 0.5px 0 0;
   --bui-rating-small-font-size: var(--bui-text-size-1);
-  --bui-rating-margin-right: 1px;
+  --bui-rating-margin: 0 1px 0 0;
   --bui-rating-font-size: var(--bui-title-size-3);
-  --bui-rating-large-margin-right: 2px;
+  --bui-rating-large-margin: 0 2px 0 0;
   --bui-rating-large-font-size: 22px;
 }
 .bui-rating {
-  --small-margin-right: var(--bui-rating-small-margin-right, 0.5px);
-  --medium-margin-right: var(--bui-rating-medium-margin-right, 1px);
-  --large-margin-right: var(--bui-rating-large-margin-right, 2px);
-  --large-font-size: var(--bui-rating-large-font-size, 22px);
   display: flex;
   flex-wrap: wrap;
   font-family: var(--bui-font-family);
@@ -32,19 +28,19 @@ xhs-page {
 }
 .bui-rating-container-xsmall {
   font-size: var(--bui-rating-xsmall-font-size);
-  margin-right: var(--bui-rating-xsmall-margin-right);
+  margin: var(--bui-rating-xsmall-margin);
 }
 .bui-rating-container-small {
   font-size: var(--bui-rating-small-font-size);
-  margin-right: var(--bui-rating-small-margin-right);
+  margin: var(--bui-rating-small-margin);
 }
 .bui-rating-container-medium {
   font-size: var(--bui-rating-font-size);
-  margin-right: var(--bui-rating-margin-right);
+  margin: var(--bui-rating-margin);
 }
 .bui-rating-container-large {
   font-size: var(--bui-rating-large-font-size);
-  margin-right: var(--bui-rating-large-margin-right);
+  margin: var(--bui-rating-large-margin);
 }
 .bui-rating-item {
   display: flex;