@trops/dash-core 0.1.43 → 0.1.44

package/dist/index.js

@@ -14022,6 +14022,37 @@ var LayoutGridContainer = /*#__PURE__*/React.memo(function (_ref3) {
     return cells;
   }
 
+  // Hover-based popout overlay — avoids Tailwind named groups (requires v3.4+)
+  function PopoutOverlay(_ref6) {
+    var children = _ref6.children,
+      onPopout = _ref6.onPopout;
+    var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      hovered = _React$useState2[0],
+      setHovered = _React$useState2[1];
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "relative w-full h-full",
+      onMouseEnter: function onMouseEnter() {
+        return setHovered(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHovered(false);
+      },
+      children: [children, /*#__PURE__*/jsxRuntime.jsx("button", {
+        className: "absolute top-1 right-1 p-1 rounded transition-opacity bg-black/60 hover:bg-black/80 text-gray-300 hover:text-white z-10 ".concat(hovered ? "opacity-100" : "opacity-0 pointer-events-none"),
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          onPopout();
+        },
+        title: "Pop out widget",
+        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "arrow-up-right-from-square",
+          className: "h-3 w-3"
+        })
+      })]
+    });
+  }
+
   // Render component inside a grid cell (preview mode only)
   function renderCellComponent(componentId, cellNumber, selectableSet) {
     if (!layout || !workspace) {
@@ -14035,20 +14066,11 @@ var LayoutGridContainer = /*#__PURE__*/React.memo(function (_ref3) {
     }
     var rendered = renderComponent(cellComponent.component, cellComponent.id, cellComponent, null);
     if (onWidgetPopout && cellComponent.component) {
-      return /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "relative w-full h-full group/popout",
-        children: [rendered, /*#__PURE__*/jsxRuntime.jsx("button", {
-          className: "absolute top-1 right-1 p-1 rounded opacity-0 group-hover/popout:opacity-100 transition-opacity bg-black/60 hover:bg-black/80 text-gray-300 hover:text-white z-10",
-          onClick: function onClick(e) {
-            e.stopPropagation();
-            onWidgetPopout(cellComponent.id);
-          },
-          title: "Pop out widget",
-          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "arrow-up-right-from-square",
-            className: "h-3 w-3"
-          })
-        })]
+      return /*#__PURE__*/jsxRuntime.jsx(PopoutOverlay, {
+        onPopout: function onPopout() {
+          return onWidgetPopout(cellComponent.id);
+        },
+        children: rendered
       });
     }
     return rendered;