@rainbow-oh/yee-c 0.8.14 → 0.8.16

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

@@ -69,6 +69,64 @@
         animation: yee-spin-spokes-fade 1.2s linear infinite;
       }
     }
+
+    &-bounce {
+      @{pls}-bounce {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        gap: 3px;
+      }
+
+      @{pls}-bounce-dot {
+        display: inline-block;
+        background-color: var(--m-indicator-dot-bg-color);
+        border-radius: 50%;
+        animation: yee-spin-bounce 0.6s ease-in-out infinite alternate;
+      }
+    }
+
+    &-pulse {
+      @{pls}-pulse-circle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background-color: var(--m-indicator-dot-bg-color);
+        opacity: 0.6;
+        animation: yee-spin-pulse 1.5s ease-in-out infinite;
+
+        &-delay {
+          animation-delay: 0.5s;
+        }
+      }
+    }
+
+    &-wheel {
+      @{pls}-wheel-hub {
+        display: none;
+      }
+
+      @{pls}-wheel-spokes {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+
+      @{pls}-wheel-spoke {
+        position: absolute;
+        left: 50%;
+        width: 2px;
+        margin-left: -1px;
+        background-color: var(--m-indicator-dot-bg-color);
+        border-radius: 1px;
+        animation: yee-spin-spokes-fade 1.2s linear infinite;
+      }
+    }
   }
 
   &-tip {
@@ -168,3 +226,31 @@
     opacity: 0.15;
   }
 }
+
+@keyframes yee-spin-bounce {
+  0% {
+    transform: translateY(25%);
+    opacity: 0.4;
+  }
+
+  100% {
+    transform: translateY(-25%);
+    opacity: 1;
+  }
+}
+
+@keyframes yee-spin-pulse {
+  0% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+
+  50% {
+    opacity: 0.3;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

package/dist/esm/Table/demo/fixed.d.ts

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

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

@@ -0,0 +1,84 @@
+import { Table } from "../..";
+import React from 'react';
+var columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  key: 'name',
+  fixed: 'left',
+  width: 140
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+  key: 'age',
+  fixed: 'left',
+  width: 100
+}, {
+  title: 'Address',
+  dataIndex: 'address',
+  key: 'address',
+  width: 240
+}, {
+  title: 'Company',
+  dataIndex: 'company',
+  key: 'company',
+  width: 180
+}, {
+  title: 'Department',
+  dataIndex: 'department',
+  key: 'department',
+  width: 180
+}, {
+  title: 'Email',
+  dataIndex: 'email',
+  key: 'email',
+  width: 240
+}, {
+  title: 'Action',
+  key: 'action',
+  fixed: 'right',
+  width: 100,
+  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.',
+  department: 'Engineering',
+  email: 'john.brown@example.com'
+}, {
+  key: '2',
+  name: 'Jim Green',
+  age: 42,
+  address: 'London No. 1 Lake Park',
+  company: 'Globex',
+  department: 'Marketing',
+  email: 'jim.green@example.com'
+}, {
+  key: '3',
+  name: 'Joe Black',
+  age: 28,
+  address: 'Sidney No. 1 Lake Park',
+  company: 'Initech',
+  department: 'Product',
+  email: 'joe.black@example.com'
+}];
+export default (function () {
+  return /*#__PURE__*/React.createElement(Table, {
+    columns: columns,
+    dataSource: dataSource,
+    rowKey: "key",
+    pagination: false,
+    scroll: {
+      x: 1180
+    },
+    tableLayout: "fixed"
+  });
+});

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

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

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

