npm - @sproutsocial/seeds-react-menu - Versions diffs - 1.18.3 → 1.18.4 - Mend

@sproutsocial/seeds-react-menu 1.18.3 → 1.18.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/.turbo/turbo-build.log +8 -8
package/CHANGELOG.md +21 -0
package/dist/esm/index.js +41 -11
package/dist/esm/index.js.map +1 -1
package/dist/index.js +33 -3
package/dist/index.js.map +1 -1
package/package.json +13 -13
package/src/NestedMenu/NestedMenuPopout.tsx +57 -4
package/src/v3/ModalStories.stories.tsx +5 -125
package/src/v3/MultiCombobox.stories.tsx +5 -9

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.18.3",
+  "version": "1.18.4",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -35,18 +35,18 @@
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.1.2",
-    "@sproutsocial/seeds-react-box": "^1.1.33",
-    "@sproutsocial/seeds-react-button": "^2.3.10",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.56",
-    "@sproutsocial/seeds-react-icon": "^2.5.3",
-    "@sproutsocial/seeds-react-input": "^1.5.44",
-    "@sproutsocial/seeds-react-label": "^1.0.35",
-    "@sproutsocial/seeds-react-popout": "^2.5.25",
-    "@sproutsocial/seeds-react-radio": "^1.3.36",
-    "@sproutsocial/seeds-react-switch": "^1.2.53",
+    "@sproutsocial/seeds-react-box": "^1.1.34",
+    "@sproutsocial/seeds-react-button": "^2.3.11",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.57",
+    "@sproutsocial/seeds-react-icon": "^2.5.4",
+    "@sproutsocial/seeds-react-input": "^1.5.45",
+    "@sproutsocial/seeds-react-label": "^1.0.36",
+    "@sproutsocial/seeds-react-popout": "^2.5.26",
+    "@sproutsocial/seeds-react-radio": "^1.3.37",
+    "@sproutsocial/seeds-react-switch": "^1.2.54",
     "@sproutsocial/seeds-react-system-props": "^3.2.1",
-    "@sproutsocial/seeds-react-theme": "^4.6.0",
-    "@sproutsocial/seeds-react-token-input": "^1.4.66",
+    "@sproutsocial/seeds-react-theme": "^4.7.0",
+    "@sproutsocial/seeds-react-token-input": "^1.4.67",
     "@sproutsocial/seeds-react-utilities": "^4.3.0",
     "@base-ui/react": "^1.3.0",
     "@tanstack/react-virtual": "^3.13.12",
