@rainbow-oh/yee-c 0.14.6 → 0.15.0

package/src/TableSelect/index.zh-CN.md

@@ -31,45 +31,45 @@ toc: 'content'
 
 ### TableSelectProps
 
-| 属性名 | 类型 | 描述 | 默认值 |
-| --- | --- | --- | --- |
-| prefixCls | `string` | 自定义类名前缀 | `'yee-table-select'` |
-| className | `string` | 根元素类名 | - |
-| style | `React.CSSProperties` | 根元素行内样式 | - |
-| rowKey | `string \| ((record: any) => string)` | 数据的唯一标识字段名 | `'id'` |
-| columns | `Array<any>` | 表格列的配置信息 | - |
-| dataSource | `Array<InDataType>` | 数据源 | - |
-| rowSelection | `RowSelectionType` | 行选择配置 | - |
-| value | `SelectionKeyType \| SelectionKeyType[]` | 受控值 | - |
-| defaultValue | `SelectionKeyType \| SelectionKeyType[]` | 默认值 | - |
-| disabled | `boolean` | 是否禁用 | - |
-| loading | `boolean` | 是否处于加载状态，加载时显示灰色加载图标 | `false` |
-| placement | `'bottomLeft' \| 'topLeft'` | 弹出层位置 | `'bottomLeft'` |
-| searchable | `boolean` | 是否可搜索 | `true` |
-| searchOnInput | `boolean` | 是否边输入边搜索 | `true` |
-| allowClear | `boolean` | 是否允许清除 | `true` |
-| closable | `boolean` | 标签是否可关闭 | `true` |
-| placeholder | `string` | 占位符文本 | - |
-| optionLabelProp | `string \| ((option: InDataType) => string)` | 选项标签属性 | `'name'` |
-| type | `'radio' \| 'checkbox'` | 选择类型 | `'radio'` |
-| options | `TagType[]` | 预设选项 | - |
-| isShowFilter | `boolean` | 是否显示过滤器(多选时 All/Selected) | `true` |
-| containerId | `string` | 容器 ID(用于弹出层挂载) | - |
-| io | `'out'` | 输入方向 | - |
-| onChange | `(keys, data, checked, changeData) => void` | 选中变更回调 | - |
-| onSearch | `(value: string, e?) => void` | 搜索回调 | - |
-| onOpenChange | `(open: boolean) => void` | 弹出层状态变更回调 | - |
+| 属性名          | 类型                                                  | 描述                                     | 默认值               |
+| --------------- | ----------------------------------------------------- | ---------------------------------------- | -------------------- |
+| prefixCls       | `string`                                              | 自定义类名前缀                           | `'yee-table-select'` |
+| className       | `string`                                              | 根元素类名                               | -                    |
+| style           | `React.CSSProperties`                                 | 根元素行内样式                           | -                    |
+| rowKey          | `string \| ((record: any) => string)`                 | 数据的唯一标识字段名                     | `'id'`               |
+| columns         | `Array<any>`                                          | 表格列的配置信息                         | -                    |
+| dataSource      | `Array<TableSelectDataType>`                          | 数据源                                   | -                    |
+| rowSelection    | `RowSelectionType`                                    | 行选择配置                               | -                    |
+| value           | `SelectionKeyType \| SelectionKeyType[]`              | 受控值                                   | -                    |
+| defaultValue    | `SelectionKeyType \| SelectionKeyType[]`              | 默认值                                   | -                    |
+| disabled        | `boolean`                                             | 是否禁用                                 | -                    |
+| loading         | `boolean`                                             | 是否处于加载状态，加载时显示灰色加载图标 | `false`              |
+| placement       | `'bottomLeft' \| 'topLeft'`                           | 弹出层位置                               | `'bottomLeft'`       |
+| searchable      | `boolean`                                             | 是否可搜索                               | `true`               |
+| searchOnInput   | `boolean`                                             | 是否边输入边搜索                         | `true`               |
+| allowClear      | `boolean`                                             | 是否允许清除                             | `true`               |
+| closable        | `boolean`                                             | 标签是否可关闭                           | `true`               |
+| placeholder     | `string`                                              | 占位符文本                               | -                    |
+| optionLabelProp | `string \| ((option: TableSelectDataType) => string)` | 选项标签属性                             | `'name'`             |
+| type            | `'radio' \| 'checkbox'`                               | 选择类型                                 | `'radio'`            |
+| options         | `TagType[]`                                           | 预设选项                                 | -                    |
+| isShowFilter    | `boolean`                                             | 是否显示过滤器(多选时 All/Selected)      | `true`               |
+| containerId     | `string`                                              | 容器 ID(用于弹出层挂载)                  | -                    |
+| io              | `'out'`                                               | 输入方向                                 | -                    |
+| onChange        | `(keys, data, checked, changeData) => void`           | 选中变更回调                             | -                    |
+| onSearch        | `(value: string, e?) => void`                         | 搜索回调                                 | -                    |
+| onOpenChange    | `(open: boolean) => void`                             | 弹出层状态变更回调                       | -                    |
 
 ### RowSelectionType
 
 表格行选择配置，继承自 Table 组件的 RowSelectionType。
 
