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

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

@@ -0,0 +1,196 @@
+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;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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, {
+  ClickableTagDemo: () => ClickableTagDemo,
+  ariaLabelTagDemo: () => ariaLabelTagDemo,
+  basicTagDemo: () => basicTagDemo,
+  complexTagListDemo: () => complexTagListDemo,
+  customColorTagDemo: () => customColorTagDemo,
+  default: () => A11yDemos_default,
+  variantTagDemo: () => variantTagDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Tag = __toESM(require("../../Tag"));
+const basicTagDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Tag.default, { color: "primary" }, "\u4E3B\u8981\u6807\u7B7E"), /* @__PURE__ */ import_react.default.createElement(import_Tag.default, { color: "success" }, "\u6210\u529F\u6807\u7B7E"), /* @__PURE__ */ import_react.default.createElement(import_Tag.default, { color: "warning" }, "\u8B66\u544A\u6807\u7B7E"), /* @__PURE__ */ import_react.default.createElement(import_Tag.default, { color: "danger" }, "\u5371\u9669\u6807\u7B7E"), /* @__PURE__ */ import_react.default.createElement(import_Tag.default, { color: "info" }, "\u4FE1\u606F\u6807\u7B7E"), /* @__PURE__ */ import_react.default.createElement(import_Tag.default, { color: "neutral" }, "\u4E2D\u6027\u6807\u7B7E"));
+};
+const variantTagDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Tag.default, { variant: "filled", color: "primary" }, "\u586B\u5145\u6807\u7B7E"), /* @__PURE__ */ import_react.default.createElement(import_Tag.default, { variant: "outlined", color: "success" }, "\u8FB9\u6846\u6807\u7B7E"), /* @__PURE__ */ import_react.default.createElement(import_Tag.default, { variant: "subtle", color: "warning" }, "\u8F7B\u91CF\u6807\u7B7E"));
+};
+const ClickableTagDemo = () => {
+  const [clicked, setClicked] = (0, import_react.useState)([]);
+  const handleTagClick = (tag) => {
+    setClicked(
+      (prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
+    );
+    console.log(`\u70B9\u51FB\u4E86\u6807\u7B7E: ${tag}`);
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Tag.default,
+    {
+      color: "primary",
+      onClick: () => handleTagClick("tag1"),
+      style: {
+        opacity: clicked.includes("tag1") ? 0.6 : 1,
+        margin: "4px"
+      }
+    },
+    "\u53EF\u70B9\u51FB\u6807\u7B7E 1"
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_Tag.default,
+    {
+      color: "success",
+      onClick: () => handleTagClick("tag2"),
+      style: {
+        opacity: clicked.includes("tag2") ? 0.6 : 1,
+        margin: "4px"
+      }
+    },
+    "\u53EF\u70B9\u51FB\u6807\u7B7E 2"
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_Tag.default,
+    {
+      color: "warning",
+      onClick: () => handleTagClick("tag3"),
+      style: {
+        opacity: clicked.includes("tag3") ? 0.6 : 1,
+        margin: "4px"
+      }
+    },
+    "\u53EF\u70B9\u51FB\u6807\u7B7E 3"
+  ), clicked.length > 0 && /* @__PURE__ */ import_react.default.createElement("p", null, "\u5DF2\u70B9\u51FB\u7684\u6807\u7B7E: ", clicked.join(", ")));
+};
+const customColorTagDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Tag.default, { htmlColor: "#ff6b6b", variant: "filled" }, "\u81EA\u5B9A\u4E49\u7EA2\u8272"), /* @__PURE__ */ import_react.default.createElement(import_Tag.default, { htmlColor: "#4ecdc4", variant: "outlined" }, "\u81EA\u5B9A\u4E49\u9752\u8272"), /* @__PURE__ */ import_react.default.createElement(import_Tag.default, { htmlColor: "#45b7d1", variant: "subtle" }, "\u81EA\u5B9A\u4E49\u84DD\u8272"), /* @__PURE__ */ import_react.default.createElement(import_Tag.default, { htmlColor: "rgb(255, 193, 7)", variant: "filled" }, "RGB \u9EC4\u8272"));
+};
+const ariaLabelTagDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Tag.default,
+    {
+      color: "primary",
+      onClick: () => {
+        console.log("\u5220\u9664\u7528\u6237");
+      },
+      "aria-label": "\u5220\u9664\u7528\u6237\u6807\u7B7E"
+    },
+    "\u7528\u6237"
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_Tag.default,
+    {
+      color: "success",
+      onClick: () => {
+        console.log("\u7F16\u8F91\u9879\u76EE");
+      },
+      "aria-label": "\u7F16\u8F91\u9879\u76EE\u6807\u7B7E"
+    },
+    "\u9879\u76EE"
+  ), /* @__PURE__ */ import_react.default.createElement(import_Tag.default, { color: "info", "aria-label": "\u53EA\u8BFB\u7684\u8BBE\u7F6E\u4FE1\u606F" }, "\u8BBE\u7F6E"));
+};
+const ComplexTagListDemo = () => {
+  const [tags, setTags] = (0, import_react.useState)([
+    { id: 1, name: "React", active: true, color: "primary" },
+    { id: 2, name: "Vue", active: false, color: "success" },
+    { id: 3, name: "Angular", active: false, color: "warning" },
+    { id: 4, name: "Svelte", active: true, color: "info" },
+    { id: 5, name: "TypeScript", active: true, color: "danger" }
+  ]);
+  const toggleTag = (id) => {
+    setTags(
+      (prevTags) => prevTags.map(
+        (tag) => tag.id === id ? __spreadProps(__spreadValues({}, tag), { active: !tag.active }) : tag
+      )
+    );
+  };
+  const activeTags = tags.filter((tag) => tag.active);
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "\u6280\u672F\u6807\u7B7E\u9009\u62E9\u5668"), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: "10px" } }, tags.map((tag) => /* @__PURE__ */ import_react.default.createElement(
+    import_Tag.default,
+    {
+      key: tag.id,
+      color: tag.color,
+      variant: tag.active ? "filled" : "outlined",
+      onClick: () => toggleTag(tag.id),
+      "aria-label": `${tag.active ? "\u53D6\u6D88\u9009\u62E9" : "\u9009\u62E9"} ${tag.name} \u6280\u672F\u6807\u7B7E`,
+      style: {
+        margin: "2px",
+        cursor: "pointer",
+        opacity: tag.active ? 1 : 0.7
+      }
+    },
+    tag.name
+  ))), /* @__PURE__ */ import_react.default.createElement("p", null, "\u5DF2\u9009\u62E9\u7684\u6280\u672F:", " ", activeTags.length > 0 ? activeTags.map((tag) => tag.name).join(", ") : "\u65E0"), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        setTags(
+          (prevTags) => prevTags.map((tag) => __spreadProps(__spreadValues({}, tag), { active: false }))
+        );
+      }
+    },
+    "\u6E05\u9664\u6240\u6709\u9009\u62E9"
+  ));
+};
+const complexTagListDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(ComplexTagListDemo, null);
+};
+var A11yDemos_default = {
+  basicTagDemo,
+  variantTagDemo,
+  ClickableTagDemo,
+  customColorTagDemo,
+  ariaLabelTagDemo,
+  complexTagListDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ClickableTagDemo,
+  ariaLabelTagDemo,
+  basicTagDemo,
+  complexTagListDemo,
+  customColorTagDemo,
+  variantTagDemo
+});

