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

package/dist/Alert/Alert.js

@@ -119,7 +119,8 @@ const AlertAction = (props) => {
     {
       className: `${prefixCls}-action`,
       color,
-      onClick: onClose
+      onClick: onClose,
+      "aria-label": "\u5173\u95ED\u6309\u94AE"
     },
     /* @__PURE__ */ import_react.default.createElement(import_icons.CloseIcon, null)
   );

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

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

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

@@ -0,0 +1,143 @@
+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, {
+  actionAlertDemo: () => actionAlertDemo,
+  basicAlertDemo: () => basicAlertDemo,
+  complexInteractionAlertDemo: () => complexInteractionAlertDemo,
+  default: () => A11yDemos_default,
+  multipleTypeAlertDemo: () => multipleTypeAlertDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Alert = __toESM(require("../../Alert"));
+const basicAlertDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Alert.default,
+    {
+      color: "info",
+      onClose: () => {
+        console.log("\u5173\u95ED info alert");
+      }
+    },
+    "\u8FD9\u662F\u4E00\u4E2A\u57FA\u7840\u7684 Alert \u7EC4\u4EF6\u793A\u4F8B"
+  ));
+};
+const multipleTypeAlertDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Alert.default,
+    {
+      color: "info",
+      onClose: () => {
+        console.log("\u5173\u95ED info alert");
+      }
+    },
+    "\u4FE1\u606F\u63D0\u793A"
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_Alert.default,
+    {
+      color: "success",
+      onClose: () => {
+        console.log("\u5173\u95ED success alert");
+      }
+    },
+    "\u6210\u529F\u63D0\u793A"
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_Alert.default,
+    {
+      color: "warning",
+      onClose: () => {
+        console.log("\u5173\u95ED warning alert");
+      }
+    },
+    "\u8B66\u544A\u63D0\u793A"
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_Alert.default,
+    {
+      color: "danger",
+      onClose: () => {
+        console.log("\u5173\u95ED danger alert");
+      }
+    },
+    "\u9519\u8BEF\u63D0\u793A"
+  ));
+};
+const actionAlertDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Alert.default,
+    {
+      color: "info",
+      action: /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            console.log("\u6267\u884C\u64CD\u4F5C");
+          }
+        },
+        "\u6267\u884C\u64CD\u4F5C"
+      ),
+      onClose: () => {
+        console.log("\u5173\u95ED alert");
+      }
+    },
+    "\u8FD9\u662F\u4E00\u4E2A\u5E26\u64CD\u4F5C\u6309\u94AE\u7684 Alert \u7EC4\u4EF6"
+  ));
+};
+const complexInteractionAlertDemo = () => {
+  const ComplexInteractionAlertDemo = () => {
+    const [showAlert, setShowAlert] = import_react.default.useState(true);
+    if (!showAlert) {
+      return /* @__PURE__ */ import_react.default.createElement("button", { type: "button", onClick: () => setShowAlert(true) }, "\u91CD\u65B0\u663E\u793A Alert");
+    }
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+      import_Alert.default,
+      {
+        color: "warning",
+        onClose: () => {
+          setShowAlert(false);
+        }
+      },
+      "\u8FD9\u662F\u4E00\u4E2A\u53EF\u4EE5\u5173\u95ED\u7684 Alert \u7EC4\u4EF6\uFF0C\u5173\u95ED\u540E\u4F1A\u663E\u793A\u91CD\u65B0\u663E\u793A\u6309\u94AE"
+    ));
+  };
+  return /* @__PURE__ */ import_react.default.createElement(ComplexInteractionAlertDemo, null);
+};
+var A11yDemos_default = {
+  basicAlertDemo,
+  multipleTypeAlertDemo,
+  actionAlertDemo,
+  complexInteractionAlertDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  actionAlertDemo,
+  basicAlertDemo,
+  complexInteractionAlertDemo,
+  multipleTypeAlertDemo
+});

package/dist/Alert/index.css

