@rainbow-oh/yee-c 0.9.2 → 0.11.0

package/dist/esm/Table/hooks/useColumns.js

@@ -6,7 +6,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { useMemo } from 'react';
 import deepClone from "../../utils/deepClone";
-import { handleColumns } from "../util";
+import { applyColumnResize, handleColumns } from "../util";
 import { flattenLeafColumns, injectSelectionExpand, parseHeaderRows } from "../util/header";
 var getColumnsFromChild = function getColumnsFromChild(childs) {
   var cols = [];
@@ -22,7 +22,9 @@ export default function useColumns(_ref) {
     columns = _ref.columns,
     rowSelection = _ref.rowSelection,
     expandable = _ref.expandable,
-    measuredColumnWidths = _ref.measuredColumnWidths;
+    measuredColumnWidths = _ref.measuredColumnWidths,
+    resizable = _ref.resizable,
+    resizedWidths = _ref.resizedWidths;
   var childColumns = useMemo(function () {
     return children ? getColumnsFromChild(children) : null;
   }, [children]);
@@ -34,13 +36,16 @@ export default function useColumns(_ref) {
       var base = deepClone(childColumns || columns || []) || [];
       var tree = injectSelectionExpand(base, rowSelection, expandable);
       var leaves = flattenLeafColumns(tree);
-      var wraped = handleColumns(leaves, measuredColumnWidths);
+      // Resized widths are folded in before the fixed-column offsets are computed,
+      // so sticky positions follow a drag without any extra bookkeeping.
+      var resized = applyColumnResize(leaves, resizable, resizedWidths);
+      var wraped = handleColumns(resized, measuredColumnWidths);
       var rows = parseHeaderRows(tree, wraped);
       return {
         wrapedColumns: wraped,
         headerRows: rows
       };
-    }, [childColumns, columns, rowSelection, expandable, measuredColumnWidths]),
+    }, [childColumns, columns, rowSelection, expandable, measuredColumnWidths, resizable, resizedWidths]),
     wrapedColumns = _useMemo.wrapedColumns,
     headerRows = _useMemo.headerRows;
   return {

package/dist/esm/Table/interface.d.ts

@@ -67,6 +67,18 @@ export interface HeadCellProps extends Omit<WrapedColumnProps, 'title'> {
     };
     onSort?: (dataIndex: string, sorter: any) => void;
     onInternalFilter?: (dataIndex: string, value: string) => void;
+    /**
+     * `resizeKey` of the column currently being dragged, if any
+     */
+    resizingKey?: string | null;
+    /**
+     * Begin a pointer driven column resize. Injected by Table when resizing is on.
+     */
+    onResizeStart?: (event: React.PointerEvent<HTMLElement>, resizeKey: string) => void;
+    /**
+     * Nudge a column width by `delta` px, for keyboard driven resizing
+     */
+    onResizeStep?: (resizeKey: string, delta: number) => void;
     /**
      * Horizontal span, used for grouped header cells
      */
@@ -227,6 +239,20 @@ export interface ColumnProps {
      * Set width
      */
     width?: number | string;
+    /**
+     * Whether this column can be resized by dragging the right edge of its header
+     * cell. Falls back to the table level `resizable` when not set.
+     */
+    resizable?: boolean;
+    /**
+     * Lower bound (in px) applied while resizing this column
+     * @default 40
+     */
+    minWidth?: number;
+    /**
+     * Upper bound (in px) applied while resizing this column
+     */
+    maxWidth?: number;
     /**
      * Set header display text
      */
@@ -261,6 +287,12 @@ export interface WrapedColumnProps extends ColumnProps, ExpandableType, Omit<Row
      * Whether this is the first column fixed to the right
      */
     isFixedRightFirst?: boolean;
+    /**
+     * Stable identity of this leaf column, used as the key of the resized width
+     * map. Only assigned to leaf columns, so its presence also marks a column as
+     * a valid resize target (group header cells never carry one).
+     */
+    resizeKey?: string;
 }
 /**
  * A header cell resolved from the column tree, with computed span info for multi-level headers.
@@ -554,6 +586,23 @@ export interface TableProps extends FooterProps, Omit<HeaderProps, 'pageData'>,
      * Set table layout
      */
     tableLayout?: 'auto' | 'fixed';
+    /**
+     * Whether columns can be resized by dragging the right edge of their header
+     * cell. Individual columns can opt out with `column.resizable: false`.
+     *
+     * The first drag snapshots the rendered width of every column and switches the
+     * table to a px controlled `table-layout: fixed`, so column widths stay exactly
+     * where they are dragged instead of being redistributed by the browser.
+     */
+    resizable?: boolean;
+    /**
+     * Fired on every width change while a column is being dragged
+     */
+    onColumnResize?: (width: number, column: WrapedColumnProps) => void;
+    /**
+     * Fired once when a column resize interaction finishes
+     */
+    onColumnResizeEnd?: (width: number, column: WrapedColumnProps) => void;
     /**
      * Whether to enable virtual list
      */

package/dist/esm/Table/style/index.less

@@ -71,6 +71,48 @@
     }
   }
 
