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

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

@@ -0,0 +1,185 @@
+"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 _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+/**
+ * 获取配置区域 DOM Item
+ *
+ * @param setting 配置项
+ */
+function getSettingItem(setting) {
+  if ( /*#__PURE__*/_react.default.isValidElement(setting)) {
+    return setting;
+  }
+  if (setting) {
+    var settingConfig = setting;
+    var icon = settingConfig.icon,
+      tooltip = settingConfig.tooltip,
+      _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)("button", {
+          type: "button",
+          "aria-label": typeof tooltip === 'string' ? tooltip : undefined,
+          className: "qc-toolbar-icon-button",
+          onClick: function onClick() {
+            if (_onClick) {
+              _onClick(key);
+            }
+          },
+          children: icon
+        }, key)
+      });
+    }
+    return icon;
+  }
+  return null;
+}
+var ListToolBar = function ListToolBar(_ref) {
+  var customizePrefixCls = _ref.prefixCls,
+    title = _ref.title,
+    subTitle = _ref.subTitle,
+    tooltip = _ref.tooltip,
+    className = _ref.className,
+    style = _ref.style,
+    _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? [] : _ref$actions,
+    _ref$settings = _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);
+  var _useStyle = (0, _style.useStyle)(prefixCls),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    leftContainer = _useState2[0],
+    setLeftContainer = _useState2[1];
+
+  /** 有没有 title，需要结合多个场景判断 */
+  var hasTitle = (0, _react.useMemo)(function () {
+    return title || subTitle || tooltip;
+  }, [subTitle, title, tooltip]);
+
+  /** 没有 key 的时候帮忙加一下 key 不加的话很烦人 */
+  var actionDom = (0, _react.useMemo)(function () {
+    if (!Array.isArray(actions)) {
+      return actions;
+    }
+    if (actions.length < 1) {
+      return null;
+    }
+    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, 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 () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "".concat(prefixCls, "-left ").concat(hashId),
+      children: [hasTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "".concat(prefixCls, "-title ").concat(hashId),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_labelIconTip.LabelIconTip, {
+          tooltip: tooltip,
+          label: title,
+          subTitle: subTitle
+        })
+      }), actionDom]
+    });
+  }, [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 (!(settings !== null && settings !== void 0 && settings.length)) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "".concat(prefixCls, "-right ").concat(hashId),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "".concat(prefixCls, "-setting-items ").concat(hashId),
+        children: settings.map(function (setting, index) {
+          var settingItem = getSettingItem(setting);
+          return (
+            /*#__PURE__*/
+            // eslint-disable-next-line react/no-array-index-key
+            (0, _jsxRuntime.jsx)("div", {
+              className: "".concat(prefixCls, "-setting-item ").concat(hashId),
+              children: settingItem
+            }, index)
+          );
+        })
+      })
+    });
+  }, [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, centerDom, rightTitleDom]
+    });
+  }, [centerDom, hasLeft, hasRight, hashId, leftTitleDom, prefixCls, rightTitleDom]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_leftContent.ListToolbarLeftContext.Provider, {
+    value: leftContainer,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: style,
+      className: (0, _classnames.default)(prefixCls, hashId, className),
+      children: titleNode
+    })
+  });
+};
+var _default = exports.default = ListToolBar;

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

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

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

@@ -0,0 +1,24 @@
+"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.ListToolbarLeftContext = exports.ListToolbarLeft = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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 */
+var ListToolbarLeftContext = exports.ListToolbarLeftContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+
+/** 将选择摘要等辅助内容放进工具栏中区；独立使用时保留原位置。@author nokecy */
+var ListToolbarLeft = exports.ListToolbarLeft = function ListToolbarLeft(_ref) {
+  var children = _ref.children;
+  var container = (0, _react.useContext)(ListToolbarLeftContext);
+  if (container === undefined) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children
+  });
+  return container ? /*#__PURE__*/(0, _reactDom.createPortal)(children, container) : null;
+};

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.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ProAliasToken } from "../../shared/proStyle";
+export interface ProListToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare function useStyle(prefixCls: string): {
+    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    hashId: string;
+};

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

