react-extjs 0.0.1

package/src/components/Box.tsx

@@ -0,0 +1,289 @@
+import { useMemo, type CSSProperties, type ReactNode } from 'react';
+
+export interface BoxItem {
+  /** 子项显式宽（px）。hbox 中固定宽；缺省且给 flex 则按比例分配。 */
+  width?: number;
+  /** 子项显式高（px）。vbox 中固定高；缺省且给 flex 则按比例分配。 */
+  height?: number;
+  /** 弹性系数（hbox 横向 / vbox 纵向）。仅当对应方向缺省宽/高时参与分配。 */
+  flex?: number;
+  /** 子项外边距 {top,right,bottom,left}，缺省用 Box 的 defaultMargins。 */
+  margins?: { top?: number; right?: number; bottom?: number; left?: number };
+  /** 子项最小/最大尺寸（stretch 时钳制）。 */
+  minWidth?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  maxHeight?: number;
+  style?: CSSProperties;
+  className?: string;
+  children?: ReactNode;
+}
+
+export interface BoxProps {
+  /** 'hbox' 横向 / 'vbox' 纵向。 */
+  layout: 'hbox' | 'vbox';
+  width?: number;
+  height?: number;
+  /** start(默认) / center / end。 */
+  pack?: 'start' | 'center' | 'end';
+  /** hbox: top(默认)/middle/stretch；vbox: left(默认)/center/stretch/stretchmax。 */
+  align?: string;
+  /** 容器内边距，字符串 "t r b l"（同 CSS 简写）。默认 '0'。 */
+  padding?: string;
+  /** 子项默认外边距，字符串简写。默认 '0'。 */
+  defaultMargins?: string;
+  cls?: string;
+  style?: CSSProperties;
+  testId?: string;
+  id?: string;
+  items?: BoxItem[];
+}
+
+type Margins = { top: number; right: number; bottom: number; left: number };
+
+const parseMargins = (v: string | undefined): Margins => {
+  const p = (v || '0').trim().split(/\s+/).map(Number);
+  // CSS 简写：1→四边, 2→(上下)(左右), 3→(上)(左右)(下), 4→(上)(右)(下)(左)
+  const top = p[0] ?? 0;
+  const right = p[1] != null ? p[1] : p[0] ?? 0;
+  const bottom = p[2] != null ? p[2] : p[0] ?? 0;
+  const left = p[3] != null ? p[3] : p[1] != null ? p[1] : p[0] ?? 0;
+  return { top, right, bottom, left };
+};
+
+const constrain = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v));
+
+/**
+ * 复刻 Ext.layout.BoxLayout（HBox/VBox，Ext 3.2.1）。
+ *
+ * DOM 对齐 BoxLayout.js 真值：
+ *  - 容器布局目标加 targetCls='x-box-layout-ct'（此处挂于根 .x-container 上）；
+ *  - renderAll 创建 innerCt = <div class="x-box-inner">（position:relative）；
+ *  - 每个子组件元素追加 extraCls='x-box-item' 并绝对定位（left/top/width/height）。
+ *    React 侧子项即 <div class="x-component x-box-item" style="position:absolute;...">。
+ *
+ * 布局算法逐行移植 calculateChildBoxes（HBox/VBox 各分支）+ updateInnerCtSize：
+ *  - 仅支持数值宽高/flex（避免依赖真实 DOM 测量，保证 golden 与 react 几何一致）；
+ *  - pack(start/center/end) 控制主轴的起始偏移；align 控制交叉轴对齐/拉伸；
+ *  - flex 项按 ceil((flex/remainingFlex)*remaining) 分配剩余空间（对齐 Ext.ceil 取整）。
+ *
+ * 全部视觉来自 ext-all.css 的 .x-box-layout-ct/.x-box-inner/.x-box-item（共 3 条规则），
+ * 外加 .x-container/.x-component 无样式基础类，零新增布局 CSS、零硬编码主题色。
+ * 原生 BoxLayout 的 box-item 本身不绘制边框（仅 position:absolute 定位），边框由子项自身提供
+ * （BoxComponent 自带背景、Panel 经 ext-all/xtheme 渲染原生边框），相邻单元格不会出现 2px 叠加边框；
+ * 容器 .x-box-layout-ct/.x-box-inner 按原生设 overflow:hidden 裁剪溢出。子面板（Panel）保留原生
+ * border（颜色由 xtheme 提供、主题切换自动跟随），不强制 border=false、不写死颜色。
+ */
+export function Box(props: BoxProps) {
+  const {
+    layout,
+    width,
+    height,
+    pack = 'start',
+    align,
+    padding = '0',
+    defaultMargins = '0',
+    cls = '',
+    style,
+    testId,
+    id,
+    items = [],
+  } = props;
+
+  const pad = parseMargins(padding);
+  const defMar = parseMargins(defaultMargins);
+  const isHBox = layout === 'hbox';
+  const alignResolved = align ?? (isHBox ? 'top' : 'left');
+  const isStart = pack === 'start';
+  const isCenter = pack === 'center';
+  const isEnd = pack === 'end';
+
+  const result = useMemo(() => {
+    const tSize = { width: width ?? 0, height: height ?? 0 };
+    const padVert = pad.top + pad.bottom;
+    const padHoriz = pad.left + pad.right;
+
+    const prepared = items.map((it) => {
+      const m = it.margins ? parseMarginsObj(it.margins) : defMar;
+      return {
+        width: it.width,
+        height: it.height,
+        flex: it.flex,
+        minWidth: it.minWidth ?? 0,
+        maxWidth: it.maxWidth ?? 1000000,
+        minHeight: it.minHeight ?? 0,
+        maxHeight: it.maxHeight ?? 1000000,
+        margins: m,
+      };
+    });
+
+    if (isHBox) {
+      const availHeight = Math.max(0, tSize.height - padVert);
+      let nonFlexWidth = 0;
+      let maxHeight = 0;
+      let totalFlex = 0;
+      prepared.forEach((b) => {
+        nonFlexWidth += (b.width ?? 0) + b.margins.left + b.margins.right;
+        maxHeight = Math.max(maxHeight, (b.height ?? 0) + b.margins.top + b.margins.bottom);
+        if (b.flex && !b.width) totalFlex += b.flex;
+      });
+      const availableWidth = Math.max(0, tSize.width - nonFlexWidth - padHoriz);
+      let leftOffset = pad.left;
+      if (isCenter) leftOffset += availableWidth / 2;
+      else if (isEnd) leftOffset += availableWidth;
+      let remainingWidth = availableWidth;
+      let remainingFlex = totalFlex;
+
+      const boxes = prepared.map((b) => {
+        const m = b.margins;
+        leftOffset += m.left;
+        const calcs: { left: number; top: number; width: number; height: number } = {
+          left: leftOffset,
+          top: pad.top + m.top,
+          width: b.width ?? 0,
+          height: b.height ?? 0,
+        };
+        if (isStart && b.flex && !b.width) {
+          const fw = Math.ceil((b.flex / remainingFlex) * remainingWidth);
+          remainingWidth -= fw;
+          remainingFlex -= b.flex;
+          calcs.width = fw;
+        }
+        switch (alignResolved) {
+          case 'stretch':
+            calcs.height = constrain(availHeight - m.top - m.bottom, b.minHeight, b.maxHeight);
+            break;
+          case 'stretchmax':
+            calcs.height = constrain(maxHeight - m.top - m.bottom, b.minHeight, b.maxHeight);
+            break;
+          case 'middle': {
+            const diff = availHeight - calcs.height - m.top - m.bottom;
+            if (diff > 0) calcs.top = pad.top + m.top + m.bottom + diff / 2;
+            break;
+          }
+        }
+        leftOffset += calcs.width + m.right;
+        return calcs;
+      });
+
+      const innerH =
+        alignResolved === 'stretch'
+          ? tSize.height
+          : alignResolved === 'middle'
+            ? Math.max(tSize.height, maxHeight + padVert)
+            : maxHeight + padVert;
+      return { boxes, innerW: tSize.width, innerH };
+    } else {
+      const availWidth = Math.max(0, tSize.width - padHoriz);
+      let nonFlexHeight = 0;
+      let maxWidth = 0;
+      let totalFlex = 0;
+      prepared.forEach((b) => {
+        nonFlexHeight += (b.height ?? 0) + b.margins.top + b.margins.bottom;
+        maxWidth = Math.max(maxWidth, (b.width ?? 0) + b.margins.left + b.margins.right);
+        if (b.flex && !b.height) totalFlex += b.flex;
+      });
+      const availableHeight = Math.max(0, tSize.height - nonFlexHeight - padVert);
+      let topOffset = pad.top;
+      if (isCenter) topOffset += availableHeight / 2;
+      else if (isEnd) topOffset += availableHeight;
+      let remainingHeight = availableHeight;
+      let remainingFlex = totalFlex;
+
+      const boxes = prepared.map((b) => {
+        const m = b.margins;
+        topOffset += m.top;
+        const calcs: { left: number; top: number; width: number; height: number } = {
+          left: pad.left + m.left,
+          top: topOffset,
+          width: b.width ?? 0,
+          height: b.height ?? 0,
+        };
+        if (isStart && b.flex && !b.height) {
+          const fh = Math.ceil((b.flex / remainingFlex) * remainingHeight);
+          remainingHeight -= fh;
+          remainingFlex -= b.flex;
+          calcs.height = fh;
+        }
+        switch (alignResolved) {
+          case 'stretch':
+            calcs.width = constrain(availWidth - m.left - m.right, b.minWidth, b.maxWidth);
+            break;
+          case 'stretchmax':
+            calcs.width = constrain(maxWidth - m.left - m.right, b.minWidth, b.maxWidth);
+            break;
+          case 'center': {
+            const diff = availWidth - calcs.width - m.left - m.right;
+            if (diff > 0) calcs.left = pad.left + m.left + m.right + diff / 2;
+            break;
+          }
+        }
+        topOffset += calcs.height + m.bottom;
+        return calcs;
+      });
+
+      const innerW =
+        alignResolved === 'stretch'
+          ? tSize.width
+          : alignResolved === 'center'
+            ? Math.max(tSize.width, maxWidth + padHoriz)
+            : maxWidth + padHoriz;
+      return { boxes, innerW, innerH: tSize.height };
+    }
+  }, [items, width, height, pack, alignResolved, pad, defMar, isHBox]);
+
+  const rootStyle: CSSProperties = {
+    width,
+    height,
+    // 对齐原生 .x-box-layout-ct{overflow:hidden}：裁剪横向/纵向溢出内容（原生 box 布局容器行为）
+    overflow: 'hidden',
+    ...style,
+  };
+
+  return (
+    <div
+      id={id}
+      data-testid={testId}
+      className={['x-container', 'x-box-layout-ct', cls].filter(Boolean).join(' ')}
+      style={rootStyle}
+    >
+      <div
+        className="x-box-inner"
+        style={{ position: 'relative', width: result.innerW, height: result.innerH, overflow: 'hidden' }}
+      >
+        {items.map((it, i) => {
+          const b = result.boxes[i];
+          // 原生 BoxLayout：box-item 本身不绘制边框（仅 position:absolute 定位），边框由子项自身提供
+          // （Panel 经 ext-all/xtheme 渲染原生边框、颜色随主题切换自动跟随，此处不写死颜色）。
+          // 溢出裁剪交给外层 .x-box-inner（原生 .x-box-inner{overflow:hidden}），此处不重复。
+          const child = it.children;
+          return (
+            <div
+              key={i}
+              className={['x-component', 'x-box-item', it.className].filter(Boolean).join(' ')}
+              style={{
+                position: 'absolute',
+                left: b.left,
+                top: b.top,
+                width: b.width,
+                height: b.height,
+                ...it.style,
+              }}
+            >
+              {child}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function parseMarginsObj(m: { top?: number; right?: number; bottom?: number; left?: number }): Margins {
+  return {
+    top: m.top ?? 0,
+    right: m.right ?? 0,
+    bottom: m.bottom ?? 0,
+    left: m.left ?? 0,
+  };
+}

package/src/components/Button.tsx

@@ -0,0 +1,300 @@
+import React, { useState, useCallback, useEffect, useRef, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Menu, type MenuItem } from './Menu';
+
+export type ButtonScale = 'small' | 'medium' | 'large';
+export type ButtonIconAlign = 'top' | 'right' | 'bottom' | 'left';
+export type ButtonArrowAlign = 'right' | 'bottom';
+export type ButtonType = 'submit' | 'reset' | 'button';
+
+export interface ButtonProps {
+  /** 按钮文字（允许 HTML，原版用 innerHTML） */
+  text?: string;
+  /** 图标图片路径（inline background-image） */
+  icon?: string;
+  /** 提供背景图的 CSS class（与 icon 二选一） */
+  iconCls?: string;
+  /** 尺寸：small=16px / medium=24px / large=32px */
+  scale?: ButtonScale;
+  /** 图标相对文字的位置 */
+  iconAlign?: ButtonIconAlign;
+  /** DOM button 类型 */
+  type?: ButtonType;
+  /** 附加在 <table> 上的自定义 class */
+  cls?: string;
+  disabled?: boolean;
+  /** 初始按下态（仅 enableToggle 时有效）。受控模式下表示当前是否按下。 */
+  pressed?: boolean;
+  enableToggle?: boolean;
+  /** 切换回调（enableToggle 时）：每次切换后回调「新按下态」。
+   *  提供此回调即进入受控模式——pressed 完全由调用方 prop 驱动（单一数据源），
+   *  按钮自身不再自管 isPressed，避免「内部翻转 + 父级 handler 翻转」双重翻转导致的错位。 */
+  onToggle?: (pressed: boolean) => void;
+  /** 下拉菜单：传 MenuItem[] 渲染菜单并启用开关；传 true 仅显示箭头 */
+  menu?: MenuItem[] | boolean;
+  arrowAlign?: ButtonArrowAlign;
+  minWidth?: number;
+  /** 显式宽度（如 MessageBox 按钮固定 75px） */
+  width?: number;
+  /** 点击回调（替代原版 handler），仅当无 menu 时触发 */
+  handler?: () => void;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  /** 菜单项点击回调 */
+  onMenuItemClick?: (item: MenuItem, index: number) => void;
+  /** 拆分按钮模式（Ext.SplitButton）：em 加 x-btn-split，箭头区开菜单、主体走 handler */
+  split?: boolean;
+  /** 拆分按钮箭头点击回调（替代菜单展开） */
+  arrowHandler?: () => void;
+  /** 拆分按钮箭头提示文本（等价于 Ext.SplitButton.arrowTooltip，落到 em 的 title 属性） */
+  arrowTooltip?: string;
+  /** 透传到最外层 span 的内联样式（原生 DOM 属性，不进组件 CSS） */
+  style?: React.CSSProperties;
+}
+
+/**
+ * 保真映射（来源 src/widgets/Button.js）：
+ * - DOM 模板：Ext.Button.buttonTemplate（第 307-312 行）
+ * - 模板参数：getTemplateArgs（第 282-284 行）
+ * - 状态类：setButtonClass / onMouseOver / onMouseDown / toggle（x-btn-over/focus/click/pressed/disabled/menu-active）
+ * React 仅重写行为与状态管理，DOM 结构与 class 名与 Ext JS 3.2.1 完全一致。
+ *
+ * 交互（行为契约，对应 Ext.Button + Ext.menu.Menu）：
+ * - 有 menu 时点击按钮 -> 切换菜单开合（不触发 handler，等同 Ext 把 click 路由到菜单）
+ * - 菜单项点击 -> 执行 item.handler + onMenuItemClick，并关闭菜单
+ * - 外部点击 / Esc -> 关闭菜单（等同 Ext 的 document 级监听）
+ */
+export function Button({
+  text = '',
+  icon,
+  iconCls,
+  scale = 'small',
+  iconAlign = 'left',
+  type = 'button',
+  cls = '',
+  disabled = false,
+  pressed = false,
+  enableToggle = false,
+  menu = false,
+  arrowAlign = 'right',
+  minWidth,
+  width,
+  handler,
+  onClick,
+  onToggle,
+  onMenuItemClick,
+  split = false,
+  arrowHandler,
+  arrowTooltip,
+  style,
+}: ButtonProps) {
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [clicked, setClicked] = useState(false);
+  // enableToggle 按钮自管 pressed 态（对齐 Ext：按钮内部维护 pressed，父级通过 onToggle 同步读取，
+  // 显示态只取自管 internalPressed，不回读 pressed prop，避免「内部翻转 + 父级 handler 翻转 +
+  // prop 回传」形成的反馈回环与错位）。
+  const [internalPressed, setInternalPressed] = useState(pressed);
+  const isPressed = enableToggle ? internalPressed : Boolean(pressed);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [arrowHovered, setArrowHovered] = useState(false);
+  const wrapRef = useRef<HTMLSpanElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const menuElRef = useRef<HTMLDivElement>(null);
+  // 菜单浮层定位（对齐 Ext：菜单渲染到 document 级浮层，避免被 overflow:hidden 容器裁切）
+  const [menuPos, setMenuPos] = useState<{ top: number; left: number } | null>(null);
+
+  const menuItems = Array.isArray(menu) ? menu : null;
+
+  // 外部点击 / Esc 关闭菜单（等同 Ext 的 document 级监听）。
+  // 菜单浮层已 portal 到 body，需同时排除浮层自身，否则点菜单会被误判为外部点击而先关闭。
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onDocDown = (e: MouseEvent) => {
+      const t = e.target as Node;
+      if (wrapRef.current && !wrapRef.current.contains(t)) {
+        if (menuElRef.current && menuElRef.current.contains(t)) return;
+        setMenuOpen(false);
+      }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setMenuOpen(false);
+    };
+    document.addEventListener('mousedown', onDocDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDocDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [menuOpen]);
+
+  // 按下态（x-btn-click）清除：mouseup 可能落在按钮外（按下后移到按钮外再松开），
+  // 绑在 button 自身的 onMouseUp 不会触发，导致按钮卡在按下态。改为在按下期间挂
+  // window 级 mouseup/pointerup，任何位置松开都清除，等价原生 button 的 :active 行为。
+  useEffect(() => {
+    if (!clicked) return;
+    const clear = () => setClicked(false);
+    window.addEventListener('mouseup', clear);
+    window.addEventListener('pointerup', clear);
+    return () => {
+      window.removeEventListener('mouseup', clear);
+      window.removeEventListener('pointerup', clear);
+    };
+  }, [clicked]);
+
+  // 打开时按按钮位置计算浮层坐标（视口定位，fixed），避开 overflow 容器裁切
+  useLayoutEffect(() => {
+    if (menuOpen && menuItems && buttonRef.current) {
+      const r = buttonRef.current.getBoundingClientRect();
+      setMenuPos({ top: r.bottom, left: r.left });
+    } else {
+      setMenuPos(null);
+    }
+  }, [menuOpen, menuItems]);
+
+  // 与 setButtonClass 完全一致：有图标且有文字 -> x-btn-text-icon；仅图标 -> x-btn-icon；无 -> x-btn-noicon
+  const iconStateClass = iconCls || icon
+    ? (text ? 'x-btn-text-icon' : 'x-btn-icon')
+    : 'x-btn-noicon';
+
+  // 与 Ext.Button 一致：em 只承载箭头类（getMenuClass，307-312 行模板参数 {2}）；
+  // iconCls 经 setIconClass 落在 <button>（带 x-btn-text），见 Button.js 567-574 行。
+  const emClass = split
+    ? arrowAlign === 'bottom'
+      ? 'x-btn-split-bottom'
+      : 'x-btn-split'
+    : menu
+      ? arrowAlign === 'bottom'
+        ? 'x-btn-arrow-bottom'
+        : 'x-btn-arrow'
+      : '';
+
+  const tableClass = [
+    'x-btn',
+    cls,
+    iconStateClass,
+    disabled ? 'x-item-disabled' : '',
+    isPressed ? 'x-btn-pressed' : '',
+    hovered ? 'x-btn-over' : '',
+    focused ? 'x-btn-focus' : '',
+    clicked ? 'x-btn-click' : '',
+    // 拆分按钮箭头悬停（em 区）→ 箭头变橙（s-arrow-o.gif）
+    split && arrowHovered ? 'x-btn-menu-active' : '',
+    // 普通菜单按钮展开中 → menu-active
+    !split && menuOpen && menuItems ? 'x-btn-menu-active' : '',
+  ].filter(Boolean).join(' ');
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (disabled) return;
+      e.preventDefault();
+      // 拆分按钮：主体点击只走 handler / toggle，不展开菜单（等同 Ext.SplitButton.onClick 非箭头分支）
+      if (split) {
+        if (enableToggle) {
+          const next = !internalPressed;
+          setInternalPressed(next);
+          onToggle?.(next);
+        }
+        onClick?.(e);
+        handler?.();
+        return;
+      }
+      // 普通菜单按钮：点击只切换菜单，不触发 handler（等同 Ext）
+      if (menuItems) {
+        setMenuOpen((o) => !o);
+        onClick?.(e);
+        return;
+      }
+      if (enableToggle) {
+        const next = !internalPressed;
+        setInternalPressed(next);
+        onToggle?.(next);
+        onClick?.(e);
+        handler?.();
+        return;
+      }
+      onClick?.(e);
+      handler?.();
+    },
+    [disabled, split, menuItems, enableToggle, onClick, handler, internalPressed, onToggle],
+  );
+
+  // 拆分按钮箭头区点击（Ext.isClickOnArrow：target 为 em 即箭头 padding 区）
+  const handleEmClick = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      if (disabled) return;
+      if ((e.target as HTMLElement).tagName !== 'EM') return; // 点击主体 button 交给 handleClick
+      e.preventDefault();
+      if (menuItems) setMenuOpen(true); // 箭头点击展开菜单（已开则保持，等同 Ext）
+      onClick?.(e as unknown as React.MouseEvent<HTMLButtonElement>);
+      arrowHandler?.();
+    },
+    [disabled, menuItems, onClick, arrowHandler],
+  );
+
+  return (
+    <span ref={wrapRef} style={{ position: 'relative', display: 'block', ...style }}>
+      <table cellSpacing={0} className={tableClass} style={{ ...(minWidth ? { minWidth } : {}), ...(width ? { width: `${width}px` } : {}) }}>
+        <tbody className={`x-btn-${scale} x-btn-icon-${scale}-${iconAlign}`}>
+          <tr>
+            <td className="x-btn-tl"><i>&#160;</i></td>
+            <td className="x-btn-tc"></td>
+            <td className="x-btn-tr"><i>&#160;</i></td>
+          </tr>
+          <tr>
+            <td className="x-btn-ml"><i>&#160;</i></td>
+            <td className="x-btn-mc">
+              <em
+                className={emClass}
+                unselectable="on"
+                title={split ? arrowTooltip : undefined}
+                onClick={split ? handleEmClick : undefined}
+                onMouseEnter={() => !disabled && setArrowHovered(true)}
+                onMouseLeave={() => !disabled && setArrowHovered(false)}
+              >
+                <button
+                  ref={buttonRef}
+                  type={type}
+                  className={['x-btn-text', iconCls].filter(Boolean).join(' ')}
+                  style={{
+                    ...(icon ? { backgroundImage: `url(${icon})` } : {}),
+                    ...(icon || iconCls ? {} : { padding: 0 }),
+                  }}
+                  onClick={handleClick}
+                  onMouseEnter={() => !disabled && setHovered(true)}
+                  onMouseLeave={() => !disabled && setHovered(false)}
+                  onFocus={() => !disabled && setFocused(true)}
+                  onBlur={() => !disabled && setFocused(false)}
+                  onMouseDown={() => !disabled && setClicked(true)}
+                  onMouseUp={() => !disabled && setClicked(false)}
+                >{text || ' '}</button>
+              </em>
+            </td>
+            <td className="x-btn-mr"><i>&#160;</i></td>
+          </tr>
+          <tr>
+            <td className="x-btn-bl"><i>&#160;</i></td>
+            <td className="x-btn-bc"></td>
+            <td className="x-btn-br"><i>&#160;</i></td>
+          </tr>
+        </tbody>
+      </table>
+      {menuOpen && menuItems && menuPos && createPortal(
+        <div
+          ref={menuElRef}
+          style={{ position: 'fixed', top: menuPos.top, left: menuPos.left, zIndex: 15000 }}
+        >
+          <Menu
+            items={menuItems}
+            onItemClick={(item, index) => {
+              onMenuItemClick?.(item, index);
+              setMenuOpen(false);
+            }}
+          />
+        </div>,
+        document.body,
+      )}
+    </span>
+  );
+}
+
+export default Button;