@sproutsocial/seeds-react-menu 1.4.1 → 1.5.0

package/.turbo/turbo-build.log

@@ -84,14 +84,14 @@ ESM Build start
          ╵       ~~~~~~~~~
 
 
-CJS dist/index.js     143.00 KB
-CJS dist/index.js.map 369.68 KB
-CJS ⚡️ Build success in 665ms
-ESM dist/esm/index.js     133.33 KB
-ESM dist/esm/index.js.map 368.41 KB
-ESM ⚡️ Build success in 668ms
+CJS dist/index.js     143.93 KB
+CJS dist/index.js.map 371.38 KB
+CJS ⚡️ Build success in 697ms
+ESM dist/esm/index.js     134.17 KB
+ESM dist/esm/index.js.map 370.11 KB
+ESM ⚡️ Build success in 700ms
 DTS Build start
-DTS ⚡️ Build success in 11765ms
-DTS dist/index.d.ts  37.42 KB
-DTS dist/index.d.mts 37.42 KB
-Done in 15.66s.
+DTS ⚡️ Build success in 12460ms
+DTS dist/index.d.ts  38.55 KB
+DTS dist/index.d.mts 38.55 KB
+Done in 16.02s.

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @sproutsocial/seeds-react-menu
 
+## 1.5.0
+
+### Minor Changes
+
+- d79bdc9: [DS-3494] 
+  - Fix motion origin for Menu based on placement, passed to the motion.div custom prop in the Popout component
+  - Updated NestedMenu to use the Popout lockPlacement so it does not jump while switching panels
+
+### Patch Changes
+
+- Updated dependencies [d79bdc9]
+  - @sproutsocial/seeds-react-popout@2.4.0
+
 ## 1.4.1
 
 ### Patch Changes

package/dist/esm/index.js

@@ -2583,7 +2583,9 @@ import React7, {
   useLayoutEffect
 } from "react";
 import styled8 from "styled-components";
-import { Popout } from "@sproutsocial/seeds-react-popout";
+import {
+  Popout
+} from "@sproutsocial/seeds-react-popout";
 import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
 
 // ../../seeds-design-tokens/seeds-motion/dist/seeds-motion-unitless.esm.js
@@ -2597,34 +2599,51 @@ var CustomPopoutContent = styled8(Popout.Content)`
   margin-right: 0;
   overflow: hidden;
 `;
+var menuPlacementOrigin = {
+  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 }
+};
 var 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"
+  variants: {
+    initial: (custom = { placement: "bottom" }) => ({
+      ...menuPlacementOrigin[custom.placement],
+      scale: 0,
+      opacity: 0
+    }),
+    animate: (custom = { 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"
+      }
     }
   },
-  exit: {
-    opacity: 0,
-    scale: 1,
-    transition: {
-      type: "tween",
-      duration: MOTION_DURATION_FAST,
-      ease: "circIn"
-    }
-  }
+  initial: "initial",
+  animate: "animate",
+  exit: "exit"
 };
 var MenuPopout = ({
   content,
@@ -4197,6 +4216,7 @@ var NestedMenuPopout = ({
   return /* @__PURE__ */ jsx33(
     MenuPopout,
     {
+      lockPlacement: true,
       onClose: () => {
         onClose?.();
         setTimeout(() => resetSelectedMenuPath?.(), 100);
@@ -4505,6 +4525,8 @@ export {
   getChildrenFromMenuItems,
   getSelectedItemIds,
   mapMenuItems,
+  menuAnimationConfig,
+  menuPlacementOrigin,
   useMenu,
   useMenuChildren,
   useMenuContentContext,