+  // Sits inside the header cell's right padding so it never overlaps the sorter
+  // or filter controls, which are laid out against the content edge.
+  &-resize-handle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    width: var(--yee-table-resize-handle-width);
+    height: 100%;
+    cursor: col-resize;
+    background-color: transparent;
+    touch-action: none;
+    user-select: none;
+
+    &::after {
+      position: absolute;
+      content: '';
+      top: 25%;
+      right: calc(var(--yee-table-resize-handle-width) / 2 - 1px);
+      width: 2px;
+      height: 50%;
+      background-color: transparent;
+    }
+
+    &:hover::after,
+    &:focus-visible::after,
+    &-active::after {
+      background-color: var(--yee-primary-color);
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  // While dragging, the pointer leaves the handle constantly; keep the cursor and
+  // the selection lock consistent across the whole table.
+  &-resizing {
+    cursor: col-resize;
+    user-select: none;
+  }
+
   &-filter {
     max-height: var(--yee-table-filter-popup-height);
     background-color: var(--yee-table-filter-list-bg-color);

package/dist/esm/Table/table.js

@@ -1,11 +1,12 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "className", "style", "classNames", "styles", "components", "rowKey", "bordered", "tableLayout", "loading", "showHeader", "pagination", "columns", "dataSource", "size", "summary", "scroll", "header", "download", "footer", "children", "expandable", "rowSelection", "locale", "onChange"];
+var _excluded = ["prefixCls", "className", "style", "classNames", "styles", "components", "rowKey", "bordered", "tableLayout", "resizable", "onColumnResize", "onColumnResizeEnd", "loading", "showHeader", "pagination", "columns", "dataSource", "size", "summary", "scroll", "header", "download", "footer", "children", "expandable", "rowSelection", "locale", "onChange"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -20,6 +21,7 @@ import Spin from "../Spin";
 import ColGroup from "./col-group";
 import Footer from "./footer";
 import Header from "./header";
+import useColumnResize from "./hooks/useColumnResize";
 import useColumns from "./hooks/useColumns";
 import useExpand from "./hooks/useExpand";
 import useSelection from "./hooks/useSelection";
@@ -27,7 +29,6 @@ import TBody from "./tbody";
 import TFooter from "./tfooter";
 import THeader from "./theader";
 import { GlobalContext } from "../Config-Provider";
-import useLatest from "../hooks/useLatest";
 import mergeContextToProps from "../utils/mergeContextToProps";
 import omit from "../utils/omit";
 import { pickDataAttrs } from "../utils/types";
@@ -51,6 +52,9 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     rowKey = _props$rowKey === void 0 ? 'key' : _props$rowKey,
     bordered = props.bordered,
     tableLayout = props.tableLayout,
+    resizable = props.resizable,
+    onColumnResize = props.onColumnResize,
+    onColumnResizeEnd = props.onColumnResizeEnd,
     _props$loading = props.loading,
     loading = _props$loading === void 0 ? false : _props$loading,
     _props$showHeader = props.showHeader,
@@ -78,6 +82,30 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     measuredColumnWidths = _React$useState2[0],
     setMeasuredColumnWidths = _React$useState2[1];
+  var contentRef = useRef(null);
+  var tableRef = useRef(null);
+
+  // Filled in right after `useColumns` below. The resize hook needs the latest
+  // leaf columns, but `wrapedColumns` is itself derived from the resized widths,
+  // so depending on it directly would rebuild the drag handlers mid-drag.
+  var wrapedColumnsRef = useRef([]);
+  var _useColumnResize = useColumnResize({
+      tableRef: tableRef,
+      columnsRef: wrapedColumnsRef,
+      onColumnResize: onColumnResize,
+      onColumnResizeEnd: onColumnResizeEnd
+    }),
+    resizedWidths = _useColumnResize.resizedWidths,
+    resizingKey = _useColumnResize.resizingKey,
+    onResizeStart = _useColumnResize.onResizeStart,
+    onResizeStep = _useColumnResize.onResizeStep,
+    resetResizedWidths = _useColumnResize.resetResizedWidths;
+
+  // Once a snapshot exists, every column carries an explicit px width and the
+  // table switches to `table-layout: fixed`, which makes those declared widths
+  // authoritative. The measured widths lag one frame behind a drag, so they must
+  // stop feeding the fixed-column offsets while a snapshot is in play.
+  var hasResizeSnapshot = Object.keys(resizedWidths).length > 0;
   var getRowKey = React.useCallback(function (record) {
     var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : rowKey;
     return typeof key === 'function' ? key(record) : record[key];
@@ -92,10 +120,48 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
       columns: propColumns,
       expandable: expandable,
       rowSelection: rowSelection,
-      measuredColumnWidths: measuredColumnWidths
+      measuredColumnWidths: hasResizeSnapshot ? undefined : measuredColumnWidths,
+      resizable: resizable,
+      resizedWidths: resizedWidths
     }),
     wrapedColumns = _useColumns.wrapedColumns,
     headerRows = _useColumns.headerRows;
+  wrapedColumnsRef.current = wrapedColumns;
+
+  // Total width of the px controlled layout. Deliberately `undefined` unless the
+  // snapshot covers every single column: a partial snapshot would leave a hole in
+  // the layout, so it is safer to fall back to the browser's own distribution.
+  var resizeTotalWidth = useMemo(function () {
+    if (!wrapedColumns.length) return undefined;
+    var total = 0;
+    var _iterator = _createForOfIteratorHelper(wrapedColumns),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var column = _step.value;
+        var width = column.resizeKey ? resizedWidths[column.resizeKey] : undefined;
+        if (!width || !Number.isFinite(width)) return undefined;
+        total += width;
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return total;
+  }, [wrapedColumns, resizedWidths]);
+  var resizeActive = resizeTotalWidth !== undefined;
+
+  // Identity of the column set, ignoring widths. When it changes the snapshot is
+  // stale (a new column would have no width of its own), so it gets dropped.
+  var resizeKeysSignature = useMemo(function () {
+    return wrapedColumns.map(function (column) {
+      return column.resizeKey;
+    }).join('|');
+  }, [wrapedColumns]);
+  useEffect(function () {
+    resetResizedWidths();
+  }, [resizeKeysSignature, resetResizedWidths]);
 
   // Filter
   var _useFilter = useFilter({
@@ -171,8 +237,6 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
 
   // Track filter changes to emit onChange after filtered data is recalculated
   var prevFilterRecordsRef = useRef(filterRecords);
-  var contentRef = useRef(null);
-  var tableRef = useRef(null);
   var _React$useState3 = React.useState({
       left: false,
       right: false
@@ -203,11 +267,10 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     }).join('|');
   }, [wrapedColumns]);
 
-  // Keep the latest columns in a ref so that the measure callback stays stable:
-  // `wrapedColumns` is derived from `measuredColumnWidths`, so depending on it
-  // directly would recreate the callback (and the ResizeObserver) on every
+  // `wrapedColumnsRef` (assigned during render, above) keeps the measure callback
+  // stable: `wrapedColumns` is derived from `measuredColumnWidths`, so depending
+  // on it directly would recreate the callback (and the ResizeObserver) on every
   // measurement.
-  var wrapedColumnsRef = useLatest(wrapedColumns);
   var updateMeasuredColumnWidths = React.useCallback(function () {
     var _tableRef$current;
     var columns = wrapedColumnsRef.current;
@@ -302,7 +365,10 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
       sorters: sorters,
       onSort: handleSort,
       onCheckAll: onCheckAll,
-      onInternalFilter: onFilterInternal
+      onInternalFilter: onFilterInternal,
+      resizingKey: resizingKey,
+      onResizeStart: onResizeStart,
+      onResizeStep: onResizeStep
     }));
   };
   var renderTBody = function renderTBody() {
@@ -328,8 +394,12 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
   var renderTable = function renderTable() {
     var tableProps = {
       style: _objectSpread(_objectSpread({}, styles === null || styles === void 0 ? void 0 : styles.table), {}, {
-        minWidth: scroll === null || scroll === void 0 ? void 0 : scroll.x,
-        tableLayout: pageData !== null && pageData !== void 0 && pageData.length ? tableLayout : undefined
+        // 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 ? undefined : scroll === null || scroll === void 0 ? void 0 : scroll.x,
+        width: resizeTotalWidth,
+        tableLayout: resizeActive ? 'fixed' : pageData !== null && pageData !== void 0 && pageData.length ? tableLayout : undefined
       }),
       className: clsx(_defineProperty({}, "".concat(prefixCls, "-bordered"), bordered), classNames === null || classNames === void 0 ? void 0 : classNames.table)
     };
@@ -369,7 +439,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     });
   };
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: clsx("".concat(prefixCls, "-box"), className),
+    className: clsx("".concat(prefixCls, "-box"), _defineProperty({}, "".concat(prefixCls, "-resizing"), !!resizingKey), className),
     style: style,
     ref: ref
   }, dataAttrs), /*#__PURE__*/React.createElement(Spin, {

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

@@ -1,4 +1,4 @@
-var _excluded = ["fixed", "isFixedLeftLast", "isFixedRightFirst", "align", "title", "dataIndex", "sorter", "filter", "sorters", "className", "styles", "classNames", "showSorterTooltip", "tableActionBarShowOnHover", "internalFilters", "style", "width", "colSpan", "rowSpan", "onHeaderCell", "onSort", "onInternalFilter"];
+var _excluded = ["fixed", "isFixedLeftLast", "isFixedRightFirst", "align", "title", "dataIndex", "sorter", "filter", "sorters", "className", "styles", "classNames", "showSorterTooltip", "tableActionBarShowOnHover", "internalFilters", "style", "width", "colSpan", "rowSpan", "resizable", "resizeKey", "resizingKey", "onHeaderCell", "onSort", "onInternalFilter", "onResizeStart", "onResizeStep"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -37,9 +37,14 @@ var HeadCell = function HeadCell(props) {
     width = props.width,
     colSpan = props.colSpan,
     rowSpan = props.rowSpan,
+    resizable = props.resizable,
+    resizeKey = props.resizeKey,
+    resizingKey = props.resizingKey,
     onHeaderCell = props.onHeaderCell,
     onSort = props.onSort,
     onInternalFilter = props.onInternalFilter,
+    onResizeStart = props.onResizeStart,
+    onResizeStep = props.onResizeStep,
     rest = _objectWithoutProperties(props, _excluded);
   var _useContext = useContext(TableCtx),
     prefixCls = _useContext.prefixCls;
@@ -125,6 +130,36 @@ var HeadCell = function HeadCell(props) {
     }, renderTitle(), renderFilter());
   };
   var cls = clsx("".concat(prefixCls, "-cell"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-cell-fixed-").concat(fixed), fixed), "".concat(prefixCls, "-cell-fixed-").concat(fixed, "-last"), isFixedLeftLast), "".concat(prefixCls, "-cell-fixed-").concat(fixed, "-first"), isFixedRightFirst), "".concat(prefixCls, "-cell-operate-hover"), tableActionBarShowOnHover), className);
+
+  // `resizeKey` is only stamped onto leaf columns, so it doubles as the guard that
+  // keeps handles off group header cells (whose width is the sum of their leaves).
+  var showResizeHandle = !!(resizable && resizeKey && onResizeStart);
+  var isResizing = !!resizeKey && resizingKey === resizeKey;
+  var renderResizeHandle = function renderResizeHandle() {
+    if (!showResizeHandle) return null;
+    return /*#__PURE__*/React.createElement("span", {
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": tableLocale.resizeColumn || 'Drag to resize column',
+      tabIndex: 0,
+      className: clsx("".concat(prefixCls, "-resize-handle"), _defineProperty({}, "".concat(prefixCls, "-resize-handle-active"), isResizing)),
+      onPointerDown: function onPointerDown(event) {
+        return onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart(event, resizeKey);
+      }
+      // The whole title area is a sort trigger, and a resize drag ends with a
+      // click on top of it; swallow it so dragging never toggles the sorter.
+      ,
+      onClick: function onClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      onKeyDown: function onKeyDown(event) {
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+        event.preventDefault();
+        onResizeStep === null || onResizeStep === void 0 || onResizeStep(resizeKey, event.key === 'ArrowLeft' ? -1 : 1);
+      }
+    });
+  };
   var getThProps = function getThProps() {
     var styles = _objectSpread(_objectSpread({}, style), {}, {
       width: width,
@@ -143,9 +178,9 @@ var HeadCell = function HeadCell(props) {
   var thProps = getThProps();
   var renderCell = function renderCell() {
     if (!filter && !sorter) {
-      return /*#__PURE__*/React.createElement("th", thProps, title);
+      return /*#__PURE__*/React.createElement("th", thProps, title, renderResizeHandle());
     }
-    return /*#__PURE__*/React.createElement("th", thProps, renderCellWithAction());
+    return /*#__PURE__*/React.createElement("th", thProps, renderCellWithAction(), renderResizeHandle());
   };
   var cell = renderCell();
   return cell;

package/dist/esm/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/esm/Table/util/index.js

@@ -4,6 +4,43 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * 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 function getColumnResizeKey(column, index) {
+  var _column$key;
+  var id = (_column$key = column.key) !== null && _column$key !== void 0 ? _column$key : column.dataIndex;
+  return id === undefined || id === null || id === '' ? "index:".concat(index) : "id:".concat(id);
+}
+
+/**
+ * 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 function applyColumnResize(columns, resizable, resizedWidths) {
+  return columns.map(function (column, index) {
+    var _ref, _column$resizable;
+    var resizeKey = getColumnResizeKey(column, index);
+    var resizedWidth = resizedWidths === null || resizedWidths === void 0 ? void 0 : resizedWidths[resizeKey];
+    var next = _objectSpread(_objectSpread({}, column), {}, {
+      resizeKey: resizeKey,
+      resizable: (_ref = (_column$resizable = column.resizable) !== null && _column$resizable !== void 0 ? _column$resizable : resizable) !== null && _ref !== void 0 ? _ref : false
+    });
+    if (Number.isFinite(resizedWidth) && resizedWidth > 0) {
+      next.width = resizedWidth;
+    }
+    return next;
+  });
+}
 var getColumnWidth = function getColumnWidth(column, index, measuredColumnWidths) {
   var measuredWidth = measuredColumnWidths === null || measuredColumnWidths === void 0 ? void 0 : measuredColumnWidths[index];
   if (Number.isFinite(measuredWidth) && measuredWidth && measuredWidth > 0) {

package/dist/esm/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/esm/Tabs/demo/overflow-center.js

@@ -0,0 +1,61 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Tabs } from "../..";
+import React, { useState } from 'react';
+export default (function () {
+  var items = Array.from({
+    length: 24
+  }, function (_, i) {
+    return {
+      key: "tab-".concat(i + 1),
+      label: "Tab ".concat(i + 1),
+      children: "Content of Tab Pane ".concat(i + 1)
+    };
+  });
+  var _useState = useState('tab-1'),
+    _useState2 = _slicedToArray(_useState, 2),
+    centerKey = _useState2[0],
+    setCenterKey = _useState2[1];
+  var _useState3 = useState('tab-1'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    autoKey = _useState4[0],
+    setAutoKey = _useState4[1];
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 24
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, "activeAlign=\"center\""), /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: 480
+    },
+    "data-testid": "center-wrap"
+  }, /*#__PURE__*/React.createElement(Tabs, {
+    activeAlign: "center",
+    items: items,
+    activeKey: centerKey,
+    onChange: setCenterKey
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, "default (auto)"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: 480
+    },
+    "data-testid": "auto-wrap"
+  }, /*#__PURE__*/React.createElement(Tabs, {
+    items: items,
+    activeKey: autoKey,
+    onChange: setAutoKey
+  }))));
+});

package/dist/esm/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 {};