@rainbow-oh/yee-c 0.6.4 → 0.8.0

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>
   );

package/src/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/src/Selector/interface.ts

@@ -63,6 +63,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/src/Selector/selector.tsx

@@ -37,6 +37,7 @@ const Selector = React.forwardRef(
       disabled,
       options = [],
       selectedKeys,
+      looseMatch = false,
       orphanClassName,
       orphanStyle,
       allowClear = true,
@@ -67,7 +68,9 @@ const Selector = React.forwardRef(
       }
       // 按 selectedKeys 顺序渲染；找不到的 key 作为孤儿值回退显示 value 本身
       return selectedKeys.map((key) => {
-        const opt = options.find((o) => o.value === key);
+        const opt = looseMatch
+          ? options.find((o) => String(o.value) === String(key))
+          : options.find((o) => o.value === key);
         if (opt) {
           return {
             ...opt,
@@ -85,7 +88,7 @@ const Selector = React.forwardRef(
           _orphan: true,
         };
       });
-    }, [options, selectedKeys, optionLabelProp]);
+    }, [options, selectedKeys, optionLabelProp, looseMatch]);
 
     const handleClick = () => {
       if (inputRef.current && !disabled) {
@@ -183,7 +186,9 @@ const Selector = React.forwardRef(
 
       const key = selectedKeys.length ? selectedKeys[0] : '';
       const opt = Array.isArray(options)
-        ? options.find((opt) => opt.value === key)
+        ? looseMatch
+          ? options.find((opt) => String(opt.value) === String(key))
+          : options.find((opt) => opt.value === key)
         : null;
       // 孤儿值：key 非空但在 options 中找不到时，回退显示 value 本身
       const isOrphan = !opt && key !== '';

package/src/Table/hooks/useColumns.ts

@@ -58,7 +58,7 @@ export default function useColumns({
     const tree = injectSelectionExpand(base, rowSelection, expandable);
     const leaves = flattenLeafColumns(tree);
     const wraped = handleColumns(leaves);
-    const rows = parseHeaderRows(tree);
+    const rows = parseHeaderRows(tree, wraped);
     return { wrapedColumns: wraped, headerRows: rows };
   }, [childColumns, columns, shouldRenderSelection, shouldRenderExpand]);
 

package/src/Table/interface.ts

@@ -577,7 +577,7 @@ export interface TableProps
   /**
    * Row class name, unlike classNames, this prop can be set dynamically via a function
    */
-  rowClassName?: (record: object) => string | undefined;
+  rowClassName?: (record: Record<string, any>) => string | undefined;
   /**
    * Row style, unlike styles, this prop can be set dynamically via a function
    */

package/src/Table/style/index.less

@@ -49,6 +49,12 @@
           background-color: var(--yee-table-head-cell-split-line-color, #eee);
         }
       }
+
+      &-fixed-left,
+      &-fixed-right {
+        position: sticky;
+        z-index: 1;
+      }
     }
 
     &-cell {
@@ -84,6 +90,16 @@
     &-wrapper {
       overflow: auto;
       width: 100%;
+
+      &-scroll-left @{pls}-cell-fixed-left-last {
+        box-shadow: 6px 0 6px -4px
+          var(--yee-table-fixed-left-after-bs-color);
+      }
+
+      &-scroll-right @{pls}-cell-fixed-right-first {
+        box-shadow: -6px 0 6px -4px
+          var(--yee-table-fixed-right-after-bs-color);
+      }
     }
 
     > table {
@@ -101,10 +117,18 @@
     }
   }
 
+  &-row {
+    background-color: var(--yee-table-row-bg-color);
+  }
+
   &-even-row {
     background-color: var(--yee-table-even-row-bg-color);
   }
 
+  &-odd-row {
+    background-color: var(--yee-table-odd-row-bg-color);
+  }
+
   &-column-sorters {
     display: inline-flex;
     align-items: center;
@@ -137,7 +161,7 @@
     &-fixed-left,
     &-fixed-right {
       position: sticky;
-      background-color: inherit;
+      background-color: var(--yee-table-fixed-column-bg-color);
     }
   }
 
@@ -163,17 +187,17 @@
     }
   }
 
-  &-odd-row {
-    > @{pls}-cell {
-      background-color: var(--yee-table-odd-row-bg-color);
-    }
-  }
+  // &-odd-row {
+  //   > @{pls}-cell {
+  //     background-color: var(--yee-table-odd-row-bg-color);
+  //   }
+  // }
 
-  &-even-row {
-    > @{pls}-cell {
-      background-color: var(--yee-table-even-row-bg-color);
-    }
-  }
+  // &-even-row {
+  //   > @{pls}-cell {
+  //     background-color: var(--yee-table-even-row-bg-color);
+  //   }
+  // }
 
   &-footer {
     display: flex;

package/src/Table/table.tsx

@@ -126,6 +126,36 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
 
   // Track previous values to determine what action triggered onChange
   const prevSortersRef = useRef<typeof sorters>({});
+  const contentWrapperRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [horizontalScroll, setHorizontalScroll] = React.useState({
+    left: false,
+    right: false,
+  });
+
+  const updateHorizontalScroll = React.useCallback(() => {
+    const wrapper = contentWrapperRef.current;
+    const content = contentRef.current;
+    if (!wrapper || !content) return;
+
+    const scrollContainer =
+      content.scrollWidth - content.clientWidth > 1 ? content : wrapper;
+    const maxScrollLeft =
+      scrollContainer.scrollWidth - scrollContainer.clientWidth;
+    const hasHorizontalScroll = maxScrollLeft > 1;
+    const next = {
+      left: hasHorizontalScroll && scrollContainer.scrollLeft > 1,
+      right:
+        hasHorizontalScroll &&
+        scrollContainer.scrollLeft < maxScrollLeft - 1,
+    };
+
+    setHorizontalScroll((current) =>
+      current.left === next.left && current.right === next.right
+        ? current
+        : next,
+    );
+  }, []);
 
   // Wrap onFilter to trigger onChange
   const onFilter = React.useCallback(
@@ -173,6 +203,25 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     }
   }, [sorters, current, pageSize, pageData, sortedData, onChange]);
 
