@dreamtree-org/twreact-ui 1.0.83 → 1.0.85

package/dist/index.js

@@ -3961,10 +3961,71 @@ var ActionMenu = /*#__PURE__*/React.memo(function ActionMenu(_ref) {
     actions = _ref$actions === void 0 ? [] : _ref$actions,
     row = _ref.row,
     onAction = _ref.onAction,
-    menuRef = _ref.menuRef;
+    menuRef = _ref.menuRef,
+    anchorEl = _ref.anchorEl,
+    onClose = _ref.onClose;
+  var _useState = React.useState({
+      top: 0,
+      left: 0,
+      visibility: "hidden"
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    pos = _useState2[0],
+    setPos = _useState2[1];
+
+  // compute position after mount / when anchor changes
+  React.useLayoutEffect(function () {
+    if (!anchorEl || !(menuRef !== null && menuRef !== void 0 && menuRef.current) || typeof window === "undefined") {
+      setPos(function (p) {
+        return _objectSpread$9(_objectSpread$9({}, p), {}, {
+          visibility: "hidden"
+        });
+      });
+      return;
+    }
+    var menu = menuRef.current;
+    var rect = anchorEl.getBoundingClientRect();
+    var menuWidth = menu.offsetWidth || 176; // w-44 ~ 176px fallback
+    var menuHeight = menu.offsetHeight || menu.scrollHeight || 200;
+    var viewportWidth = window.innerWidth;
+    var viewportHeight = window.innerHeight;
+    var scrollX = window.scrollX || window.pageXOffset || 0;
+    var scrollY = window.scrollY || window.pageYOffset || 0;
+
+    // prefer placing below the button
+    var preferBelowTop = rect.bottom + scrollY + 6;
+    var preferAboveTop = rect.top + scrollY - menuHeight - 6;
+
+    // compute left so right-aligned to the button's right edge
+    var left = rect.right + scrollX - menuWidth;
+    if (left < 8) left = 8;
+    if (left + menuWidth > viewportWidth - 8) left = Math.max(8, viewportWidth - menuWidth - 8);
+
+    // choose top based on available space
+    var top;
+    if (preferBelowTop + menuHeight <= scrollY + viewportHeight - 8) {
+      top = preferBelowTop;
+    } else if (preferAboveTop >= scrollY + 8) {
+      top = preferAboveTop;
+    } else {
+      // fallback: clamp inside viewport
+      top = Math.max(scrollY + 8, Math.min(preferBelowTop, scrollY + viewportHeight - menuHeight - 8));
+    }
+    setPos({
+      top: top,
+      left: left,
+      visibility: "visible"
+    });
+  }, [anchorEl, menuRef, actions, row]);
   return /*#__PURE__*/React.createElement("div", {
     ref: menuRef,
-    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",
+    className: "fixed z-50 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5",
+    style: {
+      top: pos.top,
+      left: pos.left,
+      visibility: pos.visibility,
+      minWidth: 176 // match w-44 fallback
+    },
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
@@ -3981,6 +4042,7 @@ var ActionMenu = /*#__PURE__*/React.memo(function ActionMenu(_ref) {
       onClick: function onClick(e) {
         e.stopPropagation();
         onAction === null || onAction === void 0 || onAction(action, row);
+        onClose === null || onClose === void 0 || onClose();
       }
     }, action.render ? action.render(row) : /*#__PURE__*/React.createElement(React.Fragment, null, action.icon && /*#__PURE__*/React.createElement("span", {
       className: "inline-flex"
@@ -3998,9 +4060,11 @@ function useClickOutside(refs, isActive, onClickOutside) {
       });
       if (isOutside) onClickOutside();
     };
-    document.addEventListener("click", handler);
+
+    // Use capture phase to ensure we handle clicks before they bubble
+    document.addEventListener("mousedown", handler, true);
     return function () {
-      return document.removeEventListener("click", handler);
+      return document.removeEventListener("mousedown", handler, true);
     };
   }, [refs, isActive, onClickOutside]);
 }
@@ -4070,90 +4134,91 @@ var Table = function Table(_ref2) {
     pageNumber = _ref2.pageNumber,
     props = _objectWithoutProperties$1(_ref2, _excluded$k);
   // Core state
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isMobileView = _useState2[0],
-    setIsMobileView = _useState2[1];
-  var _useState3 = React.useState(function () {
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isMobileView = _useState4[0],
+    setIsMobileView = _useState4[1];
+  var _useState5 = React.useState(function () {
       return Array.isArray(data) ? data : [];
     }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    tableData = _useState4[0],
-    setTableData = _useState4[1];
-  var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    loading = _useState6[0],
-    setLoading = _useState6[1];
-  var _useState7 = React.useState(pageSize),
+    tableData = _useState6[0],
+    setTableData = _useState6[1];
+  var _useState7 = React.useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    limit = _useState8[0],
-    setLimit = _useState8[1];
-  var _useState9 = React.useState(function () {
+    loading = _useState8[0],
+    setLoading = _useState8[1];
+  var _useState9 = React.useState(pageSize),
+    _useState0 = _slicedToArray(_useState9, 2),
+    limit = _useState0[0],
+    setLimit = _useState0[1];
+  var _useState1 = React.useState(function () {
       return typeof pageNumber === "number" ? pageNumber : 1;
     }),
-    _useState0 = _slicedToArray(_useState9, 2),
-    currentPage = _useState0[0],
-    setCurrentPage = _useState0[1];
+    _useState10 = _slicedToArray(_useState1, 2),
+    currentPage = _useState10[0],
+    setCurrentPage = _useState10[1];
 
   // Column state
-  var _useState1 = React.useState(function () {
+  var _useState11 = React.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 = React.useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    showColumnMenu = _useState12[0],
-    setShowColumnMenu = _useState12[1];
+    columnsState = _useState12[0],
+    setColumnsState = _useState12[1];
+  var _useState13 = React.useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    showColumnMenu = _useState14[0],
+    setShowColumnMenu = _useState14[1];
 
   // Sorting/filtering state
-  var _useState13 = React.useState({
+  var _useState15 = React.useState({
       key: null,
       direction: "asc"
     }),
-    _useState14 = _slicedToArray(_useState13, 2),
-    sortConfig = _useState14[0],
-    setSortConfig = _useState14[1];
-  var _useState15 = React.useState({}),
     _useState16 = _slicedToArray(_useState15, 2),
-    filters = _useState16[0],
-    setFilters = _useState16[1];
-  var _useState17 = React.useState(""),
+    sortConfig = _useState16[0],
+    setSortConfig = _useState16[1];
+  var _useState17 = React.useState({}),
     _useState18 = _slicedToArray(_useState17, 2),
-    searchInput = _useState18[0],
-    setSearchInput = _useState18[1];
+    filters = _useState18[0],
+    setFilters = _useState18[1];
+  var _useState19 = React.useState(""),
+    _useState20 = _slicedToArray(_useState19, 2),
+    searchInput = _useState20[0],
+    setSearchInput = _useState20[1];
 
   // Selection/expansion state
-  var _useState19 = React.useState(function () {
-      return new Set();
-    }),
-    _useState20 = _slicedToArray(_useState19, 2),
-    selectedRows = _useState20[0],
-    setSelectedRows = _useState20[1];
   var _useState21 = React.useState(function () {
       return new Set();
     }),
     _useState22 = _slicedToArray(_useState21, 2),
-    expandedRows = _useState22[0],
-    setExpandedRows = _useState22[1];
-
-  // Action menu state
-  var _useState23 = React.useState(null),
+    selectedRows = _useState22[0],
+    setSelectedRows = _useState22[1];
+  var _useState23 = React.useState(function () {
+      return new Set();
+    }),
     _useState24 = _slicedToArray(_useState23, 2),
-    actionAnchor = _useState24[0],
-    setActionAnchor = _useState24[1];
-  var _useState25 = React.useState(false),
+    expandedRows = _useState24[0],
+    setExpandedRows = _useState24[1];
+
+  // Action menu state - simplified to just store the clicked row key
+  var _useState25 = React.useState(null),
     _useState26 = _slicedToArray(_useState25, 2),
-    showMobileFilters = _useState26[0],
-    setShowMobileFilters = _useState26[1];
+    activeActionRowKey = _useState26[0],
+    setActiveActionRowKey = _useState26[1];
+  var _useState27 = React.useState(false),
+    _useState28 = _slicedToArray(_useState27, 2),
+    showMobileFilters = _useState28[0],
+    setShowMobileFilters = _useState28[1];
 
   // Refs
   var columnMenuRef = React.useRef(null);
   var columnToggleBtnRef = React.useRef(null);
   var actionMenuRef = React.useRef(null);
+  var actionButtonRefs = React.useRef({});
 
   // Actions to use (memoized)
   var actionsToUse = React.useMemo(function () {
@@ -4201,10 +4266,16 @@ var Table = function Table(_ref2) {
     return setShowColumnMenu(false);
   }, []);
   var closeActionMenu = React.useCallback(function () {
-    return setActionAnchor(null);
+    return setActiveActionRowKey(null);
   }, []);
   useClickOutside([columnMenuRef, columnToggleBtnRef], showColumnMenu, closeColumnMenu);
-  useClickOutside([actionMenuRef], !!actionAnchor, closeActionMenu);
+  useClickOutside([actionMenuRef], activeActionRowKey !== null, closeActionMenu);
+
+  // Get active anchor element
+  var activeAnchorEl = React.useMemo(function () {
+    if (activeActionRowKey === null) return null;
+    return actionButtonRefs.current[activeActionRowKey];
+  }, [activeActionRowKey]);
 
   // Visible columns (memoized)
   var visibleColumns = React.useMemo(function () {
@@ -4361,13 +4432,17 @@ var Table = function Table(_ref2) {
   }, [startIndex]);
   var toggleActions = React.useCallback(function (e, actionCellKey, row) {
     e.stopPropagation();
-    setActionAnchor(function (prev) {
-      if (prev && prev.key === actionCellKey) return null;
-      return {
-        elem: e.currentTarget,
-        key: actionCellKey,
-        row: row
-      };
+    e.preventDefault(); // Prevent default to avoid any other click handlers
+
+    // Store the button reference
+    if (e.currentTarget) {
+      actionButtonRefs.current[actionCellKey] = e.currentTarget;
+    }
+    setActiveActionRowKey(function (prev) {
+      if (prev === actionCellKey) {
+        return null; // Close if clicking same button
+      }
+      return actionCellKey; // Open new menu
     });
   }, []);
   var handleOnAction = React.useCallback(function (action, row) {
@@ -4380,7 +4455,7 @@ var Table = function Table(_ref2) {
       action: action,
       row: row
     });
-    setActionAnchor(null);
+    setActiveActionRowKey(null);
   }, [onAction]);
   var handleLimitChange = React.useCallback(function (nextLimit) {
     var parsed = Number(nextLimit);
@@ -4481,21 +4556,28 @@ var Table = function Table(_ref2) {
     }, "#", globalIndex + 1)), withAction && /*#__PURE__*/React.createElement("div", {
       className: "relative"
     }, /*#__PURE__*/React.createElement("button", {
+      ref: function ref(el) {
+        if (el) {
+          actionButtonRefs.current[actionCellKey] = el;
+        }
+      },
       onClick: function onClick(e) {
         return toggleActions(e, actionCellKey, row);
       },
-      "aria-expanded": (actionAnchor === null || actionAnchor === void 0 ? void 0 : actionAnchor.key) === actionCellKey,
+      "aria-expanded": activeActionRowKey === actionCellKey,
       className: "p-1.5 rounded hover:bg-gray-200",
       title: "Actions"
     }, /*#__PURE__*/React.createElement(MoreVertical, {
       className: "h-4 w-4"
-    })), (actionAnchor === null || actionAnchor === void 0 ? void 0 : actionAnchor.key) === actionCellKey && /*#__PURE__*/React.createElement(ActionMenu, {
+    })), activeActionRowKey === actionCellKey && /*#__PURE__*/React.createElement(ActionMenu, {
       actions: actionsToUse,
       row: row,
       onAction: function onAction(action) {
         return handleOnAction(action, row);
       },
-      menuRef: actionMenuRef
+      menuRef: actionMenuRef,
+      anchorEl: activeAnchorEl,
+      onClose: closeActionMenu
     }))), /*#__PURE__*/React.createElement("div", {
       className: "p-4"
     }, visibleColumns.map(function (column, colIndex) {
@@ -4520,7 +4602,7 @@ var Table = function Table(_ref2) {
       row: row,
       index: globalIndex
     })));
-  }, [startIndex, selectedRows, expandedRows, rowClass, stripedRows, stripedColors, onRowClick, hasDetails, selectable, showSerial, withAction, visibleColumns, cellClass, DetailsComponent, actionsToUse, actionAnchor, toggleExpandRow, handleSelectRow, toggleActions, handleOnAction, renderCell]);
+  }, [startIndex, selectedRows, expandedRows, rowClass, stripedRows, stripedColors, onRowClick, hasDetails, selectable, showSerial, withAction, visibleColumns, cellClass, DetailsComponent, actionsToUse, activeActionRowKey, activeAnchorEl, toggleExpandRow, handleSelectRow, toggleActions, handleOnAction, closeActionMenu, renderCell]);
 
   // Render mobile filters
   var renderMobileFilters = React.useCallback(function () {
@@ -4587,6 +4669,110 @@ var Table = function Table(_ref2) {
       };
     });
   }, [limitOptions]);
+
+  // Render desktop table rows
+  var renderDesktopTableRows = React.useCallback(function () {
+    return paginatedData.map(function (row, rowIndexInPage) {
+      var globalIndex = startIndex + rowIndexInPage;
+      var key = getRowKey(row, globalIndex);
+      var actionCellKey = "actions-".concat(key);
+      var isSelected = selectedRows.has(key);
+      var isExpanded = expandedRows.has(key);
+      var extraRowClass = typeof rowClass === "function" ? rowClass({
+        row: row,
+        rowIndex: globalIndex
+      }) : "";
+      var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.trim() : "";
+      var stripeBg = stripedRows && !isSelected ? stripedColors[globalIndex % stripedColors.length] : undefined;
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: key
+      }, /*#__PURE__*/React.createElement("tr", {
+        style: stripeBg ? {
+          backgroundColor: stripeBg
+        } : undefined,
+        className: cn$1("hover:bg-gray-50", {
+          "cursor-pointer": !!onRowClick,
+          "bg-primary-50": isSelected
+        }, safeExtraRowClass),
+        onClick: function onClick() {
+          return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
+        }
+      }, hasDetails && /*#__PURE__*/React.createElement("td", {
+        className: "px-4 py-4 text-sm"
+      }, /*#__PURE__*/React.createElement("button", {
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          toggleExpandRow(row, rowIndexInPage);
+        },
+        "aria-expanded": isExpanded,
+        className: "p-1 rounded hover:bg-gray-100"
+      }, isExpanded ? "▾" : "▸")), showSerial && /*#__PURE__*/React.createElement("td", {
+        className: "px-4 py-4 whitespace-nowrap text-sm text-gray-900"
+      }, globalIndex + 1), selectable && /*#__PURE__*/React.createElement("td", {
+        className: "px-6 py-4",
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }, /*#__PURE__*/React.createElement("input", {
+        type: "checkbox",
+        className: "rounded border-gray-300",
+        checked: isSelected,
+        onChange: function onChange() {
+          return handleSelectRow(row, rowIndexInPage);
+        }
+      })), visibleColumns.map(function (column, columnIndex) {
+        var extraCellClass = typeof cellClass === "function" ? cellClass({
+          row: row,
+          rowIndex: globalIndex,
+          column: column,
+          columnIndex: columnIndex
+        }) : "";
+        var safeExtraCellClass = typeof extraCellClass === "string" ? extraCellClass.trim() : "";
+        return /*#__PURE__*/React.createElement("td", {
+          key: column.key,
+          className: cn$1("px-6 py-4 whitespace-nowrap text-sm text-gray-900", safeExtraCellClass)
+        }, renderCell(column, row, globalIndex));
+      }), /*#__PURE__*/React.createElement("td", {
+        className: "px-4 py-4"
+      }), withAction && /*#__PURE__*/React.createElement("td", {
+        className: "px-4 py-4 text-sm text-right",
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "relative inline-block"
+      }, /*#__PURE__*/React.createElement("button", {
+        ref: function ref(el) {
+          if (el) {
+            actionButtonRefs.current[actionCellKey] = el;
+          }
+        },
+        onClick: function onClick(e) {
+          return toggleActions(e, actionCellKey, row);
+        },
+        "aria-expanded": activeActionRowKey === actionCellKey,
+        className: "p-1 rounded hover:bg-gray-100",
+        title: "Actions"
+      }, /*#__PURE__*/React.createElement(MoreVertical, {
+        className: "h-4 w-4"
+      })), activeActionRowKey === actionCellKey && /*#__PURE__*/React.createElement(ActionMenu, {
+        actions: actionsToUse,
+        row: row,
+        onAction: function onAction(action) {
+          return handleOnAction(action, row);
+        },
+        menuRef: actionMenuRef,
+        anchorEl: activeAnchorEl,
+        onClose: closeActionMenu
+      })))), hasDetails && isExpanded && DetailsComponent && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+        colSpan: visibleCount,
+        className: "px-6 py-4 bg-gray-50"
+      }, /*#__PURE__*/React.createElement(DetailsComponent, {
+        row: row,
+        index: globalIndex
+      }))));
+    });
+  }, [paginatedData, startIndex, selectedRows, expandedRows, rowClass, stripedRows, stripedColors, onRowClick, hasDetails, showSerial, selectable, visibleColumns, cellClass, withAction, visibleCount, DetailsComponent, actionsToUse, activeActionRowKey, activeAnchorEl, toggleExpandRow, handleSelectRow, toggleActions, handleOnAction, closeActionMenu, renderCell]);
   return /*#__PURE__*/React.createElement("div", {
     className: "w-full border rounded-lg md:rounded-md bg-white"
   }, /*#__PURE__*/React.createElement("div", {
@@ -4619,7 +4805,7 @@ var Table = function Table(_ref2) {
     className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 w-full md:w-auto"
   }, /*#__PURE__*/React.createElement("div", {
     className: "text-sm text-gray-700 whitespace-nowrap"
-  }, filteredData.length === 0 ? 0 : startIndex + 1, " -", " ", Math.min(endIndex, filteredData.length), " of ", filteredData.length, " results"), pagination && /*#__PURE__*/React.createElement("div", {
+  }, filteredData.length === 0 ? 0 : startIndex + 1, " -", " ", Math.min(endIndex, filteredData.length), " of ", filteredData.length, " ", "results"), pagination && /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-1"
   }, totalPages >= 4 && /*#__PURE__*/React.createElement("button", {
     className: "rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50 hover:bg-gray-50",
@@ -4810,99 +4996,7 @@ var Table = function Table(_ref2) {
     className: "h-8 w-8"
   })), /*#__PURE__*/React.createElement("span", {
     className: "text-sm text-gray-500"
-  }, "No results found.")))) : paginatedData.map(function (row, rowIndexInPage) {
-    var globalIndex = startIndex + rowIndexInPage;
-    var key = getRowKey(row, globalIndex);
-    var actionCellKey = "actions-".concat(key);
-    var isSelected = selectedRows.has(key);
-    var isExpanded = expandedRows.has(key);
-    var extraRowClass = typeof rowClass === "function" ? rowClass({
-      row: row,
-      rowIndex: globalIndex
-    }) : "";
-    var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.trim() : "";
-    var stripeBg = stripedRows && !isSelected ? stripedColors[globalIndex % stripedColors.length] : undefined;
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: key
-    }, /*#__PURE__*/React.createElement("tr", {
-      style: stripeBg ? {
-        backgroundColor: stripeBg
-      } : undefined,
-      className: cn$1("hover:bg-gray-50", {
-        "cursor-pointer": !!onRowClick,
-        "bg-primary-50": isSelected
-      }, safeExtraRowClass),
-      onClick: function onClick() {
-        return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
-      }
-    }, hasDetails && /*#__PURE__*/React.createElement("td", {
-      className: "px-4 py-4 text-sm"
-    }, /*#__PURE__*/React.createElement("button", {
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        toggleExpandRow(row, rowIndexInPage);
-      },
-      "aria-expanded": isExpanded,
-      className: "p-1 rounded hover:bg-gray-100"
-    }, isExpanded ? "▾" : "▸")), showSerial && /*#__PURE__*/React.createElement("td", {
-      className: "px-4 py-4 whitespace-nowrap text-sm text-gray-900"
-    }, globalIndex + 1), selectable && /*#__PURE__*/React.createElement("td", {
-      className: "px-6 py-4",
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
-      className: "rounded border-gray-300",
-      checked: isSelected,
-      onChange: function onChange() {
-        return handleSelectRow(row, rowIndexInPage);
-      }
-    })), visibleColumns.map(function (column, columnIndex) {
-      var extraCellClass = typeof cellClass === "function" ? cellClass({
-        row: row,
-        rowIndex: globalIndex,
-        column: column,
-        columnIndex: columnIndex
-      }) : "";
-      var safeExtraCellClass = typeof extraCellClass === "string" ? extraCellClass.trim() : "";
-      return /*#__PURE__*/React.createElement("td", {
-        key: column.key,
-        className: cn$1("px-6 py-4 whitespace-nowrap text-sm text-gray-900", safeExtraCellClass)
-      }, renderCell(column, row, globalIndex));
-    }), /*#__PURE__*/React.createElement("td", {
-      className: "px-4 py-4"
-    }), withAction && /*#__PURE__*/React.createElement("td", {
-      className: "px-4 py-4 text-sm text-right",
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "relative inline-block"
-    }, /*#__PURE__*/React.createElement("button", {
-      onClick: function onClick(e) {
-        return toggleActions(e, actionCellKey, row);
-      },
-      "aria-expanded": (actionAnchor === null || actionAnchor === void 0 ? void 0 : actionAnchor.key) === actionCellKey,
-      className: "p-1 rounded hover:bg-gray-100",
-      title: "Actions"
-    }, /*#__PURE__*/React.createElement(MoreVertical, {
-      className: "h-4 w-4"
-    })), (actionAnchor === null || actionAnchor === void 0 ? void 0 : actionAnchor.key) === actionCellKey && /*#__PURE__*/React.createElement(ActionMenu, {
-      actions: actionsToUse,
-      row: row,
-      onAction: function onAction(action) {
-        return handleOnAction(action, row);
-      },
-      menuRef: actionMenuRef
-    })))), hasDetails && isExpanded && DetailsComponent && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      colSpan: visibleCount,
-      className: "px-6 py-4 bg-gray-50"
-    }, /*#__PURE__*/React.createElement(DetailsComponent, {
-      row: row,
-      index: globalIndex
-    }))));
-  })))), isMobileView && /*#__PURE__*/React.createElement("div", {
+  }, "No results found.")))) : renderDesktopTableRows()))), isMobileView && /*#__PURE__*/React.createElement("div", {
     className: "p-4"
   }, loading ? /*#__PURE__*/React.createElement("div", {
     className: "py-8 text-center"