@rainbow-oh/yee-c 0.9.2 → 0.11.0

package/dist/cjs/Table/table.js

@@ -68,6 +68,7 @@ var import_Spin = __toESM(require("../Spin"));
 var import_col_group = __toESM(require("./col-group"));
 var import_footer = __toESM(require("./footer"));
 var import_header = __toESM(require("./header"));
+var import_useColumnResize = __toESM(require("./hooks/useColumnResize"));
 var import_useColumns = __toESM(require("./hooks/useColumns"));
 var import_useExpand = __toESM(require("./hooks/useExpand"));
 var import_useSelection = __toESM(require("./hooks/useSelection"));
@@ -75,7 +76,6 @@ var import_tbody = __toESM(require("./tbody"));
 var import_tfooter = __toESM(require("./tfooter"));
 var import_theader = __toESM(require("./theader"));
 var import_Config_Provider = require("../Config-Provider");
-var import_useLatest = __toESM(require("../hooks/useLatest"));
 var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps"));
 var import_omit = __toESM(require("../utils/omit"));
 var import_types = require("../utils/types");
@@ -97,6 +97,9 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     rowKey = "key",
     bordered,
     tableLayout,
+    resizable,
+    onColumnResize,
+    onColumnResizeEnd,
     loading = false,
     showHeader = true,
     pagination: propPagination = true,
@@ -123,6 +126,9 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     "rowKey",
     "bordered",
     "tableLayout",
+    "resizable",
+    "onColumnResize",
+    "onColumnResizeEnd",
     "loading",
     "showHeader",
     "pagination",
@@ -142,6 +148,22 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
   ]);
   const dataAttrs = (0, import_types.pickDataAttrs)(rest);
   const [measuredColumnWidths, setMeasuredColumnWidths] = import_react.default.useState();
+  const contentRef = (0, import_react.useRef)(null);
+  const tableRef = (0, import_react.useRef)(null);
+  const wrapedColumnsRef = (0, import_react.useRef)([]);
+  const {
+    resizedWidths,
+    resizingKey,
+    onResizeStart,
+    onResizeStep,
+    resetResizedWidths
+  } = (0, import_useColumnResize.default)({
+    tableRef,
+    columnsRef: wrapedColumnsRef,
+    onColumnResize,
+    onColumnResizeEnd
+  });
+  const hasResizeSnapshot = Object.keys(resizedWidths).length > 0;
   const getRowKey = import_react.default.useCallback(
     (record, key = rowKey) => {
       return typeof key === "function" ? key(record) : record[key];
@@ -156,8 +178,31 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     columns: propColumns,
     expandable,
     rowSelection,
-    measuredColumnWidths
+    measuredColumnWidths: hasResizeSnapshot ? void 0 : measuredColumnWidths,
+    resizable,
+    resizedWidths
   });
+  wrapedColumnsRef.current = wrapedColumns;
+  const resizeTotalWidth = (0, import_react.useMemo)(() => {
+    if (!wrapedColumns.length)
+      return void 0;
+    let total = 0;
+    for (const column of wrapedColumns) {
+      const width = column.resizeKey ? resizedWidths[column.resizeKey] : void 0;
+      if (!width || !Number.isFinite(width))
+        return void 0;
+      total += width;
+    }
+    return total;
+  }, [wrapedColumns, resizedWidths]);
+  const resizeActive = resizeTotalWidth !== void 0;
+  const resizeKeysSignature = (0, import_react.useMemo)(
+    () => wrapedColumns.map((column) => column.resizeKey).join("|"),
+    [wrapedColumns]
+  );
+  (0, import_react.useEffect)(() => {
+    resetResizedWidths();
+  }, [resizeKeysSignature, resetResizedWidths]);
   const {
     data: filteredData,
     filterRecords,
@@ -215,8 +260,6 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     onChange: onSelectionChange
   } = (0, import_useSelection.default)({ pageData, dataSource, getRowKey, rowSelection, allKeys });
   const prevFilterRecordsRef = (0, import_react.useRef)(filterRecords);
-  const contentRef = (0, import_react.useRef)(null);
-  const tableRef = (0, import_react.useRef)(null);
   const [horizontalScroll, setHorizontalScroll] = import_react.default.useState({
     left: false,
     right: false
@@ -244,7 +287,6 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     ).join("|"),
     [wrapedColumns]
   );
