@sproutsocial/seeds-react-menu 1.16.5 → 1.16.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.16.5",
+  "version": "1.16.7",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -36,18 +36,18 @@
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.1.2",
-    "@sproutsocial/seeds-react-box": "^1.1.24",
-    "@sproutsocial/seeds-react-button": "^2.2.4",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.45",
-    "@sproutsocial/seeds-react-icon": "^2.4.3",
-    "@sproutsocial/seeds-react-input": "^1.5.31",
-    "@sproutsocial/seeds-react-label": "^1.0.26",
-    "@sproutsocial/seeds-react-popout": "^2.5.12",
-    "@sproutsocial/seeds-react-radio": "^1.3.27",
-    "@sproutsocial/seeds-react-switch": "^1.2.43",
+    "@sproutsocial/seeds-react-box": "^1.1.25",
+    "@sproutsocial/seeds-react-button": "^2.2.5",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.46",
+    "@sproutsocial/seeds-react-icon": "^2.4.4",
+    "@sproutsocial/seeds-react-input": "^1.5.32",
+    "@sproutsocial/seeds-react-label": "^1.0.27",
+    "@sproutsocial/seeds-react-popout": "^2.5.13",
+    "@sproutsocial/seeds-react-radio": "^1.3.28",
+    "@sproutsocial/seeds-react-switch": "^1.2.44",
     "@sproutsocial/seeds-react-system-props": "^3.1.2",
-    "@sproutsocial/seeds-react-theme": "^4.2.0",
-    "@sproutsocial/seeds-react-token-input": "^1.4.53",
+    "@sproutsocial/seeds-react-theme": "^4.2.1",
+    "@sproutsocial/seeds-react-token-input": "^1.4.54",
     "@sproutsocial/seeds-react-utilities": "^4.3.0",
     "@base-ui/react": "^1.3.0",
     "@tanstack/react-virtual": "^3.13.12",
@@ -57,7 +57,7 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@sproutsocial/seeds-react-tooltip": "^1.1.30",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.31",
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/v3/ModalStories.stories.tsx

@@ -11,6 +11,12 @@ import {
   ModalBody,
   ModalFooter,
 } from "@sproutsocial/seeds-react-modal";
+import {
+  PeekIn,
+  PeekInHeader,
+  PeekInContent,
+  PeekInPanel,
+} from "@sproutsocial/seeds-react-peek-in";
 import { SingleSelect } from "./SingleSelect";
 import { MultiSelect } from "./MultiSelect";
 import { SingleCombobox } from "./SingleCombobox";
@@ -276,6 +282,112 @@ export const ActionMenuInV1Modal: Story = {
   },
 };
 
