@nokecy/qc-ui-components 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/cjs/ag-grid-plus/theme.js

@@ -8,6 +8,7 @@ exports.useAgGridTheme = useAgGridTheme;
 var _agGridCommunity = require("ag-grid-community");
 var _antd = require("antd");
 var _react = require("react");
+var _rowColors = require("./rowColors");
 /**
  * AG-Grid v33 主题配置
  * 使用 themeQuartz API 替代 CSS 变量方式
@@ -18,7 +19,18 @@ var headerFilterPlacement = (0, _agGridCommunity.createPart)({
   feature: 'qcHeaderFilterPlacement',
   css: "\n    .ag-ltr .ag-right-aligned-header .ag-cell-label-container {\n      flex-direction: row-reverse;\n    }\n    .ag-ltr .ag-right-aligned-header .ag-header-cell-filter-button {\n      margin-left: var(--ag-spacing);\n      margin-right: 0;\n    }\n  "
 });
-var agGridTheme = exports.agGridTheme = _agGridCommunity.themeQuartz.withPart(headerFilterPlacement).withParams({
+
+/**
+ * 选中且悬浮行底色取 CSS 变量 `--qc-row-selected-hover-bg`（由 AgGridPlus 容器按主题写入）：
+ * 否则选中行被悬浮时只显示悬浮色，「选中」反而变淡。
+ * 表头键盘焦点环用主色 2px 实线（对白底 ≥ 3:1），原先的 3px 浅色外环对比度不足。
+ * 内置编辑器只留单元格那一层框，去掉输入框自带的第二层；单元格错误态用 `ag-cell-error` 类名（列上 cellClassRules 返回即可）。@author nokecy
+ */
+var interactionStates = (0, _agGridCommunity.createPart)({
+  feature: 'qcInteractionStates',
+  css: "\n    .ag-row-selected.ag-row-hover::before {\n      background-color: var(--qc-row-selected-hover-bg, var(--ag-selected-row-background-color));\n    }\n    .ag-header-cell:focus-visible,\n    .ag-header-group-cell:focus-visible {\n      outline: 2px solid var(--ag-accent-color);\n      outline-offset: -2px;\n      box-shadow: none;\n    }\n    .ag-header-cell:focus-visible::after,\n    .ag-header-group-cell:focus-visible::after {\n      display: none;\n    }\n    .ag-cell-inline-editing .ag-input-field-input,\n    .ag-cell-inline-editing .ag-text-field-input,\n    .ag-cell-inline-editing .ag-select .ag-picker-field-wrapper,\n    .ag-cell-inline-editing .ant-input,\n    .ag-cell-inline-editing .ant-input-number,\n    .ag-cell-inline-editing .ant-picker,\n    .ag-cell-inline-editing .ant-select .ant-select-selector {\n      border: 0 !important;\n      box-shadow: none !important;\n      outline: none !important;\n      background-color: transparent;\n    }\n    /* \u805A\u7126\u3001\u9519\u8BEF\u53EA\u7528\u5355\u5143\u683C\u8FD9\u4E00\u5C42\u6846\u8868\u8FBE\uFF1Ainset \u4E0D\u5360\u5E03\u5C40\uFF0C\u4E5F\u4E0D\u4F1A\u53E0\u5728\u5355\u5143\u683C\u7EBF\u5916 */\n    .ag-cell-inline-editing {\n      border: 0 !important;\n      box-shadow: inset 0 0 0 1px var(--ag-accent-color);\n    }\n    .ag-cell.ag-cell-error,\n    .ag-cell-inline-editing.ag-cell-error {\n      box-shadow: inset 0 0 0 1px var(--ag-invalid-color);\n    }\n  "
+});
+var agGridTheme = exports.agGridTheme = _agGridCommunity.themeQuartz.withPart(headerFilterPlacement).withPart(interactionStates).withParams({
   // 基础颜色
   backgroundColor: '#FFFFFF',
   foregroundColor: '#555B62',
@@ -89,11 +101,16 @@ var agGridTheme = exports.agGridTheme = _agGridCommunity.themeQuartz.withPart(he
  * 根据当前 Ant Design ConfigProvider 主题生成 AgGrid 主题色。
  * 网格、筛选弹层、输入框和强调状态均直接跟随 antd 主题。@author nokecy
  */
-function useAgGridTheme() {
+function useAgGridTheme(options) {
   var _antdTheme$useToken = _antd.theme.useToken(),
     token = _antdTheme$useToken.token;
+  var density = options === null || options === void 0 ? void 0 : options.density;
+  var themeParams = options === null || options === void 0 ? void 0 : options.themeParams;
   return (0, _react.useMemo)(function () {
-    return agGridTheme.withParams({
+    var _rowColors$hover, _rowColors$selected;
+    // 规范底色：主色朝白混合，链接压其上 ≥ 4.5:1；主色不是 6 位 hex 时退回 antd 派生
+    var rowColors = (0, _rowColors.deriveRowColors)(token.colorPrimary, token.colorLink);
+    var themed = agGridTheme.withParams({
       // 弹层可能挂到网格容器之外，必须由组件主题完整声明颜色。@author nokecy
       backgroundColor: token.colorBgContainer,
       foregroundColor: token.colorText,
@@ -116,8 +133,8 @@ function useAgGridTheme() {
       invalidColor: token.colorError,
       browserColorScheme: 'inherit',
       accentColor: token.colorPrimary,
-      rowHoverColor: token.colorPrimaryBg,
-      selectedRowBackgroundColor: token.colorPrimaryBgHover,
+      rowHoverColor: (_rowColors$hover = rowColors === null || rowColors === void 0 ? void 0 : rowColors.hover) !== null && _rowColors$hover !== void 0 ? _rowColors$hover : token.colorPrimaryBg,
+      selectedRowBackgroundColor: (_rowColors$selected = rowColors === null || rowColors === void 0 ? void 0 : rowColors.selected) !== null && _rowColors$selected !== void 0 ? _rowColors$selected : token.colorPrimaryBgHover,
       columnHoverColor: token.colorPrimaryBg,
       rangeSelectionBorderColor: token.colorPrimary,
       rangeSelectionBackgroundColor: token.colorPrimaryBgHover,
@@ -132,5 +149,13 @@ function useAgGridTheme() {
       checkboxIndeterminateShapeColor: token.colorWhite,
       toggleButtonOnBackgroundColor: token.colorPrimary
     });
-  }, [token]);
+    var withDensity = density ? themed.withParams({
+      fontSize: density.fontSize,
+      headerFontSize: density.fontSize,
+      rowHeight: density.rowHeight,
+      headerHeight: density.headerHeight,
+      cellHorizontalPadding: density.paddingInline
+    }) : themed;
+    return themeParams ? withDensity.withParams(themeParams) : withDensity;
+  }, [token, density, themeParams]);
 }

package/dist/cjs/ag-grid-plus/toolBar/OverflowActions.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface OverflowActionsProps {
+    items: React.ReactNode[];
+    prefixCls: string;
+    hashId?: string;
+    /** 外显个数上限，超出进「更多」；不传则只按宽度收纳。 */
+    maxVisible?: number;
+    /** 「更多」按钮文案 */
+    moreText?: string;
+}
+/**
+ * 工具栏操作区：放不下的按钮收进「更多」。
+ * 收起的按钮仍留在原位量宽（不可见、不可聚焦），展开面板里渲染同一批按钮。@author nokecy
+ */
+declare const OverflowActions: React.FC<OverflowActionsProps>;
+export default OverflowActions;

package/dist/cjs/ag-grid-plus/toolBar/OverflowActions.js

@@ -0,0 +1,128 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _icons = require("@ant-design/icons");
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _overflow = require("./overflow");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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; }
+/**
+ * 工具栏操作区：放不下的按钮收进「更多」。
+ * 收起的按钮仍留在原位量宽（不可见、不可聚焦），展开面板里渲染同一批按钮。@author nokecy
+ */
+var OverflowActions = function OverflowActions(_ref) {
+  var items = _ref.items,
+    prefixCls = _ref.prefixCls,
+    hashId = _ref.hashId,
+    maxVisible = _ref.maxVisible,
+    _ref$moreText = _ref.moreText,
+    moreText = _ref$moreText === void 0 ? '更多' : _ref$moreText;
+  var containerRef = (0, _react.useRef)(null);
+  var moreRef = (0, _react.useRef)(null);
+  var itemRefs = (0, _react.useRef)([]);
+  var moreWidthRef = (0, _react.useRef)(_overflow.OVERFLOW_MORE_FALLBACK_WIDTH);
+  var _useState = (0, _react.useState)(items.length),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleCount = _useState2[0],
+    setVisibleCount = _useState2[1];
+  var measure = (0, _react.useCallback)(function () {
+    var _moreRef$current;
+    var container = containerRef.current;
+    if (!container) return;
+    if ((_moreRef$current = moreRef.current) !== null && _moreRef$current !== void 0 && _moreRef$current.offsetWidth) moreWidthRef.current = moreRef.current.offsetWidth;
+    var widths = items.map(function (_, index) {
+      var _itemRefs$current$ind, _itemRefs$current$ind2;
+      return (_itemRefs$current$ind = (_itemRefs$current$ind2 = itemRefs.current[index]) === null || _itemRefs$current$ind2 === void 0 ? void 0 : _itemRefs$current$ind2.offsetWidth) !== null && _itemRefs$current$ind !== void 0 ? _itemRefs$current$ind : 0;
+    });
+    var next = (0, _overflow.computeVisibleCount)(widths, container.clientWidth, {
+      gap: _overflow.OVERFLOW_GAP,
+      moreWidth: moreWidthRef.current,
+      maxVisible: maxVisible
+    });
+    setVisibleCount(function (prev) {
+      return prev === next ? prev : next;
+    });
+  }, [items, maxVisible]);
+
+  // 每次渲染都量：操作区内容由页面每轮重新给出，宽度可能随之变化；只在个数变了才更新状态
+  (0, _react.useLayoutEffect)(function () {
+    measure();
+  });
+  (0, _react.useLayoutEffect)(function () {
+    var container = containerRef.current;
+    if (!container || typeof ResizeObserver === 'undefined') return;
+    var observer = new ResizeObserver(function () {
+      return measure();
+    });
+    observer.observe(container);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [measure]);
+  var count = Math.min(visibleCount, items.length);
+  var hidden = items.slice(count);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: containerRef,
+    className: "".concat(prefixCls, "-actions ").concat(hashId !== null && hashId !== void 0 ? hashId : ''),
+    style: {
+      gap: _overflow.OVERFLOW_GAP
+    },
+    children: [items.map(function (item, index) {
+      var collapsed = index >= count;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: function ref(node) {
+          itemRefs.current[index] = node;
+        },
+        className: "".concat(prefixCls, "-action-item"),
+        "data-overflow-hidden": collapsed || undefined,
+        "aria-hidden": collapsed || undefined,
+        style: collapsed ? {
+          position: 'absolute',
+          insetInlineStart: 0,
+          visibility: 'hidden',
+          pointerEvents: 'none'
+        } : undefined,
+        children: item
+      }, index);
+    }), hidden.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: moreRef,
+      className: "".concat(prefixCls, "-action-more"),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Dropdown, {
+        trigger: ['click'],
+        placement: "bottomLeft",
+        popupRender: function popupRender() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "".concat(prefixCls, "-more-panel ").concat(hashId !== null && hashId !== void 0 ? hashId : ''),
+            children: hidden.map(function (item, index) {
+              return (
+                /*#__PURE__*/
+                // eslint-disable-next-line react/no-array-index-key
+                (0, _jsxRuntime.jsx)("div", {
+                  className: "".concat(prefixCls, "-more-item"),
+                  children: item
+                }, index)
+              );
+            })
+          });
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Button, {
+          "aria-haspopup": "menu",
+          children: [moreText, /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownOutlined, {})]
+        })
+      })
+    }) : null]
+  });
+};
+var _default = exports.default = OverflowActions;

