@rainbow-oh/yee-c 0.14.7 → 0.15.1

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/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.7";
+export const version = "0.15.1";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;