@beppla/tapas-ui 1.0.70 → 1.0.72

package/module/DataCell/DataCell.js

@@ -1,204 +1,121 @@
-"use strict";
-
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  var desc = Object.getOwnPropertyDescriptor(m, k);
-  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-    desc = {
-      enumerable: true,
-      get: function () {
-        return m[k];
-      }
-    };
-  }
-  Object.defineProperty(o, k2, desc);
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
-  Object.defineProperty(o, "default", {
-    enumerable: true,
-    value: v
-  });
-} : function (o, v) {
-  o["default"] = v;
-});
-var __importStar = this && this.__importStar || function () {
-  var ownKeys = function (o) {
-    ownKeys = Object.getOwnPropertyNames || function (o) {
-      var ar = [];
-      for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-      return ar;
-    };
-    return ownKeys(o);
-  };
-  return function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-    __setModuleDefault(result, mod);
-    return result;
-  };
-}();
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-var __importDefault = this && this.__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.setDropdownStateChangeListener = exports.TapasDataCell = exports.DataCell = void 0;
-var react_1 = __importStar(require("react"));
-var react_native_1 = require("react-native");
-var themed_1 = require("@rneui/themed");
-var TapasIcon_1 = __importDefault(require("../Icons/TapasIcon"));
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useMemo, useState, useEffect } from "react";
+import { View, Text, Pressable } from "react-native";
+import { withTheme, makeStyles } from "@rneui/themed";
+import TapasIcon from "../Icons/TapasIcon";
 // import { TapasDropdown } from "../Dropdown/Dropdown";
+
 // 全局下拉菜单状态管理