package/dist/cjs/ag-grid-plus/toolBar/index.d.ts

@@ -15,6 +15,8 @@ export type ListToolBarProps = {
     actions?: React.ReactNode[];
     /** 工作栏右侧设置区 */
     settings?: SettingPropType[];
+    /** 操作区外显个数上限，超出进「更多」；不传则只按宽度收纳。 */
+    maxVisibleActions?: number;
 };
-declare const ListToolBar: ({ prefixCls: customizePrefixCls, title, subTitle, tooltip, className, style, actions, settings }: ListToolBarProps) => React.JSX.Element;
+declare const ListToolBar: ({ prefixCls: customizePrefixCls, title, subTitle, tooltip, className, style, actions, settings, maxVisibleActions, }: ListToolBarProps) => React.JSX.Element;
 export default ListToolBar;

package/dist/cjs/ag-grid-plus/toolBar/index.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _labelIconTip = require("../../shared/labelIconTip");
 var _style = require("./style");
 var _leftContent = require("./leftContent");
+var _OverflowActions = _interopRequireDefault(require("./OverflowActions"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -42,9 +43,13 @@ function getSettingItem(setting) {
       _onClick = settingConfig.onClick,
       key = settingConfig.key;
     if (icon && tooltip) {
+      // 真 button：可键盘聚焦、Enter/Space 触发，Tooltip 同时作为无障碍名称。@author nokecy
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
         title: tooltip,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          "aria-label": typeof tooltip === 'string' ? tooltip : undefined,
+          className: "qc-toolbar-icon-button",
           onClick: function onClick() {
             if (_onClick) {
               _onClick(key);
@@ -68,7 +73,8 @@ var ListToolBar = function ListToolBar(_ref) {
     _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? [] : _ref$actions,
     _ref$settings = _ref.settings,
-    settings = _ref$settings === void 0 ? [] : _ref$settings;
+    settings = _ref$settings === void 0 ? [] : _ref$settings,
+    maxVisibleActions = _ref.maxVisibleActions;
   var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
     getPrefixCls = _useContext.getPrefixCls;
   var prefixCls = getPrefixCls('pro-table-list-toolbar', customizePrefixCls);
@@ -93,30 +99,34 @@ var ListToolBar = function ListToolBar(_ref) {
     if (actions.length < 1) {
       return null;
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "".concat(prefixCls, "-actions ").concat(hashId),
-      children: actions.map(function (action, index) {
-        if (! /*#__PURE__*/_react.default.isValidElement(action)) {
-          // eslint-disable-next-line react/no-array-index-key
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
-            children: action
-          }, index);
-        }
-        return /*#__PURE__*/_react.default.cloneElement(action, _objectSpread({
-          // eslint-disable-next-line react/no-array-index-key
-          key: index
-        }, action === null || action === void 0 ? void 0 : action.props));
-      })
+    var nodes = actions.map(function (action, index) {
+      if (! /*#__PURE__*/_react.default.isValidElement(action)) {
+        // eslint-disable-next-line react/no-array-index-key
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+          children: action
+        }, index);
+      }
+      return /*#__PURE__*/_react.default.cloneElement(action, _objectSpread({
+        // eslint-disable-next-line react/no-array-index-key
+        key: index
+      }, action === null || action === void 0 ? void 0 : action.props));
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OverflowActions.default, {
+      items: nodes,
+      prefixCls: prefixCls,
+      hashId: hashId,
+      maxVisible: maxVisibleActions
     });
-  }, [actions, hashId, prefixCls]);
+  }, [actions, hashId, prefixCls, maxVisibleActions]);
   var hasRight = (0, _react.useMemo)(function () {
     return hasTitle || actionDom || (settings === null || settings === void 0 ? void 0 : settings.length);
   }, [actionDom, hasTitle, settings === null || settings === void 0 ? void 0 : settings.length]);
   var hasLeft = (0, _react.useMemo)(function () {
     return tooltip || title || subTitle;
   }, [hasTitle, subTitle, title, tooltip]);
+
+  // 三区结构（DESIGN.md §5.1）：左＝标题与写操作，中＝选择摘要等视图内容，右＝视图图标。位置固定。@author nokecy
   var leftTitleDom = (0, _react.useMemo)(function () {
-    // 保留左侧占位，并为操作组件提供当前列表独立的辅助内容位。@author nokecy
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "".concat(prefixCls, "-left ").concat(hashId),
       children: [hasTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -126,22 +136,20 @@ var ListToolBar = function ListToolBar(_ref) {
           label: title,
           subTitle: subTitle
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        ref: setLeftContainer,
-        style: {
-          display: 'contents'
-        }
-      })]
+      }), actionDom]
     });
