@rainbow-oh/yee-c 0.6.4 → 0.7.0

package/dist/esm/Select/hooks/useSelectKeyboard.js

@@ -10,6 +10,10 @@ export default function useSelectKeyboard(_ref) {
   var options = _ref.options,
     open = _ref.open,
     selectedKeys = _ref.selectedKeys,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? 1 : _ref$columns,
+    _ref$looseMatch = _ref.looseMatch,
+    looseMatch = _ref$looseMatch === void 0 ? false : _ref$looseMatch,
     onSelect = _ref.onSelect,
     onClose = _ref.onClose,
     onOpenChange = _ref.onOpenChange,
@@ -63,9 +67,15 @@ export default function useSelectKeyboard(_ref) {
     var optionElements = container.querySelectorAll('[role="option"]');
     var targetElement = optionElements[index];
     if (targetElement) {
-      targetElement.scrollIntoView({
-        block: 'nearest'
-      });
+      // Use manual scroll calculation instead of scrollIntoView to avoid
+      // scrolling the entire page (popup is rendered in a portal).
+      var containerRect = container.getBoundingClientRect();
+      var targetRect = targetElement.getBoundingClientRect();
+      if (targetRect.bottom > containerRect.bottom) {
+        container.scrollTop += targetRect.bottom - containerRect.bottom;
+      } else if (targetRect.top < containerRect.top) {
+        container.scrollTop -= containerRect.top - targetRect.top;
+      }
     }
   };
 
@@ -73,12 +83,29 @@ export default function useSelectKeyboard(_ref) {
   var handleArrowUp = function handleArrowUp() {
     var focusedIndex = getFocusedIndex();
     var nextIndex;
-    if (focusedIndex === -1) {
-      // No focus yet, focus the last enabled option
-      nextIndex = findNextEnabledIndex(options.length - 1, -1);
+    if (columns > 1) {
+      // Multi-column: move up one row (jump by `columns` items)
+      if (focusedIndex === -1) {
+        nextIndex = findNextEnabledIndex(options.length - 1, -1);
+      } else {
+        var target = focusedIndex - columns;
+        if (target >= 0) {
+          nextIndex = options[target].disabled ? findNextEnabledIndex(target, -1) : target;
+        } else {
+          var _options$wrapTarget;
+          // Wrap to bottom: find the same column in the last row
+          var lastRowStart = Math.floor((options.length - 1) / columns) * columns;
+          var col = focusedIndex % columns;
+          var wrapTarget = Math.min(lastRowStart + col, options.length - 1);
+          nextIndex = (_options$wrapTarget = options[wrapTarget]) !== null && _options$wrapTarget !== void 0 && _options$wrapTarget.disabled ? findNextEnabledIndex(wrapTarget, -1) : wrapTarget;
+        }
+      }
     } else {
-      // Find the previous enabled option
-      nextIndex = findNextEnabledIndex(focusedIndex, -1);
+      if (focusedIndex === -1) {
+        nextIndex = findNextEnabledIndex(options.length - 1, -1);
+      } else {
+        nextIndex = findNextEnabledIndex(focusedIndex, -1);
+      }
     }
     if (nextIndex !== -1) {
       var nextValue = options[nextIndex].value;
@@ -91,12 +118,28 @@ export default function useSelectKeyboard(_ref) {
   var handleArrowDown = function handleArrowDown() {
     var focusedIndex = getFocusedIndex();
     var nextIndex;
-    if (focusedIndex === -1) {
-      // No focus yet, focus the first enabled option
-      nextIndex = findNextEnabledIndex(0, 1);
+    if (columns > 1) {
+      // Multi-column: move down one row (jump by `columns` items)
+      if (focusedIndex === -1) {
+        nextIndex = findNextEnabledIndex(0, 1);
+      } else {
+        var target = focusedIndex + columns;
+        if (target < options.length) {
+          nextIndex = options[target].disabled ? findNextEnabledIndex(target, 1) : target;
+        } else {
+          var _options$wrapTarget2;
+          // Wrap to top: find the same column in the first row
+          var col = focusedIndex % columns;
+          var wrapTarget = col;
+          nextIndex = (_options$wrapTarget2 = options[wrapTarget]) !== null && _options$wrapTarget2 !== void 0 && _options$wrapTarget2.disabled ? findNextEnabledIndex(wrapTarget, 1) : wrapTarget;
+        }
+      }
     } else {
-      // Find the next enabled option
-      nextIndex = findNextEnabledIndex(focusedIndex, 1);
+      if (focusedIndex === -1) {
+        nextIndex = findNextEnabledIndex(0, 1);
+      } else {
+        nextIndex = findNextEnabledIndex(focusedIndex, 1);
+      }
     }
     if (nextIndex !== -1) {
       var nextValue = options[nextIndex].value;
@@ -105,6 +148,28 @@ export default function useSelectKeyboard(_ref) {
     }
   };
 
+  // Handle ArrowLeft key (multi-column: move to previous item)
+  var handleArrowLeft = function handleArrowLeft() {
+    var focusedIndex = getFocusedIndex();
+    if (focusedIndex <= 0) return;
+    var nextIndex = findNextEnabledIndex(focusedIndex, -1);
+    if (nextIndex !== -1) {
+      setFocusedKey(options[nextIndex].value);
+      scrollOptionIntoView(nextIndex);
+    }
+  };
+
+  // Handle ArrowRight key (multi-column: move to next item)
+  var handleArrowRight = function handleArrowRight() {
+    var focusedIndex = getFocusedIndex();
+    if (focusedIndex >= options.length - 1) return;
+    var nextIndex = findNextEnabledIndex(focusedIndex, 1);
+    if (nextIndex !== -1) {
+      setFocusedKey(options[nextIndex].value);
+      scrollOptionIntoView(nextIndex);
+    }
+  };
+
   // Handle Enter key
   var handleEnter = function handleEnter() {
     var currentFocusedKey = latestFocusedKey.current;
@@ -143,6 +208,18 @@ export default function useSelectKeyboard(_ref) {
         event.preventDefault();
         handleArrowDown();
         break;
+      case 'ArrowLeft':
+        if (columns > 1) {
+          event.preventDefault();
+          handleArrowLeft();
+        }
+        break;
+      case 'ArrowRight':
+        if (columns > 1) {
+          event.preventDefault();
+          handleArrowRight();
+        }
+        break;
       case 'Enter':
         event.preventDefault();
         handleEnter();
@@ -162,7 +239,7 @@ export default function useSelectKeyboard(_ref) {
       var focusedValue = '';
       if ((selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.length) > 0) {
         var firstSelected = options === null || options === void 0 ? void 0 : options.find(function (opt) {
-          return opt.value === selectedKeys[0];
+          return looseMatch ? String(opt.value) === String(selectedKeys[0]) : opt.value === selectedKeys[0];
         });
         if (firstSelected && !firstSelected.disabled) {
           focusedValue = firstSelected.value;

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

@@ -126,10 +126,27 @@ export interface SelectProps extends DataAttributeProps, Pick<SelectorProps, 'si
      * @default 200
      */
     listHeight?: number;
+    /**
+     * Number of columns in the dropdown panel.
+     * When greater than 1, options are displayed in a grid layout.
+     * @default 1
+     */
+    columns?: number;
+    /**
+     * Fixed width of the dropdown popup in pixels.
+     * When set, the popup will not stretch to match the trigger width.
+     * Useful with multi-column layout to provide enough horizontal space.
+     */
+    popupWidth?: number;
+    /**
+     * Enable loose value matching. When enabled, value comparison uses
+     * `String(a) === String(b)` instead of strict equality (`===`).
+     * Resolves type mismatch when options use string values but the
+     * controlled value is a number (or vice versa).
+     * @default false
+     */
+    looseMatch?: boolean;
 }
-/**
- * Props for the internal Option component (renders a single dropdown option).
- */
 export interface OptionProps {
     /**
      * Display label
@@ -165,6 +182,7 @@ export interface OptionsContextValue {
     selectedKeys: Array<string | number>;
     focusedKey: string | number;
     multiple: boolean;
+    looseMatch: boolean;
     onSelect: (key: string | number, e?: React.MouseEvent | React.KeyboardEvent) => void;
 }
 /**
@@ -223,6 +241,15 @@ export interface OptionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     virtualApiRef?: React.MutableRefObject<{
         scrollToIndex: (index: number) => void;
     } | null>;
+    /**
+     * Number of columns in the dropdown grid layout.
+     * @default 1
+     */
+    columns?: number;
+    /**
+     * Whether loose value matching is enabled
+     */
+    looseMatch?: boolean;
     /**
      * Callback when an option is selected
      */

package/dist/esm/Select/option.js

@@ -18,6 +18,7 @@ var Option = function Option(props) {
     selectedKeys = _useContext.selectedKeys,
     focusedKey = _useContext.focusedKey,
     multiple = _useContext.multiple,
+    looseMatch = _useContext.looseMatch,
     onSelect = _useContext.onSelect;
   var handleClick = function handleClick(e) {
     if (!disabled) {
@@ -25,9 +26,12 @@ var Option = function Option(props) {
     }
   };
   var htmlTitle = title ? title : typeof label === 'string' ? label : undefined;
-  var selected = selectedKeys.includes(value);
+  var selected = looseMatch ? selectedKeys.some(function (k) {
+    return String(k) === String(value);
+  }) : selectedKeys.includes(value);
+  var focused = looseMatch ? String(focusedKey) === String(value) : focusedKey === value;
   return /*#__PURE__*/React.createElement("div", {
-    className: clsx("".concat(prefixCls, "-option"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-option-selected"), selected), "".concat(prefixCls, "-option-focused"), focusedKey === value), "".concat(prefixCls, "-option-disabled"), disabled)),
+    className: clsx("".concat(prefixCls, "-option"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-option-selected"), selected), "".concat(prefixCls, "-option-focused"), focused), "".concat(prefixCls, "-option-disabled"), disabled)),
     "aria-label": "option",
     onClick: handleClick,
     onKeyDown: function onKeyDown(e) {

package/dist/esm/Select/options.js

@@ -1,4 +1,10 @@
-var _excluded = ["prefixCls", "options", "popupClassName", "popupStyle", "selectedKeys", "focusedKey", "dataTestId", "multiple", "virtual", "itemHeight", "listHeight", "virtualApiRef", "onSelect"];
+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", "options", "popupClassName", "popupStyle", "selectedKeys", "focusedKey", "dataTestId", "multiple", "virtual", "itemHeight", "listHeight", "virtualApiRef", "columns", "looseMatch", "onSelect"];
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -26,20 +32,23 @@ var Options = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$listHeight = props.listHeight,
     listHeight = _props$listHeight === void 0 ? 200 : _props$listHeight,
     virtualApiRef = props.virtualApiRef,
+    _props$columns = props.columns,
+    columns = _props$columns === void 0 ? 1 : _props$columns,
+    _props$looseMatch = props.looseMatch,
+    looseMatch = _props$looseMatch === void 0 ? false : _props$looseMatch,
     onSelect = props.onSelect,
     rest = _objectWithoutProperties(props, _excluded);
+  var multiColumn = columns > 1;
   var rootRef = useRef(null);
-  // Forward the popup root element to the parent (Select uses it as the
-  // keyboard-nav containerRef) while keeping a stable RefObject for the
-  // effects below.
   useImperativeHandle(ref, function () {
     return rootRef.current;
   }, []);
 
-  // Hook is always called (rules of hooks). When `virtual` is off the
-  // returned viewportRef is never attached, so the observer stays idle.
+  // In multi-column virtual mode, each "row" contains `columns` options.
+  // The virtual list tracks rows, not individual options.
+  var rowCount = multiColumn ? Math.ceil(options.length / columns) : options.length;
   var _useVirtualList = useVirtualList({
-      itemCount: options.length,
+      itemCount: virtual ? rowCount : 0,
       itemHeight: itemHeight
     }),
     start = _useVirtualList.start,
@@ -48,37 +57,34 @@ var Options = /*#__PURE__*/forwardRef(function (props, ref) {
     totalHeight = _useVirtualList.totalHeight,
     viewportRef = _useVirtualList.viewportRef,
     onScroll = _useVirtualList.onScroll,
-    scrollToIndex = _useVirtualList.scrollToIndex;
+    _scrollToIndex = _useVirtualList.scrollToIndex;
 
-  // Expose the virtual scroll API to the parent so keyboard navigation
-  // can drive the virtual viewport (replaces scrollIntoView).
+  // Expose the virtual scroll API to the parent.
+  // In multi-column mode, the parent passes a flat option index, so we
+  // convert it to a row index before scrolling.
   useEffect(function () {
     if (!virtual || !virtualApiRef) return;
     virtualApiRef.current = {
-      scrollToIndex: scrollToIndex
+      scrollToIndex: function scrollToIndex(flatIndex) {
+        var rowIndex = multiColumn ? Math.floor(flatIndex / columns) : flatIndex;
+        _scrollToIndex(rowIndex);
+      }
     };
     return function () {
       if (virtualApiRef.current) {
         virtualApiRef.current = null;
       }
     };
-  }, [virtual, virtualApiRef, scrollToIndex]);
+  }, [virtual, virtualApiRef, _scrollToIndex, multiColumn, columns]);
 
-  // Reset the scroll position whenever the option set changes (e.g. after
-  // filtering via search), otherwise the viewport may sit at an offset
-  // where none of the new results are visible.
+  // Reset scroll position when options change.
   useEffect(function () {
     if (virtual) {
-      scrollToIndex(0);
+      _scrollToIndex(0);
     }
-  }, [options, virtual, scrollToIndex]);
+  }, [options, virtual, _scrollToIndex]);
 
-  // Bring the focused option into view on open and whenever it changes.
-  //   - virtual mode: drive the virtual viewport via scrollToIndex.
-  //   - default mode: scrollIntoView on the option's DOM node.
-  // Options owns this (rather than the keyboard hook) so it also covers the
-  // initial open, where the keyboard effect can fire before the popup is
-  // mounted / the virtual API ref is wired up.
+  // Bring the focused option into view.
   useEffect(function () {
     if (options.length === 0) return;
     if (focusedKey === '') return;
@@ -87,7 +93,8 @@ var Options = /*#__PURE__*/forwardRef(function (props, ref) {
     });
     if (focusedIndex < 0) return;
     if (virtual) {
-      scrollToIndex(focusedIndex);
+      var rowIndex = multiColumn ? Math.floor(focusedIndex / columns) : focusedIndex;
+      _scrollToIndex(rowIndex);
       return;
     }
     var container = rootRef.current;
@@ -95,21 +102,94 @@ var Options = /*#__PURE__*/forwardRef(function (props, ref) {
     var optionElements = container.querySelectorAll('[role="option"]');
     var targetElement = optionElements[focusedIndex];
     if (targetElement) {
-      targetElement.scrollIntoView({
-        block: 'nearest'
-      });
+      // Use manual scroll calculation instead of scrollIntoView to avoid
+      // scrolling the entire page (the popup is rendered in a portal).
+      var containerRect = container.getBoundingClientRect();
+      var targetRect = targetElement.getBoundingClientRect();
+      if (targetRect.bottom > containerRect.bottom) {
+        container.scrollTop += targetRect.bottom - containerRect.bottom;
+      } else if (targetRect.top < containerRect.top) {
+        container.scrollTop -= containerRect.top - targetRect.top;
+      }
     }
-  }, [focusedKey, virtual, options, scrollToIndex, rootRef]);
+  }, [focusedKey, virtual, options, _scrollToIndex, rootRef, multiColumn, columns]);
   var isEmpty = options.length === 0;
   var ctxValue = {
     prefixCls: prefixCls,
     selectedKeys: selectedKeys,
     focusedKey: focusedKey,
     multiple: multiple,
+    looseMatch: looseMatch,
     onSelect: onSelect
   };
 
-  // ----- Virtual mode: only render the visible window -----
+  // ----- Virtual + multi-column: render rows of N options -----
+  if (virtual && multiColumn && !isEmpty) {
+    var visibleRows = [];
+    for (var rowIdx = start; rowIdx < end; rowIdx++) {
+      var rowOptions = [];
+      for (var col = 0; col < columns; col++) {
+        var flatIdx = rowIdx * columns + col;
+        if (flatIdx < options.length) {
+          rowOptions.push({
+            option: options[flatIdx],
+            flatIdx: flatIdx
+          });
+        }
+      }
+      visibleRows.push({
+        rowIdx: rowIdx,
+        rowOptions: rowOptions
+      });
+    }
+    return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+      className: clsx("".concat(prefixCls, "-popup"), "".concat(prefixCls, "-popup-virtual"), popupClassName),
+      style: popupStyle,
+      ref: rootRef,
+      tabIndex: -1
+    }), /*#__PURE__*/React.createElement(OptionsCtx.Provider, {
+      value: ctxValue
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-popup-viewport"),
+      ref: viewportRef,
+      onScroll: onScroll,
+      style: {
+        maxHeight: listHeight,
+        overflowY: 'auto'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: totalHeight,
+        position: 'relative'
+      }
+    }, visibleRows.map(function (_ref, ri) {
+      var rowIdx = _ref.rowIdx,
+        rowOptions = _ref.rowOptions;
+      return /*#__PURE__*/React.createElement("div", {
+        key: rowIdx,
+        className: "".concat(prefixCls, "-popup-grid-row"),
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: itemHeight,
+          transform: "translateY(".concat(offsetY + ri * itemHeight, "px)"),
+          display: 'grid',
+          gridTemplateColumns: "repeat(".concat(columns, ", 1fr)")
+        }
+      }, rowOptions.map(function (_ref2) {
+        var option = _ref2.option,
+          flatIdx = _ref2.flatIdx;
+        return /*#__PURE__*/React.createElement(Option, _extends({}, option, {
+          key: option.value,
+          dataTestId: "".concat(dataTestId, "-").concat(flatIdx)
+        }));
+      }));
+    })))));
+  }
+
+  // ----- Virtual single-column: render visible window -----
   if (virtual && !isEmpty) {
     var visibleOptions = options.slice(start, end);
     return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
@@ -148,10 +228,12 @@ var Options = /*#__PURE__*/forwardRef(function (props, ref) {
     })))));
   }
 
-  // ----- Default mode: render every option (unchanged behavior) -----
+  // ----- Default mode (non-virtual) -----
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-    className: clsx("".concat(prefixCls, "-popup"), popupClassName),
-    style: popupStyle,
+    className: clsx("".concat(prefixCls, "-popup"), _defineProperty({}, "".concat(prefixCls, "-popup-grid"), multiColumn), popupClassName),
+    style: _objectSpread(_objectSpread({}, popupStyle), multiColumn ? {
+      '--yee-select-columns': columns
+    } : undefined),
     ref: rootRef,
     tabIndex: -1
   }), isEmpty ? /*#__PURE__*/React.createElement("div", {

package/dist/esm/Select/select.js

@@ -1,4 +1,4 @@
-var _excluded = ["prefixCls", "options", "placement", "mode", "value", "defaultValue", "optionFilterProp", "disabled", "onChange", "onFilter", "virtual", "itemHeight", "listHeight", "orphanClassName", "orphanStyle"];
+var _excluded = ["prefixCls", "options", "placement", "mode", "value", "defaultValue", "optionFilterProp", "disabled", "onChange", "onFilter", "virtual", "itemHeight", "listHeight", "columns", "popupWidth", "looseMatch", "orphanClassName", "orphanStyle"];
 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 _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."); }
@@ -22,6 +22,24 @@ import mergeContextToProps from "../utils/mergeContextToProps";
 import useSelectKeyboard from "./hooks/useSelectKeyboard";
 import Options from "./options";
 import "./style/index.less";
+
+// ---------------------------------------------------------------------------
+// Value comparison utilities (module-level for stable references)
+// ---------------------------------------------------------------------------
+
+/** Compare two values: loose mode uses String() conversion, strict uses ===. */
+function matchValue(a, b, loose) {
+  if (loose) return String(a) === String(b);
+  return a === b;
+}
+
+/** Check if a value exists in a keys array with optional loose matching. */
+function keysIncludes(keys, val, loose) {
+  if (loose) return keys.some(function (k) {
+    return String(k) === String(val);
+  });
+  return keys.includes(val);
+}
 var Select = function Select(baseprops) {
   var _useContext = useContext(GlobalContext),
     select = _useContext.select;
@@ -43,6 +61,11 @@ var Select = function Select(baseprops) {
     virtual = props.virtual,
     itemHeight = props.itemHeight,
     listHeight = props.listHeight,
+    _props$columns = props.columns,
+    columns = _props$columns === void 0 ? 1 : _props$columns,
+    popupWidth = props.popupWidth,
+    _props$looseMatch = props.looseMatch,
+    looseMatch = _props$looseMatch === void 0 ? false : _props$looseMatch,
     orphanClassName = props.orphanClassName,
     orphanStyle = props.orphanStyle,
     rest = _objectWithoutProperties(props, _excluded);
@@ -89,11 +112,9 @@ var Select = function Select(baseprops) {
       if (keys.length === 0) {
         return [];
       }
-      // 按 keys 顺序回填，找不到的 key 构造 label=value 的兜底项（孤儿值），
-      // 与 Selector 的显示保持一致，避免 onChange 第二参数丢值。
       return keys.map(function (key) {
         var opt = options.find(function (o) {
-          return o.value === key;
+          return matchValue(o.value, key, looseMatch);
         });
         return opt !== null && opt !== void 0 ? opt : {
           value: key,
@@ -102,7 +123,7 @@ var Select = function Select(baseprops) {
       });
     }
     return (_options$find = options.find(function (opt) {
-      return opt.value === keys;
+      return matchValue(opt.value, keys, looseMatch);
     })) !== null && _options$find !== void 0 ? _options$find : {
       value: keys,
       label: String(keys)
@@ -116,9 +137,9 @@ var Select = function Select(baseprops) {
       setSearchValue('');
       setOpen(false);
     } else {
-      if (mergedValue.includes(key)) {
+      if (keysIncludes(mergedValue, key, looseMatch)) {
         keys = mergedValue.filter(function (k) {
-          return k !== key;
+          return !matchValue(k, key, looseMatch);
         });
       } else {
         keys = [].concat(_toConsumableArray(mergedValue), [key]);
@@ -137,7 +158,7 @@ var Select = function Select(baseprops) {
   };
   var handleRemove = function handleRemove(option) {
     var keys = mergedValue.filter(function (k) {
-      return k !== option.value;
+      return !matchValue(k, option.value, looseMatch);
     });
     var filteredOpts = getOptions(keys);
     setMergedValue(keys);
@@ -169,6 +190,8 @@ var Select = function Select(baseprops) {
       options: filteredOpts,
       open: open,
       selectedKeys: mergedValue,
+      columns: columns,
+      looseMatch: looseMatch,
       onSelect: handleSelect,
       onClose: function onClose() {
         return setOpen(false);
@@ -191,12 +214,17 @@ var Select = function Select(baseprops) {
     virtual: virtual,
     itemHeight: itemHeight,
     listHeight: listHeight,
-    virtualApiRef: virtualApiRef
+    virtualApiRef: virtualApiRef,
+    columns: columns,
+    looseMatch: looseMatch
   });
   return /*#__PURE__*/React.createElement(Trigger, _extends({}, rest, {
     placement: placement,
     popup: popup,
-    stretch: "width",
+    stretch: popupWidth ? undefined : 'width',
+    popupStyle: popupWidth ? {
+      width: popupWidth
+    } : undefined,
     open: disabled ? false : open,
     onOpenChange: handleOpenChange
   }), /*#__PURE__*/React.createElement(Selector, _extends({}, rest, {
@@ -211,7 +239,8 @@ var Select = function Select(baseprops) {
     onSearch: handleSearch,
     onKeyDown: onKeyDown,
     orphanClassName: orphanClassName,
-    orphanStyle: orphanStyle
+    orphanStyle: orphanStyle,
+    looseMatch: looseMatch
   })));
 };
 export default Select;

package/dist/esm/Select/style/index.less

@@ -54,6 +54,20 @@
     align-items: center;
   }
 
+  // Multi-column grid layout (non-virtual mode).
+  // The column count is driven by the CSS custom property --yee-select-columns
+  // set inline by the Options component.
+  &-popup-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--yee-select-columns, 1), 1fr);
+  }
+
+  // Virtual multi-column: each row container is already a grid via inline style;
+  // options inside it should fill cells evenly and center vertically.
+  &-popup-grid-row {
+    align-items: center;
+  }
+
   &-empty {
     padding: var(--yee-select-option-padding);
   }

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

@@ -62,6 +62,10 @@ export interface PureSelectorProps {
      * Selected keys
      */
     selectedKeys: Array<string | number>;
+    /**
+     * Enable loose value matching (String comparison instead of strict equality)
+     */
+    looseMatch?: boolean;
     /**
      * Custom suffix
      */

package/dist/esm/Selector/selector.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", "mode", "className", "style", "optionLabelProp", "searchable", "disabled", "options", "selectedKeys", "orphanClassName", "orphanStyle", "allowClear", "placeholder", "closable", "suffix", "value", "open", "loading", "size", "onSearch", "onRemove", "onClear", "onOpenChange", "onKeyDown"],
+var _excluded = ["prefixCls", "mode", "className", "style", "optionLabelProp", "searchable", "disabled", "options", "selectedKeys", "looseMatch", "orphanClassName", "orphanStyle", "allowClear", "placeholder", "closable", "suffix", "value", "open", "loading", "size", "onSearch", "onRemove", "onClear", "onOpenChange", "onKeyDown"],
   _excluded2 = ["_orphan"];
 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; }
@@ -38,6 +38,8 @@ var Selector = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$options = props.options,
     options = _props$options === void 0 ? [] : _props$options,
     selectedKeys = props.selectedKeys,
+    _props$looseMatch = props.looseMatch,
+    looseMatch = _props$looseMatch === void 0 ? false : _props$looseMatch,
     orphanClassName = props.orphanClassName,
     orphanStyle = props.orphanStyle,
     _props$allowClear = props.allowClear,
@@ -71,7 +73,9 @@ var Selector = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     // 按 selectedKeys 顺序渲染；找不到的 key 作为孤儿值回退显示 value 本身
     return selectedKeys.map(function (key) {
-      var opt = options.find(function (o) {
+      var opt = looseMatch ? options.find(function (o) {
+        return String(o.value) === String(key);
+      }) : options.find(function (o) {
         return o.value === key;
       });
       if (opt) {
@@ -87,7 +91,7 @@ var Selector = /*#__PURE__*/React.forwardRef(function (props, ref) {
         _orphan: true
       };
     });
-  }, [options, selectedKeys, optionLabelProp]);
+  }, [options, selectedKeys, optionLabelProp, looseMatch]);
   var handleClick = function handleClick() {
     if (inputRef.current && !disabled) {
       inputRef.current.focus();
@@ -156,7 +160,9 @@ var Selector = /*#__PURE__*/React.forwardRef(function (props, ref) {
       });
     }
     var key = selectedKeys.length ? selectedKeys[0] : '';
-    var opt = Array.isArray(options) ? options.find(function (opt) {
+    var opt = Array.isArray(options) ? looseMatch ? options.find(function (opt) {
+      return String(opt.value) === String(key);
+    }) : options.find(function (opt) {
       return opt.value === key;
     }) : null;
     // 孤儿值：key 非空但在 options 中找不到时，回退显示 value 本身