@sproutsocial/seeds-react-menu 1.8.3 → 1.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.8.3",
+  "version": "1.8.5",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "@sproutsocial/seeds-react-icon": "^2.2.4",
     "@sproutsocial/seeds-react-input": "^1.5.4",
     "@sproutsocial/seeds-react-label": "^1.0.13",
-    "@sproutsocial/seeds-react-popout": "^2.4.24",
+    "@sproutsocial/seeds-react-popout": "^2.4.25",
     "@sproutsocial/seeds-react-radio": "^1.3.12",
     "@sproutsocial/seeds-react-switch": "^1.2.21",
     "@sproutsocial/seeds-react-system-props": "^3.0.2",
@@ -51,7 +51,7 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@sproutsocial/seeds-react-tooltip": "^1.1.6",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.7",
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/MenuItem/MenuItem.tsx

@@ -59,6 +59,7 @@ const MenuItem = ({
         })}
         // use anchor tag if href is provided and button for menuitem
         as={isListbox ? undefined : href ? "a" : "button"}
+        type={href ? undefined : "button"}
         href={href}
         children={children}
         // Keyboard nav uses the arrow keys, not tab.

package/src/MenuItem/__tests__/MenuItem.test.tsx

@@ -321,6 +321,82 @@ const testByType = {
   },
 };
 
+describe("MenuItem type attribute", () => {
+  it('renders with type="button" when used as a menuitem (not listbox)', () => {
+    render(
+      <ActionMenu menuToggleElement={testMenuToggleElement} isOpen>
+        <MenuContent>
+          <MenuItem {...menuItemProps} />
+        </MenuContent>
+      </ActionMenu>
+    );
+
+    const menuItem = screen.getByRole("menuitem");
+    expect(menuItem).toHaveAttribute("type", "button");
+  });
+
+  it('renders with type="button" when used as a listbox option', () => {
+    const testItem = books[0];
+    render(
+      <TestWithMockedMenu context={{ items: books, isListbox: true }}>
+        <MenuItem id={testItem.id}>{testItem.title}</MenuItem>
+      </TestWithMockedMenu>
+    );
+
+    const option = screen.getByRole("option");
+    expect(option).toHaveAttribute("type", "button");
+  });
+
+  it("does not trigger form submission when clicked inside a form", async () => {
+    const handleSubmit = jest.fn((e: React.FormEvent) => e.preventDefault());
+
+    const { user } = render(
+      <form onSubmit={handleSubmit}>
+        <ActionMenu menuToggleElement={testMenuToggleElement} isOpen>
+          <MenuContent>
+            <MenuItem {...menuItemProps} />
+          </MenuContent>
+        </ActionMenu>
+      </form>
+    );
+
+    const menuItem = screen.getByRole("menuitem");
+    await user
+      .setup({ pointerEventsCheck: PointerEventsCheckLevel.Never })
+      .click(menuItem);
+
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+
+  it("does not trigger form submission when listbox option clicked inside a form", async () => {
+    const handleSubmit = jest.fn((e: React.FormEvent) => e.preventDefault());
+
+    const { user } = render(
+      <form onSubmit={handleSubmit}>
+        <MultiSelectMenu
+          menuToggleElement={<MenuToggleButton>Open</MenuToggleButton>}
+          defaultIsOpen
+        >
+          <MenuContent>
+            {books.map((book) => (
+              <MenuItem key={book.id} id={book.id}>
+                {book.title}
+              </MenuItem>
+            ))}
+          </MenuContent>
+        </MultiSelectMenu>
+      </form>
+    );
+
+    const firstOption = screen.getByRole("option", { name: books[0].title });
+    await user
+      .setup({ pointerEventsCheck: PointerEventsCheckLevel.Never })
+      .click(firstOption);
+
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+});
+
 describe("MenuItem when isListbox", () => {
   describe("User Behavior", () => {
     describe.each([

package/src/v2/Common-V2/Popout.tsx

@@ -46,6 +46,8 @@ export function Popout({
   onOpenAutoFocus,
   onEscapeKeyDown,
   onCloseAutoFocus,
+  onPointerDownOutside,
+  onInteractOutside,
   ...rest
 }: TypePopoutProps) {
   const [isOpen, setIsOpen] = React.useState(defaultOpen ?? false);
@@ -90,6 +92,8 @@ export function Popout({
           onOpenAutoFocus={onOpenAutoFocus}
           onEscapeKeyDown={onEscapeKeyDown}
           onCloseAutoFocus={onCloseAutoFocus}
+          onPointerDownOutside={onPointerDownOutside}
+          onInteractOutside={onInteractOutside}
           // This only needs added to Popouts used in Menus
           // those do not need the dialog role which radix applies automatically
           role="presentation"

package/src/v2/Common-V2/PopoutTypes.tsx

@@ -89,4 +89,21 @@ export interface TypePopoutProps
    * Can be used to prevent the default focus return behavior or customize it.
    */
   onCloseAutoFocus?: (event: Event) => void;
+
+  /**
+   * Event handler called when a pointer down event occurs outside the popout content.
+   * Call `event.preventDefault()` to prevent the default dismiss behavior.
+   * Useful when the Popout is nested inside a Radix Dialog (e.g. ModalV2) to
+   * avoid conflicts between nested DismissableLayer instances.
+   */
+  onPointerDownOutside?: (
+    event: CustomEvent<{ originalEvent: PointerEvent }>
+  ) => void;
+
+  /**
+   * Event handler called when an interaction (pointer or focus) occurs outside
+   * the popout content. Call `event.preventDefault()` to prevent the popout
+   * from closing.
+   */
+  onInteractOutside?: (event: CustomEvent<{ originalEvent: Event }>) => void;
 }