-  const wrapedColumnsRef = (0, import_useLatest.default)(wrapedColumns);
   const updateMeasuredColumnWidths = import_react.default.useCallback(() => {
     var _a2;
     const columns = wrapedColumnsRef.current;
@@ -345,7 +387,10 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
         sorters,
         onSort: handleSort,
         onCheckAll,
-        onInternalFilter: onFilterInternal
+        onInternalFilter: onFilterInternal,
+        resizingKey,
+        onResizeStart,
+        onResizeStep
       })
     );
   };
@@ -373,8 +418,12 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
   const renderTable = () => {
     const tableProps = {
       style: __spreadProps(__spreadValues({}, styles == null ? void 0 : styles.table), {
-        minWidth: scroll == null ? void 0 : scroll.x,
-        tableLayout: (pageData == null ? void 0 : pageData.length) ? tableLayout : void 0
+        // An explicit total width replaces both `width: 100%` and `scroll.x`:
+        // either of those would let the browser stretch the table and redistribute
+        // the extra space across the columns, undoing the drag.
+        minWidth: resizeActive ? void 0 : scroll == null ? void 0 : scroll.x,
+        width: resizeTotalWidth,
+        tableLayout: resizeActive ? "fixed" : (pageData == null ? void 0 : pageData.length) ? tableLayout : void 0
       }),
       className: (0, import_clsx.default)(
         { [`${prefixCls}-bordered`]: bordered },
@@ -434,7 +483,11 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     __spreadValues({
-      className: (0, import_clsx.default)(`${prefixCls}-box`, className),
+      className: (0, import_clsx.default)(
+        `${prefixCls}-box`,
+        { [`${prefixCls}-resizing`]: !!resizingKey },
+        className
+      ),
       style,
       ref
     }, dataAttrs),

package/dist/cjs/Table/theader/cell.js

@@ -89,9 +89,14 @@ var HeadCell = (props) => {
     width,
     colSpan,
     rowSpan,
+    resizable,
+    resizeKey,
+    resizingKey,
     onHeaderCell,
     onSort,
-    onInternalFilter
+    onInternalFilter,
+    onResizeStart,
+    onResizeStep
   } = _a, rest = __objRest(_a, [
     "fixed",
     "isFixedLeftLast",
@@ -112,9 +117,14 @@ var HeadCell = (props) => {
     "width",
     "colSpan",
     "rowSpan",
+    "resizable",
+    "resizeKey",
+    "resizingKey",
     "onHeaderCell",
     "onSort",
-    "onInternalFilter"
+    "onInternalFilter",
+    "onResizeStart",
+    "onResizeStep"
   ]);
   const { prefixCls } = (0, import_react.useContext)(import_table.TableCtx);
   const { locale } = (0, import_locale.useLocale)();
@@ -208,6 +218,38 @@ var HeadCell = (props) => {
     },
     className
   );
+  const showResizeHandle = !!(resizable && resizeKey && onResizeStart);
+  const isResizing = !!resizeKey && resizingKey === resizeKey;
+  const renderResizeHandle = () => {
+    if (!showResizeHandle)
+      return null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": tableLocale.resizeColumn || "Drag to resize column",
+        tabIndex: 0,
+        className: (0, import_clsx.default)(`${prefixCls}-resize-handle`, {
+          [`${prefixCls}-resize-handle-active`]: isResizing
+        }),
+        onPointerDown: (event) => onResizeStart == null ? void 0 : onResizeStart(event, resizeKey),
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        onKeyDown: (event) => {
+          if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+            return;
+          event.preventDefault();
+          onResizeStep == null ? void 0 : onResizeStep(
+            resizeKey,
+            event.key === "ArrowLeft" ? -1 : 1
+          );
+        }
+      }
+    );
+  };
   const getThProps = () => {
     const styles2 = __spreadProps(__spreadValues({}, style), { width, maxWidth: width, textAlign: align });
     const cellProps = onHeaderCell ? onHeaderCell(props) : {};
@@ -222,9 +264,9 @@ var HeadCell = (props) => {
   const thProps = getThProps();
   const renderCell = () => {
     if (!filter && !sorter) {
-      return /* @__PURE__ */ import_react.default.createElement("th", __spreadValues({}, thProps), title);
+      return /* @__PURE__ */ import_react.default.createElement("th", __spreadValues({}, thProps), title, renderResizeHandle());
     }
-    return /* @__PURE__ */ import_react.default.createElement("th", __spreadValues({}, thProps), renderCellWithAction());
+    return /* @__PURE__ */ import_react.default.createElement("th", __spreadValues({}, thProps), renderCellWithAction(), renderResizeHandle());
   };
   const cell = renderCell();
   return cell;

package/dist/cjs/Table/util/index.d.ts

@@ -1,2 +1,20 @@
-import { WrapedColumnProps } from '../interface';
+import { ColumnProps, WrapedColumnProps } from '../interface';
+/**
+ * Stable identity for a leaf column, used to key its resized width.
+ *
+ * `key`/`dataIndex` survive re-ordering and data changes, so they are preferred.
+ * Columns declaring neither fall back to their position, which is the best that
+ * can be done without asking the caller for an id.
+ */
+export declare function getColumnResizeKey(column: ColumnProps, index: number): string;
+/**
+ * Stamp every leaf column with its `resizeKey`, resolve whether it is resizable
+ * (column level setting wins over the table level one) and override `width` with
+ * the dragged value when there is one.
+ *
+ * This runs before `handleColumns` so that the colgroup, the header cells, the
+ * body cells and the sticky offsets of fixed columns all read the same width
+ * from a single place.
+ */
+export declare function applyColumnResize(columns: Array<WrapedColumnProps>, resizable?: boolean, resizedWidths?: Record<string, number>): WrapedColumnProps[];
 export declare function handleColumns(columns: Array<WrapedColumnProps>, measuredColumnWidths?: number[]): WrapedColumnProps[];

package/dist/cjs/Table/util/index.js

@@ -36,9 +36,31 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/Table/util/index.ts
 var util_exports = {};
 __export(util_exports, {
+  applyColumnResize: () => applyColumnResize,
+  getColumnResizeKey: () => getColumnResizeKey,
   handleColumns: () => handleColumns
 });
 module.exports = __toCommonJS(util_exports);
+function getColumnResizeKey(column, index) {
+  var _a;
+  const id = (_a = column.key) != null ? _a : column.dataIndex;
+  return id === void 0 || id === null || id === "" ? `index:${index}` : `id:${id}`;
+}
+function applyColumnResize(columns, resizable, resizedWidths) {
+  return columns.map((column, index) => {
+    var _a, _b;
+    const resizeKey = getColumnResizeKey(column, index);
+    const resizedWidth = resizedWidths == null ? void 0 : resizedWidths[resizeKey];
+    const next = __spreadProps(__spreadValues({}, column), {
+      resizeKey,
+      resizable: (_b = (_a = column.resizable) != null ? _a : resizable) != null ? _b : false
+    });
+    if (Number.isFinite(resizedWidth) && resizedWidth > 0) {
+      next.width = resizedWidth;
+    }
+    return next;
+  });
+}
 var getColumnWidth = (column, index, measuredColumnWidths) => {
   const measuredWidth = measuredColumnWidths == null ? void 0 : measuredColumnWidths[index];
   if (Number.isFinite(measuredWidth) && measuredWidth && measuredWidth > 0) {

package/dist/cjs/Tabs/demo/overflow-center.d.ts

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

package/dist/cjs/Tabs/demo/overflow-center.js

@@ -0,0 +1,54 @@
+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/Tabs/demo/overflow-center.tsx
+var overflow_center_exports = {};
+__export(overflow_center_exports, {
+  default: () => overflow_center_default
+});
+module.exports = __toCommonJS(overflow_center_exports);
+var import_yee_c = require("../..");
+var import_react = __toESM(require("react"));
+var overflow_center_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] = (0, import_react.useState)("tab-1");
+  const [autoKey, setAutoKey] = (0, import_react.useState)("tab-1");
+  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", { style: { marginBottom: 8 } }, 'activeAlign="center"'), /* @__PURE__ */ import_react.default.createElement("div", { style: { maxWidth: 480 }, "data-testid": "center-wrap" }, /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Tabs,
+    {
+      activeAlign: "center",
+      items,
+      activeKey: centerKey,
+      onChange: setCenterKey
+    }
+  ))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("p", { style: { marginBottom: 8 } }, "default (auto)"), /* @__PURE__ */ import_react.default.createElement("div", { style: { maxWidth: 480 }, "data-testid": "auto-wrap" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tabs, { items, activeKey: autoKey, onChange: setAutoKey }))));
+};

