@dreamtree-org/twreact-ui 1.0.81 → 1.0.82

package/dist/index.esm.js

@@ -3935,89 +3935,16 @@ var DEFAULT_ACTIONS = [{
   })
 }];
 
-// Memoized ActionMenuPortal to prevent unnecessary re-renders
-var ActionMenuPortal = /*#__PURE__*/memo(function ActionMenuPortal(_ref) {
-  var anchorElem = _ref.anchorElem,
-    _ref$actions = _ref.actions,
+// Simple inline action menu component (no portal)
+var ActionMenu = /*#__PURE__*/memo(function ActionMenu(_ref) {
+  var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? [] : _ref$actions,
-    anchorRow = _ref.anchorRow,
+    row = _ref.row,
     onAction = _ref.onAction,
     menuRef = _ref.menuRef;
-  var _useState = useState({
-      left: 0,
-      top: 0,
-      transformOrigin: "top right",
-      maxHeight: 300,
-      width: 180,
-      opacity: 0
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    style = _useState2[0],
-    setStyle = _useState2[1];
-  var menuWidth = 180;
-  var maxMenuHeight = 320;
-  var margin = 8;
-  var minMenuHeight = 80;
-  useLayoutEffect(function () {
-    if (!anchorElem) return;
-    var computePosition = function computePosition() {
-      var rect = anchorElem.getBoundingClientRect();
-      var scrollY = window.scrollY || window.pageYOffset;
-      var scrollX = window.scrollX || window.pageXOffset;
-      var spaceBelow = window.innerHeight - rect.bottom;
-      var spaceAbove = rect.top;
-      var placement = "bottom";
-      var allowedMaxHeight;
-      if (spaceBelow < 160 && spaceAbove > spaceBelow) {
-        placement = "top";
-        allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, spaceAbove - margin));
-      } else {
-        allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, spaceBelow - margin));
-      }
-      var measuredMenuHeight = allowedMaxHeight;
-      var menuEl = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current;
-      if (menuEl) {
-        var contentHeight = menuEl.scrollHeight || menuEl.offsetHeight || allowedMaxHeight;
-        measuredMenuHeight = Math.min(contentHeight, allowedMaxHeight);
-      }
-      var top = placement === "top" ? rect.top + scrollY - measuredMenuHeight - margin : rect.bottom + scrollY + margin;
-      var minTop = margin + scrollY;
-      var maxTop = window.innerHeight + scrollY - measuredMenuHeight - margin;
-      top = Math.max(minTop, Math.min(top, maxTop));
-      var left = rect.right + scrollX - menuWidth;
-      left = Math.max(margin, Math.min(left, window.innerWidth - menuWidth - margin));
-      setStyle({
-        left: left,
-        top: top,
-        transformOrigin: placement === "bottom" ? "top right" : "bottom right",
-        maxHeight: allowedMaxHeight,
-        width: menuWidth,
-        opacity: 1
-      });
-    };
-    computePosition();
-    var onScrollOrResize = function onScrollOrResize() {
-      window.requestAnimationFrame(computePosition);
-    };
-    window.addEventListener("resize", onScrollOrResize);
-    window.addEventListener("scroll", onScrollOrResize, true);
-    return function () {
-      window.removeEventListener("resize", onScrollOrResize);
-      window.removeEventListener("scroll", onScrollOrResize, true);
-    };
-  }, [anchorElem, menuRef]);
   return /*#__PURE__*/React__default.createElement("div", {
     ref: menuRef,
-    style: {
-      position: "absolute",
-      top: style.top,
-      left: style.left,
-      width: style.width,
-      maxHeight: style.maxHeight,
-      transformOrigin: style.transformOrigin,
-      opacity: style.opacity
-    },
-    className: "absolute z-50 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-y-auto transition-opacity duration-150 ease-out",
+    className: "absolute right-0 top-full mt-1 z-50 w-44 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-y-auto max-h-64",
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
@@ -4033,9 +3960,9 @@ var ActionMenuPortal = /*#__PURE__*/memo(function ActionMenuPortal(_ref) {
       className: "w-full text-left px-3 py-2 text-sm hover:bg-gray-100 flex items-center gap-2 rounded-md",
       onClick: function onClick(e) {
         e.stopPropagation();
-        onAction === null || onAction === void 0 || onAction(action, anchorRow);
+        onAction === null || onAction === void 0 || onAction(action, row);
       }
-    }, action.render ? action.render(anchorRow) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, action.icon && /*#__PURE__*/React__default.createElement("span", {
+    }, action.render ? action.render(row) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, action.icon && /*#__PURE__*/React__default.createElement("span", {
       className: "inline-flex"
     }, action.icon), /*#__PURE__*/React__default.createElement("span", null, action.label))));
   })));
