@rainbow-oh/yee-c 0.14.7 → 0.15.0

package/dist/esm/TableSelect/hooks/useTableSelectKeyboard.js

@@ -0,0 +1,132 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect, useRef, useState } from 'react';
+/**
+ * Keyboard navigation for the popup table. The highlight is positional (like a
+ * hover cursor): `activeRow` is a rendered row index, and Space selects the
+ * record displayed there. The rendered order is the filter→sort→paginate
+ * result inside Table and is not derivable from `dataSource`, so the row count
+ * and the highlighted row's key are both read from the popup DOM.
+ */
+export default function useTableSelectKeyboard(_ref) {
+  var open = _ref.open,
+    disabled = _ref.disabled,
+    dataSource = _ref.dataSource,
+    rowKey = _ref.rowKey,
+    selectionType = _ref.selectionType,
+    selectedRowKeys = _ref.selectedRowKeys,
+    searchValue = _ref.searchValue,
+    onSelect = _ref.onSelect,
+    onClose = _ref.onClose;
+  var popupRef = useRef(null);
+  // 1-based index of the highlighted row (`tr[data-row-index]`), 0 = none.
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeRow = _useState2[0],
+    setActiveRow = _useState2[1];
+  useEffect(function () {
+    setActiveRow(0);
+  }, [open, searchValue]);
+  var getRecordKey = function getRecordKey(item) {
+    return typeof rowKey === 'function' ? rowKey(item) : item[rowKey];
+  };
+  var getRowCount = function getRowCount() {
+    var _popupRef$current$que, _popupRef$current;
+    return (_popupRef$current$que = (_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.querySelectorAll('tr[data-row-index]').length) !== null && _popupRef$current$que !== void 0 ? _popupRef$current$que : 0;
+  };
+  useEffect(function () {
+    var _popupRef$current2;
+    if (!open || activeRow < 1) return;
+    var rowEl = (_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 ? void 0 : _popupRef$current2.querySelector("tr[data-row-index=\"".concat(activeRow, "\"]"));
+    if (!rowEl) return;
+    // Manual scroll instead of scrollIntoView: the popup renders in a portal,
+    // and scrollIntoView would scroll the page as well as the popup.
+    var parent = rowEl.parentElement;
+    while (parent && parent !== popupRef.current) {
+      var _window$getComputedSt = window.getComputedStyle(parent),
+        overflowY = _window$getComputedSt.overflowY;
+      if (/(auto|scroll)/.test(overflowY) && parent.scrollHeight > parent.clientHeight) {
+        var parentRect = parent.getBoundingClientRect();
+        var rowRect = rowEl.getBoundingClientRect();
+        if (rowRect.bottom > parentRect.bottom) {
+          parent.scrollTop += rowRect.bottom - parentRect.bottom;
+        } else if (rowRect.top < parentRect.top) {
+          parent.scrollTop -= parentRect.top - rowRect.top;
+        }
+        return;
+      }
+      parent = parent.parentElement;
+    }
+  }, [activeRow, open]);
+  var selectActiveRow = function selectActiveRow() {
+    var _popupRef$current3;
+    var rowEl = (_popupRef$current3 = popupRef.current) === null || _popupRef$current3 === void 0 ? void 0 : _popupRef$current3.querySelector("tr[data-row-index=\"".concat(activeRow, "\"]"));
+    var inputEl = rowEl === null || rowEl === void 0 ? void 0 : rowEl.querySelector('input[type="radio"],input[type="checkbox"]');
+    if (!inputEl || inputEl.disabled) return;
+    var record = dataSource.find(function (item) {
+      return String(getRecordKey(item)) === inputEl.value;
+    });
+    if (!record) return;
+    var key = getRecordKey(record);
+    if (selectionType === 'radio') {
+      // Same shape as the click path: arrays, normalized by the consumer.
+      onSelect([key], [record]);
+      onClose();
+      return;
+    }
+    var checked = selectedRowKeys.some(function (k) {
+      return String(k) === String(key);
+    });
+    var nextKeys = checked ? selectedRowKeys.filter(function (k) {
+      return String(k) !== String(key);
+    }) : [].concat(_toConsumableArray(selectedRowKeys), [key]);
+    var rows = dataSource.filter(function (item) {
+      return nextKeys.some(function (k) {
+        return String(getRecordKey(item)) === String(k);
+      });
+    });
+    onSelect(nextKeys, rows);
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (!open || disabled) return;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        setActiveRow(Math.min(activeRow + 1, getRowCount()));
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        setActiveRow(activeRow <= 1 ? getRowCount() : activeRow - 1);
+        break;
+      case ' ':
+        // With nothing highlighted, space keeps its native input behavior.
+        if (activeRow > 0) {
+          event.preventDefault();
+          selectActiveRow();
+        }
+        break;
+      case 'Escape':
+        event.preventDefault();
+        // Stop the event from reaching outer layers (e.g. a Dialog's useEsc
+        // listening on document) so only the dropdown closes.
+        event.stopPropagation();
+        onClose();
+        break;
+      default:
+        break;
+    }
+  };
+  return {
+    popupRef: popupRef,
+    activeRow: activeRow,
+    handleKeyDown: handleKeyDown
+  };
+}

package/dist/esm/TableSelect/interface.d.ts

@@ -9,7 +9,7 @@ type SelectedKeyType = string | number;
 /**
  * Data item type
  */
-type InDataType = {
+export type TableSelectDataType = {
     [propName: string]: any;
 };
 /**
@@ -40,7 +40,7 @@ export interface InternalTableProps {
     /**
      * Data source
      */
-    dataSource: Array<InDataType>;
+    dataSource: Array<TableSelectDataType>;
     /**
      * Custom class name
      */
@@ -65,6 +65,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>;
 }
 /**
  * TableSelect component Props interface
@@ -77,7 +82,7 @@ export interface TableSelectProps extends Omit<InternalTableProps, 'value' | 'on
     /**
      * Data source
      */
-    dataSource: Array<InDataType>;
+    dataSource: Array<TableSelectDataType>;
     /**
      * Single or multiple selection
      * @default: 'radio'
@@ -161,7 +166,7 @@ export interface TableSelectProps extends Omit<InternalTableProps, 'value' | 'on
      * 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/dist/esm/TableSelect/internal-table.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "type", "value", "columns", "dataSource", "rowKey", "isShowFilter", "rowSelection", "visible"];
+var _excluded = ["prefixCls", "type", "value", "columns", "dataSource", "rowKey", "isShowFilter", "rowSelection", "visible", "popupRef"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -32,6 +32,7 @@ var InternalTable = function InternalTable(props) {
     _props$rowSelection = props.rowSelection,
     rowSelection = _props$rowSelection === void 0 ? {} : _props$rowSelection,
     visible = props.visible,
+    externalPopupRef = props.popupRef,
     rest = _objectWithoutProperties(props, _excluded);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -77,7 +78,10 @@ var InternalTable = function InternalTable(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-popup"),
     tabIndex: 0,
-    ref: popupRef
+    ref: function ref(node) {
+      popupRef.current = node;
+      if (externalPopupRef) externalPopupRef.current = node;
+    }
   }, renderRadio(), /*#__PURE__*/React.createElement(Table, _extends({}, rest, {
     rowKey: rowKey,
     dataSource: internalDataSource,

package/dist/esm/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/dist/esm/TableSelect/table-select.js

@@ -27,10 +27,14 @@ 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 InternalTable from "./internal-table";
 import "./style/index.less";
 var handleState = function handleState(value) {
-  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;
@@ -140,8 +144,28 @@ var TableSelect = function TableSelect(baseprops) {
     var renderKeys = keys.length === 0 ? selectionType === 'checkbox' ? [] : '' : keys;
     onChange === null || onChange === void 0 || onChange(renderKeys, undefined);
   };
+  var _useTableSelectKeyboa = useTableSelectKeyboard({
+      open: open,
+      disabled: disabled,
+      dataSource: dataSource,
+      rowKey: rowKey,
+      selectionType: selectionType,
+      selectedRowKeys: mergedValue,
+      searchValue: searchValue,
+      onSelect: onSelectChange,
+      onClose: function onClose() {
+        return onVisibleChange(false);
+      }
+    }),
+    popupRef = _useTableSelectKeyboa.popupRef,
+    activeRow = _useTableSelectKeyboa.activeRow,
+    handleSelectorKeyDown = _useTableSelectKeyboa.handleKeyDown;
+  var userHighlight = rest.highlight;
   var tableProps = omit(_objectSpread(_objectSpread({}, rest), {}, {
     prefixCls: prefixCls,
+    // Keyboard navigation reuses the row highlight; it takes precedence over
+    // a user-supplied index list while active.
+    highlight: activeRow > 0 ? [activeRow].concat(_toConsumableArray(Array.isArray(userHighlight) ? userHighlight : [])) : userHighlight,
     rowSelection: _objectSpread(_objectSpread({}, props.rowSelection), {}, {
       onChange: onSelectChange,
       selectedRowKeys: mergedValue
@@ -158,8 +182,15 @@ var TableSelect = function TableSelect(baseprops) {
     selectedKeys: mergedValue,
     onSearch: handleSearch,
     onRemove: onTagRemove,
+    onClear: function onClear() {
+      setMergedValue([]);
+      onChange === null || onChange === void 0 || onChange(selectionType === 'radio' ? '' : [], undefined);
+    },
+    onKeyDown: handleSelectorKeyDown,
     onOpenChange: function onOpenChange(open) {
-      if (!open) {
+      if (open) {
+        onVisibleChange(true);
+      } else {
         clearSearchValue();
       }
     },
@@ -171,11 +202,13 @@ var TableSelect = function TableSelect(baseprops) {
   var renderPopup = function renderPopup() {
     return /*#__PURE__*/React.createElement(InternalTable, _extends({}, tableProps, {
       value: value,
-      rowKey: rowKey
+      rowKey: rowKey,
+      popupRef: popupRef
     }));
   };
   return /*#__PURE__*/React.createElement(Trigger, _extends({}, rest, {
     trigger: "click",
+    open: open,
     popupClassName: "".concat(prefixCls, "-popup"),
     popup: renderPopup(),
     placement: placement,

package/dist/esm/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/dist/esm/style/themes.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-10-14T03:47:11.377Z
+ * Generated on 2026-10-15T09:51:26.325Z
  */
 
 /* ========== color.blue.css ========== */

package/dist/esm/style/variables.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-10-14T03:47:11.377Z
+ * Generated on 2026-10-15T09:51:26.325Z
  */
 
 /* ========== color.css ========== */
@@ -1940,7 +1940,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/dist/esm/version.d.ts

@@ -3,4 +3,4 @@ declare global {
         __yee_c_version__: string;
     }
 }
-export declare const version = "0.14.7";
+export declare const version = "0.15.0";

package/dist/esm/version.js

@@ -1,4 +1,4 @@
-export var version = "0.14.7";
+export var version = "0.15.0";
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;
 }