@@ -56,7 +56,7 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@sproutsocial/seeds-react-tooltip": "^1.1.40",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.41",
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/NestedMenu/NestedMenuPopout.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type RefObject } from "react";
+import { type RefObject, useEffect, useRef } from "react";
 import { useNestedMenuContext } from "./NestedMenuContext";
 import {
   MenuPopout,
@@ -14,6 +14,13 @@ const StyledDiv = styled(motion.div)`
   overflow: hidden;
 `;
+/** How long to wait after closing before returning focus to the toggle. */
+const RETURN_FOCUS_DELAY = 200;
+/** How long to wait before retrying an attempt that was undone. */
+const RETURN_FOCUS_RETRY_DELAY = 50;
+/** Upper bound on retrying, so an unfocusable toggle cannot retry forever. */
+const RETURN_FOCUS_BUDGET = 1000;
 export const NestedMenuPopout = ({
   content,
   menuToggleElement,
@@ -29,6 +36,52 @@ export const NestedMenuPopout = ({
   const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } =
     useNestedMenuContext();
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout>>();
+  const retryTimerRef = useRef<ReturnType<typeof setTimeout>>();
+  useEffect(
+    () => () => {
+      clearTimeout(closeTimerRef.current);
+      clearTimeout(retryTimerRef.current);
+    },
+    []
+  );
+  /**
+   * Move focus back to the toggle, retrying until it takes effect.
+   *
+   * The popout's focus lock stays mounted for the length of the close
+   * animation, and while it is mounted it traps focus: a focus() call landing
+   * outside the menu is immediately pulled back in. On a slow machine the
+   * first attempt can fall inside that window, and once the lock unmounts
+   * focus is left on <body> with nothing to restore it. Retrying covers that
+   * instead of lengthening the initial delay, which can only ever guess at how
+   * long the animation took.
+   *
+   * An attempt that takes effect stops the retries, so this never keeps
+   * pulling focus back from somewhere the user deliberately moved it.
+   */
+  const attemptReturnFocus = (deadline: number) => {
+    const toggleElement = toggleElementRef.current;
+    if (toggleElement) {
+      if (document.activeElement === toggleElement) {
+        return;
+      }
+      toggleElement.focus();
+      if (document.activeElement === toggleElement) {
+        return;
+      }
+    }
+    if (Date.now() < deadline) {
+      retryTimerRef.current = setTimeout(
+        () => attemptReturnFocus(deadline),
+        RETURN_FOCUS_RETRY_DELAY
+      );
+    }
+  };
   return (
     <MenuPopout
       lockPlacement
@@ -36,10 +89,10 @@ export const NestedMenuPopout = ({
       onClose={() => {
         onClose?.();
         // Manually focus the toggle element and then reset state
-        setTimeout(() => {
-          toggleElementRef.current?.focus();
+        closeTimerRef.current = setTimeout(() => {
+          attemptReturnFocus(Date.now() + RETURN_FOCUS_BUDGET);
           resetSelectedMenuPath?.();
-        }, 200);
+        }, RETURN_FOCUS_DELAY);
       }}
       isOpen={!!rootMenuContextProps.isOpen}
       openMenu={rootMenuContextProps.openMenu}

package/src/v3/ModalStories.stories.tsx CHANGED Viewed

@@ -5,12 +5,7 @@ import { FormField } from "@sproutsocial/seeds-react-form-field";
 import { Button } from "@sproutsocial/seeds-react-button";
 import { Input } from "@sproutsocial/seeds-react-input";
 import { TokenInput } from "@sproutsocial/seeds-react-token-input";
-import {
-  Modal as ModalV1,
-  ModalV2,
-  ModalBody,
-  ModalFooter,
-} from "@sproutsocial/seeds-react-modal";
+import { Modal, ModalBody, ModalFooter } from "@sproutsocial/seeds-react-modal";
 import {
   PeekIn,
   PeekInHeader,
@@ -146,40 +141,11 @@ type Story = StoryObj;
 // ─── Stories ──────────────────────────────────────────────────────────────────
-export const V1Modal: Story = {
-  name: "V1 Modal",
-  render: () => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    return (
-      <>
-        <Button appearance="primary" onClick={() => setIsOpen(true)}>
-          Open V1 Modal
-        </Button>
-        <ModalV1
-          appElementSelector="#root"
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          closeButtonLabel="Close"
-          label="V1 Modal"
-        >
-          <ModalV1.Header title="" subtitle="" bordered>
-            V1 modal
-          </ModalV1.Header>
-          <ModalV1.Content>
-            <AllComponents />
-          </ModalV1.Content>
-          <ModalV1.Footer>Footer</ModalV1.Footer>
-        </ModalV1>
-      </>
-    );
-  },
-};
 export const V2Modal: Story = {
   name: "V2 Modal",
   render: () => (
     <>
-      <ModalV2
+      <Modal
         title="Pick some books"
         modalTrigger={<Button appearance="primary">Open V2 Modal</Button>}
         closeButtonAriaLabel="Close"
@@ -188,7 +154,7 @@ export const V2Modal: Story = {
           <AllComponents />
         </ModalBody>
         <ModalFooter cancelButton={<Button>Cancel</Button>} />
-      </ModalV2>
+      </Modal>
       <AllComponents />
     </>
   ),
@@ -196,92 +162,6 @@ export const V2Modal: Story = {
 // ─── Action Menu in Modal ─────────────────────────────────────────────────────
-export const ActionMenuInV1Modal: Story = {
-  name: "Action Menu in V1 Modal",
-  render: () => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    return (
-      <>
-        <Button appearance="primary" onClick={() => setIsOpen(true)}>
-          Open V1 Modal
-        </Button>
-        <ModalV1
-          appElementSelector="#root"
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          closeButtonLabel="Close"
-          label="Action Menu in V1 Modal"
-        >
-          <ModalV1.Header title="" subtitle="" bordered>
-            Actions
-          </ModalV1.Header>
-          <ModalV1.Content>
-            <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>
-          </ModalV1.Content>
-          <ModalV1.Footer>Footer</ModalV1.Footer>
-        </ModalV1>
-      </>
-    );
-  },
-};
 export const ActionMenuInPeekIn: Story = {
   name: "Action Menu in PeekIn",
   render: () => {
@@ -391,7 +271,7 @@ export const ActionMenuInPeekIn: Story = {
 export const ActionMenuInModal: Story = {
   name: "Action Menu in V2 Modal",
   render: () => (
-    <ModalV2
+    <Modal
       title="Actions"
       modalTrigger={<Button appearance="primary">Open Modal</Button>}
       closeButtonAriaLabel="Close"
@@ -447,6 +327,6 @@ export const ActionMenuInModal: Story = {
         </div>
       </ModalBody>
       <ModalFooter cancelButton={<Button>Close</Button>} />
-    </ModalV2>
+    </Modal>
   ),
 };

package/src/v3/MultiCombobox.stories.tsx CHANGED Viewed

@@ -2,11 +2,7 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
 import { Button } from "@sproutsocial/seeds-react-button";
-import {
-  ModalV2,
-  ModalBody,
-  ModalFooter,
-} from "@sproutsocial/seeds-react-modal";
+import { Modal, ModalBody, ModalFooter } from "@sproutsocial/seeds-react-modal";
 import { MultiCombobox } from "./MultiCombobox";
 import {
   books,
@@ -570,7 +566,7 @@ export const Required: Story = {
 export const LargeBookSetWithMaxTokensInModal: Story = {
   name: "Large book set with max tokens (in modal)",
   render: () => (
-    <ModalV2
+    <Modal
       title="Pick some books"
       modalTrigger={<Button appearance="primary">Open Modal</Button>}
       closeButtonAriaLabel="Close"
@@ -594,7 +590,7 @@ export const LargeBookSetWithMaxTokensInModal: Story = {
         </div>
       </ModalBody>
       <ModalFooter cancelButton={<Button>Cancel</Button>} />
-    </ModalV2>
+    </Modal>
   ),
 };
@@ -605,7 +601,7 @@ export const LargeBookSetWithMaxTokensInModal: Story = {
 export const EscapeKeyInModal: Story = {
   name: "Escape Key in Modal (a11y)",
   render: () => (
-    <ModalV2
+    <Modal
       title="Pick some books"
       modalTrigger={<Button appearance="primary">Open Modal</Button>}
       closeButtonAriaLabel="Close"
@@ -631,6 +627,6 @@ export const EscapeKeyInModal: Story = {
         </div>
       </ModalBody>
       <ModalFooter cancelButton={<Button>Cancel</Button>} />
-    </ModalV2>
+    </Modal>
   ),
 };