Skip to content
Lenso UI

v3.2.3

补丁版本：为 ComboBox 添加多选支持，采用逻辑 CSS 属性改进 RTL 支持，将 tailwind-variants 升级到 3.3.0，并修复 ScrollShadow、Spinner、InputOTP、Table 以及 accent Button 的样式问题。

2026 年 7 月 30 日

补丁版本：ComboBox 现已支持多选，样式采用逻辑 CSS 属性以更好地支持 RTL，tailwind-variants 升级到 3.3.0，并修复了 ScrollShadow、Spinner、InputOTP、Table 以及 accent Button 焦点样式的多个问题。

安装

升级到最新版本：

npm i @lenso/tokens@latest @lenso/ui@latest

正在使用 AI 助手？ 对它说「Hey Cursor，把 HeroUI 升级到最新版本」。它会自动对比版本并应用必要变更。了解更多请参阅 HeroUI MCP 服务器。

新功能

ComboBox

ComboBox 现已支持选择多个选项。设置 selectionMode="multiple"，使用 ComboBox.Value 渲染已选项，并同样为内部 ListBox 传入 selectionMode="multiple"。选择通过 value / defaultValue（Key[]）属性和 onChange 处理函数进行控制。

  • 多选：通过 selectionMode="multiple" 选择多个选项，并使用 ComboBox.Value 展示已选项 (#6714)

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// HeroUI v3.2.6, Apache-2.0. Native chips preserve keyboard removal and focus.import { ComboBox } from "@lenso/ui";import { useId } from "react";import * as stylex from "@stylexjs/stylex";import {  animals,  animalLabel,  animalValue,  sameAnimal,  AnimalOptions,  type Animal,  useFocusMenu,} from "./shared";import { styles } from "./styles.stylex";
export function MultipleSelection() {  const id = useId();  const menu = useFocusMenu();  return (    <div {...stylex.props(styles.field)}>      <ComboBox        {...menu.root}        multiple        items={animals}        itemToStringLabel={animalLabel}        itemToStringValue={animalValue}        isItemEqualToValue={sameAnimal}      >        <ComboBox.Label htmlFor={id}>Favorite Animals</ComboBox.Label>        <ComboBox.InputGroup>          <ComboBox.Input {...menu.input} id={id} placeholder="Search animals..." />          <ComboBox.Trigger aria-label="Show animals">            <ComboBox.Indicator />          </ComboBox.Trigger>        </ComboBox.InputGroup>        <ComboBox.Chips>          <ComboBox.Value>            {(selected: Animal[]) =>              selected.length === 0 ? (                <span {...stylex.props(styles.muted)}>No animals selected</span>              ) : (                selected.map((animal) => (                  <ComboBox.Chip key={animal.id}>                    {animal.name}                    <ComboBox.ChipRemove aria-label={`Remove ${animal.name}`}>                      ×                    </ComboBox.ChipRemove>                  </ComboBox.Chip>                ))              )            }          </ComboBox.Value>        </ComboBox.Chips>        <AnimalOptions />      </ComboBox>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

错误修复

  • ScrollShadow：在末端检测中兼容小数滚动位置，使底部阴影在高分辨率屏幕上能正确隐藏 (#6710)。
  • RTL：在样式中采用逻辑 CSS 属性，以更好地支持从右到左布局 (#6699)。
  • Button：恢复 accent 按钮的焦点轮廓间隙 (#6724)。
  • Spinner：将无障碍名称从隐藏的 SVG 移到根元素的 status role 上 (#6721)。
  • InputOTP：避免 OTP 输入格在窄容器中溢出 (#6706)。
  • Table：将可排序列的指示图标居中 (#6705)。
  • Collections：修复 Tabs、TagGroup、Select、Autocomplete 和 ComboBox 的 React Aria 集合构建器兼容性问题 (#6727)。
  • Icons：从装饰性的 aria-hidden 图标中移除永远不会被朗读的 aria-label，使无障碍检查与审计保持整洁 (#6741)。

依赖

  • tailwind-variants：升级到 [email protected] (#6733)。
  • React Aria：将 react-aria、react-aria-components 以及 @react-aria/* 工具包移至 peerDependencies，使使用方解析到唯一共享副本而非内置副本 (#6744)。
  • Node.js：要求 Node.js >= 22.x。

链接

贡献者

感谢所有为本次发布做出贡献的人！

HeroUI contributors