@rainbow-oh/yee-c 0.6.4 → 0.8.0

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

@@ -6,18 +6,42 @@
   list-style: none;
   background-color: var(--yee-list-bg-color);
 
+  &:focus {
+    outline: none;
+  }
+
   &-item {
     padding: var(--yee-list-item-padding);
 
     &:hover:not(&-disabled) {
       background-color: var(--yee-list-item-bg-hover-color);
+    }
+
+    &-disabled {
       cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    &-clickable:not(&-disabled) {
+      cursor: pointer;
     }
 
     &-focused {
       background-color: var(--yee-list-item-bg-hover-color);
     }
   }
+
+  // Multi-column grid layout (non-virtual mode).
+  // Column count driven by CSS custom property --yee-list-columns set inline.
+  &-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--yee-list-columns, 1), 1fr);
+  }
+
+  // Virtual multi-column: each row is already a grid via inline style.
+  &-grid-row {
+    align-items: center;
+  }
 }
 
 @{pls}-bordered {

package/dist/esm/Select/demo/columns.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/esm/Select/demo/columns.js

@@ -0,0 +1,36 @@
+import { Select } from "../..";
+import React from 'react';
+var options = Array.from({
+  length: 24
+}, function (_, i) {
+  return {
+    label: "Option ".concat(i + 1),
+    value: "opt-".concat(i + 1)
+  };
+});
+export default (function () {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 24
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "3 columns:"), /*#__PURE__*/React.createElement(Select, {
+    columns: 3,
+    popupWidth: 360,
+    options: options,
+    placeholder: "Select an option",
+    style: {
+      width: 200
+    }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "4 columns with multiple selection:"), /*#__PURE__*/React.createElement(Select, {
+    columns: 4,
+    popupWidth: 480,
+    mode: "multiple",
+    options: options,
+    placeholder: "Select options",
+    style: {
+      width: 300
+    }
+  })));
+});

package/dist/esm/Select/hooks/useSelectKeyboard.d.ts

@@ -7,6 +7,18 @@ interface UseSelectKeyboardParams {
     }>;
     open: boolean;
     selectedKeys: Array<string | number>;
+    /**
+     * Number of columns in multi-column mode.
+     * Affects ArrowLeft/ArrowRight and ArrowUp/ArrowDown behavior.
+     * @default 1
+     */
+    columns?: number;
+    /**
+     * Whether loose value matching is enabled.
+     * Affects initial focus resolution when selectedKeys types differ from option values.
+     * @default false
+     */
+    looseMatch?: boolean;
     onSelect: (value: string | number) => void;
     onClose?: () => void;
     onOpenChange?: (open: boolean) => void;
@@ -18,7 +30,7 @@ interface UseSelectKeyboardParams {
      */
     scrollToIndex?: (index: number) => void;
 }
-export default function useSelectKeyboard({ options, open, selectedKeys, onSelect, onClose, onOpenChange, containerRef, scrollToIndex, }: UseSelectKeyboardParams): {
+export default function useSelectKeyboard({ options, open, selectedKeys, columns, looseMatch, onSelect, onClose, onOpenChange, containerRef, scrollToIndex, }: UseSelectKeyboardParams): {
     focusedKey: string | number;
     onKeyDown: (event: React.KeyboardEvent) => void;
 };

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", {