-  }, [hasLeft, hasRight, hasTitle, hashId, prefixCls, subTitle, title, tooltip]);
+  }, [actionDom, hasTitle, hashId, prefixCls, subTitle, title, tooltip]);
+  var centerDom = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: setLeftContainer,
+      className: "".concat(prefixCls, "-center ").concat(hashId)
+    });
+  }, [hashId, prefixCls]);
   var rightTitleDom = (0, _react.useMemo)(function () {
-    if (!hasRight) return null;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    if (!(settings !== null && settings !== void 0 && settings.length)) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "".concat(prefixCls, "-right ").concat(hashId),
-      style: {
-        alignItems: 'center'
-      },
-      children: [actionDom, settings !== null && settings !== void 0 && settings.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "".concat(prefixCls, "-setting-items ").concat(hashId),
         children: settings.map(function (setting, index) {
           var settingItem = getSettingItem(setting);
@@ -154,17 +162,17 @@ var ListToolBar = function ListToolBar(_ref) {
             }, index)
           );
         })
-      }) : null]
+      })
     });
-  }, [hasRight, prefixCls, hashId, hasTitle, actionDom, settings]);
+  }, [hashId, prefixCls, settings]);
   var titleNode = (0, _react.useMemo)(function () {
     if (!hasRight && !hasLeft) return null;
     var containerClassName = (0, _classnames.default)("".concat(prefixCls, "-container"), hashId, {});
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: containerClassName,
-      children: [leftTitleDom, rightTitleDom]
+      children: [leftTitleDom, centerDom, rightTitleDom]
     });
