@rainbow-oh/yee-c 0.9.1 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Badge/badge.tsx

@@ -27,6 +27,7 @@ const InternalBadge: React.FC<BadgeProps> = (baseprops) => {
     className,
     styles,
     classNames,
+    title,
     ...rest
   } = props;
 
@@ -43,7 +44,7 @@ const InternalBadge: React.FC<BadgeProps> = (baseprops) => {
     if (count === null || count === undefined) return null;
 
     if (typeof count === 'number') {
-      supTitle = String(count);
+      supTitle = title || String(count);
 
       // When count is 0 and showZero is false, return null
       if (count === 0 && !showZero) return null;

package/src/Badge/interface.ts

@@ -27,6 +27,10 @@ export interface BadgeProps extends DataAttributeProps {
    * Child component
    */
   children?: React.ReactNode;
+  /**
+   * Native Title
+  */
+  title?: string;
   /**
    * Number to display or custom content
    */

package/src/Input/style/index.less

@@ -13,6 +13,7 @@
   border: var(--yee-input-border-width) solid var(--yee-input-border-color);
   border-radius: var(--yee-input-border-radius, 4px);
   font-family: var(--yee-font-family);
+  outline: inherit;
 
   &:not(@{pls}-disabled):hover {
     border-color: var(--yee-input-hover-border-color);

package/src/Popconfirm/interface.ts

@@ -47,10 +47,6 @@ export interface PopconfirmProps extends Omit<
    * open, controllered
    * */
   open?: boolean;
-  /**
-   * placement
-   */
-  placement?: 'top' | 'bottom' | 'left' | 'right';
   /**
    * 设置确认按钮文本
    * */

package/src/Select/select.tsx

@@ -13,6 +13,7 @@ import mergeContextToProps from '../utils/mergeContextToProps';
 import useSelectKeyboard from './hooks/useSelectKeyboard';
 import { Option, SelectProps } from './interface';
 import Options from './options';
+import Omit from '../utils/omit';
 import './style/index.less';
 
 // ---------------------------------------------------------------------------
@@ -229,7 +230,7 @@ const Select = (baseprops: SelectProps) => {
       onOpenChange={handleOpenChange}
     >
       <Selector
-        {...rest}
+        {...Omit(rest, ['forceRender'])}
         mode={mode}
         value={searchValue}
         options={options}

package/src/TableSelect/table-select.tsx

@@ -198,6 +198,7 @@ const TableSelect = (baseprops: TableSelectProps) => {
 
   return (
     <Trigger
+      {...rest}
       trigger="click"
       popupClassName={`${prefixCls}-popup`}
       popup={renderPopup()}

package/src/Tabs/demo/overflow-center.tsx

@@ -0,0 +1,35 @@
+import { Tabs } from '@rainbow-oh/yee-c';
+import React, { useState } from 'react';
+
+export default () => {
+  const items = Array.from({ length: 24 }, (_, i) => ({
+    key: `tab-${i + 1}`,
+    label: `Tab ${i + 1}`,
+    children: `Content of Tab Pane ${i + 1}`,
+  }));
+
+  const [centerKey, setCenterKey] = useState<string | number>('tab-1');
+  const [autoKey, setAutoKey] = useState<string | number>('tab-1');
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+      <div>
+        <p style={{ marginBottom: 8 }}>activeAlign=&quot;center&quot;</p>
+        <div style={{ maxWidth: 480 }} data-testid="center-wrap">
+          <Tabs
+            activeAlign="center"
+            items={items}
+            activeKey={centerKey}
+            onChange={setCenterKey}
+          />
+        </div>
+      </div>
+      <div>
+        <p style={{ marginBottom: 8 }}>default (auto)</p>
+        <div style={{ maxWidth: 480 }} data-testid="auto-wrap">
+          <Tabs items={items} activeKey={autoKey} onChange={setAutoKey} />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/Tabs/hooks/useNavListMove.ts

@@ -9,6 +9,7 @@ interface UseNavListMoveOptions {
   direction: 'horizontal' | 'vertical';
   activeKey: string | number;
   enabled: boolean;
+  align?: 'auto' | 'center';
   activetab: React.RefObject<HTMLElement | null>;
   navList: React.RefObject<HTMLDivElement | null>;
   navContainer: React.RefObject<HTMLDivElement | null>;
@@ -19,6 +20,7 @@ export function useNavListMove({
   direction,
   activeKey,
   enabled,
+  align = 'auto',
   activetab,
   navList,
   navContainer,
@@ -33,29 +35,64 @@ export function useNavListMove({
       return;
     }
 
-    const [isVisible] = isInContainer(direction, tab, list, container);
-    if (isVisible) return;
+    // 'auto': keep as-is when the active tab is already fully visible.
+    // 'center': always re-center, even for tabs already visible on the header.
+    if (align !== 'center') {
+      const [isVisible] = isInContainer(direction, tab, list, container);
+      if (isVisible) return;
+    }
+
+    let moved = false;
 
     if (direction === 'horizontal') {
-      const [x] = getEleTranslate(list);
-      const tabLeft = tab.offsetLeft;
-      const tabWidth = tab.offsetWidth;
-      const containerWidth = container.clientWidth;
+      if (align === 'center') {
+        const containerWidth = container.clientWidth;
+        const maxOffset = list.scrollWidth - containerWidth;
+        const tabCenter = tab.offsetLeft + tab.offsetWidth / 2;
 
-      let newX = x;
+        let newX = Math.round(containerWidth / 2 - tabCenter);
+        newX = Math.max(-maxOffset, Math.min(0, newX));
 
-      // Tab overflows on the right side
-      if (tabLeft + tabWidth - Math.abs(x) > containerWidth) {
-        const overflow = tabLeft + tabWidth - Math.abs(x) - containerWidth;
-        newX = x - overflow;
-      }
-      // Tab overflows on the left side
-      else if (tabLeft < Math.abs(x)) {
-        const overflow = Math.abs(x) - tabLeft;
-        newX = x + overflow;
+        const [x] = getEleTranslate(list);
+        if (Math.abs(newX - x) > 0.5) {
+          setEleTranslate(list, newX);
+          moved = true;
+        }
+      } else {
+        const [x] = getEleTranslate(list);
+        const tabLeft = tab.offsetLeft;
+        const tabWidth = tab.offsetWidth;
+        const containerWidth = container.clientWidth;
+
+        let newX = x;
+
+        // Tab overflows on the right side
+        if (tabLeft + tabWidth - Math.abs(x) > containerWidth) {
+          const overflow = tabLeft + tabWidth - Math.abs(x) - containerWidth;
+          newX = x - overflow;
+        }
+        // Tab overflows on the left side
+        else if (tabLeft < Math.abs(x)) {
+          const overflow = Math.abs(x) - tabLeft;
+          newX = x + overflow;
+        }
+
+        setEleTranslate(list, newX);
+        moved = true;
       }
+    } else if (align === 'center') {
+      const containerHeight = container.clientHeight;
+      const maxOffset = container.scrollHeight - containerHeight;
+      const tabCenter = tab.offsetTop + tab.offsetHeight / 2;
 
-      setEleTranslate(list, newX);
+      const newScrollTop = Math.max(
+        0,
+        Math.min(maxOffset, Math.round(tabCenter - containerHeight / 2)),
+      );
+      if (Math.abs(newScrollTop - container.scrollTop) > 0.5) {
+        container.scrollTop = newScrollTop;
+        moved = true;
+      }
     } else {
       const tabTop = tab.offsetTop;
       const tabHeight = tab.offsetHeight;
@@ -66,19 +103,24 @@ export function useNavListMove({
       if (tabTop + tabHeight - scrollTop >= containerHeight) {
         const overflow = tabTop + tabHeight - scrollTop - containerHeight;
         container.scrollTop = scrollTop + overflow;
+        moved = true;
       }
       // Tab overflows above
       else if (tabTop < scrollTop) {
         const overflow = scrollTop - tabTop;
         container.scrollTop = scrollTop - overflow;
+        moved = true;
       }
     }
 
-    onMoved?.();
+    if (moved) {
+      onMoved?.();
+    }
   }, [
     activeKey,
     enabled,
     direction,
+    align,
     activetab,
     navList,
     navContainer,

package/src/Tabs/hooks/useTabScroll.ts

@@ -43,6 +43,12 @@ export function useTabScroll({
 
   const debouncedUpdateShadow = useDebounceFunction(updateShadow, 200);
 
+  // Refresh dropdown range and shadows after the nav list is moved programmatically
+  const refresh = useCallback(() => {
+    setRefreshKey((prev) => prev + 1);
+    debouncedUpdateShadow();
+  }, [debouncedUpdateShadow]);
+
   useEffect(() => {
     const container = navContainer.current;
     const list = navList.current;
@@ -99,5 +105,5 @@ export function useTabScroll({
     updateShadow,
   ]);
 
-  return { refreshKey, updateShadow: debouncedUpdateShadow };
+  return { refreshKey, refresh, updateShadow: debouncedUpdateShadow };
 }

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

@@ -19,43 +19,45 @@ Tabs make it easy to switch between different views.
 <code src="./demo/type.tsx" title="Type" description="Different types of tabs"></code>
 <code src="./demo/editable.tsx" title="Editable" description="Add and remove tabs"></code>
 <code src="./demo/extra.tsx" title="Extra Content" description="Extra content in tabs"></code>
+<code src="./demo/overflow-center.tsx" title="Center Active Tab on Overflow" description="When tabs overflow into a dropdown, activeAlign=&quot;center&quot; scrolls the tab selected from the dropdown to the middle of the header"></code>
 <code src="./demo/controlled.tsx" title="Controlled" description="Controlled tabs"></code>
 
 ## API
 
 ### TabsProps
 
-| Property | Type | Description | Default |
-| --- | --- | --- | --- |
-| prefixCls | `string` | Custom class name prefix | - |
-| className | `string` | Custom root class name | - |
-| style | `React.CSSProperties` | Custom root style | - |
-| classNames | `Partial<Record<SemanticDOM, string>>` | Custom structure class names | - |
-| styles | `Partial<Record<SemanticDOM, React.CSSProperties>>` | Custom structure styles | - |
-| type | `'card' \| 'editable-card'` | Tab style | - |
-| activeKey | `string \| number` | Current active tab key | - |
-| defaultActiveKey | `string \| number` | Default active tab key | - |
-| items | `Array<TabItemType>` | Tab items | - |
-| position | `'top' \| 'bottom' \| 'left' \| 'right'` | Tab position | `top` |
-| headerExtra | `{ prefix?: React.ReactNode \| (() => React.ReactNode); suffix?: React.ReactNode \| (() => React.ReactNode) }` | Extra content in tab bar | - |
-| children | `Array<React.ReactElement>` | Children elements | - |
-| lazy | `boolean` | Lazy load content | - |
-| fixedHeader | `boolean` | Whether to fix header area | `false` |
-| onEdit | `(type: 'add' \| 'remove', key?: number \| string) => void` | Edit callback | - |
-| onChange | `(key: string \| number) => void` | Change callback | - |
-| onTabClick | `(key: string \| number) => void \| boolean` | Tab click callback | - |
-| data-* | `string` | - | Supports all data-* attributes, forwarded to root DOM element |
+| Property         | Type                                                                                                           | Description                                                                                                                                                                                                                                      | Default                                                        |
+| ---------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------- |
+| prefixCls        | `string`                                                                                                       | Custom class name prefix                                                                                                                                                                                                                         | -                                                              |
+| className        | `string`                                                                                                       | Custom root class name                                                                                                                                                                                                                           | -                                                              |
+| style            | `React.CSSProperties`                                                                                          | Custom root style                                                                                                                                                                                                                                | -                                                              |
+| classNames       | `Partial<Record<SemanticDOM, string>>`                                                                         | Custom structure class names                                                                                                                                                                                                                     | -                                                              |
+| styles           | `Partial<Record<SemanticDOM, React.CSSProperties>>`                                                            | Custom structure styles                                                                                                                                                                                                                          | -                                                              |
+| type             | `'card' \| 'editable-card'`                                                                                    | Tab style                                                                                                                                                                                                                                        | -                                                              |
+| activeKey        | `string \| number`                                                                                             | Current active tab key                                                                                                                                                                                                                           | -                                                              |
+| defaultActiveKey | `string \| number`                                                                                             | Default active tab key                                                                                                                                                                                                                           | -                                                              |
+| items            | `Array<TabItemType>`                                                                                           | Tab items                                                                                                                                                                                                                                        | -                                                              |
+| position         | `'top' \| 'bottom' \| 'left' \| 'right'`                                                                       | Tab position                                                                                                                                                                                                                                     | `top`                                                          |
+| headerExtra      | `{ prefix?: React.ReactNode \| (() => React.ReactNode); suffix?: React.ReactNode \| (() => React.ReactNode) }` | Extra content in tab bar                                                                                                                                                                                                                         | -                                                              |
+| children         | `Array<React.ReactElement>`                                                                                    | Children elements                                                                                                                                                                                                                                | -                                                              |
+| lazy             | `boolean`                                                                                                      | Lazy load content                                                                                                                                                                                                                                | -                                                              |
+| fixedHeader      | `boolean`                                                                                                      | Whether to fix header area                                                                                                                                                                                                                       | `false`                                                        |
+| activeAlign      | `'auto' \| 'center'`                                                                                           | How the active tab is aligned when the tab list overflows: `auto` scrolls minimally to the edge (no scrolling when already fully visible); `center` always scrolls it to the middle of the header, including tabs clicked directly on the header | `auto`                                                         |
+| onEdit           | `(type: 'add' \| 'remove', key?: number \| string) => void`                                                    | Edit callback                                                                                                                                                                                                                                    | -                                                              |
+| onChange         | `(key: string \| number) => void`                                                                              | Change callback                                                                                                                                                                                                                                  | -                                                              |
+| onTabClick       | `(key: string \| number) => void \| boolean`                                                                   | Tab click callback                                                                                                                                                                                                                               | -                                                              |
+| data-\*          | `string`                                                                                                       | -                                                                                                                                                                                                                                                | Supports all data-\* attributes, forwarded to root DOM element |
 
 ### TabItemType
 
-| Property | Type | Description | Default |
-| --- | --- | --- | --- |
-| key | `string \| number` | Unique key | - |
-| label | `React.ReactNode` | Tab label | - |
-| icon | `React.ReactNode` | Tab icon | - |
-| disabled | `boolean` | Disabled state | - |
-| closable | `boolean` | Whether closable (effective when type="editable-card") | `true` |
-| badge | `number` | Badge number | - |
-| items | `Array<TabItemType>` | Sub tabs | - |
-| children | `React.ReactNode` | Tab content | - |
-| data-* | `string` | - | Supports all data-* attributes, forwarded to root DOM element |
+| Property | Type                 | Description                                            | Default                                                        |
+| -------- | -------------------- | ------------------------------------------------------ | -------------------------------------------------------------- |
+| key      | `string \| number`   | Unique key                                             | -                                                              |
+| label    | `React.ReactNode`    | Tab label                                              | -                                                              |
+| icon     | `React.ReactNode`    | Tab icon                                               | -                                                              |
+| disabled | `boolean`            | Disabled state                                         | -                                                              |
+| closable | `boolean`            | Whether closable (effective when type="editable-card") | `true`                                                         |
+| badge    | `number`             | Badge number                                           | -                                                              |
+| items    | `Array<TabItemType>` | Sub tabs                                               | -                                                              |
+| children | `React.ReactNode`    | Tab content                                            | -                                                              |
+| data-\*  | `string`             | -                                                      | Supports all data-\* attributes, forwarded to root DOM element |

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

@@ -19,43 +19,45 @@ toc: 'content'
 <code src="./demo/type.tsx" title="类型" description="不同类型的标签页"></code>
 <code src="./demo/editable.tsx" title="可编辑" description="可添加和删除标签页"></code>
 <code src="./demo/extra.tsx" title="额外内容" description="标签页中的额外内容"></code>
+<code src="./demo/overflow-center.tsx" title="溢出时激活Tab居中" description="Tab较多出现下拉时，activeAlign=&quot;center&quot; 让从下拉选中的Tab滚动到Header中间"></code>
 <code src="./demo/controlled.tsx" title="受控" description="受控的标签页"></code>
 
 ## API
 
 ### TabsProps
 
-| 属性名 | 类型 | 描述 | 默认值 |
-| --- | --- | --- | --- |
-| prefixCls | `string` | 自定义类名前缀 | - |
-| className | `string` | 自定义根类名 | - |
-| style | `React.CSSProperties` | 自定义根行内样式 | - |
-| classNames | `Partial<Record<SemanticDOM, string>>` | 自定义结构化类名 | - |
-| styles | `Partial<Record<SemanticDOM, React.CSSProperties>>` | 自定义结构化样式 | - |
-| type | `'card' \| 'editable-card'` | 页签样式 | - |
-| activeKey | `string \| number` | 当前激活tab面板的key | - |
-| defaultActiveKey | `string \| number` | 默认激活的tab面板的key | - |
-| items | `Array<TabItemType>` | tab选项卡内容 | - |
-| position | `'top' \| 'bottom' \| 'left' \| 'right'` | 页签位置 | `top` |
-| headerExtra | `{ prefix?: React.ReactNode \| (() => React.ReactNode); suffix?: React.ReactNode \| (() => React.ReactNode) }` | tab额外内容 | - |
-| children | `Array<React.ReactElement>` | 子元素 | - |
-| lazy | `boolean` | 是否懒加载，只有当切换到该tab时才将对应的content加载到dom中 | - |
-| fixedHeader | `boolean` | 是否固定Header区域 | `false` |
-| onEdit | `(type: 'add' \| 'remove', key?: number \| string) => void` | 编辑Tab时的回调 | - |
-| onChange | `(key: string \| number) => void` | Tab改变时的回调 | - |
-| onTabClick | `(key: string \| number) => void \| boolean` | 点击Tab时的回调，当返回false时，不会切换Tab, 不会触发onChange | - |
-| data-* | `string` | - | 支持所有 data-* 属性，透传到组件根 DOM 元素 |
+| 属性名           | 类型                                                                                                           | 描述                                                                                                                                  | 默认值                                       |
+| ---------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
+| prefixCls        | `string`                                                                                                       | 自定义类名前缀                                                                                                                        | -                                            |
+| className        | `string`                                                                                                       | 自定义根类名                                                                                                                          | -                                            |
+| style            | `React.CSSProperties`                                                                                          | 自定义根行内样式                                                                                                                      | -                                            |
+| classNames       | `Partial<Record<SemanticDOM, string>>`                                                                         | 自定义结构化类名                                                                                                                      | -                                            |
+| styles           | `Partial<Record<SemanticDOM, React.CSSProperties>>`                                                            | 自定义结构化样式                                                                                                                      | -                                            |
+| type             | `'card' \| 'editable-card'`                                                                                    | 页签样式                                                                                                                              | -                                            |
+| activeKey        | `string \| number`                                                                                             | 当前激活tab面板的key                                                                                                                  | -                                            |
+| defaultActiveKey | `string \| number`                                                                                             | 默认激活的tab面板的key                                                                                                                | -                                            |
+| items            | `Array<TabItemType>`                                                                                           | tab选项卡内容                                                                                                                         | -                                            |
+| position         | `'top' \| 'bottom' \| 'left' \| 'right'`                                                                       | 页签位置                                                                                                                              | `top`                                        |
+| headerExtra      | `{ prefix?: React.ReactNode \| (() => React.ReactNode); suffix?: React.ReactNode \| (() => React.ReactNode) }` | tab额外内容                                                                                                                           | -                                            |
+| children         | `Array<React.ReactElement>`                                                                                    | 子元素                                                                                                                                | -                                            |
+| lazy             | `boolean`                                                                                                      | 是否懒加载，只有当切换到该tab时才将对应的content加载到dom中                                                                           | -                                            |
+| fixedHeader      | `boolean`                                                                                                      | 是否固定Header区域                                                                                                                    | `false`                                      |
+| activeAlign      | `'auto' \| 'center'`                                                                                           | Tab溢出时激活tab的对齐方式：`auto` 贴边最小滚动（完全可见时不滚动）；`center` 始终滚动到header中间居中，包括直接点击header上可见的tab | `auto`                                       |
+| onEdit           | `(type: 'add' \| 'remove', key?: number \| string) => void`                                                    | 编辑Tab时的回调                                                                                                                       | -                                            |
+| onChange         | `(key: string \| number) => void`                                                                              | Tab改变时的回调                                                                                                                       | -                                            |
+| onTabClick       | `(key: string \| number) => void \| boolean`                                                                   | 点击Tab时的回调，当返回false时，不会切换Tab, 不会触发onChange                                                                         | -                                            |
+| data-\*          | `string`                                                                                                       | -                                                                                                                                     | 支持所有 data-\* 属性，透传到组件根 DOM 元素 |
 
 ### TabItemType
 
-| 属性名 | 类型 | 描述 | 默认值 |
-| --- | --- | --- | --- |
-| key | `string \| number` | 唯一key对应activeKey | - |
-| label | `React.ReactNode` | 选项卡显示内容 | - |
-| icon | `React.ReactNode` | 选项卡显示图标 | - |
-| disabled | `boolean` | 是否禁用 | - |
-| closable | `boolean` | 是否可关闭，当type="editable-card"时生效 | `true` |
-| badge | `number` | 角标 | - |
-| items | `Array<TabItemType>` | 子tab | - |
-| children | `React.ReactNode` | 显示内容 | - |
-| data-* | `string` | - | 支持所有 data-* 属性，透传到组件根 DOM 元素 |
+| 属性名   | 类型                 | 描述                                     | 默认值                                       |
+| -------- | -------------------- | ---------------------------------------- | -------------------------------------------- |
+| key      | `string \| number`   | 唯一key对应activeKey                     | -                                            |
+| label    | `React.ReactNode`    | 选项卡显示内容                           | -                                            |
+| icon     | `React.ReactNode`    | 选项卡显示图标                           | -                                            |
+| disabled | `boolean`            | 是否禁用                                 | -                                            |
+| closable | `boolean`            | 是否可关闭，当type="editable-card"时生效 | `true`                                       |
+| badge    | `number`             | 角标                                     | -                                            |
+| items    | `Array<TabItemType>` | 子tab                                    | -                                            |
+| children | `React.ReactNode`    | 显示内容                                 | -                                            |
+| data-\*  | `string`             | -                                        | 支持所有 data-\* 属性，透传到组件根 DOM 元素 |

package/src/Tabs/interface.ts

@@ -124,4 +124,13 @@ export interface TabsProps extends DataAttributeProps {
    * @default false
    */
   fixedHeader?: boolean;
+  /**
+   * How the active tab is aligned when the tab list overflows
+   * - 'auto': scroll minimally so the active tab is visible at the edge;
+   *   no scrolling when it is already fully visible
+   * - 'center': always scroll so the active tab is centered in the header,
+   *   including tabs clicked directly on the header
+   * @default 'auto'
+   */
+  activeAlign?: 'auto' | 'center';
 }

package/src/Tabs/style/index.less

@@ -439,6 +439,10 @@
   height: var(--yee-tabs-nav-operations-height);
 }
 
+@{pls}-nav-more {
+  margin-left: 4px;
+}
+
 // 下拉框
 @{pls}-operation-container {
   max-height: var(--yee-tabs-operation-container-max-height);
@@ -452,6 +456,7 @@
 
   @{pls}-tab {
     height: var(--yee-tabs-operation-tab-height);
+    margin: 0;
     padding: var(--yee-tabs-operation-tab-padding);
     cursor: pointer;
 

package/src/Tabs/tab-header/index.tsx

@@ -38,6 +38,7 @@ export interface TabHeaderProps {
   prefixCls: string;
   type?: 'card' | 'editable-card';
   position?: 'top' | 'bottom' | 'left' | 'right';
+  activeAlign?: 'auto' | 'center';
   headerExtra?: {
     prefix?: React.ReactNode | (() => React.ReactNode);
     suffix?: React.ReactNode | (() => React.ReactNode);
@@ -53,6 +54,7 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
     prefixCls,
     type,
     position = 'top',
+    activeAlign = 'auto',
     headerExtra,
     classNames,
     styles,
@@ -80,7 +82,7 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
   });
 
   // Scroll handling
-  const { refreshKey } = useTabScroll({
+  const { refreshKey, refresh: refreshNav } = useTabScroll({
     direction,
     navContainer,
     navList,
@@ -97,15 +99,22 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
     enabled: !type, // Only show active bar for non-card types
   });
 
+  // Recompute dropdown visibility, dropdown range and shadows after the list is moved
+  const handleNavMoved = useCallback(() => {
+    checkVisibility();
+    refreshNav();
+  }, [checkVisibility, refreshNav]);
+
   // Navigation list movement
   useNavListMove({
     direction,
     activeKey,
     enabled: moreOpen,
+    align: activeAlign,
     activetab,
     navList,
     navContainer,
-    onMoved: checkVisibility,
+    onMoved: handleNavMoved,
   });
 
   // Listen for container size changes
@@ -213,6 +222,7 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
           <DropDownTabs visible={moreOpen} items={items || []} range={range}>
             <Button
               className={`${prefixCls}-nav-more`}
+              size="small"
               icon={<Ellipsis size={14} strokeWidth={1.5} />}
               type="text"
               aria-label="More tabs"

package/src/Tabs/tabs.tsx

@@ -39,6 +39,7 @@ const Tabs: FC<TabsProps> = (baseprops) => {
     activeKey,
     defaultActiveKey,
     fixedHeader,
+    activeAlign,
     onChange,
     onEdit,
     onTabClick,
@@ -117,6 +118,7 @@ const Tabs: FC<TabsProps> = (baseprops) => {
         <TabHeader
           {...omit(props, ['children', 'className', 'style'])}
           prefixCls={prefixCls}
+          activeAlign={activeAlign}
         />
         <TabContent
           prefixCls={prefixCls}

package/src/TreeSelect/tree-select.tsx

@@ -255,7 +255,7 @@ const TreeSelect = <T extends Record<string, unknown> = any>(
       onOpenChange={handleOpenChange}
     >
       <Selector
-        {...omit(rest, ['showLine'])}
+        {...omit(rest, ['showLine', 'forceRender'])}
         className={`${prefixCls}-selector`}
         mode={mode}
         value={searchValue}

package/src/Upload/demo/auto-upload.tsx

@@ -0,0 +1,35 @@
+import {
+  Button,
+  Upload,
+  type UploadFile,
+  type UploadInstance,
+} from '@rainbow-oh/yee-c';
+import React, { useRef, useState } from 'react';
+
+export default () => {
+  const uploadRef = useRef<UploadInstance>(null);
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
+  const readyCount = fileList.filter((file) => file.status === 'ready').length;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Upload
+        ref={uploadRef}
+        autoUpload={false}
+        multiple
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        fileList={fileList}
+        onChange={({ fileList: nextFileList }) => setFileList(nextFileList)}
+      />
+      <div>
+        <Button
+          type="primary"
+          disabled={readyCount === 0}
+          onClick={() => uploadRef.current?.upload()}
+        >
+          Start upload ({readyCount})
+        </Button>
+      </div>
+    </div>
+  );
+};