+export const ActionMenuInPeekIn: Story = {
+  name: "Action Menu in PeekIn",
+  render: () => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <>
+        <Button appearance="primary" onClick={() => setOpen(true)}>
+          Open PeekIn
+        </Button>
+        <PeekIn open={open} onOpenChange={setOpen} closeButtonAriaLabel="Close">
+          <PeekInHeader title="Actions">
+            <ActionMenu
+              trigger={<Button appearance="pill">More actions</Button>}
+            >
+              <MenuItem onClick={action("Edit")}>Edit</MenuItem>
+              <MenuItem onClick={action("Duplicate")}>Duplicate</MenuItem>
+              <MenuGroup label="Danger">
+                <MenuItem onClick={action("Delete")} disabled>
+                  Delete
+                </MenuItem>
+              </MenuGroup>
+            </ActionMenu>
+          </PeekInHeader>
+          <PeekInContent>
+            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+              <ActionMenu
+                trigger={<Button appearance="secondary">Basic Menu</Button>}
+              >
+                <MenuItem onClick={action("Compose")}>Compose</MenuItem>
+                <MenuItem onClick={action("View Messages")}>
+                  View Messages
+                </MenuItem>
+                <MenuItem onClick={action("Analyze post")}>
+                  Analyze post
+                </MenuItem>
+              </ActionMenu>
+
+              <ActionMenu
+                trigger={
+                  <Button appearance="secondary">Menu with Groups</Button>
+                }
+              >
+                <MenuGroup label="Actions" showSeparator>
+                  <MenuItem onClick={action("Edit")}>Edit</MenuItem>
+                  <MenuItem onClick={action("Duplicate")}>Duplicate</MenuItem>
+                </MenuGroup>
+                <MenuGroup label="Danger">
+                  <MenuItem onClick={action("Delete")} disabled>
+                    Delete
+                  </MenuItem>
+                </MenuGroup>
+              </ActionMenu>
+
+              <ActionMenu
+                trigger={
+                  <Button appearance="secondary">Menu with Submenu</Button>
+                }
+              >
+                <MenuItem onClick={action("Compose")}>Compose</MenuItem>
+                <MenuSub trigger={<MenuSubTrigger>Share</MenuSubTrigger>}>
+                  <MenuItem onClick={action("Share to Twitter")}>
+                    Twitter
+                  </MenuItem>
+                  <MenuItem onClick={action("Share to LinkedIn")}>
+                    LinkedIn
+                  </MenuItem>
+                  <MenuSub
+                    trigger={<MenuSubTrigger>More platforms</MenuSubTrigger>}
+                  >
+                    <MenuItem onClick={action("Share to Facebook")}>
+                      Facebook
+                    </MenuItem>
+                    <MenuItem onClick={action("Share to Instagram")}>
+                      Instagram
+                    </MenuItem>
+                  </MenuSub>
+                </MenuSub>
+                <MenuItem onClick={action("Delete")} disabled>
+                  Delete
+                </MenuItem>
+              </ActionMenu>
+            </div>
+          </PeekInContent>
+          <PeekInPanel title="Details">
+            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+              <ActionMenu
+                trigger={
+                  <Button appearance="secondary">Panel Action Menu</Button>
+                }
+              >
+                <MenuItem onClick={action("Pin")}>Pin</MenuItem>
+                <MenuItem onClick={action("Add to report")}>
+                  Add to report
+                </MenuItem>
+                <MenuGroup label="Danger" showSeparator>
+                  <MenuItem onClick={action("Remove")}>Remove</MenuItem>
+                </MenuGroup>
+              </ActionMenu>
+            </div>
+          </PeekInPanel>
+        </PeekIn>
+      </>
+    );
+  },
+};
+
 export const ActionMenuInModal: Story = {
   name: "Action Menu in V2 Modal",
   render: () => (

package/src/v3/SeedsPortal.tsx

@@ -8,6 +8,14 @@ import { DisablePortalToBodyContext } from "@sproutsocial/seeds-react-portal";
  * the popup stays inside the Radix Dialog's focus/pointer boundary.
  * Otherwise returns undefined, letting Base UI portal to document.body.
  *
+ * Module Federation note: when a remote chunk loads its own copy of
+ * seeds-react-portal, the context object identity differs from the host's
+ * copy, so DisablePortalToBodyContext will always read false in the remote
+ * even when a Modal/Drawer/PeekIn has provided true. As a fallback we walk
+ * the DOM from the containerRef anchor and treat any [role="dialog"] ancestor
+ * as an in-dialog boundary, matching the same behaviour the context would have
+ * triggered.
+ *
  * Usage:
  *   const { containerRef, portalContainer } = useSeedsPortalContainer();
  *   <div ref={containerRef} style={{ position: "relative" }} />
@@ -21,7 +29,17 @@ export function useSeedsPortalContainer() {
   >(undefined);
 
   React.useEffect(() => {
-    if (disablePortalToBody && containerRef.current) {
+    if (!containerRef.current) return;
+
+    // Primary signal: context set by Modal V2 / Drawer / PeekIn in the same
+    // module federation chunk.
+    const insideDialog =
+      disablePortalToBody ||
+      // Fallback for cross-chunk MFE scenarios where context identity differs:
+      // detect the dialog boundary directly from the DOM.
+      !!containerRef.current.closest("[role='dialog']");
+
+    if (insideDialog) {
       // Portal to the Radix Dialog content element so the popup escapes the
       // ModalBody scroll container while staying inside the Dialog boundary
       // (required for Radix focus/pointer-events containment).