@sproutsocial/seeds-react-menu 1.16.5 → 1.16.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.16.5",
+  "version": "1.16.6",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

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).