package/dist/TextArea/TextArea.js

@@ -62,11 +62,13 @@ module.exports = __toCommonJS(TextArea_exports);
 var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_locales = require("../locales");
 var import_index = require("./index.css");
 const prefixCls = "bui-textarea";
 const DEFAULT_ROWS = 2;
 const TextArea = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
+    const textareaText = (0, import_locales.useLocaleText)("textarea");
     const _a = props, {
       className,
       value,
@@ -77,10 +79,19 @@ const TextArea = /* @__PURE__ */ import_react.default.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",
@@ -92,10 +103,20 @@ const TextArea = /* @__PURE__ */ import_react.default.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] = (0, import_utils.useValue)({
@@ -110,7 +131,7 @@ const TextArea = /* @__PURE__ */ import_react.default.forwardRef(
       if (autoFocus && internalRef.current) {
         internalRef.current.focus();
       }
-    }, [internalRef]);
+    }, [autoFocus]);
     const handleAutoHeight = (height) => {
       if (typeof autoSize === "object") {
         const { maxHeight, minHeight } = autoSize;
@@ -140,8 +161,7 @@ const TextArea = /* @__PURE__ */ import_react.default.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;
@@ -151,12 +171,29 @@ const TextArea = /* @__PURE__ */ import_react.default.forwardRef(
         textArea.style.height = `${textAreaHeight}px`;
       }
     };
+    const [ariaDescription, setAriaDescription] = (0, import_react.useState)("");
     let nativeProps = {
-      [import_utils.isMini ? "maxlength" : "maxLength"]: maxLength != null ? maxLength : -1
+      [import_utils.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 (import_utils.isMini) {
       nativeProps = __spreadProps(__spreadValues({}, nativeProps), {
         onLineChange: handleLineChange,
+        // 小程序行高变化事件
         placeholderClass: "bui-mini-placeholder",
         autoFocus,
         focus: autoFocus
@@ -192,6 +229,12 @@ const TextArea = /* @__PURE__ */ import_react.default.forwardRef(
           },
           onInput: (e) => {
             var _a2;
+            if (showCount) {
+              const remaining = maxLength - e.target.value.length;
+              setAriaDescription(
+                `${textareaText.remaining} ${remaining} ${textareaText.characters}`
+              );
+            }
             if (import_utils.isMini) {
               triggerChange(e, e.target.value);
             }

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

@@ -0,0 +1,91 @@
+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, {
+  ariaLabelTextAreaDemo: () => ariaLabelTextAreaDemo,
+  autoFocusTextAreaDemo: () => autoFocusTextAreaDemo,
+  basicTextAreaDemo: () => basicTextAreaDemo,
+  default: () => A11yDemos_default,
+  requiredAndReadonlyTextAreaDemo: () => requiredAndReadonlyTextAreaDemo,
+  showCountTextAreaDemo: () => showCountTextAreaDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_TextArea = __toESM(require("../../TextArea"));
+const basicTextAreaDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_TextArea.default, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9" }));
+};
+const ariaLabelTextAreaDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_TextArea.default, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", "aria-label": "\u7528\u6237\u8BC4\u8BBA\u8F93\u5165\u6846" }));
+};
+const requiredAndReadonlyTextAreaDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_TextArea.default, { placeholder: "\u5FC5\u586B\u9879", "aria-required": true }), /* @__PURE__ */ import_react.default.createElement(
+    import_TextArea.default,
+    {
+      placeholder: "\u53EA\u8BFB\u9879",
+      "aria-readonly": true,
+      defaultValue: "\u8FD9\u662F\u53EA\u8BFB\u5185\u5BB9"
+    }
+  ));
+};
+const showCountTextAreaDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_TextArea.default,
+    {
+      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__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_TextArea.default,
+    {
+      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
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ariaLabelTextAreaDemo,
+  autoFocusTextAreaDemo,
+  basicTextAreaDemo,
+  requiredAndReadonlyTextAreaDemo,
+  showCountTextAreaDemo
+});

package/dist/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/dist/ThemeProvider/ThemeProvider.types.js

@@ -2,10 +2,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 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))
@@ -16,12 +12,4 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ThemeProvider_types_exports = {};
-__export(ThemeProvider_types_exports, {
-  BaseLang: () => import_base.BaseLang
-});
 module.exports = __toCommonJS(ThemeProvider_types_exports);
-var import_base = require("../locales/base");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  BaseLang
-});