@aurora-ds/components 1.8.1 → 1.8.3

package/dist/cjs/index.js

@@ -3486,6 +3486,13 @@ width = '100%', minWidth = 0, maxWidth, flex, flexGrow, flexShrink, flexBasis, .
 };
 TextField.displayName = 'TextField';
 
+/**
+ * Vertical padding (in px) applied to the top and bottom of the menu panel.
+ * Matches `theme.spacing.xs` (0.25rem = 4px at 16px base font).
+ * Exported so submenus can offset their position upward by this amount to align
+ * their first item with the trigger item.
+ */
+const MENU_PANEL_PADDING_Y_PX = 5;
 const MENU_PANEL_STYLES = theme.createStyles((theme) => ({
     backdrop: {
         position: 'fixed',
@@ -3559,7 +3566,7 @@ const MENU_MIN_WIDTH_PX = 224;
  * Uses a two-pass strategy: first render with `menuHeight = 0`, then a rAF
  * recompute with the actual rendered size to apply any overflow offset.
  */
-const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, placement = 'bottom', }) => {
+const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, verticalOffset = 0, placement = 'bottom', }) => {
     const [style, setStyle] = React.useState({});
     // Stays false until the rAF second pass has run with the real panel dimensions.
     // Keeps the panel invisible during the initial style={} state and the first
@@ -3576,8 +3583,10 @@ const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, placement
         const viewportRight = window.innerWidth - VIEWPORT_MARGIN_PX;
         const viewportBottom = window.innerHeight - VIEWPORT_MARGIN_PX;
         if (placement === 'right' || placement === 'left') {
-            // --- Vertical: align with the anchor top, clamp inside the viewport ---
-            let top = anchor.top;
+            // --- Vertical: align with the anchor top, offset upward by verticalOffset
+            // (e.g. the panel's paddingTop) so the first item lines up with the trigger,
+            // then clamp inside the viewport. ---
+            let top = anchor.top - verticalOffset;
             if (menuHeight > 0 && top + menuHeight > viewportBottom) {
                 top = Math.max(VIEWPORT_MARGIN_PX, viewportBottom - menuHeight);
             }
@@ -3637,7 +3646,7 @@ const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, placement
         const maxLeft = window.innerWidth - effectiveWidth - VIEWPORT_MARGIN_PX;
         const left = Math.max(VIEWPORT_MARGIN_PX, Math.min(anchor.left, maxLeft));
         setStyle({ top, left, minWidth: minWidth ?? fallbackMinWidth });
-    }, [anchorEl, menuRef, minWidth, gap, placement]);
+    }, [anchorEl, menuRef, minWidth, gap, verticalOffset, placement]);
     // First pass: compute as soon as the menu opens (menuHeight = 0)
     React.useLayoutEffect(() => {
         if (open) {
@@ -3710,12 +3719,12 @@ const ITEM_SELECTOR = '[role^="menuitem"]:not([data-disabled]), [role="option"]:
  * `aria-activedescendant`. Item order is read from the DOM (read-only) so the
  * logic stays correct across groups and dynamic content.
  */
-const useMenuPanel = ({ open, onClose, anchorEl, minWidth, placement = 'bottom', onArrowLeft, }) => {
+const useMenuPanel = ({ open, onClose, anchorEl, minWidth, placement = 'bottom', verticalOffset = 0, onArrowLeft, }) => {
     const panelRef = React.useRef(null);
     const [focusedId, setFocusedId] = React.useState(undefined);
     // True while a descendant submenu is open → pause this panel's keyboard nav.
     const [childOpen, setChildOpen] = React.useState(false);
-    const { style } = useMenuPosition({ anchorEl, open, menuRef: panelRef, minWidth, placement });
+    const { style } = useMenuPosition({ anchorEl, open, menuRef: panelRef, minWidth, placement, verticalOffset });
     /** Read this panel's focusable items in DOM order (excluding nested submenus). */
     const getItems = React.useCallback(() => {
         const panel = panelRef.current;
@@ -3929,6 +3938,9 @@ const MenuPanel = ({ open, onClose, anchorEl, minWidth, maxHeight = '20rem', pla
         anchorEl,
         minWidth,
         placement,
+        // Shift submenus upward by the panel's paddingTop so the first item aligns
+        // visually with the trigger item in the parent menu.
+        verticalOffset: isSubmenu ? MENU_PANEL_PADDING_Y_PX : 0,
         onArrowLeft,
     });
     const contextValue = React.useMemo(() => ({ setChildOpen, closeMenu }), [setChildOpen, closeMenu]);