@@ -5,8 +5,8 @@ xhs-page {
   --bui-alert-padding: 8px;
   --bui-alert-line-height: 16px;
   --bui-alert-default-icon-font-size: 15px;
-  --bui-alert-action-margin-left: 16px;
-  --bui-alert-icon-margin-right: var(--bui-spacing-xs);
+  --bui-alert-action-margin: 0 0 0 16px;
+  --bui-alert-icon-margin: 0 var(--bui-spacing-xs) 0 0;
   --bui-alert-icon-font-size: var(--bui-title-size-4);
 }
 .bui-alert {
@@ -66,7 +66,7 @@ xhs-page {
 }
 .bui-alert-action {
   flex-shrink: 0;
-  margin-left: var(--bui-alert-action-margin-left);
+  margin: var(--bui-alert-action-margin);
   word-wrap: keep-all;
   font-size: var(--bui-text-size-3);
   cursor: pointer;
@@ -78,7 +78,7 @@ xhs-page {
 .bui-alert-icon {
   display: flex;
   align-items: center;
-  margin-right: var(--bui-alert-icon-margin-right);
+  margin: var(--bui-alert-icon-margin);
   vertical-align: middle;
   font-size: var(--bui-alert-icon-font-size);
   cursor: pointer;

package/dist/Avatar/AvatarGroup.css

@@ -1,12 +1,12 @@
 :root,
 page,
 xhs-page {
-  --bui-avatar-group-xsmall-margin-left: -5px;
-  --bui-avatar-group-small-margin-left: -9px;
+  --bui-avatar-group-xsmall-margin: 0 0 0 -5px;
+  --bui-avatar-group-small-margin: 0 0 0 -9px;
   --bui-avatar-group-small-box-shadow: 0 0 0 1px var(--bui-color-bg-view);
-  --bui-avatar-group-medium-margin-left: -13px;
+  --bui-avatar-group-medium-margin: 0 0 0 -13px;
   --bui-avatar-group-medium-box-shadow: 0 0 0 2px var(--bui-color-bg-view);
-  --bui-avatar-group-large-margin-left: -21px;
+  --bui-avatar-group-large-margin: 0 0 0 -21px;
   --bui-avatar-group-large-box-shadow: 0 0 0 3px var(--bui-color-bg-view);
 }
 .bui-avatar-group {
@@ -20,23 +20,23 @@ xhs-page {
   color: var(--bui-color-fg-default);
 }
 .bui-avatar-group .bui-avatar-xsmall:not(:first-child) {
-  margin-left: var(--bui-avatar-group-xsmall-margin-left);
+  margin: var(--bui-avatar-group-xsmall-margin);
 }
 .bui-avatar-group .bui-avatar-small {
   box-shadow: var(--bui-avatar-group-small-box-shadow);
 }
 .bui-avatar-group .bui-avatar-small:not(:first-child) {
-  margin-left: var(--bui-avatar-group-small-margin-left);
+  margin: var(--bui-avatar-group-small-margin);
 }
 .bui-avatar-group .bui-avatar-large {
   box-shadow: var(--bui-avatar-group-large-box-shadow);
 }
 .bui-avatar-group .bui-avatar-large:not(:first-child) {
-  margin-left: var(--bui-avatar-group-large-margin-left);
+  margin: var(--bui-avatar-group-large-margin);
 }
 .bui-avatar-group .bui-avatar-medium {
   box-shadow: var(--bui-avatar-group-medium-box-shadow);
 }
 .bui-avatar-group .bui-avatar-medium:not(:first-child) {
-  margin-left: var(--bui-avatar-group-medium-margin-left);
+  margin: var(--bui-avatar-group-medium-margin);
 }

package/dist/Avatar/index.css

@@ -52,12 +52,12 @@ xhs-page {
 :root,
 page,
 xhs-page {
-  --bui-avatar-group-xsmall-margin-left: -5px;
-  --bui-avatar-group-small-margin-left: -9px;
+  --bui-avatar-group-xsmall-margin: 0 0 0 -5px;
+  --bui-avatar-group-small-margin: 0 0 0 -9px;
   --bui-avatar-group-small-box-shadow: 0 0 0 1px var(--bui-color-bg-view);
-  --bui-avatar-group-medium-margin-left: -13px;
+  --bui-avatar-group-medium-margin: 0 0 0 -13px;
   --bui-avatar-group-medium-box-shadow: 0 0 0 2px var(--bui-color-bg-view);
-  --bui-avatar-group-large-margin-left: -21px;
+  --bui-avatar-group-large-margin: 0 0 0 -21px;
   --bui-avatar-group-large-box-shadow: 0 0 0 3px var(--bui-color-bg-view);
 }
 .bui-avatar-group {
@@ -71,23 +71,23 @@ xhs-page {
   color: var(--bui-color-fg-default);
 }
 .bui-avatar-group .bui-avatar-xsmall:not(:first-child) {
-  margin-left: var(--bui-avatar-group-xsmall-margin-left);
+  margin: var(--bui-avatar-group-xsmall-margin);
 }
 .bui-avatar-group .bui-avatar-small {
   box-shadow: var(--bui-avatar-group-small-box-shadow);
 }
 .bui-avatar-group .bui-avatar-small:not(:first-child) {
-  margin-left: var(--bui-avatar-group-small-margin-left);
+  margin: var(--bui-avatar-group-small-margin);
 }
 .bui-avatar-group .bui-avatar-large {
   box-shadow: var(--bui-avatar-group-large-box-shadow);
 }
 .bui-avatar-group .bui-avatar-large:not(:first-child) {
-  margin-left: var(--bui-avatar-group-large-margin-left);
+  margin: var(--bui-avatar-group-large-margin);
 }
 .bui-avatar-group .bui-avatar-medium {
   box-shadow: var(--bui-avatar-group-medium-box-shadow);
 }
 .bui-avatar-group .bui-avatar-medium:not(:first-child) {
-  margin-left: var(--bui-avatar-group-medium-margin-left);
+  margin: var(--bui-avatar-group-medium-margin);
 }

package/dist/Backdrop/Backdrop.js

@@ -66,8 +66,8 @@ const Backdrop = /* @__PURE__ */ import_react.default.forwardRef(
     const _a = props, {
       children,
       className,
-      invisible,
-      open,
+      invisible = false,
+      open = false,
       transitionDuration
     } = _a, others = __objRest(_a, [
       "children",
@@ -79,6 +79,7 @@ const Backdrop = /* @__PURE__ */ import_react.default.forwardRef(
     return /* @__PURE__ */ import_react.default.createElement(import_Fade.default, __spreadValues({ in: open, timeout: transitionDuration }, others), /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
+        "aria-hidden": "true",
         className: (0, import_clsx.default)(
           prefixCls,
           {

package/dist/Backdrop/Backdrop.types.d.ts

@@ -4,6 +4,10 @@ import { FadeProps } from '../Fade/Fade.types';
 import { TransitionProps } from '../Transition';
 export interface BackdropTypeMap<D extends React.ElementType = 'div', P = {}> {
     props: P & {
+        /**
+         * 是否展示
+         * - default:false
+         */
         open?: boolean;
         /**
          * 是否透明不可见

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const basicBackdropDemo: () => React.JSX.Element;
+export declare const invisibleBackdropDemo: () => React.JSX.Element;
+declare const _default: {
+    basicBackdropDemo: () => React.JSX.Element;
+    invisibleBackdropDemo: () => React.JSX.Element;
+};
+export default _default;

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

@@ -0,0 +1,51 @@
+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, {
+  basicBackdropDemo: () => basicBackdropDemo,
+  default: () => A11yDemos_default,
+  invisibleBackdropDemo: () => invisibleBackdropDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Backdrop = __toESM(require("../../Backdrop"));
+const basicBackdropDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(import_Backdrop.default, { open: true });
+};
+const invisibleBackdropDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(import_Backdrop.default, { open: true, invisible: true });
+};
+var A11yDemos_default = {
+  basicBackdropDemo,
+  invisibleBackdropDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  basicBackdropDemo,
+  invisibleBackdropDemo
+});

package/dist/Backdrop/index.css

@@ -1,7 +1,7 @@
 :root,
 page,
 xhs-page {
-  --bui-backdrop-background-color: rgba(0, 0, 0, 0.68);
+  --bui-backdrop-bg-color: rgba(0, 0, 0, 0.68);
 }
 .bui-backdrop {
   position: fixed;
@@ -12,7 +12,7 @@ xhs-page {
   bottom: 0;
   left: 0;
   top: 0;
-  background-color: var(--bui-backdrop-background-color);
+  background-color: var(--bui-backdrop-bg-color);
 }
 .bui-backdrop-invisible {
   background-color: transparent;

package/dist/Badge/Badge.js

@@ -58,47 +58,74 @@ __export(Badge_exports, {
 module.exports = __toCommonJS(Badge_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_useBadgeDisplay = require("./hooks/useBadgeDisplay");
+var import_useBadgeA11y = require("./hooks/useBadgeA11y");
 var import_index = require("./index.css");
 const prefixCls = "bui-badge";
 const Badge = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
     className,
-    onClick,
     children,
     content,
     color = "primary",
-    maxCount,
+    max,
+    showZero = false,
+    invisible = false,
     variant = "contained",
-    type = "standard"
+    type = "standard",
+    // 无障碍功能相关属性
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    role = "status",
+    "aria-hidden": ariaHidden = false
   } = _a, others = __objRest(_a, [
     "className",
-    "onClick",
     "children",
     "content",
     "color",
-    "maxCount",
+    "max",
+    "showZero",
+    "invisible",
     "variant",
-    "type"
+    "type",
+    "aria-label",
+    "aria-describedby",
+    "role",
+    "aria-hidden"
   ]);
-  const displayValue = Number(content) > Number(maxCount) ? `${maxCount}+` : type !== "dot" && content;
+  const { displayValue, shouldShowBadge } = (0, import_useBadgeDisplay.useBadgeDisplay)({
+    content,
+    max,
+    showZero,
+    type
+  });
+  const { ariaAttributes } = (0, import_useBadgeA11y.useBadgeA11y)({
+    displayValue,
+    type,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    role,
+    "aria-hidden": ariaHidden
+  });
+  if (invisible)
+    return null;
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     __spreadValues({
       className: (0, import_clsx.default)(`${prefixCls}`, className, {
         [`${prefixCls}-position`]: children
       }),
-      onClick,
       ref
     }, others),
-    (content || type === "dot") && /* @__PURE__ */ import_react.default.createElement(
+    shouldShowBadge && /* @__PURE__ */ import_react.default.createElement(
       "div",
-      {
+      __spreadValues({
         className: (0, import_clsx.default)(
           `${prefixCls}-${color}`,
           `${prefixCls}-${variant}`,
           `${prefixCls}-${type}`
         )
-      },
+      }, ariaAttributes),
       displayValue
     ),
     children

package/dist/Badge/Badge.types.d.ts

@@ -13,7 +13,16 @@ export type BadgeProps<D extends React.ElementType = 'div', P = {}> = OverridePr
         /**
          * 最大值
          */
-        maxCount?: number;
+        max?: number;
+        /**
+         * content为0时是否展示
+         */
+        showZero?: boolean;
+        /**
+         * 是否隐藏badge
+         * @default false
+         */
+        invisible?: boolean;
         /**
          *徽章类型
          */
@@ -22,6 +31,26 @@ export type BadgeProps<D extends React.ElementType = 'div', P = {}> = OverridePr
          * 徽章形状
          */
         type?: 'dot' | 'standard' | 'bubble';
+        /**
+         * 无障碍功能：为Badge提供可访问的标签
+         * 如果不提供，将根据content和type自动生成
+         */
+        'aria-label'?: string;
+        /**
+         * 无障碍功能：引用描述此Badge的元素ID
+         */
+        'aria-describedby'?: string;
+        /**
+         * 无障碍功能：Badge的角色
+         * @default 'status'
+         */
+        role?: 'status' | 'img' | 'presentation';
+        /**
+         * 无障碍功能：是否对屏幕阅读器隐藏Badge
+         * 当为true时，Badge将被屏幕阅读器忽略
+         * @default false
+         */
+        'aria-hidden'?: boolean;
     };
     defaultComponent: D;
 }, D>;

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

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