-var globalDropdownState = {
+const globalDropdownState = {
   activeColumn: null,
   activeRow: null,
-  closeAll: function () {},
+  closeAll: () => {},
   onDropdownStateChange: undefined
 };
+
 // 注册和注销下拉菜单的函数
-var registerDropdown = function (columnIndex, rowIndex, closeCallback) {
-  var _a;
+const registerDropdown = (columnIndex, rowIndex, closeCallback) => {
   globalDropdownState.activeColumn = columnIndex;
   globalDropdownState.activeRow = rowIndex;
   globalDropdownState.closeAll = closeCallback;
   // 通知状态变化
-  (_a = globalDropdownState.onDropdownStateChange) === null || _a === void 0 ? void 0 : _a.call(globalDropdownState, columnIndex, rowIndex);
+  globalDropdownState.onDropdownStateChange?.(columnIndex, rowIndex);
 };
-var unregisterDropdown = function () {
-  var _a;
+const unregisterDropdown = () => {
   globalDropdownState.activeColumn = null;
   globalDropdownState.activeRow = null;
-  globalDropdownState.closeAll = function () {};
+  globalDropdownState.closeAll = () => {};
   // 通知状态变化
-  (_a = globalDropdownState.onDropdownStateChange) === null || _a === void 0 ? void 0 : _a.call(globalDropdownState, null, null);
+  globalDropdownState.onDropdownStateChange?.(null, null);
 };
-var closeAllDropdowns = function () {
+const closeAllDropdowns = () => {
   if (globalDropdownState.closeAll) {
     globalDropdownState.closeAll();
   }
 };
+
 // 设置下拉菜单状态变化监听器
-var setDropdownStateChangeListener = function (callback) {
+const setDropdownStateChangeListener = callback => {
   globalDropdownState.onDropdownStateChange = callback;
 };
-exports.setDropdownStateChangeListener = setDropdownStateChangeListener;
-var TapasDataCell = function (_a) {
-  var value = _a.value,
-    _b = _a.dataType,
-    dataType = _b === void 0 ? "text" : _b,
-    _c = _a.alignment,
-    alignment = _c === void 0 ? "left" : _c,
-    columnIndex = _a.columnIndex,
-    rowIndex = _a.rowIndex,
-    fieldName = _a.fieldName,
-    _d = _a.clickable,
-    clickable = _d === void 0 ? false : _d,
-    _e = _a.ellipsizeMode,
-    ellipsizeMode = _e === void 0 ? "tail" : _e,
-    _f = _a.numberOfLines,
-    numberOfLines = _f === void 0 ? 1 : _f,
-    textStyle = _a.textStyle,
-    _g = _a.padding,
-    padding = _g === void 0 ? {
-      horizontal: 16,
-      vertical: 8
-    } : _g,
-    _h = _a.statusConfig,
-    statusConfig = _h === void 0 ? {} : _h,
-    _j = _a.actions,
-    actions = _j === void 0 ? [] : _j,
-    _k = _a.showActions,
-    showActions = _k === void 0 ? false : _k,
-    _l = _a.actionIcon,
-    actionIcon = _l === void 0 ? "more_vert" : _l,
-    formatter = _a.formatter,
-    _m = _a.currencySymbol,
-    currencySymbol = _m === void 0 ? "$" : _m,
-    _o = _a.currencyPrecision,
-    currencyPrecision = _o === void 0 ? 2 : _o,
-    _p = _a.dateFormat,
-    dateFormat = _p === void 0 ? "YYYY-MM-DD" : _p,
-    _q = _a.booleanTrueText,
-    booleanTrueText = _q === void 0 ? "Yes" : _q,
-    _r = _a.booleanFalseText,
-    booleanFalseText = _r === void 0 ? "No" : _r,
-    _s = _a.emptyText,
-    emptyText = _s === void 0 ? "-" : _s,
-    onCellPress = _a.onCellPress,
-    onActionPress = _a.onActionPress,
-    attachMoreAction = _a.attachMoreAction,
-    onLongPress = _a.onLongPress,
-    _t = _a.disabled,
-    disabled = _t === void 0 ? false : _t,
-    _u = _a.minHeight,
-    minHeight = _u === void 0 ? 40 : _u,
-    _v = _a.isBlank,
-    isBlank = _v === void 0 ? false : _v,
-    onDropdownStateChange = _a.onDropdownStateChange,
-    gridInfo = _a.gridInfo,
-    style = _a.style,
-    otherProps = __rest(_a, ["value", "dataType", "alignment", "columnIndex", "rowIndex", "fieldName", "clickable", "ellipsizeMode", "numberOfLines", "textStyle", "padding", "statusConfig", "actions", "showActions", "actionIcon", "formatter", "currencySymbol", "currencyPrecision", "dateFormat", "booleanTrueText", "booleanFalseText", "emptyText", "onCellPress", "onActionPress", "attachMoreAction", "onLongPress", "disabled", "minHeight", "isBlank", "onDropdownStateChange", "gridInfo", "style"]);
-  var styles = useStyles({
-    alignment: alignment,
-    padding: padding,
-    minHeight: minHeight,
-    disabled: disabled,
+const TapasDataCell = ({
+  value,
+  dataType = "text",
+  alignment = "left",
+  columnIndex,
+  rowIndex,
+  fieldName,
+  clickable = false,
+  ellipsizeMode = "tail",
+  numberOfLines = 1,
+  textStyle,
+  padding = {
+    horizontal: 16,
+    vertical: 8
+  },
+  statusConfig = {},
+  actions = [],
+  showActions = false,
+  actionIcon = "more_vert",
+  formatter,
+  currencySymbol = "$",
+  currencyPrecision = 2,
+  dateFormat = "YYYY-MM-DD",
+  booleanTrueText = "Yes",
+  booleanFalseText = "No",
+  emptyText = "-",
+  onCellPress,
+  onActionPress,
+  attachMoreAction,
+  onLongPress,
+  disabled = false,
+  minHeight = 40,
+  isBlank = false,
+  onDropdownStateChange,
+  gridInfo,
+  style,
+  ...otherProps
+}) => {
+  const styles = useStyles({
+    alignment,
+    padding,
+    minHeight,
+    disabled,
     clickable: clickable || !!onCellPress
   });
+
   // 格式化显示值
-  var formattedValue = (0, react_1.useMemo)(function () {
+  const formattedValue = useMemo(() => {
     if (isBlank || value === null || value === undefined) {
       return emptyText;
     }
+
     // 使用自定义格式化函数
     if (formatter) {
       return formatter(value, dataType);
     }
+
     // 内置格式化逻辑
     switch (dataType) {
       case "number":
         return typeof value === "number" ? value.toLocaleString() : String(value);
       case "currency":
         {
-          var numValue = typeof value === "number" ? value : parseFloat(value);
+          const numValue = typeof value === "number" ? value : parseFloat(value);
           if (isNaN(numValue)) return emptyText;
-          return "".concat(currencySymbol).concat(numValue.toFixed(currencyPrecision));
+          return `${currencySymbol}${numValue.toFixed(currencyPrecision)}`;
         }
       case "date":
         {
           if (!value) return emptyText;
-          var date = new Date(value);
+          const date = new Date(value);
           if (isNaN(date.getTime())) return emptyText;
+
           // 简单的日期格式化
           if (dateFormat === "YYYY-MM-DD") {
             return date.toISOString().split('T')[0];
           } else if (dateFormat === "MM/DD/YYYY") {
-            return "".concat((date.getMonth() + 1).toString().padStart(2, '0'), "/").concat(date.getDate().toString().padStart(2, '0'), "/").concat(date.getFullYear());
+            return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}/${date.getFullYear()}`;
           } else {
             return date.toLocaleDateString();
           }
@@ -213,12 +130,13 @@ var TapasDataCell = function (_a) {
         return String(value || emptyText);
     }
   }, [value, dataType, formatter, currencySymbol, currencyPrecision, dateFormat, booleanTrueText, booleanFalseText, emptyText, isBlank]);
+
   // 获取状态样式
-  var getStatusStyle = (0, react_1.useCallback)(function () {
+  const getStatusStyle = useCallback(() => {
     if (dataType !== "status" || !value || !statusConfig[value]) {
       return {};
     }
-    var config = statusConfig[value];
+    const config = statusConfig[value];
     return {
       color: config.color,
       backgroundColor: config.backgroundColor,
@@ -230,62 +148,69 @@ var TapasDataCell = function (_a) {
       overflow: "hidden"
     };
   }, [dataType, value, statusConfig]);
+
   // 处理单元格点击
-  var handleCellPress = (0, react_1.useCallback)(function () {
+  const handleCellPress = useCallback(() => {
     if (disabled || isBlank) return;
-    onCellPress === null || onCellPress === void 0 ? void 0 : onCellPress(value, rowIndex, columnIndex, fieldName);
+    onCellPress?.(value, rowIndex, columnIndex, fieldName);
   }, [disabled, isBlank, onCellPress, value, rowIndex, columnIndex, fieldName]);
+
   // 处理长按
-  var handleLongPress = (0, react_1.useCallback)(function () {
+  const handleLongPress = useCallback(() => {
     if (disabled || isBlank) return;
-    onLongPress === null || onLongPress === void 0 ? void 0 : onLongPress(value, rowIndex, columnIndex, fieldName);
+    onLongPress?.(value, rowIndex, columnIndex, fieldName);
   }, [disabled, isBlank, onLongPress, value, rowIndex, columnIndex, fieldName]);
+
   // 处理操作按钮点击
-  var handleActionPress = (0, react_1.useCallback)(function (action) {
+  const handleActionPress = useCallback(action => {
     if (disabled || action.disabled) return;
-    onActionPress === null || onActionPress === void 0 ? void 0 : onActionPress(action, value, rowIndex, columnIndex);
+    onActionPress?.(action, value, rowIndex, columnIndex);
   }, [disabled, onActionPress, value, rowIndex, columnIndex]);
+
   // 下拉菜单状态
-  var _w = (0, react_1.useState)(false),
-    dropdownVisible = _w[0],
-    setDropdownVisible = _w[1];
-  var _x = (0, react_1.useState)({
-      top: 32,
-      right: 0
-    }),
-    dropdownPosition = _x[0],
-    setDropdownPosition = _x[1];
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+  const [dropdownPosition, setDropdownPosition] = useState({
+    top: 32,
+    right: 0
+  });
+
   // 计算下拉菜单的最佳位置
-  var calculateDropdownPosition = (0, react_1.useCallback)(function () {
+  const calculateDropdownPosition = useCallback(() => {
     // 更准确地计算下拉菜单的实际高度
-    var itemHeight = 32; // 每个选项的高度
-    var borderWidth = 2; // 边框宽度
-    var padding = 8; // 内边距
-    var shadowHeight = 4; // 阴影高度
+    const itemHeight = 32; // 每个选项的高度
+    const borderWidth = 2; // 边框宽度
+    const padding = 8; // 内边距
+    const shadowHeight = 4; // 阴影高度
+
     // 考虑文本长度对高度的影响
-    var maxTextLength = Math.max.apply(Math, actions.map(function (action) {
-      return action.label.length;
-    }));
-    var textHeightAdjustment = maxTextLength > 10 ? 4 : 0; // 长文本可能需要更多高度
+    const maxTextLength = Math.max(...actions.map(action => action.label.length));
+    const textHeightAdjustment = maxTextLength > 10 ? 4 : 0; // 长文本可能需要更多高度
+
     // 计算下拉菜单的宽度（考虑文本长度）
     // const minWidth = 120; // 最小宽度
     // const textWidth = maxTextLength * 8; // 估算文本宽度
     // const _actualWidth = Math.max(minWidth, textWidth + 24); // 24px 为内边距和图标空间
-    var actualHeight = actions.length * itemHeight + borderWidth + padding + shadowHeight + textHeightAdjustment;
-    var buttonHeight = 32; // 按钮高度
-    var cellHeight = (gridInfo === null || gridInfo === void 0 ? void 0 : gridInfo.rowHeight) || 56; // 使用传入的 rowHeight 或默认值
-    var gridHeight = (gridInfo === null || gridInfo === void 0 ? void 0 : gridInfo.gridHeight) || 400; // 使用传入的 gridHeight 或默认值
+
+    const actualHeight = actions.length * itemHeight + borderWidth + padding + shadowHeight + textHeightAdjustment;
+    const buttonHeight = 32; // 按钮高度
+    const cellHeight = gridInfo?.rowHeight || 56; // 使用传入的 rowHeight 或默认值
+    const gridHeight = gridInfo?.gridHeight || 400; // 使用传入的 gridHeight 或默认值
+
     // 根据行索引估算当前单元格在 Grid 中的位置
-    var currentRowIndex = rowIndex || 0;
+    const currentRowIndex = rowIndex || 0;
+
     // 计算当前单元格距离 Grid 底部的距离
-    var currentCellBottom = (currentRowIndex + 1) * cellHeight;
-    var spaceBelow = gridHeight - currentCellBottom;
+    const currentCellBottom = (currentRowIndex + 1) * cellHeight;
+    const spaceBelow = gridHeight - currentCellBottom;
+
     // 计算上方可用空间
-    var currentCellTop = currentRowIndex * cellHeight;
-    var spaceAbove = currentCellTop;
+    const currentCellTop = currentRowIndex * cellHeight;
+    const spaceAbove = currentCellTop;
+
     // 添加安全边距，确保下拉菜单不会紧贴边界
-    var safetyMargin = 8;
-    var requiredSpace = actualHeight + safetyMargin;
+    const safetyMargin = 8;
+    const requiredSpace = actualHeight + safetyMargin;
+
     // 智能选择显示位置
     if (requiredSpace > spaceBelow && requiredSpace <= spaceAbove) {
       // 下方空间不够，但上方空间足够，显示在上方
@@ -318,79 +243,89 @@ var TapasDataCell = function (_a) {
       };
     }
   }, [actions.length, rowIndex, gridInfo]);
+
   // 全局下拉菜单管理
-  (0, react_1.useEffect)(function () {
-    var closeDropdown = function () {
+  useEffect(() => {
+    const closeDropdown = () => {
       setDropdownVisible(false);
       unregisterDropdown();
     };
+
     // 注册当前下拉菜单
     if (dropdownVisible) {
       registerDropdown(columnIndex || 0, rowIndex || 0, closeDropdown);
     } else {
       unregisterDropdown();
     }
+
     // 清理函数
-    return function () {
+    return () => {
       unregisterDropdown();
     };
   }, [dropdownVisible, columnIndex, rowIndex]);
+
   // 通知父组件下拉菜单状态变化
-  (0, react_1.useEffect)(function () {
-    onDropdownStateChange === null || onDropdownStateChange === void 0 ? void 0 : onDropdownStateChange(dropdownVisible);
+  useEffect(() => {
+    onDropdownStateChange?.(dropdownVisible);
   }, [dropdownVisible, onDropdownStateChange]);
+
   // 监听全局关闭事件
-  (0, react_1.useEffect)(function () {
+  useEffect(() => {
     // const _handleGlobalClose = () => {
     //   if (globalDropdownState.activeColumn !== columnIndex || 
     //       globalDropdownState.activeRow !== rowIndex) {
     //     setDropdownVisible(false);
     //   }
     // };
+
     // 这里可以添加全局事件监听器
     // 为了简化，我们在点击其他单元格时关闭当前下拉菜单
   }, [columnIndex, rowIndex]);
+
   // 渲染操作按钮
-  var renderActions = function () {
+  const renderActions = () => {
     if (!showActions || actions.length === 0 || isBlank) {
       return null;
     }
+
     // 如果只有一个操作，直接显示图标按钮
     if (actions.length === 1) {
-      var action_1 = actions[0];
-      if (!action_1) return null;
+      const action = actions[0];
+      if (!action) return null;
+
       // 检查是否有文本内容，如果没有文本内容，按钮应该居中
-      var hasTextContent = formattedValue && formattedValue.trim() !== '';
-      var buttonStyle = hasTextContent ? [styles.actionButton, {
+      const hasTextContent = formattedValue && formattedValue.trim() !== '';
+      const buttonStyle = hasTextContent ? [styles.actionButton, {
         marginLeft: 8
       }] : styles.actionButton;
-      return react_1.default.createElement(react_native_1.Pressable, {
+      return /*#__PURE__*/React.createElement(Pressable, {
         style: buttonStyle,
-        onPress: function (event) {
+        onPress: event => {
           // 阻止事件冒泡，避免触发外层的 attachCellPress
           event.stopPropagation();
           if (attachMoreAction) {
-            attachMoreAction(action_1);
+            attachMoreAction(action);
           } else {
-            handleActionPress(action_1);
+            handleActionPress(action);
           }
         },
-        disabled: disabled || action_1.disabled
-      }, react_1.default.createElement(TapasIcon_1.default, {
-        name: action_1.icon || actionIcon,
+        disabled: disabled || action.disabled
+      }, /*#__PURE__*/React.createElement(TapasIcon, {
+        name: action.icon || actionIcon,
         size: 16,
         color: styles.actionIcon.color
       }));
     }
+
     // 多个操作显示下拉菜单
-    return react_1.default.createElement(react_native_1.View, {
+    return /*#__PURE__*/React.createElement(View, {
       style: [styles.dropdownContainer, {
         // 只有当前激活的下拉菜单容器才有高 z-index
         zIndex: globalDropdownState.activeColumn === columnIndex && globalDropdownState.activeRow === rowIndex ? 2147483646 : 1
       }]
-    }, react_1.default.createElement(react_native_1.Pressable, {
+    }, /*#__PURE__*/React.createElement(Pressable, {
       style: styles.actionButton,
-      onPress: function (event) {
+      onPress: event => {
         // 阻止事件冒泡，避免触发外层的 attachCellPress
         event.stopPropagation();
         if (dropdownVisible) {
@@ -399,35 +334,186 @@ var TapasDataCell = function (_a) {
         } else {
           // 如果当前下拉菜单关闭，先关闭其他所有下拉菜单，然后打开当前菜单
           closeAllDropdowns();
+
           // 计算并设置下拉菜单位置
           setDropdownPosition(calculateDropdownPosition());
+
           // 延迟打开当前下拉菜单，确保其他菜单已关闭
-          setTimeout(function () {
+          setTimeout(() => {
             setDropdownVisible(true);
           }, 0);
         }
       },
       disabled: disabled
-    }, react_1.default.createElement(TapasIcon_1.default, {
+    }, /*#__PURE__*/React.createElement(TapasIcon, {
       name: actionIcon,
       size: 16,
       color: styles.actionIcon.color
-    })), dropdownVisible && react_1.default.createElement(react_native_1.View, {
+    })), dropdownVisible && /*#__PURE__*/React.createElement(View, {
       style: [styles.dropdownMenu, {
         top: dropdownPosition.top,
         right: dropdownPosition.right
       }]
-    }, actions.map(function (action, index) {
-      return react_1.default.createElement(react_native_1.Pressable, {
-        key: action.id,
-        style: [styles.dropdownItem, index === actions.length - 1 && styles.dropdownItemLast],
-        onPress: function (event) {
-          // 阻止事件冒泡，避免触发外层的 attachCellPress
-          event.stopPropagation();
-          if (attachMoreAction) {
-            attachMoreAction(action);
-          } else {
-            handleActionPress(action);
+    }, actions.map((action, index) => /*#__PURE__*/React.createElement(Pressable, {
+      key: action.id,
+      style: [styles.dropdownItem, index === actions.length - 1 && styles.dropdownItemLast],
+      onPress: event => {
+        // 阻止事件冒泡，避免触发外层的 attachCellPress
+        event.stopPropagation();
+        if (attachMoreAction) {
+          attachMoreAction(action);
+        } else {
+          handleActionPress(action);
+        }
+        setDropdownVisible(false);
+      },
+      disabled: disabled || action.disabled
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.dropdownItemText, action.disabled && styles.dropdownItemDisabled]
+    }, action.label)))));
+  };
+
+  // 渲染内容
+  const renderContent = () => {
+    if (isBlank) {
+      return null;
+    }
+    const statusStyle = getStatusStyle();
+    const hasStatusStyle = Object.keys(statusStyle).length > 0;
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.content
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.text, hasStatusStyle && statusStyle, textStyle],
+      numberOfLines: numberOfLines,
+      ellipsizeMode: ellipsizeMode
+    }, formattedValue), renderActions());
+  };
+
+  // 如果可点击，使用 Pressable
+  if (clickable || onCellPress || onLongPress) {
+    return /*#__PURE__*/React.createElement(Pressable, _extends({}, otherProps, {
+      style: [styles.container, style],
+      onPress: handleCellPress,
+      onLongPress: handleLongPress,
+      disabled: disabled
+    }), renderContent());
+  }
+
+  // 否则使用普通 View
+  return /*#__PURE__*/React.createElement(View, _extends({}, otherProps, {
+    style: [styles.container, style]
+  }), renderContent());
+};
+const useStyles = makeStyles((theme, props) => {
+  const alignment = props?.alignment || "left";
+  const paddingHorizontal = props?.padding?.horizontal || 16;
+  const paddingVertical = props?.padding?.vertical || 8;
+  const minHeight = props?.minHeight || 40;
+  const disabled = props?.disabled || false;
+  const clickable = props?.clickable || false;
+  const justifyContent = alignment === "left" ? "flex-start" : alignment === "right" ? "flex-end" : "center";
+  return {
+    container: {
+      minHeight,
+      paddingHorizontal,
+      paddingVertical,
+      backgroundColor: disabled ? theme?.colors?.grey5 || "#f8f9fa" : "transparent",
+      opacity: disabled ? 0.6 : 1,
+      borderBottomWidth: 0,
+      // 移除边框，让 Grid 处理边框
+      borderBottomColor: "transparent",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+      height: "100%",
+      // 确保下拉菜单不被截断
+      overflow: "visible"
+    },
+    content: {
+      flex: 1,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      height: "100%",
+      minHeight
+    },
+    text: {
+      flex: 1,
+      fontSize: theme?.fonts?.sizeM || 14,
+      fontWeight: "400",
+      color: theme?.colors?.colorTextPrimary || theme?.colors?.grey1 || "#333",
+      textAlign: alignment,
+      alignSelf: justifyContent === "flex-start" ? "flex-start" : justifyContent === "flex-end" ? "flex-end" : "center"
+    },
+    actionButton: {
+      padding: 4,
+      borderRadius: 4,
+      backgroundColor: clickable ? "transparent" : theme?.colors?.grey5 || "#f8f9fa",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minWidth: 24,
+      minHeight: 24
+    },
+    actionIcon: {
+      color: theme?.colors?.grey2 || "#999"
+    },
+    dropdownContainer: {
+      position: "relative",
+      // 默认使用较低的 z-index，只有激活的下拉菜单容器才有高 z-index
+      zIndex: 1,
+      // 确保容器本身不会创建新的 stacking context
+      isolation: "auto"
+    },
+    dropdownMenu: {
+      position: "absolute",
+      // 使用绝对定位
+      backgroundColor: theme?.colors?.background || "#fff",
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: theme?.colors?.grey4 || "#e0e0e0",
+      shadowColor: "#000",
+      shadowOffset: {
+        width: 0,
+        height: 2
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 3.84,
+      elevation: 5,
+      minWidth: 120,
+      zIndex: 2147483647,
+      // 更高的 z-index，确保显示在所有元素之上
+      // 确保下拉菜单不被父容器的 overflow 隐藏
+      overflow: "visible",
+      // 确保下拉菜单在正确的层级上
+      isolation: "isolate"
+    },
+    dropdownItem: {
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      borderBottomWidth: 1,
+      borderBottomColor: theme?.colors?.grey4 || "#e0e0e0"
+    },
+    dropdownItemLast: {
+      borderBottomWidth: 0
+    },
+    dropdownItemText: {
+      fontSize: 14,
+      color: theme?.colors?.colorTextPrimary || theme?.colors?.grey1 || "#333"
+    },
+    dropdownItemDisabled: {
+      color: theme?.colors?.grey3 || "#999",
+      opacity: 0.6
+    }
+  };
+});
+export default withTheme(TapasDataCell);
+
+// Export aliases for compatibility
+export const DataCell = withTheme(TapasDataCell);
+export { TapasDataCell, setDropdownStateChangeListener };
           }
           setDropdownVisible(false);
         },
@@ -576,4 +662,3 @@ var useStyles = (0, themed_1.makeStyles)(function (theme, props) {
 exports.default = (0, themed_1.withTheme)(TapasDataCell);
 // Export aliases for compatibility
 exports.DataCell = (0, themed_1.withTheme)(TapasDataCell);
-//# sourceMappingURL=DataCell.js.map