@@ -21,7 +21,8 @@ export default function useColumns(_ref) {
   var children = _ref.children,
     columns = _ref.columns,
     rowSelection = _ref.rowSelection,
-    expandable = _ref.expandable;
+    expandable = _ref.expandable,
+    measuredColumnWidths = _ref.measuredColumnWidths;
   var childColumns = useMemo(function () {
     return children ? getColumnsFromChild(children) : null;
   }, [children]);
@@ -33,13 +34,13 @@ export default function useColumns(_ref) {
       var base = deepClone(childColumns || columns || []) || [];
       var tree = injectSelectionExpand(base, rowSelection, expandable);
       var leaves = flattenLeafColumns(tree);
-      var wraped = handleColumns(leaves);
+      var wraped = handleColumns(leaves, measuredColumnWidths);
       var rows = parseHeaderRows(tree, wraped);
       return {
         wrapedColumns: wraped,
         headerRows: rows
       };
-    }, [childColumns, columns, rowSelection, expandable]),
+    }, [childColumns, columns, rowSelection, expandable, measuredColumnWidths]),
     wrapedColumns = _useMemo.wrapedColumns,
     headerRows = _useMemo.headerRows;
   return {

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

@@ -85,15 +85,34 @@
     overflow: auto;
 
     &-wrapper {
-      overflow: auto;
       width: 100%;
 
       &-scroll-left @{pls}-cell-fixed-left-last {
-        box-shadow: 6px 0 6px -4px var(--yee-table-fixed-left-after-bs-color);
+        &::after {
+          content: '';
+          pointer-events: none;
+          position: absolute;
+          display: block;
+          height: 100%;
+          width: 15px;
+          right: -15px;
+          top: 0;
+          box-shadow: inset 4px 0 8px -4px var(--yee-table-fixed-left-after-bs-color);
+        }
       }
 
       &-scroll-right @{pls}-cell-fixed-right-first {
-        box-shadow: -6px 0 6px -4px var(--yee-table-fixed-right-after-bs-color);
+        &::after {
+          content: '';
+          pointer-events: none;
+          position: absolute;
+          display: block;
+          height: 100%;
+          width: 15px;
+          left: -15px;
+          top: 0;
+          box-shadow: inset -4px 0 8px -4px var(--yee-table-fixed-right-after-bs-color);
+        }
       }
     }
 
@@ -156,6 +175,7 @@
     &-fixed-left,
     &-fixed-right {
       position: sticky;
+      z-index: 1;
       background-color: var(--yee-table-fixed-column-bg-color);
     }
   }

package/dist/esm/Table/table.js

@@ -27,6 +27,7 @@ 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";
@@ -73,6 +74,10 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     onChange = props.onChange,
     rest = _objectWithoutProperties(props, _excluded);
   var dataAttrs = pickDataAttrs(rest);
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    measuredColumnWidths = _React$useState2[0],
+    setMeasuredColumnWidths = _React$useState2[1];
   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];
@@ -86,7 +91,8 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
       children: children,
       columns: propColumns,
       expandable: expandable,
-      rowSelection: rowSelection
+      rowSelection: rowSelection,
+      measuredColumnWidths: measuredColumnWidths
     }),
     wrapedColumns = _useColumns.wrapedColumns,
     headerRows = _useColumns.headerRows;
@@ -165,30 +171,70 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
 
   // Track filter changes to emit onChange after filtered data is recalculated
   var prevFilterRecordsRef = useRef(filterRecords);
-  var contentWrapperRef = useRef(null);
   var contentRef = useRef(null);