+  useEffect(() => {
+    updateHorizontalScroll();
+
+    const wrapper = contentWrapperRef.current;
+    const content = contentRef.current;
+    if (!wrapper || !content) return undefined;
+
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', updateHorizontalScroll);
+      return () => window.removeEventListener('resize', updateHorizontalScroll);
+    }
+
+    const resizeObserver = new ResizeObserver(updateHorizontalScroll);
+    resizeObserver.observe(wrapper);
+    resizeObserver.observe(content);
+
+    return () => resizeObserver.disconnect();
+  }, [updateHorizontalScroll, wrapedColumns, pageData, scroll?.x]);
+
   const renderHeader = () => {
     return (
       <Header
@@ -259,13 +308,23 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     );
 
     return (
-      <div className={`${prefixCls}-content-wrapper`}>
+      <div
+        ref={contentWrapperRef}
+        className={clsx(`${prefixCls}-content-wrapper`, {
+          [`${prefixCls}-content-wrapper-scroll-left`]: horizontalScroll.left,
+          [`${prefixCls}-content-wrapper-scroll-right`]:
+            horizontalScroll.right,
+        })}
+        onScroll={updateHorizontalScroll}
+      >
         <div
+          ref={contentRef}
           className={clsx(`${prefixCls}-content`, {
             [`${prefixCls}-${size}-size`]: size,
             [`${prefixCls}-fixed-header`]: scroll?.y,
           })}
           style={{ height: scroll?.y, width: scroll?.x }}
+          onScroll={updateHorizontalScroll}
         >
           {table}
         </div>

package/src/Table/tbody/cell.tsx

@@ -61,7 +61,7 @@ const TableCell: React.FC<BodyCellProps> = (props) => {
       {
         [`${prefixCls}-cell-fixed-${fixed}`]: fixed,
         [`${prefixCls}-cell-fixed-${fixed}-first`]: isFixedRightFirst,
-        [`${prefixCls}-fixed-${fixed}-last`]: isFixedLeftLast,
+        [`${prefixCls}-cell-fixed-${fixed}-last`]: isFixedLeftLast,
       },
       className,
     );

package/src/Table/util/header.ts

@@ -32,13 +32,17 @@ export function flattenLeafColumns(
  *
  * - Pass 1 (DFS): place each column into the row matching its depth; a group's
  *   colSpan equals the sum of its children's colSpans.
+ * - Fixed metadata from the resolved leaf columns is reused by leaf cells and
+ *   aggregated for group cells whose descendants share the same fixed side.
  * - Pass 2: leaf cells (no sub-columns) get rowSpan = rowCount - rowIndex so
  *   they stretch down to the last header row; group cells keep rowSpan = 1.
  */
 export function parseHeaderRows(
   rootColumns: WrapedColumnProps[],
+  resolvedLeafColumns: WrapedColumnProps[] = flattenLeafColumns(rootColumns),
 ): HeaderCell[][] {
   const rows: HeaderCell[][] = [];
+  let leafIndex = 0;
 
   const fillRowCells = (
     columns: WrapedColumnProps[],
@@ -46,17 +50,59 @@ export function parseHeaderRows(
   ): number => {
     rows[rowIndex] = rows[rowIndex] || [];
     let colSpanTotal = 0;
-    columns.filter(Boolean).forEach((column) => {
+    columns.filter(Boolean).forEach((sourceColumn) => {
+      let column = sourceColumn;
+      const subColumns = sourceColumn.children as
+        | WrapedColumnProps[]
+        | undefined;
+      const leafStartIndex = leafIndex;
       const cell: HeaderCell = {
         column,
         colSpan: 1,
         rowSpan: 1,
       };
-      const subColumns = column.children as WrapedColumnProps[] | undefined;
+
       if (subColumns && subColumns.length > 0) {
         cell.colSpan = fillRowCells(subColumns, rowIndex + 1);
         cell.hasSubColumns = true;
+
+        const groupLeaves = resolvedLeafColumns.slice(
+          leafStartIndex,
+          leafIndex,
+        );
+        const fixed = groupLeaves[0]?.fixed;
+        const isFixedGroup =
+          (fixed === 'left' || fixed === 'right') &&
+          groupLeaves.every((leaf) => leaf.fixed === fixed);
+
+        if (isFixedGroup) {
+          const offsetLeaf =
+            fixed === 'left'
+              ? groupLeaves[0]
+              : groupLeaves[groupLeaves.length - 1];
+          const boundaryLeaf =
+            fixed === 'left'
+              ? groupLeaves[groupLeaves.length - 1]
+              : groupLeaves[0];
+          column = {
+            ...sourceColumn,
+            fixed,
+            style: {
+              ...sourceColumn.style,
+              [fixed]: offsetLeaf.style?.[fixed],
+            },
+            isFixedLeftLast: fixed === 'left' && boundaryLeaf.isFixedLeftLast,
+            isFixedRightFirst:
+              fixed === 'right' && boundaryLeaf.isFixedRightFirst,
+          };
+          cell.column = column;
+        }
+      } else {
+        column = resolvedLeafColumns[leafIndex] || sourceColumn;
+        cell.column = column;
+        leafIndex += 1;
       }
+
       rows[rowIndex].push(cell);
       colSpanTotal += cell.colSpan;
     });