Support logical side prop

mui · Dec 4, 2024 · 155acb5 · 155acb5
1 parent e9df2b5
commit 155acb5
Showing 1 changed file with 22 additions and 3 deletions.
diff --git a/packages/react/src/menu/positioner/MenuPositioner.tsx b/packages/react/src/menu/positioner/MenuPositioner.tsx
@@ -14,6 +14,7 @@ import { useMenuRootContext } from '../root/MenuRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useForkRef } from '../../utils/useForkRef';
 import { useMenuPositioner } from './useMenuPositioner';
+import { useDirectionContext } from '../../direction-provider/DirectionContext';
 import { HTMLElementType } from '../../utils/proptypes';
 import { BaseUIComponentProps, GenericHTMLProps } from '../../utils/types';
 import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping';
@@ -39,7 +40,7 @@ const MenuPositioner = React.forwardRef(function MenuPositioner(
     className,
     render,
     keepMounted = false,
-    side = 'bottom',
+    side: sideProp = 'bottom',
     align = 'center',
     sideOffset = 0,
     alignOffset = 0,
@@ -52,6 +53,20 @@ const MenuPositioner = React.forwardRef(function MenuPositioner(
     ...otherProps
   } = props;
 
+  const directionContext = useDirectionContext();
+  const isRtl = directionContext?.direction === 'rtl' || false;
+
+  const side = {
+    top: 'top',
+    right: 'right',
+    bottom: 'bottom',
+    left: 'left',
+    'block-start': 'top',
+    'inline-end': isRtl ? 'left' : 'right',
+    'block-end': 'bottom',
+    'inline-start': isRtl ? 'right' : 'left',
+  }[sideProp] as Side;
+
   const {
     open,
     floatingRootContext,
@@ -153,6 +168,8 @@ const MenuPositioner = React.forwardRef(function MenuPositioner(
 
 export { MenuPositioner };
 
+type LogicalSide = 'block-start' | 'inline-end' | 'block-end' | 'inline-start';
+
 export namespace MenuPositioner {
   export type State = {
     open: boolean;
@@ -161,8 +178,10 @@ export namespace MenuPositioner {
   };
 
   export interface Props
-    extends useMenuPositioner.SharedParameters,
-      BaseUIComponentProps<'div', State> {}
+    extends Omit<useMenuPositioner.SharedParameters, 'side'>,
+      BaseUIComponentProps<'div', State> {
+    side?: Side | LogicalSide;
+  }
 }
 
 MenuPositioner.propTypes /* remove-proptypes */ = {