@superdispatch/ui-lab 0.26.1 → 0.28.0

package/dist-node/index.js

@@ -1928,10 +1928,6 @@ var SidebarMenuItemBadge = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SidebarMenuItem__SidebarMenuItemBadge",
   componentId: "SD__sc-1sb5zqa-1"
 })(["font-size:12px;font-weight:500;line-height:16px;padding-left:4px;padding-right:4px;border-radius:100px;color:", ";background-color:", ";"], ui.Color.Dark500, ui.Color.Silver400);
-var SidebarMenuItemSecondaryAction = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "SidebarMenuItem__SidebarMenuItemSecondaryAction",
-  componentId: "SD__sc-1sb5zqa-2"
-})(["top:50%;right:24px;position:absolute;transform:translate3d(0,-50%,0);"]);
 var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
   var {
     action,
@@ -1947,19 +1943,12 @@ var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
   } = _ref2;
   var [hovered, setHovered] = react.useState(false);
   var rootRef = react.useRef(null);
-  var actionsRef = react.useRef(null);
-  var actionsPlaceholderRef = react.useRef(null);
   var {
     openSidebarContent
   } = useSidebarContext();
   var {
     matches: isHoverSupported
   } = matchMedia('(hover: hover)');
-  react.useLayoutEffect(() => {
-    if (actionsRef.current && actionsPlaceholderRef.current) {
-      actionsPlaceholderRef.current.style.width = "".concat(Math.max(0, actionsRef.current.offsetWidth - 8), "px");
-    }
-  });
   react.useLayoutEffect(() => {
     var rootNode = rootRef.current;
     if (rootNode) {
@@ -1976,10 +1965,10 @@ var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
     }
   }, [isHoverSupported]);
   var badge = !badgeProp || !Number.isFinite(badgeProp) ? null : badgeProp > 999 ? '999+' : badgeProp;
-  return /*#__PURE__*/jsxRuntime.jsxs(SidebarMenuItemRoot, {
+  return /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemRoot, {
     ref: ui.mergeRefs(ref, rootRef),
     hasAvatar: !!avatar,
-    children: [/*#__PURE__*/jsxRuntime.jsx(core.ButtonBase, {
+    children: /*#__PURE__*/jsxRuntime.jsx(core.ButtonBase, {
       disabled: disabled,
       "aria-current": selected,
       onClick: event => {
@@ -2024,24 +2013,19 @@ var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
               })
             })
           })
+        }), (!!action || !!secondaryActions) && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+          width: "content",
+          children: /*#__PURE__*/jsxRuntime.jsxs(ui.Inline, {
+            children: [(selected || hovered) && secondaryActions, action]
+          })
         }), !!badge && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
           width: "content",
           children: /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemBadge, {
             children: badge
           })
-        }), (!!action || !!secondaryActions) && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
-          width: "content",
-          children: /*#__PURE__*/jsxRuntime.jsx("div", {
-            ref: actionsPlaceholderRef
-          })
         })]
       })
-    }), (!!action || !!secondaryActions) && /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemSecondaryAction, {
-      ref: actionsRef,
-      children: /*#__PURE__*/jsxRuntime.jsxs(ui.Inline, {
-        children: [hovered && secondaryActions, action]
-      })
-    })]
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") SidebarMenuItem.displayName = "SidebarMenuItem";