Add height sizing for tree context menus

assets/js/src/core/components/context-menu-wrapper/context-menu-wrapper.tsx

@@ -10,6 +10,7 @@
 
 import React, { type ReactElement, useState, createContext, useContext } from 'react'
 import { Dropdown } from 'antd'
+import { DropdownHeightProvider } from '@Pimcore/components/dropdown/dropdown-height-provider'
 
 interface ContextMenuContextType {
   closeMenu: () => void
@@ -29,9 +30,10 @@ export const useCloseContextMenu = (): (() => void) | undefined => {
 export interface ContextMenuWrapperProps {
   children: React.ReactNode
   renderMenu: () => ReactElement
+  calculateAutoHeight?: boolean
 }
 
-export const ContextMenuWrapper = ({ children, renderMenu }: ContextMenuWrapperProps): React.JSX.Element => {
+export const ContextMenuWrapper = ({ children, renderMenu, calculateAutoHeight = true }: ContextMenuWrapperProps): React.JSX.Element => {
   const [open, setOpen] = useState(false)
 
   const closeMenu = (): void => {
@@ -46,7 +48,7 @@ export const ContextMenuWrapper = ({ children, renderMenu }: ContextMenuWrapperP
     closeMenu
   }
 
-  return (
+  const dropdown = (
     <Dropdown
       dropdownRender={ () => (
         <ContextMenuContext.Provider value={ contextValue }>
@@ -63,6 +65,16 @@ export const ContextMenuWrapper = ({ children, renderMenu }: ContextMenuWrapperP
       >{children}</span>
     </Dropdown>
   )
+
+  if (calculateAutoHeight) {
+    return (
+      <DropdownHeightProvider>
+        {dropdown}
+      </DropdownHeightProvider>
+    )
+  }
+
+  return dropdown
 }
 
 export default ContextMenuWrapper

assets/js/src/core/components/dropdown/dropdown-height-provider.tsx

@@ -0,0 +1,52 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import React, { createContext, useMemo, useState } from 'react'
+
+export interface IDropdownHeightContext {
+  height: number
+}
+
+export const DropdownHeightContext = createContext<IDropdownHeightContext | undefined>(undefined)
+
+export interface DropdownHeightProviderProps {
+  children: React.ReactNode
+}
+
+export const DropdownHeightProvider = ({ children }: DropdownHeightProviderProps): React.JSX.Element => {
+  const [height, setHeight] = useState<number>(0)
+
+  const onContextMenu = (e: React.MouseEvent<HTMLDivElement>): void => {
+    const viewportHeight = window.innerHeight
+    const triggerLocation = e.clientY
+    const offset = 16
+    let newHeight = viewportHeight - triggerLocation
+
+    if (triggerLocation > viewportHeight / 2) {
+      newHeight = triggerLocation
+    }
+
+    setHeight(newHeight - offset)
+  }
+
+  return useMemo(() => (
+    <div onContextMenuCapture={ onContextMenu }>
+      <DropdownHeightContext.Provider value={ { height } }>
+        {children}
+      </DropdownHeightContext.Provider>
+    </div>
+  ), [height, children])
+}
+
+export const useDropdownHeightOptional = (): IDropdownHeightContext | undefined => {
+  const context = React.useContext(DropdownHeightContext)
+
+  return context
+}

assets/js/src/core/components/menu/menu.tsx

@@ -16,6 +16,8 @@ import {
 
 } from 'antd/es/menu/interface'
 import { MenuItem } from './item/menu-item'
+import { useDropdownHeightOptional } from '@Pimcore/components/dropdown/dropdown-height-provider'
+import classNames from 'classnames'
 
 type OldItemType = Extract<MenuProps['items'], any[]>[0]
 type OldMenuItemGroupType = Extract<OldItemType, { type: 'group' }>
@@ -51,6 +53,7 @@ export interface IMenuProps extends Omit<MenuProps, 'items' > {
 
 export const Menu = React.forwardRef<MenuRef, IMenuProps>((props, ref): JSX.Element => {
   const { dataTestId, ...restProps } = props
+  const dropdownHeight = useDropdownHeightOptional()
 
   const filteredItems = props.items?.filter(function filterItems (item: ItemType) {
     // @ts-expect-error - the prop exists trust me bro ;)
@@ -74,9 +77,16 @@ export const Menu = React.forwardRef<MenuRef, IMenuProps>((props, ref): JSX.Elem
   return (
     <AntMenu
       { ...restProps }
+      className={ classNames(
+        { 'menu--is-calculated-height': dropdownHeight?.height !== undefined }
+      ) }
       data-testid={ dataTestId }
       items={ undefined }
       ref={ ref }
+      style={ {
+        ...restProps.style,
+        maxHeight: `min(${dropdownHeight?.height}px, 65vh)`
+      } }
     >
       {filteredItems?.map((item: ItemType) => (
         MenuItem({ item })

assets/js/src/core/styles/global.styles.ts

@@ -45,7 +45,7 @@ export const GlobalStyles = createGlobalStyle`
     animation-direction: reverse;
   }
 
-  .ant-dropdown-menu,
+  :not(.menu--is-calculated-height).ant-dropdown-menu,
   .ant-dropdown-menu-sub {
     overflow: auto;
     max-height: 48vh;