@sproutsocial/seeds-react-menu 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -23,7 +23,7 @@
     "@sproutsocial/seeds-react-icon": "^1.1.2",
     "@sproutsocial/seeds-react-input": "^1.4.2",
     "@sproutsocial/seeds-react-label": "^1.0.1",
-    "@sproutsocial/seeds-react-popout": "^2.2.0",
+    "@sproutsocial/seeds-react-popout": "^2.4.0",
     "@sproutsocial/seeds-react-radio": "^1.3.0",
     "@sproutsocial/seeds-react-switch": "^1.2.1",
     "@sproutsocial/seeds-react-system-props": "^3.0.2",

package/src/Menu.tsx

@@ -12,9 +12,13 @@ import { MenuRoot } from "./MenuRoot";
 import { MenuLabel } from "./MenuLabel";
 import { MenuToggleButton } from "./MenuToggleButton";
 import { MenuSearchInput } from "./MenuSearchInput";
+/** Not intended for individual use; use AutocompleteTokenInput or  MenuSearchTokenInput instead */
 import { MenuTokenInput } from "./MenuTokenInput";
 import { MenuSearchTokenInput } from "./MenuSearchTokenInput";
 import { SubmenuItem } from "./SubmenuItem";
+import { ListboxToggleButton } from "./ListboxToggleButton";
+import { AutocompleteInput } from "./Autocomplete/AutocompleteInput";
+import { AutocompleteTokenInput } from "./Autocomplete/AutocompleteTokenInput";
 
 // Menus
 import { ActionMenu } from "./ActionMenu";