@@ -0,0 +1,219 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyle = useStyle;
+var _proStyle = require("../../shared/proStyle");
+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); }
+var genProListStyle = function genProListStyle(token) {
+  return _defineProperty({}, token.componentCls, _defineProperty(_defineProperty(_defineProperty({
+    lineHeight: "1",
+    "&-container": {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      // 放不下时中区、右区换到下一行，而不是把左区挤到 0 宽后互相叠压
+      flexWrap: "wrap",
+      minWidth: 0,
+      gap: token.marginSM,
+      paddingBlock: 8,
+      //token.padding,
+      paddingInline: 0,
+      "&-mobile": {
+        flexDirection: "column"
+      }
+    },
+    "&-title": {
+      flex: "0 0 auto",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      color: token.colorTextHeading,
+      fontWeight: "500",
+      fontSize: token.fontSizeLG
+    },
+    "&-search:not(:last-child)": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start"
+    },
+    "&-setting-item": {
+      marginBlock: 0,
+      marginInline: 4,
+      color: token.colorIconHover,
+      fontSize: token.fontSizeLG,
+      display: "flex",
+      alignItems: "center",
+      "> span": {
+        display: "block",
+        width: "100%",
+        height: "100%"
+      },
+      "&:hover": {
+        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.marginSM,
+      justifyContent: "flex-start",
+      minWidth: 0,
+      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: "0 0 auto",
+      marginInlineStart: "auto",
+      display: "flex",
+      flexWrap: "nowrap",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      gap: token.marginXS
+    },
+    // 操作区：放不下的按钮收进「更多」，不缩小、不换行、不横向滚动（§5.4）。
+    "&-actions": {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      minWidth: 0,
+      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
+    },
+    "&-setting-items": {
+      display: "flex",
+      flex: "0 0 auto",
+      gap: token.marginXS,
+      lineHeight: "32px",
+      alignItems: "center"
+    },
+    "&-filter": _defineProperty({
+      "&:not(:last-child)": {
+        marginInlineEnd: token.margin
+      },
+      display: "flex",
+      alignItems: "center"
+    }, "div$".concat(token.antCls, "-pro-table-search"), {
+      marginBlock: 0,
+      marginInline: 0,
+      paddingBlock: 0,
+      paddingInline: 0
+    }),
+    "&-inline-menu-item": {
+      display: "inline-block",
+      marginInlineEnd: token.marginLG,
+      cursor: "pointer",
+      opacity: "0.75",
+      "&-active": {
+        fontWeight: "bold",
+        opacity: "1"
+      }
+    }
+  }, "".concat(token.antCls, "-tabs-top > ").concat(token.antCls, "-tabs-nav"), _defineProperty({
+    marginBlockEnd: 0,
+    "&::before": {
+      borderBlockEnd: 0
+    }
+  }, "".concat(token.antCls, "-tabs-nav-list"), {
+    marginBlockStart: 0,
+    "${token.antCls}-tabs-tab": {
+      paddingBlockStart: 0
+    }
+  })), "&-dropdownmenu-label", {
+    fontWeight: "bold",
+    fontSize: token.fontSizeIcon,
+    textAlign: "center",
+    cursor: "pointer"
+  }), "@media (max-width: 768px)", _defineProperty({}, token.componentCls, {
+    "&-container": {
+      display: "flex",
+      flexWrap: "wrap",
+      flexDirection: "column"
+    },
+    "&-left": {
+      marginBlockEnd: "8px",
+      maxWidth: "100%"
+    },
+    "&-right": {
+      width: "100%"
+    }
+  })));
+};
+function useStyle(prefixCls) {
+  return (0, _proStyle.useStyle)("ProTableListToolBar", function (token) {
+    var proListToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    return [genProListStyle(proListToken)];
+  });
+}