-  var _React$useState = React.useState({
+  var tableRef = useRef(null);
+  var _React$useState3 = React.useState({
       left: false,
       right: false
     }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    horizontalScroll = _React$useState2[0],
-    setHorizontalScroll = _React$useState2[1];
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    horizontalScroll = _React$useState4[0],
+    setHorizontalScroll = _React$useState4[1];
   var updateHorizontalScroll = React.useCallback(function () {
-    var wrapper = contentWrapperRef.current;
     var content = contentRef.current;
-    if (!wrapper || !content) return;
-    var scrollContainer = content.scrollWidth - content.clientWidth > 1 ? content : wrapper;
-    var maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth;
+    if (!content) return;
+    var maxScrollLeft = content.scrollWidth - content.clientWidth;
     var hasHorizontalScroll = maxScrollLeft > 1;
     var next = {
-      left: hasHorizontalScroll && scrollContainer.scrollLeft > 1,
-      right: hasHorizontalScroll && scrollContainer.scrollLeft < maxScrollLeft - 1
+      left: hasHorizontalScroll && content.scrollLeft > 1,
+      right: hasHorizontalScroll && content.scrollLeft < maxScrollLeft - 1
     };
     setHorizontalScroll(function (current) {
       return current.left === next.left && current.right === next.right ? current : next;
     });
   }, []);
+
+  // A primitive signature of everything in the columns that can affect the
+  // measured layout, used as an effect dependency instead of the array itself.
+  var columnLayoutKey = useMemo(function () {
+    return wrapedColumns.map(function (column, index) {
+      var _ref2, _column$key, _column$fixed, _column$width;
+      return "".concat((_ref2 = (_column$key = column.key) !== null && _column$key !== void 0 ? _column$key : column.dataIndex) !== null && _ref2 !== void 0 ? _ref2 : index, ":").concat((_column$fixed = column.fixed) !== null && _column$fixed !== void 0 ? _column$fixed : '', ":").concat((_column$width = column.width) !== null && _column$width !== void 0 ? _column$width : '');
+    }).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
+  // measurement.
+  var wrapedColumnsRef = useLatest(wrapedColumns);
+  var updateMeasuredColumnWidths = React.useCallback(function () {
+    var _tableRef$current;
+    var columns = wrapedColumnsRef.current;
+    if (!columns.some(function (column) {
+      return column.fixed;
+    })) return;
+    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;
+
+    // Round to whole pixels: sticky offsets do not need sub-pixel precision,
+    // and raw fractional widths would otherwise flip-flop (scrollbar showing /
+    // hiding, browser zoom) and keep re-triggering renders.
+    var nextWidths = Array.from(colElements, function (column) {
+      return Math.round(column.getBoundingClientRect().width);
+    });
+    if (nextWidths.some(function (width) {
+      return !Number.isFinite(width) || width <= 0;
+    })) {
+      return;
+    }
+    setMeasuredColumnWidths(function (current) {
+      var unchanged = (current === null || current === void 0 ? void 0 : current.length) === nextWidths.length && current.every(function (width, index) {
+        return width === nextWidths[index];
+      });
+      return unchanged ? current : nextWidths;
+    });
+  }, [wrapedColumnsRef]);
   useEffect(function () {
     if (prevFilterRecordsRef.current === filterRecords) return;
     prevFilterRecordsRef.current = filterRecords;
@@ -204,24 +250,37 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
       action: 'filter'
     });
   }, [filterRecords, filters, sortedData, pagination, current, pageSize, sorters, onChange]);
+
+  // Observers are attached once: both callbacks are referentially stable.
   useEffect(function () {
-    updateHorizontalScroll();
-    var wrapper = contentWrapperRef.current;
     var content = contentRef.current;
-    if (!wrapper || !content) return undefined;
+    var tableElement = tableRef.current;
+    if (!content || !tableElement) return undefined;
+    var handleResize = function handleResize() {
+      updateHorizontalScroll();
+      updateMeasuredColumnWidths();
+    };
     if (typeof ResizeObserver === 'undefined') {
-      window.addEventListener('resize', updateHorizontalScroll);
+      window.addEventListener('resize', handleResize);
       return function () {
-        return window.removeEventListener('resize', updateHorizontalScroll);
+        return window.removeEventListener('resize', handleResize);
       };
     }
-    var resizeObserver = new ResizeObserver(updateHorizontalScroll);
-    resizeObserver.observe(wrapper);
+    var resizeObserver = new ResizeObserver(handleResize);
     resizeObserver.observe(content);
+    resizeObserver.observe(tableElement);
     return function () {
       return resizeObserver.disconnect();
     };
-  }, [updateHorizontalScroll, wrapedColumns, pageData, scroll === null || scroll === void 0 ? void 0 : scroll.x]);
+  }, [updateHorizontalScroll, updateMeasuredColumnWidths]);
+
+  // Re-sync when something that can change the layout changes. `columnLayoutKey`
+  // is a primitive, so a measurement round-trip (which produces a new
+  // `wrapedColumns` array with identical layout config) does not retrigger it.
+  useEffect(function () {
+    updateHorizontalScroll();
+    updateMeasuredColumnWidths();
+  }, [columnLayoutKey, pageData, scroll === null || scroll === void 0 ? void 0 : scroll.x, scroll === null || scroll === void 0 ? void 0 : scroll.y, updateHorizontalScroll, updateMeasuredColumnWidths]);
   var renderHeader = function renderHeader() {
     return /*#__PURE__*/React.createElement(Header, {
       prefixCls: prefixCls,
@@ -269,6 +328,7 @@ 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
       }),
       className: clsx(_defineProperty({}, "".concat(prefixCls, "-bordered"), bordered), classNames === null || classNames === void 0 ? void 0 : classNames.table)
@@ -283,19 +343,18 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
         locale: locale,
         rowKey: rowKey
       }
-    }, /*#__PURE__*/React.createElement("table", tableProps, /*#__PURE__*/React.createElement(ColGroup, {
+    }, /*#__PURE__*/React.createElement("table", _extends({
+      ref: tableRef
+    }, tableProps), /*#__PURE__*/React.createElement(ColGroup, {
       columns: wrapedColumns
     }), renderTHeader(), renderTBody(), renderTFooter()));
     return /*#__PURE__*/React.createElement("div", {
-      ref: contentWrapperRef,
-      className: clsx("".concat(prefixCls, "-content-wrapper"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-content-wrapper-scroll-left"), horizontalScroll.left), "".concat(prefixCls, "-content-wrapper-scroll-right"), horizontalScroll.right)),
-      onScroll: updateHorizontalScroll
+      className: clsx("".concat(prefixCls, "-content-wrapper"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-content-wrapper-scroll-left"), horizontalScroll.left), "".concat(prefixCls, "-content-wrapper-scroll-right"), horizontalScroll.right))
     }, /*#__PURE__*/React.createElement("div", {
       ref: contentRef,
       className: clsx("".concat(prefixCls, "-content"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-").concat(size, "-size"), size), "".concat(prefixCls, "-fixed-header"), scroll === null || scroll === void 0 ? void 0 : scroll.y)),
       style: {
-        height: scroll === null || scroll === void 0 ? void 0 : scroll.y,
-        width: scroll === null || scroll === void 0 ? void 0 : scroll.x
+        height: scroll === null || scroll === void 0 ? void 0 : scroll.y
       },
       onScroll: updateHorizontalScroll
     }, table));

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

@@ -1,2 +1,2 @@
 import { WrapedColumnProps } from '../interface';
-export declare function handleColumns(columns: Array<WrapedColumnProps>): WrapedColumnProps[];
+export declare function handleColumns(columns: Array<WrapedColumnProps>, measuredColumnWidths?: number[]): WrapedColumnProps[];

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

@@ -4,7 +4,20 @@ 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); }
-export function handleColumns(columns) {
+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) {
+    return measuredWidth;
+  }
+  if (typeof column.width === 'number') {
+    return column.width;
+  }
+  if (typeof column.width === 'string' && /^\s*\d+(?:\.\d+)?px\s*$/.test(column.width)) {
+    return Number.parseFloat(column.width);
+  }
+  return 0;
+};
+export function handleColumns(columns, measuredColumnWidths) {
   var leftWidthCount = 0;
   var rightWidthCount = 0;
   for (var i = 0; i < columns.length; i++) {
@@ -20,7 +33,7 @@ export function handleColumns(columns) {
       if (!nextIsFixedLeft) {
         col.isFixedLeftLast = true;
       }
-      leftWidthCount = leftWidthCount + (col.width ? parseFloat(col.width) : 0);
+      leftWidthCount += getColumnWidth(col, i, measuredColumnWidths);
     }
   }
   for (var j = columns.length - 1; j >= 0; j--) {
@@ -33,7 +46,7 @@ export function handleColumns(columns) {
       if (((_columns2 = columns[j - 1]) === null || _columns2 === void 0 ? void 0 : _columns2.fixed) !== 'right') {
         _col.isFixedRightFirst = true;
       }
-      rightWidthCount = rightWidthCount + (_col.width ? parseFloat(_col.width) : 0);
+      rightWidthCount += getColumnWidth(_col, j, measuredColumnWidths);
     }
   }
   return columns;

package/dist/esm/style/themes.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-07-30T09:31:08.775Z
+ * Generated on 2026-08-03T08:40:43.552Z
  */
 
 /* ========== color.blue.css ========== */

package/dist/esm/style/variables.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-07-30T09:31:08.775Z
+ * Generated on 2026-08-03T08:40:43.552Z
  */
 
 /* ========== color.css ========== */

package/dist/esm/version.d.ts

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

package/dist/esm/version.js

@@ -1,4 +1,4 @@
-export var version = "0.8.14";
+export var version = "0.8.16";
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;
 }