@rainbow-oh/yee-c 0.6.4 → 0.8.0

package/dist/cjs/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/cjs/Select/demo/columns.d.ts

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

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

@@ -0,0 +1,62 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Select/demo/columns.tsx
+var columns_exports = {};
+__export(columns_exports, {
+  default: () => columns_default
+});
+module.exports = __toCommonJS(columns_exports);
+var import_yee_c = require("../..");
+var import_react = __toESM(require("react"));
+var options = Array.from({ length: 24 }, (_, i) => ({
+  label: `Option ${i + 1}`,
+  value: `opt-${i + 1}`
+}));
+var columns_default = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 24 } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("p", null, "3 columns:"), /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Select,
+    {
+      columns: 3,
+      popupWidth: 360,
+      options,
+      placeholder: "Select an option",
+      style: { width: 200 }
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("p", null, "4 columns with multiple selection:"), /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Select,
+    {
+      columns: 4,
+      popupWidth: 480,
+      mode: "multiple",
+      options,
+      placeholder: "Select options",
+      style: { width: 300 }
+    }
+  )));
+};

package/dist/cjs/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/cjs/Select/hooks/useSelectKeyboard.js

@@ -38,6 +38,8 @@ function useSelectKeyboard({
   options,
   open,
   selectedKeys,
+  columns = 1,
+  looseMatch = false,
   onSelect,
   onClose,
   onOpenChange,
@@ -80,18 +82,39 @@ function useSelectKeyboard({
     const optionElements = container.querySelectorAll('[role="option"]');
     const targetElement = optionElements[index];
     if (targetElement) {
-      targetElement.scrollIntoView({
-        block: "nearest"
-      });
+      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;
+      }
     }
   };
   const handleArrowUp = () => {
+    var _a;
     const focusedIndex = getFocusedIndex();
     let nextIndex;
-    if (focusedIndex === -1) {
-      nextIndex = findNextEnabledIndex(options.length - 1, -1);
+    if (columns > 1) {
+      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 {
+          const lastRowStart = Math.floor((options.length - 1) / columns) * columns;
+          const col = focusedIndex % columns;
+          const wrapTarget = Math.min(lastRowStart + col, options.length - 1);
+          nextIndex = ((_a = options[wrapTarget]) == null ? void 0 : _a.disabled) ? findNextEnabledIndex(wrapTarget, -1) : wrapTarget;
+        }
+      }
     } else {
-      nextIndex = findNextEnabledIndex(focusedIndex, -1);
+      if (focusedIndex === -1) {
+        nextIndex = findNextEnabledIndex(options.length - 1, -1);
+      } else {
+        nextIndex = findNextEnabledIndex(focusedIndex, -1);
+      }
     }
     if (nextIndex !== -1) {
       const nextValue = options[nextIndex].value;
@@ -100,12 +123,28 @@ function useSelectKeyboard({
     }
   };
   const handleArrowDown = () => {
+    var _a;
     const focusedIndex = getFocusedIndex();
     let nextIndex;
-    if (focusedIndex === -1) {
-      nextIndex = findNextEnabledIndex(0, 1);
+    if (columns > 1) {
+      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 {
+          const col = focusedIndex % columns;
+          const wrapTarget = col;
+          nextIndex = ((_a = options[wrapTarget]) == null ? void 0 : _a.disabled) ? findNextEnabledIndex(wrapTarget, 1) : wrapTarget;
+        }
+      }
     } else {
-      nextIndex = findNextEnabledIndex(focusedIndex, 1);
+      if (focusedIndex === -1) {
+        nextIndex = findNextEnabledIndex(0, 1);
+      } else {
+        nextIndex = findNextEnabledIndex(focusedIndex, 1);
+      }
     }
     if (nextIndex !== -1) {
       const nextValue = options[nextIndex].value;
@@ -113,6 +152,26 @@ function useSelectKeyboard({
       scrollOptionIntoView(nextIndex);
     }
   };
+  const handleArrowLeft = () => {
+    const focusedIndex = getFocusedIndex();
+    if (focusedIndex <= 0)
+      return;
+    const nextIndex = findNextEnabledIndex(focusedIndex, -1);
+    if (nextIndex !== -1) {
+      setFocusedKey(options[nextIndex].value);
+      scrollOptionIntoView(nextIndex);
+    }
+  };
+  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);
+    }
+  };
   const handleEnter = () => {
     const currentFocusedKey = latestFocusedKey.current;
     if (!currentFocusedKey)
@@ -142,6 +201,18 @@ 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();
@@ -158,7 +229,7 @@ function useSelectKeyboard({
       let focusedValue = "";
       if ((selectedKeys == null ? void 0 : selectedKeys.length) > 0) {
         const firstSelected = options == null ? void 0 : options.find(
-          (opt) => opt.value === selectedKeys[0]
+          (opt) => looseMatch ? String(opt.value) === String(selectedKeys[0]) : opt.value === selectedKeys[0]
         );
         if (firstSelected && !firstSelected.disabled) {
           focusedValue = firstSelected.value;

package/dist/cjs/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/cjs/Select/option.js

@@ -38,20 +38,21 @@ var import_react = __toESM(require("react"));
 var import_options = require("./options");
 var Option = (props) => {
   const { label, value, disabled, title, dataTestId, style } = props;
-  const { prefixCls, selectedKeys, focusedKey, multiple, onSelect } = (0, import_react.useContext)(import_options.OptionsCtx);
+  const { prefixCls, selectedKeys, focusedKey, multiple, looseMatch, onSelect } = (0, import_react.useContext)(import_options.OptionsCtx);
   const handleClick = (e) => {
     if (!disabled) {
       onSelect(value, e);
     }
   };
   const htmlTitle = title ? title : typeof label === "string" ? label : void 0;
-  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 /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: (0, import_clsx.default)(`${prefixCls}-option`, {
         [`${prefixCls}-option-selected`]: selected,
-        [`${prefixCls}-option-focused`]: focusedKey === value,
+        [`${prefixCls}-option-focused`]: focused,
         [`${prefixCls}-option-disabled`]: disabled
       }),
       "aria-label": "option",

package/dist/cjs/Select/options.js

@@ -87,6 +87,8 @@ var Options = (0, import_react.forwardRef)(
       itemHeight = 32,
       listHeight = 200,
       virtualApiRef,
+      columns = 1,
+      looseMatch = false,
       onSelect
     } = _a, rest = __objRest(_a, [
       "prefixCls",
@@ -101,10 +103,14 @@ var Options = (0, import_react.forwardRef)(
       "itemHeight",
       "listHeight",
       "virtualApiRef",
+      "columns",
+      "looseMatch",
       "onSelect"
     ]);
+    const multiColumn = columns > 1;
     const rootRef = (0, import_react.useRef)(null);
     (0, import_react.useImperativeHandle)(ref, () => rootRef.current, []);
+    const rowCount = multiColumn ? Math.ceil(options.length / columns) : options.length;
     const {
       start,
       end,
@@ -114,19 +120,24 @@ var Options = (0, import_react.forwardRef)(
       onScroll,
       scrollToIndex
     } = (0, import_useVirtualList.default)({
-      itemCount: options.length,
+      itemCount: virtual ? rowCount : 0,
       itemHeight
     });
     (0, import_react.useEffect)(() => {
       if (!virtual || !virtualApiRef)
         return;
-      virtualApiRef.current = { scrollToIndex };
+      virtualApiRef.current = {
+        scrollToIndex: (flatIndex) => {
+          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]);
     (0, import_react.useEffect)(() => {
       if (virtual) {
         scrollToIndex(0);
@@ -141,7 +152,8 @@ var Options = (0, import_react.forwardRef)(
       if (focusedIndex < 0)
         return;
       if (virtual) {
-        scrollToIndex(focusedIndex);
+        const rowIndex = multiColumn ? Math.floor(focusedIndex / columns) : focusedIndex;
+        scrollToIndex(rowIndex);
         return;
       }
       const container = rootRef.current;
@@ -150,17 +162,83 @@ var Options = (0, import_react.forwardRef)(
       const optionElements = container.querySelectorAll('[role="option"]');
       const targetElement = optionElements[focusedIndex];
       if (targetElement) {
-        targetElement.scrollIntoView({ block: "nearest" });
+        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 = {
       prefixCls,
       selectedKeys,
       focusedKey,
       multiple,
+      looseMatch,
       onSelect
     };
+    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 /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        __spreadProps(__spreadValues({}, rest), {
+          className: (0, import_clsx.default)(
+            `${prefixCls}-popup`,
+            `${prefixCls}-popup-virtual`,
+            popupClassName
+          ),
+          style: popupStyle,
+          ref: rootRef,
+          tabIndex: -1
+        }),
+        /* @__PURE__ */ import_react.default.createElement(OptionsCtx.Provider, { value: ctxValue }, /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `${prefixCls}-popup-viewport`,
+            ref: viewportRef,
+            onScroll,
+            style: { maxHeight: listHeight, overflowY: "auto" }
+          },
+          /* @__PURE__ */ import_react.default.createElement("div", { style: { height: totalHeight, position: "relative" } }, visibleRows.map(({ rowIdx, rowOptions }, ri) => /* @__PURE__ */ import_react.default.createElement(
+            "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 }) => /* @__PURE__ */ import_react.default.createElement(
+              import_option.default,
+              __spreadProps(__spreadValues({}, option), {
+                key: option.value,
+                dataTestId: `${dataTestId}-${flatIdx}`
+              })
+            ))
+          )))
+        ))
+      );
+    }
     if (virtual && !isEmpty) {
       const visibleOptions = options.slice(start, end);
       return /* @__PURE__ */ import_react.default.createElement(
@@ -204,8 +282,12 @@ var Options = (0, import_react.forwardRef)(
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_clsx.default)(`${prefixCls}-popup`, popupClassName),
-        style: popupStyle,
+        className: (0, import_clsx.default)(
+          `${prefixCls}-popup`,
+          { [`${prefixCls}-popup-grid`]: multiColumn },
+          popupClassName
+        ),
+        style: __spreadValues(__spreadValues({}, popupStyle), multiColumn ? { "--yee-select-columns": columns } : void 0),
         ref: rootRef,
         tabIndex: -1
       }),

package/dist/cjs/Select/select.js

@@ -70,6 +70,16 @@ var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps")
 var import_useSelectKeyboard = __toESM(require("./hooks/useSelectKeyboard"));
 var import_options = __toESM(require("./options"));
 var import_style = require("./style/index.less");
+function matchValue(a, b, loose) {
+  if (loose)
+    return String(a) === String(b);
+  return a === b;
+}
+function keysIncludes(keys, val, loose) {
+  if (loose)
+    return keys.some((k) => String(k) === String(val));
+  return keys.includes(val);
+}
 var Select = (baseprops) => {
   const { select } = (0, import_react.useContext)(import_Config_Provider.GlobalContext);
   const props = (0, import_mergeContextToProps.default)(baseprops, select);
@@ -87,6 +97,9 @@ var Select = (baseprops) => {
     virtual,
     itemHeight,
     listHeight,
+    columns = 1,
+    popupWidth,
+    looseMatch = false,
     orphanClassName,
     orphanStyle
   } = _a, rest = __objRest(_a, [
@@ -103,6 +116,9 @@ var Select = (baseprops) => {
     "virtual",
     "itemHeight",
     "listHeight",
+    "columns",
+    "popupWidth",
+    "looseMatch",
     "orphanClassName",
     "orphanStyle"
   ]);
@@ -139,11 +155,11 @@ var Select = (baseprops) => {
         return [];
       }
       return keys.map((key) => {
-        const opt = options.find((o) => o.value === key);
+        const opt = options.find((o) => matchValue(o.value, key, looseMatch));
         return opt != null ? opt : { value: key, label: String(key) };
       });
     }
-    return (_a2 = options.find((opt) => opt.value === keys)) != null ? _a2 : {
+    return (_a2 = options.find((opt) => matchValue(opt.value, keys, looseMatch))) != null ? _a2 : {
       value: keys,
       label: String(keys)
     };
@@ -156,8 +172,8 @@ var Select = (baseprops) => {
       setSearchValue("");
       setOpen(false);
     } else {
-      if (mergedValue.includes(key)) {
-        keys = mergedValue.filter((k) => k !== key);
+      if (keysIncludes(mergedValue, key, looseMatch)) {
+        keys = mergedValue.filter((k) => !matchValue(k, key, looseMatch));
       } else {
         keys = [...mergedValue, key];
       }
@@ -174,7 +190,9 @@ var Select = (baseprops) => {
     onChange == null ? void 0 : onChange(single ? "" : [], single ? void 0 : []);
   };
   const handleRemove = (option) => {
-    const keys = mergedValue.filter((k) => k !== option.value);
+    const keys = mergedValue.filter(
+      (k) => !matchValue(k, option.value, looseMatch)
+    );
     const filteredOpts2 = getOptions(keys);
     setMergedValue(keys);
     const key = single ? keys[0] : keys;
@@ -203,6 +221,8 @@ var Select = (baseprops) => {
     options: filteredOpts,
     open,
     selectedKeys: mergedValue,
+    columns,
+    looseMatch,
     onSelect: handleSelect,
     onClose: () => setOpen(false),
     onOpenChange: handleOpenChange,
@@ -223,7 +243,9 @@ var Select = (baseprops) => {
       virtual,
       itemHeight,
       listHeight,
-      virtualApiRef
+      virtualApiRef,
+      columns,
+      looseMatch
     }
   );
   return /* @__PURE__ */ import_react.default.createElement(
@@ -231,7 +253,8 @@ var Select = (baseprops) => {
     __spreadProps(__spreadValues({}, rest), {
       placement,
       popup,
-      stretch: "width",
+      stretch: popupWidth ? void 0 : "width",
+      popupStyle: popupWidth ? { width: popupWidth } : void 0,
       open: disabled ? false : open,
       onOpenChange: handleOpenChange
     }),
@@ -249,7 +272,8 @@ var Select = (baseprops) => {
         onSearch: handleSearch,
         onKeyDown,
         orphanClassName,
-        orphanStyle
+        orphanStyle,
+        looseMatch
       })
     )
   );

package/dist/cjs/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/cjs/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
      */