@oceanbase/ui 1.0.0-alpha.9 → 1.0.0

package/lib/Action/Group.js

@@ -1,47 +1,29 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Action/Group.tsx
-var Group_exports = {};
-__export(Group_exports, {
-  default: () => Group_default
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(Group_exports);
-var import_react = __toESM(require("react"));
-var import_design = require("@oceanbase/design");
-var import_icons = require("@oceanbase/icons");
-var import_lodash = require("lodash");
-var import_style = __toESM(require("./style"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var getOrder = ({ type, fixed }) => {
-  const ORDER_SET = { primary: 3, fixed: 2, default: 0 };
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _design = require("@oceanbase/design");
+var _icons = require("@oceanbase/icons");
+var _lodash = require("lodash");
+var _style = _interopRequireDefault(require("./style"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const getOrder = ({
+  type,
+  fixed
+}) => {
+  const ORDER_SET = {
+    primary: 3,
+    fixed: 2,
+    default: 0
+  };
   let order = ORDER_SET.default;
-  if (type === "primary") {
+  if (type === 'primary') {
     order += ORDER_SET.primary;
   }
   if (fixed) {
@@ -49,65 +31,189 @@ var getOrder = ({ type, fixed }) => {
   }
   return order;
 };
-var findActionComponent = (element, depth = 0) => {
-  var _a, _b, _c;
-  if (!import_react.default.isValidElement(element)) {
+
+/**
+ * 判断是否是 Action 组件（Action.Button 或 Action.Link）
+ */
+const getActionDisplayName = element => element.type?.__DISPLAY_NAME;
+const isActionComponent = element => {
+  const name = getActionDisplayName(element);
+  return name === 'button' || name === 'link';
+};
+
+/** 不向内部查找 Action：与操作列同级的 Modal/Drawer 等应整体忽略 */
+const isOpaqueToActionSearch = element => {
+  const t = element.type;
+  return t === _design.Modal || t === _design.Drawer;
+};
+const REACT_HOOKS_IN_SOURCE = /\buse(?:State|Effect|Reducer|Ref|Context|Memo|Callback|LayoutEffect|ImperativeHandle|DeferredValue|SyncExternalStore|Insertion|Id)\b/;
+
+/**
+ * 粗略判断函数组件是否可能使用 Hooks。含 Hooks 的不能在 Group 渲染阶段同步调用，需按「函数子树」整体参与折叠。
+ */
+const isLikelyUsingReactHooks = fn => REACT_HOOKS_IN_SOURCE.test(Function.prototype.toString.call(fn));
+const isClassComponent = type => {
+  if (typeof type !== 'function') {
+    return false;
+  }
+  const proto = type.prototype;
+  return !!(proto && (proto.isReactComponent || proto.render));
+};
+
+/**
+ * 递归查找 Action 组件（可能被 Popconfirm/Tooltip 等组件包裹）
+ * 返回实际的 Action 组件和是否被包裹
+ */
+const findActionComponent = (element, depth = 0) => {
+  if (! /*#__PURE__*/_react.default.isValidElement(element)) {
     return null;
   }
-  if (((_a = element.type) == null ? void 0 : _a.__DISPLAY_NAME) === "button" || ((_b = element.type) == null ? void 0 : _b.__DISPLAY_NAME) === "link") {
-    return { action: element, wrapper: null };
+  if (isOpaqueToActionSearch(element)) {
+    return null;
+  }
+  if (isActionComponent(element)) {
+    return {
+      action: element,
+      hasWrapper: false
+    };
   }
+
+  // 如果深度太深，避免无限递归
   if (depth > 10) {
     return null;
   }
-  const elementChildren = (_c = element.props) == null ? void 0 : _c.children;
-  if (elementChildren) {
-    const child = import_react.default.Children.only(elementChildren);
-    if (import_react.default.isValidElement(child)) {
-      const result = findActionComponent(child, depth + 1);
-      if (result) {
-        return { action: result.action, wrapper: element };
-      }
+  const elementChildren = element.props?.children;
+  if (elementChildren == null) {
+    return null;
+  }
+  const childArray = _react.default.Children.toArray(elementChildren).filter(_react.default.isValidElement);
+  for (const child of childArray) {
+    const result = findActionComponent(child, depth + 1);
+    if (result) {
+      return {
+        action: result.action,
+        hasWrapper: true
+      };
     }
   }
   return null;
 };
-var renderMenuItemContent = (action, actionProps, enableLoading) => {
-  const { loading, children, tooltip } = actionProps;
-  const result = findActionComponent(action);
-  if (!result) {
-    const content2 = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      loading && enableLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LoadingOutlined, {}),
-      " ",
-      children || action
-    ] });
-    return tooltip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { title: tooltip, children: content2 }) : content2;
+/**
+ * 扁平化 Fragment，过滤 null / false。
+ * - Action（及可解析的外包）→ 操作位
+ * - 无 Hooks 的函数组件 → 同步求值后递归展开（如 () => <Action.Button />）
+ * - 含 Hooks 的函数组件 → 整体占 1 位
+ * - Modal / Drawer → 透传挂载，不占折叠位
+ */
+const normalizeActionGroupPieces = node => {
+  const out = [];
+  _react.default.Children.forEach(node, child => {
+    if (child == null || typeof child === 'boolean') {
+      return;
+    }
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return;
+    }
+    if (child.type === _react.default.Fragment) {
+      normalizeActionGroupPieces(child.props.children).forEach(p => out.push(p));
+      return;
+    }
+    if (findActionComponent(child)) {
+      out.push({
+        kind: 'action',
+        el: child
+      });
+      return;
+    }
+    if (isOpaqueToActionSearch(child)) {
+      out.push({
+        kind: 'passthrough',
+        el: child
+      });
+      return;
+    }
+    const t = child.type;
+    if (typeof t === 'function' && !isClassComponent(t)) {
+      if (isLikelyUsingReactHooks(t)) {
+        out.push({
+          kind: 'function-child',
+          el: child
+        });
+        return;
+      }
+      try {
+        const rendered = t(child.props);
+        if (rendered == null) {
+          return;
+        }
+        normalizeActionGroupPieces(rendered).forEach(p => out.push(p));
+      } catch {
+        out.push({
+          kind: 'function-child',
+          el: child
+        });
+      }
+      return;
+    }
+    out.push({
+      kind: 'function-child',
+      el: child
+    });
+  });
+  return out;
+};
+
+/**
+ * 递归克隆元素树，将 newProps 应用到最内层的 Action 组件
+ */
+const cloneWithActionProps = (element, newProps) => {
+  if (isActionComponent(element)) {
+    return /*#__PURE__*/_react.default.cloneElement(element, {
+      ...newProps,
+      ...element.props
+    });
+  }
+  const elementChildren = element.props?.children;
+  if ( /*#__PURE__*/_react.default.isValidElement(elementChildren)) {
+    return /*#__PURE__*/_react.default.cloneElement(element, {
+      ...element.props,
+      key: newProps.key,
+      children: cloneWithActionProps(elementChildren, newProps)
+    });
   }
-  const { action: actualAction, wrapper } = result;
-  const newAction = import_react.default.cloneElement(actualAction, {
-    ...actualAction.props,
-    ...actionProps,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      loading && enableLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LoadingOutlined, {}),
-      " ",
-      children || actualAction.props.children
-    ] })
+  return element;
+};
+
+/**
+ * 渲染菜单项内容，保持嵌套的 Popconfirm/Tooltip 结构
+ */
+const renderMenuItemContent = (action, actionProps, enableLoading) => {
+  const {
+    loading,
+    children,
+    tooltip
+  } = actionProps;
+  const result = findActionComponent(action);
+  const actualAction = result?.action || action;
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [loading && enableLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LoadingOutlined, {}), " ", children || actualAction.props.children]
   });
-  if (wrapper) {
-    const wrapperProps = wrapper.props;
-    return import_react.default.cloneElement(wrapper, {
-      ...wrapperProps,
-      children: newAction
+
+  // 如果有 wrapper，需要重新构建包裹结构
+  if (result?.hasWrapper) {
+    return cloneWithActionProps(action, {
+      ...actionProps,
+      children: content
     });
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    loading && enableLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LoadingOutlined, {}),
-    " ",
-    children || actualAction.props.children
-  ] });
-  return tooltip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { title: tooltip, children: content }) : content;
+
+  // 没有包裹时，如果有 tooltip 则用 Tooltip 包裹
+  return tooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Tooltip, {
+    title: tooltip,
+    children: content
+  }) : content;
 };
-var Group_default = ({
+var _default = ({
   prefixCls: customizePrefixCls,
   size = 3,
   children,
@@ -119,110 +225,161 @@ var Group_default = ({
   moreType,
   buttonSize
 }) => {
-  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls("action", customizePrefixCls);
-  const { wrapSSR } = (0, import_style.default)(prefixCls);
-  const visibleActions = Array.isArray(children) ? children.filter((c) => {
-    if ((0, import_lodash.isBoolean)(c.props.visible) && shouldVisible)
-      return c.props.visible && shouldVisible(c.key);
-    if ((0, import_lodash.isBoolean)(c.props.visible))
-      return c.props.visible;
-    else if (shouldVisible)
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('action', customizePrefixCls);
+  const {
+    wrapSSR
+  } = (0, _style.default)(prefixCls);
+  const childPieces = normalizeActionGroupPieces(children);
+  const passthroughChildren = childPieces.filter(p => p.kind === 'passthrough').map(p => p.el);
+  const slotPieces = childPieces.filter(p => p.kind === 'action' || p.kind === 'function-child');
+  const visibleSlots = slotPieces.filter(p => {
+    if (p.kind === 'function-child') {
+      return true;
+    }
+    const c = p.el;
+    const inner = findActionComponent(c)?.action;
+    if (!inner) {
+      return false;
+    }
+    const bp = inner.props;
+    if ((0, _lodash.isBoolean)(bp.visible) && shouldVisible) {
+      return bp.visible && shouldVisible(c.key);
+    }
+    if ((0, _lodash.isBoolean)(bp.visible)) {
+      return bp.visible;
+    }
+    if (shouldVisible) {
       return shouldVisible(c.key);
+    }
     return true;
-  }) : [children];
-  const visibleActionsSort = visibleActions.slice(0);
-  visibleActionsSort.sort((a, b) => {
-    const orderA = getOrder(a.props);
-    const orderB = getOrder(b.props);
-    return orderB - orderA;
   });
-  const fixedSize = visibleActionsSort.filter(
-    (action) => action.props.type === "primary" || action.props.fixed
-  ).length;
-  const realSize = (0, import_lodash.max)([fixedSize, size]);
-  const mainActions = visibleActionsSort.slice(0, realSize);
-  const ellipsisActions = visibleActionsSort.slice(realSize);
-  let ellipsisType = "link";
-  if (visibleActionsSort.some((action) => action.type.__DISPLAY_NAME === "button")) {
-    ellipsisType = "button";
+  const visibleSlotsWithOrder = visibleSlots.map((p, sourceIdx) => ({
+    piece: p,
+    sourceIdx,
+    sortOrder: p.kind === 'action' ? getOrder((findActionComponent(p.el)?.action ?? p.el).props) : getOrder({
+      type: undefined,
+      fixed: false
+    })
+  }));
+  visibleSlotsWithOrder.sort((a, b) => {
+    const d = b.sortOrder - a.sortOrder;
+    if (d !== 0) {
+      return d;
+    }
+    return a.sourceIdx - b.sourceIdx;
+  });
+  const visibleOrderedSlots = visibleSlotsWithOrder.map(x => x.piece);
+  const fixedSize = visibleOrderedSlots.filter(p => {
+    if (p.kind !== 'action') {
+      return false;
+    }
+    const props = (findActionComponent(p.el)?.action ?? p.el).props;
+    return props.type === 'primary' || props.fixed;
+  }).length;
+  const realSize = (0, _lodash.max)([fixedSize, size]);
+  const mainSlots = visibleOrderedSlots.slice(0, realSize);
+  const ellipsisSlots = visibleOrderedSlots.slice(realSize);
+  let ellipsisType = 'link';
+  if (visibleOrderedSlots.some(p => p.kind === 'action' && getActionDisplayName(findActionComponent(p.el)?.action ?? p.el) === 'button')) {
+    ellipsisType = 'button';
   }
-  if (visibleActionsSort.some((action) => action.type.__DISPLAY_NAME === "link")) {
-    ellipsisType = "link";
+  if (visibleOrderedSlots.some(p => p.kind === 'action' && getActionDisplayName(findActionComponent(p.el)?.action ?? p.el) === 'link')) {
+    ellipsisType = 'link';
   }
   ellipsisType = moreType ?? ellipsisType;
-  const getDefaultDisabled = (key) => (shouldDisabled == null ? void 0 : shouldDisabled(key)) ?? false;
+  const getDefaultDisabled = key => shouldDisabled?.(key) ?? false;
   let moreDom;
-  if (ellipsisType === "button") {
-    moreDom = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_design.Button,
-      {
-        size: buttonSize,
-        icon: moreText ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.EllipsisOutlined, { style: { cursor: "pointer" } }),
-        children: moreText
-      }
-    );
+  if (ellipsisType === 'button') {
+    moreDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Button, {
+      size: buttonSize,
+      icon: moreText ? undefined : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.EllipsisOutlined, {
+        style: {
+          cursor: 'pointer'
+        }
+      }),
+      children: moreText
+    });
   } else {
-    moreDom = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Typography.Link, { children: moreText ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.EllipsisOutlined, { style: { cursor: "pointer" } }) });
+    moreDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Typography.Link, {
+      children: moreText ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.EllipsisOutlined, {
+        style: {
+          cursor: 'pointer'
+        }
+      })
+    });
   }
-  return wrapSSR(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { size: ellipsisType === "button" ? 8 : 16, children: [
-      mainActions.map((action) => {
-        return import_react.default.cloneElement(action, {
-          // size should be covered by action props
-          size: buttonSize,
-          ...action.props,
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Space, {
+      size: ellipsisType === 'button' ? 8 : 16,
+      children: [mainSlots.map((slot, slotIndex) => {
+        if (slot.kind === 'function-child') {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+            children: slot.el
+          }, slot.el.key ?? `fn-main-${slotIndex}`);
+        }
+        const action = slot.el;
+        const actionResult = findActionComponent(action);
+        const actualAction = actionResult?.action || action;
+        const actualActionProps = actualAction.props;
+        const newProps = {
           key: action.key,
-          enableLoading,
-          disabled: (0, import_lodash.isBoolean)(action.props.disabled) ? action.props.disabled : getDefaultDisabled(action.key)
-        });
-      }),
-      ellipsisActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_design.Dropdown,
-        {
-          placement: dropDownPlacement,
-          overlay: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu, { className: `${prefixCls}-more-menu`, children: ellipsisActions.map((action, index) => {
+          size: buttonSize,
+          enableLoading: enableLoading,
+          disabled: (0, _lodash.isBoolean)(actualActionProps.disabled) ? actualActionProps.disabled : getDefaultDisabled(action.key)
+        };
+        return cloneWithActionProps(action, newProps);
+      }), ellipsisSlots.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Dropdown, {
+        placement: dropDownPlacement,
+        overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Menu, {
+          className: `${prefixCls}-more-menu`,
+          children: ellipsisSlots.map((slot, index) => {
+            if (slot.kind === 'function-child') {
+              const fcKey = slot.el.key ?? `fn-${index}`;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Menu.Item, {
+                className: `${prefixCls}-more-menu-fn`,
+                style: {
+                  height: 'auto',
+                  lineHeight: 'normal',
+                  paddingBlock: 4
+                },
+                children: /*#__PURE__*/_react.default.cloneElement(slot.el, {
+                  key: fcKey
+                })
+              }, fcKey);
+            }
+            const action = slot.el;
             const actionKey = action.key;
             const actionResult = findActionComponent(action);
-            const actualAction = (actionResult == null ? void 0 : actionResult.action) || action;
+            const actualAction = actionResult?.action || action;
             const actionProps = actualAction.props;
-            const actionDisabled = actionProps.loading || ((0, import_lodash.isBoolean)(actionProps.disabled) ? actionProps.disabled : getDefaultDisabled(action.key));
-            const menuItemProps = (0, import_lodash.omit)(actionProps, [
-              "disabled",
-              "loading",
-              "tooltip",
-              "visible",
-              "fixed",
-              "enableLoading",
-              "onClick",
-              "children",
-              "danger"
-            ]);
-            const handleMenuItemClick = (info) => {
-              var _a;
-              if (actionResult == null ? void 0 : actionResult.wrapper) {
+            const actionDisabled = actionProps.loading || ((0, _lodash.isBoolean)(actionProps.disabled) ? actionProps.disabled : getDefaultDisabled(action.key));
+            const menuItemProps = (0, _lodash.omit)(actionProps, ['disabled', 'loading', 'tooltip', 'visible', 'fixed', 'enableLoading', 'onClick', 'children', 'danger']);
+            const handleMenuItemClick = info => {
+              if (actionResult?.hasWrapper) {
                 return;
               }
-              (_a = actionProps.onClick) == null ? void 0 : _a.call(actionProps, info.domEvent);
+              actionProps.onClick?.(info.domEvent);
             };
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_design.Menu.Item,
-                {
-                  onClick: handleMenuItemClick,
-                  disabled: actionDisabled,
-                  danger: !!actionProps.danger,
-                  ...menuItemProps,
-                  children: renderMenuItemContent(action, actionProps, enableLoading)
-                },
-                actionKey ?? index.toString()
-              ),
-              actionProps.divider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Divider, {})
-            ] });
-          }) }),
-          children: moreDom
-        }
-      )
-    ] })
-  );
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Menu.Item, {
+                // @ts-ignore
+                onClick: handleMenuItemClick,
+                disabled: actionDisabled,
+                danger: !!actionProps.danger,
+                ...menuItemProps,
+                children: renderMenuItemContent(action, actionProps, enableLoading)
+              }, actionKey ?? index.toString()), actionProps.divider && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Menu.Divider, {})]
+            });
+          })
+        }),
+        children: moreDom
+      })]
+    }), passthroughChildren.map((el, index) => /*#__PURE__*/_react.default.cloneElement(el, {
+      key: el.key ?? `action-group-extra-${index}`
+    }))]
+  }));
 };
+exports.default = _default;