-| 属性名 | 类型 | 描述 | 默认值 |
-| --- | --- | --- | --- |
-| type | `'radio' \| 'checkbox'` | 单选/多选 | - |
-| selectedRowKeys | `Array<SelectionKeyType> \| SelectionKeyType` | (受控)选中的行keys | - |
-| defaultSelectedRowKeys | `Array<SelectionKeyType> \| SelectionKeyType` | 默认选中的行keys | - |
-| onChange | `(selectedRowKeys, selectedRows) => void` | 选中项发生变化时的回调 | - |
+| 属性名                 | 类型                                          | 描述                   | 默认值 |
+| ---------------------- | --------------------------------------------- | ---------------------- | ------ |
+| type                   | `'radio' \| 'checkbox'`                       | 单选/多选              | -      |
+| selectedRowKeys        | `Array<SelectionKeyType> \| SelectionKeyType` | (受控)选中的行keys     | -      |
+| defaultSelectedRowKeys | `Array<SelectionKeyType> \| SelectionKeyType` | 默认选中的行keys       | -      |
+| onChange               | `(selectedRowKeys, selectedRows) => void`     | 选中项发生变化时的回调 | -      |
 
 ## 方法
 
@@ -77,17 +77,20 @@ toc: 'content'
 
 InternalTable 组件是 TableSelect 的内部组件，通常不需要直接使用。
 
-| 属性名 | 类型 | 描述 | 默认值 |
-| --- | --- | --- | --- |
-| rowKey | `string` | 数据的唯一标识字段名 | - |
-| columns | `Array<any>` | 表格列的配置信息 | - |
-| dataSource | `Array<InDataType>` | 数据源 | - |
-| rowSelection | `RowSelectionType` | 行选择配置 | - |
-| type | `'radio' \| 'checkbox'` | 选择类型 | - |
-| value | `SelectedKeyType \| Array<SelectedKeyType>` | 选中的值 | - |
-| isShowFilter | `boolean` | 是否显示过滤器 | `true` |
-| visible | `boolean` | 弹出层是否可见 | - |
+| 属性名       | 类型                                        | 描述                               | 默认值 |
+| ------------ | ------------------------------------------- | ---------------------------------- | ------ |
+| rowKey       | `string`                                    | 数据的唯一标识字段名               | -      |
+| columns      | `Array<any>`                                | 表格列的配置信息                   | -      |
+| dataSource   | `Array<TableSelectDataType>`                | 数据源                             | -      |
+| rowSelection | `RowSelectionType`                          | 行选择配置                         | -      |
+| type         | `'radio' \| 'checkbox'`                     | 选择类型                           | -      |
+| value        | `SelectedKeyType \| Array<SelectedKeyType>` | 选中的值                           | -      |
+| isShowFilter | `boolean`                                   | 是否显示过滤器                     | `true` |
+| visible      | `boolean`                                   | 弹出层是否可见                     | -      |
+| popupRef     | `React.RefObject<HTMLDivElement \| null>`   | 弹层根元素 ref，供键盘导航内部使用 | -      |
 
 ## 注意事项
 
+- 下拉展开后支持键盘操作：`↑`/`↓` 在行间移动高亮，`空格` 选中/取消勾选高亮行，`Esc` 关闭下拉；输入光标始终保留在输入框内；收起时按 `回车` 可展开下拉
+
 - 已适配移动端（弹窗限制最大宽高并支持滚动）

package/src/TableSelect/interface.ts

@@ -10,7 +10,7 @@ type SelectedKeyType = string | number;
 /**
  * Data item type
  */
