@sproutsocial/seeds-react-menu 1.4.0 → 1.5.0

package/dist/index.d.mts

@@ -7,7 +7,7 @@ import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 export { TypeBoxProps as TypeMenuFooterProps } from '@sproutsocial/seeds-react-box';
 import * as React$1 from 'react';
 import React__default from 'react';
-import { TypePopoutProps } from '@sproutsocial/seeds-react-popout';
+import { TypePopoutProps, EnumPlacements } from '@sproutsocial/seeds-react-popout';
 import { TypeTokenInputProps, TypeTokenSpec } from '@sproutsocial/seeds-react-token-input';
 import * as _sproutsocial_seeds_react_text from '@sproutsocial/seeds-react-text';
 import { TypeLabelProps } from '@sproutsocial/seeds-react-label';
@@ -198,6 +198,50 @@ declare const CustomPopoutContent: styled_components.StyledComponent<{
     ({ children, ...rest }: _sproutsocial_seeds_react_box.TypeBoxProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 }, styled_components.DefaultTheme, {}, never>;
+declare const menuPlacementOrigin: {
+    [key in EnumPlacements]?: {
+        originX: number;
+        originY: number;
+    };
+};
+declare const menuAnimationConfig: {
+    layout: boolean;
+    variants: {
+        initial: (custom?: {
+            placement: EnumPlacements;
+        }) => {
+            scale: number;
+            opacity: number;
+            originX?: number | undefined;
+            originY?: number | undefined;
+        };
+        animate: (custom?: {
+            placement: EnumPlacements;
+        }) => {
+            opacity: number;
+            scale: number;
+            transition: {
+                type: string;
+                duration: number;
+                ease: string;
+            };
+            originX?: number | undefined;
+            originY?: number | undefined;
+        };
+        exit: {
+            opacity: number;
+            scale: number;
+            transition: {
+                type: string;
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    initial: string;
+    animate: string;
+    exit: string;
+};
 interface TypeMenuPopoutProps extends Pick<Partial<TypeMenuContextProps>, "openMenu" | "closeMenu">, TypePopoutProps {
 }
 declare const MenuPopout: ({ content, width, isOpen, openMenu, closeMenu, focusLockProps, ...popoutProps }: TypeMenuPopoutProps) => react_jsx_runtime.JSX.Element;
@@ -619,4 +663,4 @@ declare const useMenuChildren: <I extends TypeMenuItemProps = TypeMenuItemProps>
 declare const useSelectStateReducer: Required<UseSelectProps<TypeInternalItemProps>>["stateReducer"];
 declare const useSelectStateReducerForMulti: Required<UseSelectProps<TypeInternalItemProps>>["stateReducer"];
 
-export { ActionMenu, Autocomplete, AutocompleteInput, AutocompleteSelect, AutocompleteTokenInput, CustomPopoutContent, INPUT_TYPES, type InputType, ListboxToggleButton, MenuContent, MenuContentContext, MenuContentProvider, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemAction, MenuItemActionLeft, MenuItemActionRight, MenuItemContainer, MenuItemRow, MenuItemText, MenuLabel, MenuPopout, MenuRoot, MenuSearchInput, MenuSearchTokenInput, MenuToggleButton, MenuToggleContext, MenuToggleProvider, MenuTokenInput, MultiSelectMenu, NestedMenu, NestedMenuContent, NestedMenuContext, NestedMenuHeader, NestedMenuItem, NestedMenuProvider, SingleSelectMenu, StyledListboxToggleButton, StyledMenuGroup, StyledMenuGroupUl, StyledMenuItem, StyledTitle, SubmenuItem, type TypeActionMenuBaseProps, type TypeActionMenuProps, type TypeAutocompleteInputProps, type TypeAutocompleteProps, type TypeAutocompleteTokenInputProps, type TypeBaseAutocompleteProps, type TypeChildrenOrItems, type TypeDownshiftComboboxProps, type TypeDownshiftComboboxReturnValue, type TypeDownshiftMergedInputProps, type TypeDownshiftMultiSelectProps, type TypeDownshiftMultiSelectReturnValue, type TypeDownshiftSelectProps, type TypeDownshiftSelectReturnValue, type TypeHigherOrderComponentProps, type TypeInternalItemProps, type TypeItemElement, type TypeListboxToggleButtonProps, type TypeMapMenuItemsProps, type TypeMenuChildren, type TypeMenuContentElement, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextBaseProps, type TypeMenuContextProps, type TypeMenuGroupBaseProps, type TypeMenuGroupElement, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemStyledProps, type TypeMenuLabelProps, type TypeMenuPopoutProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuSearchInputProps, type TypeMenuSearchTokenInputProps, type TypeMenuToggleButtonProps, type TypeMenuToggleContext, type TypeMenuToggleProviderProps, type TypeMenuTokenInputProps, type TypeMultiAutocompleteProps, type TypeMultiSelectMenuBaseProps, type TypeMultiSelectMenuProps, type TypeNestedMenuContext, type TypeNestedMenuHeaderProps, type TypeNestedMenuItemProps, type TypeNestedMenuMapProps, type TypeNestedMenuProps, type TypeNestedMenuProviderProps, type TypeNotEmptyChildren, type TypeSingleAutocompleteProps, type TypeSingleSelectMenuBaseProps, type TypeSingleSelectMenuProps, type TypeStyledChevronProps, type TypeSubmenuItemProps, type TypeSubmenuValidMenuComponentProps, checkIfItemSelected, defaultMenuContext, getChildrenFromMenuItems, getSelectedItemIds, mapMenuItems, useMenu, useMenuChildren, useMenuContentContext, useMenuToggleContext, useNestedMenuContext, useSelectStateReducer, useSelectStateReducerForMulti };
+export { ActionMenu, Autocomplete, AutocompleteInput, AutocompleteSelect, AutocompleteTokenInput, CustomPopoutContent, INPUT_TYPES, type InputType, ListboxToggleButton, MenuContent, MenuContentContext, MenuContentProvider, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemAction, MenuItemActionLeft, MenuItemActionRight, MenuItemContainer, MenuItemRow, MenuItemText, MenuLabel, MenuPopout, MenuRoot, MenuSearchInput, MenuSearchTokenInput, MenuToggleButton, MenuToggleContext, MenuToggleProvider, MenuTokenInput, MultiSelectMenu, NestedMenu, NestedMenuContent, NestedMenuContext, NestedMenuHeader, NestedMenuItem, NestedMenuProvider, SingleSelectMenu, StyledListboxToggleButton, StyledMenuGroup, StyledMenuGroupUl, StyledMenuItem, StyledTitle, SubmenuItem, type TypeActionMenuBaseProps, type TypeActionMenuProps, type TypeAutocompleteInputProps, type TypeAutocompleteProps, type TypeAutocompleteTokenInputProps, type TypeBaseAutocompleteProps, type TypeChildrenOrItems, type TypeDownshiftComboboxProps, type TypeDownshiftComboboxReturnValue, type TypeDownshiftMergedInputProps, type TypeDownshiftMultiSelectProps, type TypeDownshiftMultiSelectReturnValue, type TypeDownshiftSelectProps, type TypeDownshiftSelectReturnValue, type TypeHigherOrderComponentProps, type TypeInternalItemProps, type TypeItemElement, type TypeListboxToggleButtonProps, type TypeMapMenuItemsProps, type TypeMenuChildren, type TypeMenuContentElement, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextBaseProps, type TypeMenuContextProps, type TypeMenuGroupBaseProps, type TypeMenuGroupElement, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemStyledProps, type TypeMenuLabelProps, type TypeMenuPopoutProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuSearchInputProps, type TypeMenuSearchTokenInputProps, type TypeMenuToggleButtonProps, type TypeMenuToggleContext, type TypeMenuToggleProviderProps, type TypeMenuTokenInputProps, type TypeMultiAutocompleteProps, type TypeMultiSelectMenuBaseProps, type TypeMultiSelectMenuProps, type TypeNestedMenuContext, type TypeNestedMenuHeaderProps, type TypeNestedMenuItemProps, type TypeNestedMenuMapProps, type TypeNestedMenuProps, type TypeNestedMenuProviderProps, type TypeNotEmptyChildren, type TypeSingleAutocompleteProps, type TypeSingleSelectMenuBaseProps, type TypeSingleSelectMenuProps, type TypeStyledChevronProps, type TypeSubmenuItemProps, type TypeSubmenuValidMenuComponentProps, checkIfItemSelected, defaultMenuContext, getChildrenFromMenuItems, getSelectedItemIds, mapMenuItems, menuAnimationConfig, menuPlacementOrigin, useMenu, useMenuChildren, useMenuContentContext, useMenuToggleContext, useNestedMenuContext, useSelectStateReducer, useSelectStateReducerForMulti };

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 export { TypeBoxProps as TypeMenuFooterProps } from '@sproutsocial/seeds-react-box';
 import * as React$1 from 'react';
 import React__default from 'react';
-import { TypePopoutProps } from '@sproutsocial/seeds-react-popout';
+import { TypePopoutProps, EnumPlacements } from '@sproutsocial/seeds-react-popout';
 import { TypeTokenInputProps, TypeTokenSpec } from '@sproutsocial/seeds-react-token-input';
 import * as _sproutsocial_seeds_react_text from '@sproutsocial/seeds-react-text';
 import { TypeLabelProps } from '@sproutsocial/seeds-react-label';
@@ -198,6 +198,50 @@ declare const CustomPopoutContent: styled_components.StyledComponent<{
     ({ children, ...rest }: _sproutsocial_seeds_react_box.TypeBoxProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 }, styled_components.DefaultTheme, {}, never>;
+declare const menuPlacementOrigin: {
+    [key in EnumPlacements]?: {
+        originX: number;
+        originY: number;
+    };
+};
+declare const menuAnimationConfig: {
+    layout: boolean;
+    variants: {
+        initial: (custom?: {
+            placement: EnumPlacements;
+        }) => {
+            scale: number;
+            opacity: number;
+            originX?: number | undefined;
+            originY?: number | undefined;
+        };
+        animate: (custom?: {
+            placement: EnumPlacements;
+        }) => {
+            opacity: number;
+            scale: number;
+            transition: {
+                type: string;
+                duration: number;
+                ease: string;
+            };
+            originX?: number | undefined;
+            originY?: number | undefined;
+        };
+        exit: {
+            opacity: number;
+            scale: number;
+            transition: {
+                type: string;
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    initial: string;
+    animate: string;
+    exit: string;
+};
 interface TypeMenuPopoutProps extends Pick<Partial<TypeMenuContextProps>, "openMenu" | "closeMenu">, TypePopoutProps {
 }
 declare const MenuPopout: ({ content, width, isOpen, openMenu, closeMenu, focusLockProps, ...popoutProps }: TypeMenuPopoutProps) => react_jsx_runtime.JSX.Element;
@@ -619,4 +663,4 @@ declare const useMenuChildren: <I extends TypeMenuItemProps = TypeMenuItemProps>
 declare const useSelectStateReducer: Required<UseSelectProps<TypeInternalItemProps>>["stateReducer"];
 declare const useSelectStateReducerForMulti: Required<UseSelectProps<TypeInternalItemProps>>["stateReducer"];
 
-export { ActionMenu, Autocomplete, AutocompleteInput, AutocompleteSelect, AutocompleteTokenInput, CustomPopoutContent, INPUT_TYPES, type InputType, ListboxToggleButton, MenuContent, MenuContentContext, MenuContentProvider, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemAction, MenuItemActionLeft, MenuItemActionRight, MenuItemContainer, MenuItemRow, MenuItemText, MenuLabel, MenuPopout, MenuRoot, MenuSearchInput, MenuSearchTokenInput, MenuToggleButton, MenuToggleContext, MenuToggleProvider, MenuTokenInput, MultiSelectMenu, NestedMenu, NestedMenuContent, NestedMenuContext, NestedMenuHeader, NestedMenuItem, NestedMenuProvider, SingleSelectMenu, StyledListboxToggleButton, StyledMenuGroup, StyledMenuGroupUl, StyledMenuItem, StyledTitle, SubmenuItem, type TypeActionMenuBaseProps, type TypeActionMenuProps, type TypeAutocompleteInputProps, type TypeAutocompleteProps, type TypeAutocompleteTokenInputProps, type TypeBaseAutocompleteProps, type TypeChildrenOrItems, type TypeDownshiftComboboxProps, type TypeDownshiftComboboxReturnValue, type TypeDownshiftMergedInputProps, type TypeDownshiftMultiSelectProps, type TypeDownshiftMultiSelectReturnValue, type TypeDownshiftSelectProps, type TypeDownshiftSelectReturnValue, type TypeHigherOrderComponentProps, type TypeInternalItemProps, type TypeItemElement, type TypeListboxToggleButtonProps, type TypeMapMenuItemsProps, type TypeMenuChildren, type TypeMenuContentElement, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextBaseProps, type TypeMenuContextProps, type TypeMenuGroupBaseProps, type TypeMenuGroupElement, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemStyledProps, type TypeMenuLabelProps, type TypeMenuPopoutProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuSearchInputProps, type TypeMenuSearchTokenInputProps, type TypeMenuToggleButtonProps, type TypeMenuToggleContext, type TypeMenuToggleProviderProps, type TypeMenuTokenInputProps, type TypeMultiAutocompleteProps, type TypeMultiSelectMenuBaseProps, type TypeMultiSelectMenuProps, type TypeNestedMenuContext, type TypeNestedMenuHeaderProps, type TypeNestedMenuItemProps, type TypeNestedMenuMapProps, type TypeNestedMenuProps, type TypeNestedMenuProviderProps, type TypeNotEmptyChildren, type TypeSingleAutocompleteProps, type TypeSingleSelectMenuBaseProps, type TypeSingleSelectMenuProps, type TypeStyledChevronProps, type TypeSubmenuItemProps, type TypeSubmenuValidMenuComponentProps, checkIfItemSelected, defaultMenuContext, getChildrenFromMenuItems, getSelectedItemIds, mapMenuItems, useMenu, useMenuChildren, useMenuContentContext, useMenuToggleContext, useNestedMenuContext, useSelectStateReducer, useSelectStateReducerForMulti };
+export { ActionMenu, Autocomplete, AutocompleteInput, AutocompleteSelect, AutocompleteTokenInput, CustomPopoutContent, INPUT_TYPES, type InputType, ListboxToggleButton, MenuContent, MenuContentContext, MenuContentProvider, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemAction, MenuItemActionLeft, MenuItemActionRight, MenuItemContainer, MenuItemRow, MenuItemText, MenuLabel, MenuPopout, MenuRoot, MenuSearchInput, MenuSearchTokenInput, MenuToggleButton, MenuToggleContext, MenuToggleProvider, MenuTokenInput, MultiSelectMenu, NestedMenu, NestedMenuContent, NestedMenuContext, NestedMenuHeader, NestedMenuItem, NestedMenuProvider, SingleSelectMenu, StyledListboxToggleButton, StyledMenuGroup, StyledMenuGroupUl, StyledMenuItem, StyledTitle, SubmenuItem, type TypeActionMenuBaseProps, type TypeActionMenuProps, type TypeAutocompleteInputProps, type TypeAutocompleteProps, type TypeAutocompleteTokenInputProps, type TypeBaseAutocompleteProps, type TypeChildrenOrItems, type TypeDownshiftComboboxProps, type TypeDownshiftComboboxReturnValue, type TypeDownshiftMergedInputProps, type TypeDownshiftMultiSelectProps, type TypeDownshiftMultiSelectReturnValue, type TypeDownshiftSelectProps, type TypeDownshiftSelectReturnValue, type TypeHigherOrderComponentProps, type TypeInternalItemProps, type TypeItemElement, type TypeListboxToggleButtonProps, type TypeMapMenuItemsProps, type TypeMenuChildren, type TypeMenuContentElement, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextBaseProps, type TypeMenuContextProps, type TypeMenuGroupBaseProps, type TypeMenuGroupElement, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemStyledProps, type TypeMenuLabelProps, type TypeMenuPopoutProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuSearchInputProps, type TypeMenuSearchTokenInputProps, type TypeMenuToggleButtonProps, type TypeMenuToggleContext, type TypeMenuToggleProviderProps, type TypeMenuTokenInputProps, type TypeMultiAutocompleteProps, type TypeMultiSelectMenuBaseProps, type TypeMultiSelectMenuProps, type TypeNestedMenuContext, type TypeNestedMenuHeaderProps, type TypeNestedMenuItemProps, type TypeNestedMenuMapProps, type TypeNestedMenuProps, type TypeNestedMenuProviderProps, type TypeNotEmptyChildren, type TypeSingleAutocompleteProps, type TypeSingleSelectMenuBaseProps, type TypeSingleSelectMenuProps, type TypeStyledChevronProps, type TypeSubmenuItemProps, type TypeSubmenuValidMenuComponentProps, checkIfItemSelected, defaultMenuContext, getChildrenFromMenuItems, getSelectedItemIds, mapMenuItems, menuAnimationConfig, menuPlacementOrigin, useMenu, useMenuChildren, useMenuContentContext, useMenuToggleContext, useNestedMenuContext, useSelectStateReducer, useSelectStateReducerForMulti };

package/dist/index.js

@@ -152,6 +152,8 @@ __export(index_exports, {
   getChildrenFromMenuItems: () => getChildrenFromMenuItems,
   getSelectedItemIds: () => getSelectedItemIds,
   mapMenuItems: () => mapMenuItems,
+  menuAnimationConfig: () => menuAnimationConfig,
+  menuPlacementOrigin: () => menuPlacementOrigin,
   useMenu: () => useMenu,
   useMenuChildren: () => useMenuChildren,
   useMenuContentContext: () => useMenuContentContext,
@@ -2648,34 +2650,51 @@ var CustomPopoutContent = (0, import_styled_components11.default)(import_seeds_r
   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,
@@ -4244,6 +4263,7 @@ var NestedMenuPopout = ({
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     MenuPopout,
     {
+      lockPlacement: true,
       onClose: () => {
         onClose?.();
         setTimeout(() => resetSelectedMenuPath?.(), 100);
@@ -4553,6 +4573,8 @@ var NestedMenu = ({
   getChildrenFromMenuItems,
   getSelectedItemIds,
   mapMenuItems,
+  menuAnimationConfig,
+  menuPlacementOrigin,
   useMenu,
   useMenuChildren,
   useMenuContentContext,