@@ -40,10 +44,12 @@ export {
   MenuTokenInput,
   MenuSearchTokenInput,
   SubmenuItem,
+  ListboxToggleButton,
+  AutocompleteInput,
+  AutocompleteTokenInput,
   ActionMenu,
   SingleSelectMenu,
   MultiSelectMenu,
-  Autocomplete,
   SingleAutocomplete,
   MultiAutocomplete,
   NestedMenu,

package/src/MenuGroup/MenuGroupTypes.ts

@@ -8,7 +8,6 @@ import type {
   TypeSpaceSystemProps,
   TypeTypographySystemProps,
 } from "@sproutsocial/seeds-react-system-props";
-import type { TypeMenuRootProps } from "../MenuRoot";
 import type { TypeMenuItemProps } from "../MenuItem";
 import type { TypeChildrenOrItems } from "../types";
 

package/src/MenuRoot/MenuRoot.tsx

@@ -5,7 +5,11 @@ import React, {
   type RefObject,
 } from "react";
 import styled from "styled-components";
-import { Popout, type TypePopoutProps } from "@sproutsocial/seeds-react-popout";
+import {
+  Popout,
+  type TypePopoutProps,
+  type EnumPlacements,
+} from "@sproutsocial/seeds-react-popout";
 import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
 
 import {
@@ -42,35 +46,59 @@ export const CustomPopoutContent = styled(Popout.Content)`
   overflow: hidden;
 `;
 
-const menuAnimationConfig = {
+export const menuPlacementOrigin: {
+  [key in EnumPlacements]?: { originX: number; originY: number };
+} = {
+  top: { originX: 0.5, originY: 1 },
+  ["top-start"]: { originX: 0, originY: 1 },
+  ["top-end"]: { originX: 1, originY: 1 },
+  bottom: { originX: 0.5, originY: 0 },
+  ["bottom-start"]: { originX: 0, originY: 0 },
+  ["bottom-end"]: { originX: 1, originY: 0 },
+  left: { originX: 1, originY: 0.5 },
+  ["left-start"]: { originX: 1, originY: 0 },
+  ["left-end"]: { originX: 1, originY: 1 },
+  right: { originX: 0, originY: 0.5 },
+  ["right-start"]: { originX: 0, originY: 0 },
+  ["right-end"]: { originX: 0, originY: 1 },
+};
+
+export const menuAnimationConfig = {
   layout: true,
-  initial: {
-    scale: 0,
-    opacity: 0,
-    originX: 0,
-    originY: 0,
-  },
-  animate: {
-    opacity: 1,
-    scale: 1,
-    originX: 0,
-    originY: 0,
-
-    transition: {
-      type: "tween",
-      duration: MOTION_DURATION_FAST,
-      ease: "circOut",
-    },
-  },
-  exit: {
-    opacity: 0,
-    scale: 1,
-    transition: {
-      type: "tween",
-      duration: MOTION_DURATION_FAST,
-      ease: "circIn",
+  variants: {
+    initial: (
+      custom: { placement: EnumPlacements } = { placement: "bottom" }
+    ) => ({
+      ...menuPlacementOrigin[custom.placement],
+      scale: 0,
+      opacity: 0,
+    }),
+    animate: (
+      custom: { placement: EnumPlacements } = { placement: "bottom" }
+    ) => ({
+      ...menuPlacementOrigin[custom.placement],
+      opacity: 1,
+      scale: 1,
+
+      transition: {
+        type: "tween",
+        duration: MOTION_DURATION_FAST,
+        ease: "circOut",
+      },
+    }),
+    exit: {
+      opacity: 0,
+      scale: 1,
+      transition: {
+        type: "tween",
+        duration: MOTION_DURATION_FAST,
+        ease: "circIn",
+      },
     },
   },
+  initial: "initial",
+  animate: "animate",
+  exit: "exit",
 };
 
 export interface TypeMenuPopoutProps

package/src/MenuRoot/__tests__/MenuRoot.test.tsx

@@ -19,6 +19,7 @@ import {
   MenuGroup,
   type TypeMenuContextProps,
 } from "../../index";
+import { menuPlacementOrigin } from "../MenuRoot";
 import { testDefaultContext } from "../../menuTestingUtils";
 
 jest.mock("@sproutsocial/seeds-react-portal", () => ({ children }) => (
@@ -402,3 +403,39 @@ describe("MenuRoot", () => {
     }
   );
 });
+
+describe("MenuPopout", () => {
+  describe("originX and originY mapping", () => {
+    const placements = Object.keys(menuPlacementOrigin);
+
+    placements.forEach((placement) => {
+      it(`maps placement "${placement}" to correct originX and originY`, () => {
+        const expected = menuPlacementOrigin[placement];
+        expect(expected).toBeDefined();
+        // Check the expected values directly
+        switch (placement) {
+          case "top":
+            expect(expected.originX).toBe(0.5);
+            expect(expected.originY).toBe(1);
+            break;
+          case "bottom":
+            expect(expected.originX).toBe(0.5);
+            expect(expected.originY).toBe(0);
+            break;
+          case "left":
+            expect(expected.originX).toBe(1);
+            expect(expected.originY).toBe(0.5);
+            break;
+          case "right":
+            expect(expected.originX).toBe(0);
+            expect(expected.originY).toBe(0.5);
+            break;
+          // Add more cases as needed
+          default:
+            // If you add more placements, specify their expected values here
+            break;
+        }
+      });
+    });
+  });
+});

package/src/NestedMenu/NestedMenu.stories.tsx

@@ -185,9 +185,6 @@ export const NestedMenuMultiLevelStory: Story = {
             menuToggleElement={
               <MenuToggleButton width="200px">Open Menu</MenuToggleButton>
             }
-            popoutProps={{
-              placement: "top",
-            }}
           />
         </Box>
       </MotionConfig>

package/src/NestedMenu/NestedMenuPopout.tsx

@@ -26,8 +26,7 @@ export const NestedMenuPopout = ({
 
   return (
     <MenuPopout
-      // TODO: add after prop is added to Popout
-      // lockPlacement
+      lockPlacement
       // Reset the selected menu path after the close animation completes
       onClose={() => {
         onClose?.();