@conveyorhq/arrow-ds 1.104.1 → 1.105.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.104.1",
+  "version": "1.105.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/MenuRenderer/MenuRenderer.d.ts

@@ -29,6 +29,7 @@ export interface MenuProps extends BoxProps {
     onClose?: () => void;
     isMenuOpen?: boolean;
     openMenu?: (open: boolean) => void;
+    menuDisplay?: "inline-block" | "block";
 }
-export declare const MenuRenderer: ({ children, className, placement, position, trigger, popperModifiers, autoFocus, hasPortal, isOpen: isOpenInitial, isMenuOpen: isOpenControlled, onClose: onCloseProp, openMenu: setOpenControlled, ...rest }: MenuProps) => JSX.Element;
+export declare const MenuRenderer: ({ children, className, placement, position, trigger, popperModifiers, autoFocus, hasPortal, isOpen: isOpenInitial, isMenuOpen: isOpenControlled, onClose: onCloseProp, openMenu: setOpenControlled, menuDisplay, ...rest }: MenuProps) => JSX.Element;
 export {};

package/public/components/MenuRenderer/MenuRenderer.js

@@ -40,7 +40,7 @@ const TRANSITION_START = {
     opacity: 0,
 };
 const TRANSITION_END = { transform: "translateY(0)", opacity: 1 };
-const MenuRenderer = ({ children, className, placement = "bottom-start", position = "absolute", trigger, popperModifiers = [], autoFocus = false, hasPortal = false, isOpen: isOpenInitial = false, isMenuOpen: isOpenControlled, onClose: onCloseProp, openMenu: setOpenControlled, ...rest }) => {
+const MenuRenderer = ({ children, className, placement = "bottom-start", position = "absolute", trigger, popperModifiers = [], autoFocus = false, hasPortal = false, isOpen: isOpenInitial = false, isMenuOpen: isOpenControlled, onClose: onCloseProp, openMenu: setOpenControlled, menuDisplay = "inline-block", ...rest }) => {
     const [isOpenUncontrolled, setOpenUncontrolled] = react_1.useState(isOpenInitial);
     const open = isOpenControlled !== null && isOpenControlled !== void 0 ? isOpenControlled : isOpenUncontrolled;
     const setOpen = setOpenControlled !== null && setOpenControlled !== void 0 ? setOpenControlled : setOpenUncontrolled;
@@ -153,7 +153,7 @@ const MenuRenderer = ({ children, className, placement = "bottom-start", positio
             react_1.default.createElement(context_1.MenuContext.Provider, { value: context },
                 react_1.default.createElement(Box_1.Box, Object.assign({ className: hasPortal ? "z-toast" : "z-menu", ref: setPopperElement, style: { minWidth: `${minWidth}px`, ...styles.popper } }, attributes.popper),
                     react_1.default.createElement(react_focus_lock_1.default, { autoFocus: autoFocus },
-                        react_1.default.createElement(react_spring_1.animated.div, { key: key, style: transitionProps, ref: menuListElement, className: "inline-block" }, typeof children === "function"
+                        react_1.default.createElement(react_spring_1.animated.div, { key: key, style: transitionProps, ref: menuListElement, className: menuDisplay }, typeof children === "function"
                             ? children(renderProps)
                             : children)))))))));
 };

package/src/components/MenuRenderer/MenuRenderer.tsx

@@ -82,6 +82,10 @@ export interface MenuProps extends BoxProps {
    * Control the open state externally
    */
   openMenu?: (open: boolean) => void;
+  /**
+   * Determine whether or not the animated menu popover is inline or block
+   */
+  menuDisplay?: "inline-block" | "block";
 }
 
 const MENU_OFFSET = 8;
@@ -104,6 +108,7 @@ export const MenuRenderer = ({
   isMenuOpen: isOpenControlled,
   onClose: onCloseProp,
   openMenu: setOpenControlled,
+  menuDisplay = "inline-block",
   ...rest
 }: MenuProps) => {
   const [isOpenUncontrolled, setOpenUncontrolled] = useState(isOpenInitial);
@@ -258,7 +263,7 @@ export const MenuRenderer = ({
                       key={key}
                       style={transitionProps}
                       ref={menuListElement}
-                      className="inline-block"
+                      className={menuDisplay}
                     >
                       {typeof children === "function"
                         ? children(renderProps)