@rainbow-oh/yee-c 0.6.4 → 0.7.0

package/src/Select/demo/columns.tsx

@@ -0,0 +1,35 @@
+import { Select } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+const options = Array.from({ length: 24 }, (_, i) => ({
+  label: `Option ${i + 1}`,
+  value: `opt-${i + 1}`,
+}));
+
+export default () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+      <div>
+        <p>3 columns:</p>
+        <Select
+          columns={3}
+          popupWidth={360}
+          options={options}
+          placeholder="Select an option"
+          style={{ width: 200 }}
+        />
+      </div>
+      <div>
+        <p>4 columns with multiple selection:</p>
+        <Select
+          columns={4}
+          popupWidth={480}
+          mode="multiple"
+          options={options}
+          placeholder="Select options"
+          style={{ width: 300 }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/Select/hooks/useSelectKeyboard.ts

@@ -9,6 +9,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;
@@ -25,6 +37,8 @@ export default function useSelectKeyboard({
   options,
   open,
   selectedKeys,
+  columns = 1,
+  looseMatch = false,
   onSelect,
   onClose,
   onOpenChange,
@@ -79,9 +93,15 @@ export default function useSelectKeyboard({
     const optionElements = container.querySelectorAll('[role="option"]');
     const targetElement = optionElements[index] as HTMLElement;
     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).
+      const containerRect = container.getBoundingClientRect();
+      const 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;
+      }
     }
   };
 
@@ -90,12 +110,33 @@ export default function useSelectKeyboard({
     const focusedIndex = getFocusedIndex();
     let nextIndex: number;
 
-    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 {
+        const target = focusedIndex - columns;
+        if (target >= 0) {
+          nextIndex = options[target].disabled
+            ? findNextEnabledIndex(target, -1)
+            : target;
+        } else {
+          // Wrap to bottom: find the same column in the last row
+          const lastRowStart =
+            Math.floor((options.length - 1) / columns) * columns;
+          const col = focusedIndex % columns;
+          const wrapTarget = Math.min(lastRowStart + col, options.length - 1);
+          nextIndex = 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) {
@@ -110,13 +151,33 @@ export default function useSelectKeyboard({
     const focusedIndex = getFocusedIndex();
     let nextIndex: number;
 
-    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 {
+        const target = focusedIndex + columns;
+        if (target < options.length) {
+          nextIndex = options[target].disabled
+            ? findNextEnabledIndex(target, 1)
+            : target;
+        } else {
+          // Wrap to top: find the same column in the first row
+          const col = focusedIndex % columns;
+          const wrapTarget = col;
+          nextIndex = options[wrapTarget]?.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) {
       const nextValue = options[nextIndex].value;
       setFocusedKey(nextValue);
@@ -124,6 +185,28 @@ export default function useSelectKeyboard({
     }
   };
 
+  // Handle ArrowLeft key (multi-column: move to previous item)
+  const handleArrowLeft = () => {
+    const focusedIndex = getFocusedIndex();
+    if (focusedIndex <= 0) return;
+    const nextIndex = findNextEnabledIndex(focusedIndex, -1);
+    if (nextIndex !== -1) {
+      setFocusedKey(options[nextIndex].value);
+      scrollOptionIntoView(nextIndex);
+    }
+  };
+
+  // Handle ArrowRight key (multi-column: move to next item)
+  const handleArrowRight = () => {
+    const focusedIndex = getFocusedIndex();
+    if (focusedIndex >= options.length - 1) return;
+    const nextIndex = findNextEnabledIndex(focusedIndex, 1);
+    if (nextIndex !== -1) {
+      setFocusedKey(options[nextIndex].value);
+      scrollOptionIntoView(nextIndex);
+    }
+  };
+
   // Handle Enter key
   const handleEnter = () => {
     const currentFocusedKey = latestFocusedKey.current;
@@ -161,6 +244,18 @@ export default function useSelectKeyboard({
         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();
@@ -179,8 +274,10 @@ export default function useSelectKeyboard({
       // Focus the first selected option, or the first enabled option
       let focusedValue: string | number = '';
       if (selectedKeys?.length > 0) {
-        const firstSelected = options?.find(
-          (opt) => opt.value === selectedKeys[0],
+        const firstSelected = options?.find((opt) =>
+          looseMatch
+            ? String(opt.value) === String(selectedKeys[0])
+            : opt.value === selectedKeys[0],
         );
         if (firstSelected && !firstSelected.disabled) {
           focusedValue = firstSelected.value;

package/src/Select/index.en-US.md

@@ -23,6 +23,7 @@ Select component for choosing from a set of options.
 <code src="./demo/tags.tsx" title="Tags" description="Tags mode Select"></code>
 <code src="./demo/orphan.tsx" title="Orphan Value" description="Display and custom styling when the value is not in options"></code>
 <code src="./demo/virtual.tsx" title="Virtual Scroll" description="Virtual scrolling for large datasets (thousands of options)"></code>
+<code src="./demo/columns.tsx" title="Multi-Column" description="Dropdown panel supports multi-column grid display to save vertical space when there are many options"></code>
 
 ## API
 
@@ -53,6 +54,9 @@ Select component for choosing from a set of options.
 | virtual | `boolean` | Enable virtual scrolling. Only the options in the visible window are rendered, so the DOM node count stays constant regardless of the total. Recommended for hundreds or thousands of options | `false` |
 | itemHeight | `number` | Fixed height of each option in pixels. Must be a fixed value when `virtual` is enabled | `32` |
 | listHeight | `number` | Max height of the dropdown popup in pixels | `200` |
+| columns | `number` | Number of columns in the dropdown panel. Enables grid layout when greater than 1 | `1` |
+| popupWidth | `number` | Fixed width of the dropdown popup in pixels. When set, the popup does not stretch to match the trigger width. Useful with multi-column layout | - |
+| looseMatch | `boolean` | Enable loose value matching. When enabled, value comparison uses `String()` conversion instead of strict equality, resolving number/string type mismatch between `value` and `options`. Note: when enabled, `onChange` returns the option's value type, not the originally passed value type | `false` |
 | data-* | `string` | - | Supports all data-* attributes, forwarded to root DOM element |
 
 ### Option

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

@@ -23,6 +23,7 @@ toc: 'content'
 <code src="./demo/tags.tsx" title="标签模式" description="标签模式的Select"></code>
 <code src="./demo/orphan.tsx" title="孤儿值" description="value 不在 options 中时的显示与自定义样式"></code>
 <code src="./demo/virtual.tsx" title="虚拟滚动" description="大数据量（几千条）下的虚拟滚动"></code>
+<code src="./demo/columns.tsx" title="多列布局" description="下拉面板支持多列网格显示，适合选项较多时节省纵向空间"></code>
 
 ## API
 
@@ -53,6 +54,9 @@ toc: 'content'
 | virtual | `boolean` | 是否开启虚拟滚动。开启后仅渲染可视区内的选项，DOM 节点数与数据总量无关，适合成百上千条数据 | `false` |
 | itemHeight | `number` | 每个选项的固定高度（px），开启 `virtual` 时必须为定值 | `32` |
 | listHeight | `number` | 下拉框最大高度（px） | `200` |
+| columns | `number` | 下拉面板列数，大于 1 时启用网格布局 | `1` |
+| popupWidth | `number` | 下拉面板固定宽度（px），设置后弹出层不再跟随触发元素宽度。配合多列布局使用 | - |
+| looseMatch | `boolean` | 是否启用宽松值匹配。开启后 value 与 options 的 value 通过 `String()` 转换后比较，解决 number/string 类型不一致的问题。注意：开启后 `onChange` 回调中的 value 类型为 option 定义的类型，而非传入的原始类型 | `false` |
 | data-* | `string` | - | 支持所有 data-* 属性，透传到组件根 DOM 元素 |
 
 ### Option

package/src/Select/interface.ts

@@ -137,11 +137,27 @@ export interface SelectProps
    * @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
@@ -178,6 +194,7 @@ export interface OptionsContextValue {
   selectedKeys: Array<string | number>;
   focusedKey: string | number;
   multiple: boolean;
+  looseMatch: boolean;
   onSelect: (
     key: string | number,
     e?: React.MouseEvent | React.KeyboardEvent,
@@ -243,6 +260,15 @@ export interface OptionsProps extends Omit<
   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
    */
@@ -251,3 +277,4 @@ export interface OptionsProps extends Omit<
     e?: React.MouseEvent | React.KeyboardEvent,
   ) => void;
 }
+

package/src/Select/option.tsx

@@ -7,7 +7,7 @@ import { OptionsCtx } from './options';
 
 const Option = (props: OptionProps) => {
   const { label, value, disabled, title, dataTestId, style } = props;
-  const { prefixCls, selectedKeys, focusedKey, multiple, onSelect } =
+  const { prefixCls, selectedKeys, focusedKey, multiple, looseMatch, onSelect } =
     useContext(OptionsCtx);
 
   const handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
@@ -22,13 +22,19 @@ const Option = (props: OptionProps) => {
       ? label
       : undefined;
 
-  const selected = selectedKeys.includes(value);
+  const selected = looseMatch
+    ? selectedKeys.some((k) => String(k) === String(value))
+    : selectedKeys.includes(value);
+
+  const focused = looseMatch
+    ? String(focusedKey) === String(value)
+    : focusedKey === value;
 
   return (
     <div
       className={clsx(`${prefixCls}-option`, {
         [`${prefixCls}-option-selected`]: selected,
-        [`${prefixCls}-option-focused`]: focusedKey === value,
+        [`${prefixCls}-option-focused`]: focused,
         [`${prefixCls}-option-disabled`]: disabled,
       })}
       aria-label="option"

package/src/Select/options.tsx

@@ -33,18 +33,23 @@ const Options = forwardRef<HTMLDivElement, OptionsProps>(
       itemHeight = 32,
       listHeight = 200,
       virtualApiRef,
+      columns = 1,
+      looseMatch = false,
       onSelect,
       ...rest
     } = props;
 
+    const multiColumn = columns > 1;
+
     const rootRef = useRef<HTMLDivElement | null>(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, () => rootRef.current as HTMLDivElement, []);
 
-    // 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.
+    const rowCount = multiColumn
+      ? Math.ceil(options.length / columns)
+      : options.length;
+
     const {
       start,
       end,
@@ -54,37 +59,38 @@ const Options = forwardRef<HTMLDivElement, OptionsProps>(
       onScroll,
       scrollToIndex,
     } = useVirtualList({
-      itemCount: options.length,
+      itemCount: virtual ? rowCount : 0,
       itemHeight,
     });
 
-    // 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(() => {
       if (!virtual || !virtualApiRef) return;
-      virtualApiRef.current = { scrollToIndex };
+      virtualApiRef.current = {
+        scrollToIndex: (flatIndex: number) => {
+          const rowIndex = multiColumn
+            ? Math.floor(flatIndex / columns)
+            : flatIndex;
+          scrollToIndex(rowIndex);
+        },
+      };
       return () => {
         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(() => {
       if (virtual) {
         scrollToIndex(0);
       }
     }, [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(() => {
       if (options.length === 0) return;
       if (focusedKey === '') return;
@@ -92,7 +98,10 @@ const Options = forwardRef<HTMLDivElement, OptionsProps>(
       if (focusedIndex < 0) return;
 
       if (virtual) {
-        scrollToIndex(focusedIndex);
+        const rowIndex = multiColumn
+          ? Math.floor(focusedIndex / columns)
+          : focusedIndex;
+        scrollToIndex(rowIndex);
         return;
       }
 
@@ -103,9 +112,18 @@ const Options = forwardRef<HTMLDivElement, OptionsProps>(
         | HTMLElement
         | undefined;
       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).
+        const containerRect = container.getBoundingClientRect();
+        const 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]);
 
     const isEmpty = options.length === 0;
     const ctxValue = {
@@ -113,10 +131,76 @@ const Options = forwardRef<HTMLDivElement, OptionsProps>(
       selectedKeys,
       focusedKey,
       multiple,
+      looseMatch,
       onSelect,
     };
 
-    // ----- Virtual mode: only render the visible window -----
+    // ----- Virtual + multi-column: render rows of N options -----
+    if (virtual && multiColumn && !isEmpty) {
+      const visibleRows = [];
+      for (let rowIdx = start; rowIdx < end; rowIdx++) {
+        const rowOptions = [];
+        for (let col = 0; col < columns; col++) {
+          const flatIdx = rowIdx * columns + col;
+          if (flatIdx < options.length) {
+            rowOptions.push({ option: options[flatIdx], flatIdx });
+          }
+        }
+        visibleRows.push({ rowIdx, rowOptions });
+      }
+
+      return (
+        <div
+          {...rest}
+          className={clsx(
+            `${prefixCls}-popup`,
+            `${prefixCls}-popup-virtual`,
+            popupClassName,
+          )}
+          style={popupStyle}
+          ref={rootRef}
+          tabIndex={-1}
+        >
+          <OptionsCtx.Provider value={ctxValue}>
+            <div
+              className={`${prefixCls}-popup-viewport`}
+              ref={viewportRef}
+              onScroll={onScroll}
+              style={{ maxHeight: listHeight, overflowY: 'auto' }}
+            >
+              <div style={{ height: totalHeight, position: 'relative' }}>
+                {visibleRows.map(({ rowIdx, rowOptions }, ri) => (
+                  <div
+                    key={rowIdx}
+                    className={`${prefixCls}-popup-grid-row`}
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      height: itemHeight,
+                      transform: `translateY(${offsetY + ri * itemHeight}px)`,
+                      display: 'grid',
+                      gridTemplateColumns: `repeat(${columns}, 1fr)`,
+                    }}
+                  >
+                    {rowOptions.map(({ option, flatIdx }) => (
+                      <Option
+                        {...option}
+                        key={option.value}
+                        dataTestId={`${dataTestId}-${flatIdx}`}
+                      />
+                    ))}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </OptionsCtx.Provider>
+        </div>
+      );
+    }
+
+    // ----- Virtual single-column: render visible window -----
     if (virtual && !isEmpty) {
       const visibleOptions = options.slice(start, end);
       return (
@@ -161,12 +245,21 @@ const Options = forwardRef<HTMLDivElement, OptionsProps>(
       );
     }
 
-    // ----- Default mode: render every option (unchanged behavior) -----
+    // ----- Default mode (non-virtual) -----
     return (
       <div
         {...rest}
-        className={clsx(`${prefixCls}-popup`, popupClassName)}
-        style={popupStyle}
+        className={clsx(
+          `${prefixCls}-popup`,
+          { [`${prefixCls}-popup-grid`]: multiColumn },
+          popupClassName,
+        )}
+        style={{
+          ...popupStyle,
+          ...(multiColumn
+            ? { '--yee-select-columns': columns } as React.CSSProperties
+            : undefined),
+        }}
         ref={rootRef}
         tabIndex={-1}
       >

package/src/Select/select.tsx

@@ -15,6 +15,30 @@ import { Option, SelectProps } from './interface';
 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: string | number,
+  b: string | number,
+  loose: boolean,
+): boolean {
+  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: Array<string | number>,
+  val: string | number,
+  loose: boolean,
+): boolean {
+  if (loose) return keys.some((k) => String(k) === String(val));
+  return keys.includes(val);
+}
+
 const Select = (baseprops: SelectProps) => {
   const { select } = useContext(GlobalContext);
   const props = mergeContextToProps(baseprops, select);
@@ -32,6 +56,9 @@ const Select = (baseprops: SelectProps) => {
     virtual,
     itemHeight,
     listHeight,
+    columns = 1,
+    popupWidth,
+    looseMatch = false,
     orphanClassName,
     orphanStyle,
     ...rest
@@ -80,16 +107,14 @@ const Select = (baseprops: SelectProps) => {
       if (keys.length === 0) {
         return [];
       }
-      // 按 keys 顺序回填，找不到的 key 构造 label=value 的兜底项（孤儿值），
-      // 与 Selector 的显示保持一致，避免 onChange 第二参数丢值。
       return keys.map((key) => {
-        const opt = options.find((o) => o.value === key);
+        const opt = options.find((o) => matchValue(o.value, key, looseMatch));
         return opt ?? { value: key, label: String(key) };
       });
     }
 
     return (
-      options.find((opt) => opt.value === keys) ?? {
+      options.find((opt) => matchValue(opt.value, keys, looseMatch)) ?? {
         value: keys,
         label: String(keys),
       }
@@ -107,8 +132,8 @@ const Select = (baseprops: SelectProps) => {
       setSearchValue('');
       setOpen(false);
     } else {
-      if (mergedValue.includes(key)) {
-        keys = mergedValue.filter((k: string | number) => k !== key);
+      if (keysIncludes(mergedValue, key, looseMatch)) {
+        keys = mergedValue.filter((k: string | number) => !matchValue(k, key, looseMatch));
       } else {
         keys = [...mergedValue, key];
       }
@@ -128,7 +153,9 @@ const Select = (baseprops: SelectProps) => {
   };
 
   const handleRemove = (option: Option) => {
-    const keys = mergedValue.filter((k: string | number) => k !== option.value);
+    const keys = mergedValue.filter(
+      (k: string | number) => !matchValue(k, option.value, looseMatch),
+    );
     const filteredOpts = getOptions(keys);
     setMergedValue(keys);
     const key = single ? keys[0] : keys;
@@ -162,6 +189,8 @@ const Select = (baseprops: SelectProps) => {
     options: filteredOpts,
     open,
     selectedKeys: mergedValue,
+    columns,
+    looseMatch,
     onSelect: handleSelect,
     onClose: () => setOpen(false),
     onOpenChange: handleOpenChange,
@@ -183,6 +212,8 @@ const Select = (baseprops: SelectProps) => {
       itemHeight={itemHeight}
       listHeight={listHeight}
       virtualApiRef={virtualApiRef}
+      columns={columns}
+      looseMatch={looseMatch}
     />
   );
 
@@ -191,7 +222,8 @@ const Select = (baseprops: SelectProps) => {
       {...rest}
       placement={placement}
       popup={popup}
-      stretch="width"
+      stretch={popupWidth ? undefined : 'width'}
+      popupStyle={popupWidth ? { width: popupWidth } : undefined}
       open={disabled ? false : open}
       onOpenChange={handleOpenChange}
     >
@@ -209,6 +241,7 @@ const Select = (baseprops: SelectProps) => {
         onKeyDown={onKeyDown}
         orphanClassName={orphanClassName}
         orphanStyle={orphanStyle}
+        looseMatch={looseMatch}
       />
     </Trigger>
   );