package/dist/cjs/Tabs/hooks/useNavListMove.d.ts

@@ -3,10 +3,11 @@ 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>;
     onMoved?: () => void;
 }
-export declare function useNavListMove({ direction, activeKey, enabled, activetab, navList, navContainer, onMoved, }: UseNavListMoveOptions): void;
+export declare function useNavListMove({ direction, activeKey, enabled, align, activetab, navList, navContainer, onMoved, }: UseNavListMoveOptions): void;
 export {};

package/dist/cjs/Tabs/hooks/useNavListMove.js

@@ -28,6 +28,7 @@ function useNavListMove({
   direction,
   activeKey,
   enabled,
+  align = "auto",
   activetab,
   navList,
   navContainer,
@@ -40,23 +41,52 @@ function useNavListMove({
     if (!enabled || !tab || !list || !container) {
       return;
     }
-    const [isVisible] = (0, import_tab_utils.isInContainer)(direction, tab, list, container);
-    if (isVisible)
-      return;
+    if (align !== "center") {
+      const [isVisible] = (0, import_tab_utils.isInContainer)(direction, tab, list, container);
+      if (isVisible)
+        return;
+    }
+    let moved = false;
     if (direction === "horizontal") {
-      const [x] = (0, import_tab_utils.getEleTranslate)(list);
-      const tabLeft = tab.offsetLeft;
-      const tabWidth = tab.offsetWidth;
-      const containerWidth = container.clientWidth;
-      let newX = x;
-      if (tabLeft + tabWidth - Math.abs(x) > containerWidth) {
-        const overflow = tabLeft + tabWidth - Math.abs(x) - containerWidth;
-        newX = x - overflow;
-      } else if (tabLeft < Math.abs(x)) {
-        const overflow = Math.abs(x) - tabLeft;
-        newX = x + overflow;
+      if (align === "center") {
+        const containerWidth = container.clientWidth;
+        const maxOffset = list.scrollWidth - containerWidth;
+        const tabCenter = tab.offsetLeft + tab.offsetWidth / 2;
+        let newX = Math.round(containerWidth / 2 - tabCenter);
+        newX = Math.max(-maxOffset, Math.min(0, newX));
+        const [x] = (0, import_tab_utils.getEleTranslate)(list);
+        if (Math.abs(newX - x) > 0.5) {
+          (0, import_tab_utils.setEleTranslate)(list, newX);
+          moved = true;
+        }
+      } else {
+        const [x] = (0, import_tab_utils.getEleTranslate)(list);
+        const tabLeft = tab.offsetLeft;
+        const tabWidth = tab.offsetWidth;
+        const containerWidth = container.clientWidth;
+        let newX = x;
+        if (tabLeft + tabWidth - Math.abs(x) > containerWidth) {
+          const overflow = tabLeft + tabWidth - Math.abs(x) - containerWidth;
+          newX = x - overflow;
+        } else if (tabLeft < Math.abs(x)) {
+          const overflow = Math.abs(x) - tabLeft;
+          newX = x + overflow;
+        }
+        (0, import_tab_utils.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;
+      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;
       }
-      (0, import_tab_utils.setEleTranslate)(list, newX);
     } else {
       const tabTop = tab.offsetTop;
       const tabHeight = tab.offsetHeight;
@@ -65,16 +95,21 @@ function useNavListMove({
       if (tabTop + tabHeight - scrollTop >= containerHeight) {
         const overflow = tabTop + tabHeight - scrollTop - containerHeight;
         container.scrollTop = scrollTop + overflow;
+        moved = true;
       } else if (tabTop < scrollTop) {
         const overflow = scrollTop - tabTop;
         container.scrollTop = scrollTop - overflow;
+        moved = true;
       }
     }
-    onMoved == null ? void 0 : onMoved();
+    if (moved) {
+      onMoved == null ? void 0 : onMoved();
+    }
   }, [
     activeKey,
     enabled,
     direction,
+    align,
     activetab,
     navList,
     navContainer,

package/dist/cjs/Tabs/hooks/useTabScroll.d.ts

@@ -7,6 +7,7 @@ interface UseTabScrollOptions {
 }
 export declare function useTabScroll({ direction, navContainer, navList, enabled, }: UseTabScrollOptions): {
     refreshKey: number;
+    refresh: () => void;
     updateShadow: import("../../utils/debounce").Debounced<() => void>;
 };
 export {};

package/dist/cjs/Tabs/hooks/useTabScroll.js

@@ -57,6 +57,10 @@ function useTabScroll({
     container.classList.toggle("with-suffix-shadow", currentOffset < maxOffset);
   }, [direction, navContainer, navList]);
   const debouncedUpdateShadow = (0, import_useDebounceFunction.default)(updateShadow, 200);
+  const refresh = (0, import_react.useCallback)(() => {
+    setRefreshKey((prev) => prev + 1);
+    debouncedUpdateShadow();
+  }, [debouncedUpdateShadow]);
   (0, import_react.useEffect)(() => {
     const container = navContainer.current;
     const list = navList.current;
@@ -95,5 +99,5 @@ function useTabScroll({
     debouncedUpdateShadow,
     updateShadow
   ]);
-  return { refreshKey, updateShadow: debouncedUpdateShadow };
+  return { refreshKey, refresh, updateShadow: debouncedUpdateShadow };
 }

package/dist/cjs/Tabs/interface.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { DataAttributeProps } from '../utils/types';
-type SemanticDOM = 'header' | 'content' | 'track' | 'list' | 'activeBar';
+type SemanticDOM = 'header' | 'content' | 'track' | 'list' | 'activeBar' | 'more';
 export type TabItemType = {
     /**
      * Unique key corresponding to activeKey
@@ -121,5 +121,14 @@ 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';
 }
 export {};

package/dist/cjs/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/dist/cjs/Tabs/tab-header/index.d.ts

@@ -12,6 +12,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);

package/dist/cjs/Tabs/tab-header/index.js

@@ -67,6 +67,7 @@ var TabHeader = (props) => {
     prefixCls,
     type,
     position = "top",
+    activeAlign = "auto",
     headerExtra,
     classNames,
     styles,
@@ -84,7 +85,7 @@ var TabHeader = (props) => {
     navList,
     itemsLength: (items == null ? void 0 : items.length) || 0
   });
-  const { refreshKey } = (0, import_hooks.useTabScroll)({
+  const { refreshKey, refresh: refreshNav } = (0, import_hooks.useTabScroll)({
     direction,
     navContainer,
     navList,
@@ -99,14 +100,19 @@ var TabHeader = (props) => {
     enabled: !type
     // Only show active bar for non-card types
   });
+  const handleNavMoved = (0, import_react.useCallback)(() => {
+    checkVisibility();
+    refreshNav();
+  }, [checkVisibility, refreshNav]);
   (0, import_hooks.useNavListMove)({
     direction,
     activeKey,
     enabled: moreOpen,
+    align: activeAlign,
     activetab,
     navList,
     navContainer,
-    onMoved: checkVisibility
+    onMoved: handleNavMoved
   });
   (0, import_hooks.useContainerResize)(navContainer, checkVisibility);
   const renderPrefixExtra = (0, import_react.useCallback)(() => {
@@ -197,7 +203,9 @@ var TabHeader = (props) => {
   ), moreOpen && /* @__PURE__ */ import_react.default.createElement(import_dropdown_tabs.default, { visible: moreOpen, items: items || [], range }, /* @__PURE__ */ import_react.default.createElement(
     import_Button.default,
     {
-      className: `${prefixCls}-nav-more`,
+      className: (0, import_clsx.default)(`${prefixCls}-nav-more`, classNames == null ? void 0 : classNames.more),
+      style: styles == null ? void 0 : styles.more,
+      size: "small",
       icon: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Ellipsis, { size: 14, strokeWidth: 1.5 }),
       type: "text",
       "aria-label": "More tabs"

package/dist/cjs/Tabs/tabs.js

@@ -88,6 +88,7 @@ var Tabs = (baseprops) => {
     activeKey,
     defaultActiveKey,
     fixedHeader,
+    activeAlign,
     onChange,
     onEdit,
     onTabClick
@@ -104,6 +105,7 @@ var Tabs = (baseprops) => {
     "activeKey",
     "defaultActiveKey",
     "fixedHeader",
+    "activeAlign",
     "onChange",
     "onEdit",
     "onTabClick"
@@ -167,7 +169,8 @@ var Tabs = (baseprops) => {
   return /* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({}, (0, import_omit.default)(rest, ["headerExtra"])), { className: cls, style }), /* @__PURE__ */ import_react.default.createElement(TabsCtx.Provider, { value: contextValue }, /* @__PURE__ */ import_react.default.createElement(
     import_tab_header.default,
     __spreadProps(__spreadValues({}, (0, import_omit.default)(props, ["children", "className", "style"])), {
-      prefixCls
+      prefixCls,
+      activeAlign
     })
   ), /* @__PURE__ */ import_react.default.createElement(
     import_tab_content.default,

package/dist/cjs/Upload/demo/auto-upload.d.ts

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