-type InDataType = {
+export type TableSelectDataType = {
   [propName: string]: any;
 };
 
@@ -42,7 +42,7 @@ export interface InternalTableProps {
   /**
    * Data source
    */
-  dataSource: Array<InDataType>;
+  dataSource: Array<TableSelectDataType>;
   /**
    * Custom class name
    */
@@ -67,6 +67,11 @@ export interface InternalTableProps {
    * Whether popup is visible (for focus trap)
    */
   visible?: boolean;
+  /**
+   * Ref to the popup root element, used by TableSelect for keyboard navigation
+   * @internal
+   */
+  popupRef?: React.RefObject<HTMLDivElement | null>;
 }
 
 /**
@@ -96,7 +101,7 @@ export interface TableSelectProps
   /**
    * Data source
    */
-  dataSource: Array<InDataType>;
+  dataSource: Array<TableSelectDataType>;
   /**
    * Single or multiple selection
    * @default: 'radio'
@@ -180,7 +185,7 @@ export interface TableSelectProps
    * Option label property (text field for displaying labels)
    * @default 'name'
    */
-  optionLabelProp?: string | ((option: InDataType) => string);
+  optionLabelProp?: string | ((option: TableSelectDataType) => string);
   /**
    * Selection change callback
    * @param keys Selected keys

package/src/TableSelect/internal-table.tsx

@@ -7,7 +7,7 @@ import { InternalTableProps } from './interface';
 
 type SelectedKeyType = string | number;
 
-type InDataType = {
+type TableSelectDataType = {
   [propName: string]: any;
 };
 
@@ -22,12 +22,13 @@ const InternalTable: React.FC<InternalTableProps> = (props) => {
     isShowFilter = true,
     rowSelection = {},
     visible,
+    popupRef: externalPopupRef,
     ...rest
   } = props;
 
-  const [internalDataSource, setInternalDataSource] = useState<InDataType[]>(
-    [],
-  );
+  const [internalDataSource, setInternalDataSource] = useState<
+    TableSelectDataType[]
+  >([]);
   const renderRowSelection = { type, selectedRowKeys: value, ...rowSelection };
 
   useEffect(() => {
@@ -45,7 +46,7 @@ const InternalTable: React.FC<InternalTableProps> = (props) => {
         setInternalDataSource(dataSource);
       } else {
         setInternalDataSource(
-          dataSource.filter((data: InDataType) =>
+          dataSource.filter((data: TableSelectDataType) =>
             (selectedRowKeys as SelectedKeyType[])?.includes(
               typeof rowKey === 'function' ? rowKey(data) : data[rowKey],
             ),
@@ -76,7 +77,14 @@ const InternalTable: React.FC<InternalTableProps> = (props) => {
     return null;
   };
   return (
-    <div className={`${prefixCls}-popup`} tabIndex={0} ref={popupRef}>
+    <div
+      className={`${prefixCls}-popup`}
+      tabIndex={0}
+      ref={(node) => {
+        popupRef.current = node;
+        if (externalPopupRef) externalPopupRef.current = node;
+      }}
+    >
       {renderRadio()}
       <Table
         {...rest}

package/src/TableSelect/style/index.less

@@ -6,16 +6,8 @@
   margin: 0;
   padding: 12px 0;
 
-  .rb-table-select__radio {
-    padding: 0 12px;
-    margin-bottom: 16px;
-  }
-}
-
-.rb-table-select {
-  margin-bottom: 0;
-
-  .rb-table-footer-operate {
-    padding: 0 12px;
+  // Keyboard-navigated row (TableSelect arrow keys)
+  .yee-table-highlight-row {
+    background-color: var(--yee-table-tbody-tr-hover-bg-color);
   }
 }

package/src/TableSelect/table-select.tsx

@@ -9,6 +9,7 @@ import Trigger from '../Trigger';
 import mergeContextToProps from '../utils/mergeContextToProps';
 import omit from '../utils/omit';
 import pick from '../utils/pick';
+import useTableSelectKeyboard from './hooks/useTableSelectKeyboard';
 import type { InternalTableProps, TableSelectProps } from './interface';
 import InternalTable from './internal-table';
 import './style/index.less';
@@ -16,7 +17,10 @@ import './style/index.less';
 const handleState = (
   value: SelectionKeyType | SelectionKeyType[] | undefined,
 ) => {
-  if (typeof value === 'string' || typeof value === 'number') {
+  // '' is the empty-value convention for radio; it must not become a key.
+  if (value === '') {
+    return [];
+  } else if (typeof value === 'string' || typeof value === 'number') {
     return [value];
   } else if (Array.isArray(value)) {
     return value;
@@ -144,10 +148,35 @@ const TableSelect = (baseprops: TableSelectProps) => {
     onChange?.(renderKeys, undefined);
   };
 
+  const {
+    popupRef,
+    activeRow,
+    handleKeyDown: handleSelectorKeyDown,
+  } = useTableSelectKeyboard({
+    open,
+    disabled,
+    dataSource,
+    rowKey,
+    selectionType,
+    selectedRowKeys: mergedValue as SelectionKeyType[],
+    searchValue,
+    onSelect: onSelectChange,
+    onClose: () => onVisibleChange(false),
+  });
+
+  const userHighlight = (rest as { highlight?: 'odd' | 'even' | Array<number> })
+    .highlight;
+
   const tableProps = omit(
     {
       ...rest,
       prefixCls,
+      // Keyboard navigation reuses the row highlight; it takes precedence over
+      // a user-supplied index list while active.
+      highlight:
+        activeRow > 0
+          ? [activeRow, ...(Array.isArray(userHighlight) ? userHighlight : [])]
+          : userHighlight,
       rowSelection: {
         ...props.rowSelection,
         onChange: onSelectChange,
@@ -181,8 +210,15 @@ const TableSelect = (baseprops: TableSelectProps) => {
     selectedKeys: mergedValue,
     onSearch: handleSearch,
     onRemove: onTagRemove,
+    onClear: () => {
+      setMergedValue([]);
+      onChange?.(selectionType === 'radio' ? '' : [], undefined);
+    },
+    onKeyDown: handleSelectorKeyDown,
     onOpenChange: (open: boolean) => {
-      if (!open) {
+      if (open) {
+        onVisibleChange(true);
+      } else {
         clearSearchValue();
       }
     },
@@ -193,13 +229,19 @@ const TableSelect = (baseprops: TableSelectProps) => {
   };
 
   const renderPopup = () => (
-    <InternalTable {...tableProps} value={value} rowKey={rowKey} />
+    <InternalTable
+      {...tableProps}
+      value={value}
+      rowKey={rowKey}
+      popupRef={popupRef}
+    />
   );
 
   return (
     <Trigger
       {...rest}
       trigger="click"
+      open={open}
       popupClassName={`${prefixCls}-popup`}
       popup={renderPopup()}
       placement={placement}

package/src/style/color.css

@@ -29,7 +29,7 @@
   --yee-color-text: #39364e;
   --yee-color-text-secondary: #696969;
   --yee-color-text-description: #7c7c7c;
-  --yee-color-text-disabled: #bfbfbf;
+  --yee-color-text-disabled: #b8b8b8;
   --yee-color-text-highlight: #f58220;
   --yee-color-text-auxiliary: #d1d1d1;
   --yee-color-split: #e7e7e7;
@@ -37,7 +37,7 @@
   --yee-color-border-hover: #75b9f0;
   --yee-color-border-focus: #75b9f0;
   --yee-color-bg-highlight: rgba(245, 130, 32, 16%);
-  --yee-color-bg-disabled: #f5f8fa;
+  --yee-color-bg-disabled: #f5f5f5;
   --yee-color-bg-head: #f8f8f8;
   --yee-color-bg-rail: #f5f5f5;
   --yee-color-bg-fill: #ededed;
@@ -493,7 +493,7 @@
   --yee-checkbox-checked-after-border-color: #fff;
   --yee-checkbox-disabled-unchecked-bg-color: var(--yee-color-bg-disabled);
   --yee-checkbox-disabled-checked-bg-color: var(--yee-color-bg-disabled);
-  --yee-checkbox-disabled-checked-border-color: var(--yee-color-border);
+  --yee-checkbox-disabled-checked-border-color: var(--yee-color-text-disabled);
   --yee-checkbox-disabled-checked-after-border-color: var(
     --yee-color-text-disabled
   );
@@ -1223,7 +1223,7 @@
   --yee-border-color-hover-focus: var(--yee-color-border-focus);
   --yee-placeholder-color: var(--yee-color-placeholder);
 
-    /* deprecated:2026-09-11 hover/focus 拆分为 --yee-color-border-hover / --yee-color-border-focus */
+  /* deprecated:2026-09-11 hover/focus 拆分为 --yee-color-border-hover / --yee-color-border-focus */
   --yee-color-border-hover-focus: var(--yee-color-border-focus);
   /* deprecated:2026-09-11 更名 --yee-input-focus-border-color */
   --yee-input-content-focus-border-color: var(--yee-input-focus-border-color);
@@ -1339,5 +1339,5 @@
   --yee-timepicker-bg-color: var(--yee-time-picker-bg-color);
   --yee-treeselect-dropdown-bg-color: var(--yee-tree-select-dropdown-bg-color);
 
-    /* deprecated-aliases:end */
+  /* deprecated-aliases:end */
 }

package/src/style/color.gemini.css

@@ -79,7 +79,7 @@
   /* ================= 背景 ================= */
   --yee-color-bg-layout: #f1f2f4;
   --yee-color-bg-head: #fff;
-  --yee-color-bg-disabled: #f2f3f5;
+  --yee-color-bg-disabled: #f5f5f5;
   /* 衍生:规范 --hover(极浅悬浮底) */
   --yee-color-bg-hover: rgba(109, 93, 252, 3.5%);
 

package/src/style/size.css

@@ -587,7 +587,7 @@
   --yee-select-popup-max-height: 200px;
 
   /* --Selector-- */
-  --yee-selector-padding: 2px 6px;
+  --yee-selector-padding: 3px 6px;
   --yee-selector-border-width: 1px;
   --yee-selector-border-radius: 4px;
   --yee-selector-height: var(--yee-input-height);

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.14.6";
+export const version = "0.15.0";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;