@rainbow-oh/yee-c 0.9.2 → 0.11.0

package/dist/cjs/utils/ax/core.js

@@ -60,8 +60,6 @@ function buildUrl(config) {
   return fullpath;
 }
 var Ax = class {
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  // constructor() {}
   request(configOrUrl) {
     var _a;
     let config = getDefaultConfig();
@@ -83,9 +81,10 @@ var Ax = class {
         body: config.data
       }));
     }
-    return new Promise((resolve, reject) => {
+    let xhr;
+    const request = new Promise((resolve, reject) => {
       var _a2;
-      let xhr = new XMLHttpRequest();
+      xhr = new XMLHttpRequest();
       const {
         headers,
         timeout,
@@ -98,7 +97,6 @@ var Ax = class {
         onTimeout,
         onLoaded,
         formDataWithBoundary = true
-        // Set boundary for form-data upload type
       } = config;
       if ((!data || (0, import_utils.getType)(data) === "FormData") && headers) {
         if (formDataWithBoundary) {
@@ -113,64 +111,53 @@ var Ax = class {
         xhr.timeout = timeout;
       }
       xhr.upload.onprogress = function(event) {
-        if (onUploadProgress) {
-          onUploadProgress(event, xhr);
-        }
+        onUploadProgress == null ? void 0 : onUploadProgress(event, xhr);
       };
       xhr.onreadystatechange = function() {
-        if (xhr.readyState === XMLHttpRequest.DONE) {
+        if ((xhr == null ? void 0 : xhr.readyState) === XMLHttpRequest.DONE) {
           if (xhr.status >= 200 && xhr.status <= 299) {
             const type = this.getResponseHeader("content-type") || "";
             const isJsonType = type.indexOf("application/json") > -1;
-            let data2;
+            let responseData;
             if (isJsonType) {
               try {
-                data2 = JSON.parse(xhr.response);
-              } catch (err) {
-                data2 = xhr.response;
+                responseData = JSON.parse(xhr.response);
+              } catch (error) {
+                responseData = xhr.response;
               }
             } else {
-              data2 = xhr.response;
-            }
-            if (onSuccess) {
-              onSuccess(data2, xhr);
+              responseData = xhr.response;
             }
-            resolve(data2);
+            onSuccess == null ? void 0 : onSuccess(responseData, xhr);
+            resolve(responseData);
           } else {
-            if (onError) {
-              onError(xhr.response, xhr);
-            }
+            onError == null ? void 0 : onError(xhr.response, xhr);
             reject({ status: "error", error: xhr.response });
           }
         }
       };
       xhr.onprogress = function(event) {
-        if (onProgress) {
-          onProgress(event, xhr);
-        }
+        onProgress == null ? void 0 : onProgress(event, xhr);
       };
       xhr.onloadend = function(event) {
-        if (onLoaded) {
-          onLoaded(event, xhr);
-        }
+        onLoaded == null ? void 0 : onLoaded(event, xhr);
         xhr = null;
       };
-      xhr.onerror = function(err) {
-        if (onError) {
-          onError(xhr.response, xhr);
-        }
-        reject({ status: "error", error: err });
-        xhr = null;
+      xhr.onerror = function(error) {
+        onError == null ? void 0 : onError(xhr.response, xhr);
+        reject({ status: "error", error });
+      };
+      xhr.onabort = function(event) {
+        reject({ status: "abort", error: event });
       };
       xhr.ontimeout = function(event) {
-        if (onTimeout) {
-          onTimeout(event, xhr);
-        }
+        onTimeout == null ? void 0 : onTimeout(event, xhr);
         reject({ status: "timeout", error: event });
-        xhr = null;
       };
       xhr.send(data || null);
     });
+    request.abort = () => xhr == null ? void 0 : xhr.abort();
+    return request;
   }
 };
 ["delete", "get", "head", "options"].forEach((method) => {

package/dist/cjs/utils/ax/index.d.ts

@@ -1,2 +1,4 @@
-declare const ax: (configOrUrl: string | import("./interface").AxConfig) => Promise<unknown>;
+declare const ax: (configOrUrl: string | import("./interface").AxConfig) => Promise<Response> | (Promise<any> & {
+    abort: () => void;
+});
 export default ax;

package/dist/cjs/utils/folder-scanner.d.ts

@@ -1 +1 @@
-export default function folderScanner(entry: FileSystemFileEntry | FileSystemDirectoryEntry, filesList: any[]): Promise<unknown>;
+export default function folderScanner(entry: FileSystemEntry, filesList?: File[]): Promise<File[]>;

package/dist/cjs/utils/folder-scanner.js

@@ -42,39 +42,48 @@ __export(folder_scanner_exports, {
   default: () => folderScanner
 });
 module.exports = __toCommonJS(folder_scanner_exports);
-function folderScanner(entry, filesList) {
-  return __async(this, null, function* () {
-    return new Promise((resolve, reject) => {
-      if (entry.isDirectory) {
-        const directoryReader = entry.createReader();
-        directoryReader.readEntries(
-          (entries) => __async(this, null, function* () {
-            entries.forEach((entry2, index) => __async(this, null, function* () {
-              yield folderScanner(entry2, filesList);
-              if (index === entries.length - 1) {
-                resolve(filesList);
-              }
-            }));
-          }),
-          (e) => {
-            reject(e);
-          }
-        );
-      } else if (entry.isFile) {
-        entry.file(
-          (file) => __async(this, null, function* () {
-            const path = entry.fullPath.substring(1);
-            const newFile = Object.defineProperty(file, "webkitRelativePath", {
-              value: path
-            });
-            filesList.push(newFile);
-            resolve(filesList);
-          }),
-          (e) => {
-            reject(e);
-          }
-        );
-      }
-    });
+var readAllEntries = (reader) => {
+  return new Promise((resolve, reject) => {
+    const entries = [];
+    const readNextBatch = () => {
+      reader.readEntries((batch) => {
+        if (batch.length === 0) {
+          resolve(entries);
+          return;
+        }
+        entries.push(...batch);
+        readNextBatch();
+      }, reject);
+    };
+    readNextBatch();
+  });
+};
+var readFile = (entry) => {
+  return new Promise((resolve, reject) => {
+    entry.file((file) => {
+      const path = entry.fullPath.replace(/^\//, "");
+      Object.defineProperty(file, "webkitRelativePath", {
+        configurable: true,
+        value: path
+      });
+      resolve(file);
+    }, reject);
+  });
+};
+function folderScanner(_0) {
+  return __async(this, arguments, function* (entry, filesList = []) {
+    if (entry.isFile) {
+      filesList.push(yield readFile(entry));
+      return filesList;
+    }
+    if (entry.isDirectory) {
+      const reader = entry.createReader();
+      const entries = yield readAllEntries(reader);
+      const nestedFiles = yield Promise.all(
+        entries.map((nestedEntry) => folderScanner(nestedEntry, []))
+      );
+      filesList.push(...nestedFiles.flat());
+    }
+    return filesList;
   });
 }

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@ declare global {
         __yee_c_version__: string;
     }
 }
-export declare const version = "0.9.2";
+export declare const version = "0.11.0";

package/dist/cjs/version.js

@@ -22,7 +22,7 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-var version = "0.9.2";
+var version = "0.11.0";
 if (typeof window !== "undefined") {
   window.__yee_c_version__ = version;
 }

package/dist/esm/Button/demo/icon.js

@@ -1,4 +1,4 @@
-import { Button } from "../..";
+import { Button, Tooltip } from "../..";
 import { Download, Plus, Search } from 'lucide-react';
 import React from 'react';
 export default (function () {
@@ -6,7 +6,8 @@ export default (function () {
     type: "primary",
     icon: /*#__PURE__*/React.createElement(Search, {
       size: 16
-    })
+    }),
+    title: "search"
   }, "Search"), /*#__PURE__*/React.createElement("span", {
     style: {
       margin: '0 10px'
@@ -24,13 +25,15 @@ export default (function () {
     style: {
       margin: '0 10px'
     }
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Search"
+  }, /*#__PURE__*/React.createElement(Button, {
     shape: "circle",
     type: "primary",
     icon: /*#__PURE__*/React.createElement(Search, {
       size: 16
     })
-  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
+  })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
     icon: /*#__PURE__*/React.createElement(Search, {
       size: 16
     })

package/dist/esm/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/dist/esm/Table/demo/resizable.d.ts

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

package/dist/esm/Table/demo/resizable.js

@@ -0,0 +1,110 @@
+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); }
+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 _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 { Table } from "../..";
+import React from 'react';
+var columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  key: 'name',
+  fixed: 'left',
+  width: 140,
+  minWidth: 100
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+  key: 'age',
+  width: 100,
+  sorter: true
+}, {
+  title: 'Address',
+  dataIndex: 'address',
+  key: 'address',
+  width: 240
+}, {
+  title: 'Company',
+  dataIndex: 'company',
+  key: 'company',
+  width: 180
+}, {
+  title: 'Email',
+  dataIndex: 'email',
+  key: 'email',
+  width: 240
+}, {
+  // Opt this column out of resizing while the rest stay resizable.
+  title: 'Action',
+  key: 'action',
+  fixed: 'right',
+  width: 100,
+  resizable: false,
+  render: function render(record) {
+    return /*#__PURE__*/React.createElement("a", {
+      onClick: function onClick() {
+        return console.log(record);
+      }
+    }, "View");
+  }
+}];
+var dataSource = [{
+  key: '1',
+  name: 'John Brown',
+  age: 32,
+  address: 'New York No. 1 Lake Park',
+  company: 'Acme Inc.',
+  email: 'john.brown@example.com'
+}, {
+  key: '2',
+  name: 'Jim Green',
+  age: 42,
+  address: 'London No. 1 Lake Park',
+  company: 'Globex',
+  email: 'jim.green@example.com'
+}, {
+  key: '3',
+  name: 'Joe Black',
+  age: 28,
+  address: 'Sidney No. 1 Lake Park',
+  company: 'Initech',
+  email: 'joe.black@example.com'
+}];
+export default (function () {
+  var _React$useState = React.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    widths = _React$useState2[0],
+    setWidths = _React$useState2[1];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Table, {
+    resizable: true,
+    columns: columns,
+    dataSource: dataSource,
+    rowKey: "key",
+    pagination: false,
+    scroll: {
+      x: 1000
+    },
+    onColumnResizeEnd: function onColumnResizeEnd(width, column) {
+      return setWidths(function (current) {
+        var _column$key;
+        return _objectSpread(_objectSpread({}, current), {}, _defineProperty({}, String((_column$key = column.key) !== null && _column$key !== void 0 ? _column$key : column.dataIndex), width));
+      });
+    }
+  }), /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginTop: 12
+    }
+  }, "\u6700\u8FD1\u8C03\u6574\uFF1A", Object.keys(widths).length ? Object.entries(widths).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      width = _ref2[1];
+    return "".concat(key, "=").concat(width, "px");
+  }).join('，') : '拖动表头右边缘试试'));
+});

package/dist/esm/Table/hooks/useColumnResize.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { WrapedColumnProps } from '../interface';
+interface UseColumnResizeOptions {
+    tableRef: React.RefObject<HTMLTableElement | null>;
+    /**
+     * Latest leaf columns. Passed as a ref because the columns are themselves
+     * derived from `resizedWidths`; depending on the array would make every
+     * width change rebuild the drag handlers mid-drag.
+     */
+    columnsRef: React.RefObject<WrapedColumnProps[]>;
+    onColumnResize?: (width: number, column: WrapedColumnProps) => void;
+    onColumnResizeEnd?: (width: number, column: WrapedColumnProps) => void;
+}
+/**
+ * Pointer (and keyboard) driven column resizing.
+ *
+ * The table normally lets the browser distribute widths (`width: 100%` with an
+ * `auto` layout), which means writing a width onto one column would silently
+ * steal space from its neighbours. So the first resize interaction snapshots the
+ * rendered width of *every* column; from then on the table is fully px
+ * controlled and a drag only moves the column it grabbed.
+ */
+export default function useColumnResize({ tableRef, columnsRef, onColumnResize, onColumnResizeEnd, }: UseColumnResizeOptions): {
+    resizedWidths: Record<string, number>;
+    resizingKey: string | null;
+    onResizeStart: (event: React.PointerEvent<HTMLElement>, resizeKey: string) => void;
+    onResizeStep: (resizeKey: string, direction: number) => void;
+    resetResizedWidths: () => void;
+};
+export {};

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

@@ -0,0 +1,206 @@
+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); }
+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 _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 * as React from 'react';
+import useLatest from "../../hooks/useLatest";
+/** Floor for a dragged column when it declares no `minWidth` of its own. */
+var DEFAULT_MIN_COLUMN_WIDTH = 40;
+
+/** Width delta applied per arrow key press when a handle has focus. */
+var KEYBOARD_STEP = 8;
+var clampWidth = function clampWidth(width, column) {
+  var _column$minWidth;
+  var min = Math.max((_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : DEFAULT_MIN_COLUMN_WIDTH, 0);
+  var max = column.maxWidth;
+  if (width < min) return min;
+  if (max !== undefined && width > max) return max;
+  return Math.round(width);
+};
+
+/**
+ * Pointer (and keyboard) driven column resizing.
+ *
+ * The table normally lets the browser distribute widths (`width: 100%` with an
+ * `auto` layout), which means writing a width onto one column would silently
+ * steal space from its neighbours. So the first resize interaction snapshots the
+ * rendered width of *every* column; from then on the table is fully px
+ * controlled and a drag only moves the column it grabbed.
+ */
+export default function useColumnResize(_ref) {
+  var tableRef = _ref.tableRef,
+    columnsRef = _ref.columnsRef,
+    onColumnResize = _ref.onColumnResize,
+    onColumnResizeEnd = _ref.onColumnResizeEnd;
+  var _React$useState = React.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    resizedWidths = _React$useState2[0],
+    setResizedWidths = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    resizingKey = _React$useState4[0],
+    setResizingKey = _React$useState4[1];
+
+  // Callbacks are consumer supplied and usually re-created every render; reading
+  // them from a ref keeps `onResizeStart` stable.
+  var onColumnResizeRef = useLatest(onColumnResize);
+  var onColumnResizeEndRef = useLatest(onColumnResizeEnd);
+  var resizedWidthsRef = useLatest(resizedWidths);
+  var frameRef = React.useRef(0);
+  var teardownRef = React.useRef(null);
+
+  /**
+   * Read the rendered width of every column off the `<col>` elements. Returns
+   * null when the measurement cannot be trusted, in which case the interaction
+   * is abandoned rather than applying a partial snapshot (a partial snapshot
+   * would leave holes once the layout switches to `fixed`).
+   */
+  var snapshotWidths = React.useCallback(function () {
+    var _tableRef$current;
+    var columns = columnsRef.current || [];
+    var colElements = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelectorAll(':scope > colgroup > col');
+    if (!colElements || colElements.length !== columns.length) return null;
+    if (!columns.length) return null;
+    var snapshot = {};
+    for (var index = 0; index < columns.length; index += 1) {
+      var _columns$index;
+      var key = (_columns$index = columns[index]) === null || _columns$index === void 0 ? void 0 : _columns$index.resizeKey;
+      var _width = Math.round(colElements[index].getBoundingClientRect().width);
+      if (!key || !Number.isFinite(_width) || _width <= 0) return null;
+      snapshot[key] = _width;
+    }
+    return snapshot;
+  }, [columnsRef, tableRef]);
+  var findColumn = React.useCallback(function (resizeKey) {
+    return (columnsRef.current || []).find(function (column) {
+      return column.resizeKey === resizeKey;
+    });
+  }, [columnsRef]);
+  var onResizeStart = React.useCallback(function (event, resizeKey) {
+    // Ignore secondary buttons, and never let the drag reach the sorter click
+    // handler or start a native text selection.
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    var column = findColumn(resizeKey);
+    if (!column) return;
+    var snapshot = snapshotWidths();
+    if (!snapshot) return;
+    var startX = event.clientX;
+    var startWidth = snapshot[resizeKey];
+    var latestWidth = startWidth;
+    setResizingKey(resizeKey);
+    setResizedWidths(snapshot);
+    document.body.style.userSelect = 'none';
+    document.body.style.cursor = 'col-resize';
+    var applyWidth = function applyWidth(clientX) {
+      var _onColumnResizeRef$cu;
+      var next = clampWidth(startWidth + (clientX - startX), column);
+      if (next === latestWidth) return;
+      latestWidth = next;
+      setResizedWidths(function (current) {
+        return _objectSpread(_objectSpread({}, current), {}, _defineProperty({}, resizeKey, next));
+      });
+      (_onColumnResizeRef$cu = onColumnResizeRef.current) === null || _onColumnResizeRef$cu === void 0 || _onColumnResizeRef$cu.call(onColumnResizeRef, next, column);
+    };
+
+    // pointermove fires far more often than the browser can paint, and every
+    // width change relayouts the whole table, so coalesce to one per frame.
+    var onPointerMove = function onPointerMove(moveEvent) {
+      var clientX = moveEvent.clientX;
+      if (frameRef.current) cancelAnimationFrame(frameRef.current);
+      frameRef.current = requestAnimationFrame(function () {
+        frameRef.current = 0;
+        applyWidth(clientX);
+      });
+    };
+
+    // Detaching listeners and restoring the document is split out from `stop`
+    // so that unmounting mid-drag can clean up without emitting a resize-end
+    // event or touching state on a gone component.
+    // Collected as closures so that `teardown` does not have to name the
+    // handlers it removes (`stop` is defined after it, and they are mutual).
+    var detachers = [];
+    var bind = function bind(type, handler) {
+      window.addEventListener(type, handler);
+      detachers.push(function () {
+        return window.removeEventListener(type, handler);
+      });
+    };
+    var teardown = function teardown() {
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+        frameRef.current = 0;
+      }
+      detachers.forEach(function (detach) {
+        return detach();
+      });
+      detachers.length = 0;
+      document.body.style.userSelect = '';
+      document.body.style.cursor = '';
+      teardownRef.current = null;
+    };
+    var stop = function stop() {
+      var _onColumnResizeEndRef;
+      teardown();
+      setResizingKey(null);
+      (_onColumnResizeEndRef = onColumnResizeEndRef.current) === null || _onColumnResizeEndRef === void 0 || _onColumnResizeEndRef.call(onColumnResizeEndRef, latestWidth, column);
+    };
+    teardownRef.current = teardown;
+    bind('pointermove', onPointerMove);
+    bind('pointerup', stop);
+    bind('pointercancel', stop);
+  }, [findColumn, snapshotWidths, onColumnResizeRef, onColumnResizeEndRef]);
+
+  /** Keyboard equivalent of a drag, so the handle is operable without a mouse. */
+  var onResizeStep = React.useCallback(function (resizeKey, direction) {
+    var _onColumnResizeRef$cu2, _onColumnResizeEndRef2;
+    var column = findColumn(resizeKey);
+    if (!column) return;
+    var base = resizedWidthsRef.current;
+    var snapshot = base[resizeKey] === undefined ? snapshotWidths() : base;
+    if (!snapshot) return;
+    var next = clampWidth(snapshot[resizeKey] + direction * KEYBOARD_STEP, column);
+    if (next === snapshot[resizeKey]) return;
+    setResizedWidths(_objectSpread(_objectSpread({}, snapshot), {}, _defineProperty({}, resizeKey, next)));
+    (_onColumnResizeRef$cu2 = onColumnResizeRef.current) === null || _onColumnResizeRef$cu2 === void 0 || _onColumnResizeRef$cu2.call(onColumnResizeRef, next, column);
+    (_onColumnResizeEndRef2 = onColumnResizeEndRef.current) === null || _onColumnResizeEndRef2 === void 0 || _onColumnResizeEndRef2.call(onColumnResizeEndRef, next, column);
+  }, [findColumn, snapshotWidths, resizedWidthsRef, onColumnResizeRef, onColumnResizeEndRef]);
+
+  /**
+   * Forget the snapshot. Called when the column set changes: widths keyed to
+   * columns that no longer exist would under-report the total table width.
+   */
+  var resetResizedWidths = React.useCallback(function () {
+    setResizedWidths(function (current) {
+      return Object.keys(current).length ? {} : current;
+    });
+  }, []);
+
+  // Unmounting mid-drag must not leave listeners or body styles behind.
+  React.useEffect(function () {
+    return function () {
+      var _teardownRef$current;
+      return (_teardownRef$current = teardownRef.current) === null || _teardownRef$current === void 0 ? void 0 : _teardownRef$current.call(teardownRef);
+    };
+  }, []);
+
+  // Not gated on any `enabled` flag: the state stays empty until something drags,
+  // and handles are only rendered for columns that opted in, so an unused Table
+  // pays nothing and a column-level `resizable` works with no table-level flag.
+  return {
+    resizedWidths: resizedWidths,
+    resizingKey: resizingKey,
+    onResizeStart: onResizeStart,
+    onResizeStep: onResizeStep,
+    resetResizedWidths: resetResizedWidths
+  };
+}

package/dist/esm/Table/hooks/useColumns.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 import type { ColumnProps, ExpandableType, RowSelectionType, WrapedColumnProps } from '../interface';
-export default function useColumns({ children, columns, rowSelection, expandable, measuredColumnWidths, }: {
+export default function useColumns({ children, columns, rowSelection, expandable, measuredColumnWidths, resizable, resizedWidths, }: {
     children?: React.ReactElement<ColumnProps> | React.ReactElement<ColumnProps>[];
     columns: ColumnProps[];
     rowSelection?: RowSelectionType;
     expandable?: ExpandableType;
     measuredColumnWidths?: number[];
+    resizable?: boolean;
+    resizedWidths?: Record<string, number>;
 }): {
     wrapedColumns: WrapedColumnProps[];
     headerRows: import("../interface").HeaderCell[][];