-  }, [hasLeft, hasRight, hashId, leftTitleDom, prefixCls, rightTitleDom]);
+  }, [centerDom, hasLeft, hasRight, hashId, leftTitleDom, prefixCls, rightTitleDom]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_leftContent.ListToolbarLeftContext.Provider, {
     value: leftContainer,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/dist/cjs/ag-grid-plus/toolBar/leftContent.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-/** 当前列表工具栏的左侧内容容器；undefined 表示位于列表工具栏之外。@author nokecy */
+/** 当前列表工具栏的中区容器（选择摘要等视图内容）；undefined 表示位于列表工具栏之外。@author nokecy */
 export declare const ListToolbarLeftContext: React.Context<HTMLElement | null | undefined>;
-/** 将选择摘要等辅助内容放到当前列表标题旁；独立使用时保留原位置。@author nokecy */
+/** 将选择摘要等辅助内容放进工具栏中区；独立使用时保留原位置。@author nokecy */
 export declare const ListToolbarLeft: React.FC<React.PropsWithChildren>;

package/dist/cjs/ag-grid-plus/toolBar/leftContent.js

@@ -10,10 +10,10 @@ var _reactDom = require("react-dom");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** 当前列表工具栏的左侧内容容器；undefined 表示位于列表工具栏之外。@author nokecy */
+/** 当前列表工具栏的中区容器（选择摘要等视图内容）；undefined 表示位于列表工具栏之外。@author nokecy */
 var ListToolbarLeftContext = exports.ListToolbarLeftContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 
-/** 将选择摘要等辅助内容放到当前列表标题旁；独立使用时保留原位置。@author nokecy */
+/** 将选择摘要等辅助内容放进工具栏中区；独立使用时保留原位置。@author nokecy */
 var ListToolbarLeft = exports.ListToolbarLeft = function ListToolbarLeft(_ref) {
   var children = _ref.children;
   var container = (0, _react.useContext)(ListToolbarLeftContext);

package/dist/cjs/ag-grid-plus/toolBar/overflow.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 工具栏「更多」溢出的纯计算（DESIGN.md §5.4）：放不下的按钮收进「更多」，
+ * 不缩小、不换行、不横向滚动；先收排在后面的，排在最前面的至少保留一个。
+ * @author nokecy
+ */
+/** 按钮之间的间距（px）。 */
+export declare const OVERFLOW_GAP = 8;
+/** 「更多」按钮未测量时的预估宽度（px）。 */
+export declare const OVERFLOW_MORE_FALLBACK_WIDTH = 72;
+/**
+ * 返回外显的按钮个数，其余进「更多」。
+ * @param widths 每个按钮的自然宽度
+ * @param available 操作区可用宽度；<=0 视为尚未布局，只受 maxVisible 约束
+ * @param maxVisible 外显个数上限（可选）
+ */
+export declare function computeVisibleCount(widths: number[], available: number, options?: {
+    gap?: number;
+    moreWidth?: number;
+    maxVisible?: number;
+}): number;

package/dist/cjs/ag-grid-plus/toolBar/overflow.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OVERFLOW_MORE_FALLBACK_WIDTH = exports.OVERFLOW_GAP = void 0;
+exports.computeVisibleCount = computeVisibleCount;
+/**
+ * 工具栏「更多」溢出的纯计算（DESIGN.md §5.4）：放不下的按钮收进「更多」，
+ * 不缩小、不换行、不横向滚动；先收排在后面的，排在最前面的至少保留一个。
+ * @author nokecy
+ */
+
+/** 按钮之间的间距（px）。 */
+var OVERFLOW_GAP = exports.OVERFLOW_GAP = 8;
+/** 「更多」按钮未测量时的预估宽度（px）。 */
+var OVERFLOW_MORE_FALLBACK_WIDTH = exports.OVERFLOW_MORE_FALLBACK_WIDTH = 72;
+var span = function span(widths, count, gap) {
+  return count <= 0 ? 0 : widths.slice(0, count).reduce(function (sum, width) {
+    return sum + width;
+  }, 0) + gap * (count - 1);
+};
+
+/**
+ * 返回外显的按钮个数，其余进「更多」。
+ * @param widths 每个按钮的自然宽度
+ * @param available 操作区可用宽度；<=0 视为尚未布局，只受 maxVisible 约束
+ * @param maxVisible 外显个数上限（可选）
+ */
+function computeVisibleCount(widths, available) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var _options$gap = options.gap,
+    gap = _options$gap === void 0 ? OVERFLOW_GAP : _options$gap,
+    _options$moreWidth = options.moreWidth,
+    moreWidth = _options$moreWidth === void 0 ? OVERFLOW_MORE_FALLBACK_WIDTH : _options$moreWidth,
+    maxVisible = options.maxVisible;
+  var total = widths.length;
+  if (total === 0) return 0;
+  var cap = maxVisible === undefined ? total : Math.max(1, Math.min(total, Math.floor(maxVisible)));
+  if (available <= 0) return cap;
+  if (cap === total && span(widths, total, gap) <= available) return total;
+
+  // 需要「更多」按钮：它自己也占一份宽度和一个间距
+  for (var count = Math.min(cap, total - 1); count >= 1; count--) {
+    if (span(widths, count, gap) + gap + moreWidth <= available) return count;
+  }
+  return 1;
+}

package/dist/cjs/ag-grid-plus/toolBar/style.js

@@ -18,7 +18,10 @@ var genProListStyle = function genProListStyle(token) {
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
+      // 放不下时中区、右区换到下一行，而不是把左区挤到 0 宽后互相叠压
+      flexWrap: "wrap",
       minWidth: 0,
+      gap: token.marginSM,
       paddingBlock: 8,
       //token.padding,
       paddingInline: 0,
@@ -27,6 +30,7 @@ var genProListStyle = function genProListStyle(token) {
       }
     },
     "&-title": {
+      flex: "0 0 auto",
       display: "flex",
       alignItems: "center",
       justifyContent: "flex-start",
@@ -44,7 +48,8 @@ var genProListStyle = function genProListStyle(token) {
       marginInline: 4,
       color: token.colorIconHover,
       fontSize: token.fontSizeLG,
-      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
       "> span": {
         display: "block",
         width: "100%",
@@ -54,43 +59,94 @@ var genProListStyle = function genProListStyle(token) {
         color: token.colorPrimary
       }
     },
+    // 视图图标是真 button：去掉浏览器默认样式，保留键盘焦点环。@author nokecy
+    "&-setting-item button": {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minWidth: 28,
+      height: 28,
+      padding: 0,
+      border: 0,
+      background: "transparent",
+      color: "inherit",
+      fontSize: "inherit",
+      lineHeight: 1,
+      cursor: "pointer",
+      borderRadius: token.borderRadiusSM,
+      "&:hover": {
+        background: token.colorFillTertiary
+      },
+      "&:focus-visible": {
+        outline: "2px solid ".concat(token.colorPrimary),
+        outlineOffset: 1
+      }
+    },
+    // 左：标题 + 写操作；占满剩余宽度，操作区在其中按宽度把放不下的收进「更多」。
     "&-left": _defineProperty(_defineProperty({
       display: "flex",
       flexWrap: "nowrap",
       alignItems: "center",
-      gap: token.marginXS,
+      gap: token.marginSM,
       justifyContent: "flex-start",
       minWidth: 0,
-      flex: "0 1 auto"
+      flex: "1 1 240px"
     }, "".concat(token.antCls, "-tabs"), {
       width: "100%"
     }), "&-has-tabs", {
       overflow: "hidden"
     }),
+    // 中：选择摘要等视图内容，没有内容时不占位。
+    "&-center": {
+      display: "flex",
+      alignItems: "center",
+      gap: token.marginXS,
+      flex: "0 0 auto",
+      "&:empty": {
+        display: "none"
+      }
+    },
+    // 右：视图图标，位置固定。
     "&-right": {
-      flex: "1 1 0",
-      minWidth: 0,
+      flex: "0 0 auto",
+      marginInlineStart: "auto",
       display: "flex",
       flexWrap: "nowrap",
       alignItems: "center",
       justifyContent: "flex-end",
       gap: token.marginXS
     },
-    // @author nokecy：按钮单行呈现，空间不足时只在操作区内滚动，不撑开页面。
+    // 操作区：放不下的按钮收进「更多」，不缩小、不换行、不横向滚动（§5.4）。
     "&-actions": {
+      position: "relative",
       display: "flex",
       alignItems: "center",
-      gap: token.marginXS,
       minWidth: 0,
-      flex: "0 1 auto",
-      overflowX: "auto",
-      overflowY: "hidden",
-      scrollbarWidth: "none",
-      whiteSpace: "nowrap",
-      "&::-webkit-scrollbar": {
-        display: "none"
-      }
+      flex: "1 1 0",
+      overflow: "hidden",
+      whiteSpace: "nowrap"
+    },
+    "&-action-item, &-action-more": {
+      display: "flex",
+      alignItems: "center",
+      flex: "none"
     },
+    "&-more-panel": {
+      display: "flex",
+      flexDirection: "column",
+      gap: token.marginXXS,
+      minWidth: 140,
+      padding: token.paddingXXS,
+      background: token.colorBgElevated,
+      borderRadius: token.borderRadiusLG,
+      boxShadow: token.boxShadowSecondary
+    },
+    "&-more-item": _defineProperty({
+      display: "flex"
+    }, "> ".concat(token.antCls, "-btn, > *"), {
+      flex: 1,
+      justifyContent: "flex-start"
+    }),
     "&-extra-line": {
       marginBlockEnd: token.margin
     },

package/dist/cjs/ag-grid-plus/types.d.ts

@@ -6,6 +6,7 @@
  */
 import { ColumnState, GridApi, ColDef, ICellRendererParams } from 'ag-grid-community';
 import { ReactNode, type JSX } from 'react';
+import type { StatusKey } from './utils/statusPill';
 /**
  * 分页状态
  */
@@ -108,6 +109,11 @@ export interface ValueEnumItem {
     label: string;
     /** 标签颜色 (可选) */
     color?: string;
+    /**
+     * 状态语义（可选）。配置后渲染为「图标 + 文字 + 底色」的状态胶囊，优先于 `color`。
+     * wait 待处理 / running 进行中 / done 已完成 / warning 预警 / alarm 报警 / closed 已关闭。
+     */
+    status?: StatusKey;
     /** 是否为默认值 (可选) */
     default?: boolean;
 }