@@ -4123,85 +4050,85 @@ var Table = function Table(_ref2) {
     pageNumber = _ref2.pageNumber,
     props = _objectWithoutProperties$1(_ref2, _excluded$k);
   // Core state
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isMobileView = _useState4[0],
-    setIsMobileView = _useState4[1];
-  var _useState5 = useState(function () {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMobileView = _useState2[0],
+    setIsMobileView = _useState2[1];
+  var _useState3 = useState(function () {
       return Array.isArray(data) ? data : [];
     }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tableData = _useState4[0],
+    setTableData = _useState4[1];
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    tableData = _useState6[0],
-    setTableData = _useState6[1];
-  var _useState7 = useState(false),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  var _useState7 = useState(pageSize),
     _useState8 = _slicedToArray(_useState7, 2),
-    loading = _useState8[0],
-    setLoading = _useState8[1];
-  var _useState9 = useState(pageSize),
-    _useState0 = _slicedToArray(_useState9, 2),
-    limit = _useState0[0],
-    setLimit = _useState0[1];
-  var _useState1 = useState(function () {
+    limit = _useState8[0],
+    setLimit = _useState8[1];
+  var _useState9 = useState(function () {
       return typeof pageNumber === "number" ? pageNumber : 1;
     }),
-    _useState10 = _slicedToArray(_useState1, 2),
-    currentPage = _useState10[0],
-    setCurrentPage = _useState10[1];
+    _useState0 = _slicedToArray(_useState9, 2),
+    currentPage = _useState0[0],
+    setCurrentPage = _useState0[1];
 
   // Column state
-  var _useState11 = useState(function () {
+  var _useState1 = useState(function () {
       return Array.isArray(columns) ? columns.map(function (c) {
         return _objectSpread$9({}, c);
       }) : [];
     }),
+    _useState10 = _slicedToArray(_useState1, 2),
+    columnsState = _useState10[0],
+    setColumnsState = _useState10[1];
+  var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    columnsState = _useState12[0],
-    setColumnsState = _useState12[1];
-  var _useState13 = useState(false),
-    _useState14 = _slicedToArray(_useState13, 2),
-    showColumnMenu = _useState14[0],
-    setShowColumnMenu = _useState14[1];
+    showColumnMenu = _useState12[0],
+    setShowColumnMenu = _useState12[1];
 
   // Sorting/filtering state
-  var _useState15 = useState({
+  var _useState13 = useState({
       key: null,
       direction: "asc"
     }),
+    _useState14 = _slicedToArray(_useState13, 2),
+    sortConfig = _useState14[0],
+    setSortConfig = _useState14[1];
+  var _useState15 = useState({}),
     _useState16 = _slicedToArray(_useState15, 2),
-    sortConfig = _useState16[0],
-    setSortConfig = _useState16[1];
-  var _useState17 = useState({}),
+    filters = _useState16[0],
+    setFilters = _useState16[1];
+  var _useState17 = useState(""),
     _useState18 = _slicedToArray(_useState17, 2),
-    filters = _useState18[0],
-    setFilters = _useState18[1];
-  var _useState19 = useState(""),
-    _useState20 = _slicedToArray(_useState19, 2),
-    searchInput = _useState20[0],
-    setSearchInput = _useState20[1];
+    searchInput = _useState18[0],
+    setSearchInput = _useState18[1];
 
   // Selection/expansion state
-  var _useState21 = useState(function () {
+  var _useState19 = useState(function () {
       return new Set();
     }),
-    _useState22 = _slicedToArray(_useState21, 2),
-    selectedRows = _useState22[0],
-    setSelectedRows = _useState22[1];
-  var _useState23 = useState(function () {
+    _useState20 = _slicedToArray(_useState19, 2),
+    selectedRows = _useState20[0],
+    setSelectedRows = _useState20[1];
+  var _useState21 = useState(function () {
       return new Set();
     }),
-    _useState24 = _slicedToArray(_useState23, 2),
-    expandedRows = _useState24[0],
-    setExpandedRows = _useState24[1];
+    _useState22 = _slicedToArray(_useState21, 2),
+    expandedRows = _useState22[0],
+    setExpandedRows = _useState22[1];
 
   // Action menu state
-  var _useState25 = useState(null),
+  var _useState23 = useState(null),
+    _useState24 = _slicedToArray(_useState23, 2),
+    actionAnchor = _useState24[0],
+    setActionAnchor = _useState24[1];
+  var _useState25 = useState(false),
     _useState26 = _slicedToArray(_useState25, 2),
-    actionAnchor = _useState26[0],
-    setActionAnchor = _useState26[1];
-  var _useState27 = useState(false),
-    _useState28 = _slicedToArray(_useState27, 2),
-    showMobileFilters = _useState28[0],
-    setShowMobileFilters = _useState28[1];
+    showMobileFilters = _useState26[0],
+    setShowMobileFilters = _useState26[1];
 
   // Refs
   var columnMenuRef = useRef(null);
@@ -4542,15 +4469,14 @@ var Table = function Table(_ref2) {
       title: "Actions"
     }, /*#__PURE__*/React__default.createElement(MoreVertical, {
       className: "h-4 w-4"
-    })), (actionAnchor === null || actionAnchor === void 0 ? void 0 : actionAnchor.key) === actionCellKey && /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement(ActionMenuPortal, {
-      anchorElem: actionAnchor.elem,
-      anchorRow: actionAnchor.row,
+    })), (actionAnchor === null || actionAnchor === void 0 ? void 0 : actionAnchor.key) === actionCellKey && /*#__PURE__*/React__default.createElement(ActionMenu, {
       actions: actionsToUse,
+      row: row,
       onAction: function onAction(action) {
         return handleOnAction(action, row);
       },
       menuRef: actionMenuRef
-    }), document.body))), /*#__PURE__*/React__default.createElement("div", {
+    }))), /*#__PURE__*/React__default.createElement("div", {
       className: "p-4"
     }, visibleColumns.map(function (column, colIndex) {
       var extraCellClass = typeof cellClass === "function" ? cellClass({
@@ -4932,7 +4858,7 @@ var Table = function Table(_ref2) {
         return e.stopPropagation();
       }
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "inline-block"
+      className: "relative inline-block"
     }, /*#__PURE__*/React__default.createElement("button", {
       onClick: function onClick(e) {
         return toggleActions(e, actionCellKey, row);
@@ -4942,15 +4868,14 @@ var Table = function Table(_ref2) {
       title: "Actions"
     }, /*#__PURE__*/React__default.createElement(MoreVertical, {
       className: "h-4 w-4"
-    }))), (actionAnchor === null || actionAnchor === void 0 ? void 0 : actionAnchor.key) === actionCellKey && /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement(ActionMenuPortal, {
-      anchorElem: actionAnchor.elem,
-      anchorRow: actionAnchor.row,
+    })), (actionAnchor === null || actionAnchor === void 0 ? void 0 : actionAnchor.key) === actionCellKey && /*#__PURE__*/React__default.createElement(ActionMenu, {
       actions: actionsToUse,
+      row: row,
       onAction: function onAction(action) {
         return handleOnAction(action, row);
       },
       menuRef: actionMenuRef
-    }), document.body))), hasDetails && isExpanded && DetailsComponent && /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+    })))), hasDetails && isExpanded && DetailsComponent && /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
       colSpan: visibleCount,
       className: "px-6 py-4 bg-gray-50"
     }, /*#__PURE__*/React__default.createElement(DetailsComponent, {