Open menus to the left as well as right

package.json

@@ -46,12 +46,12 @@
     "babel-loader": "^8.0.6",
     "clsx": "^1.0.4",
     "jest": "^24.9.0",
-    "react": "^16.12.0",
+    "react": "^18.2.0",
     "react-dom": "^16.12.0",
     "react-test-renderer": "^16.12.0",
     "ts-jest": "^24.3.0",
     "ts-loader": "^6.2.1",
-    "typescript": "^3.7.4"
+    "typescript": "^5.0.4"
   },
   "peerDependencies": {
     "@material-ui/core": "^4.9.0",
@@ -74,5 +74,8 @@
         "@pika/plugin-build-web"
       ]
     ]
+  },
+  "dependencies": {
+    "ts-node": "^10.9.1"
   }
 }

src/index.tsx

@@ -3,6 +3,7 @@ import {makeStyles} from '@material-ui/core/styles'
 import Menu, {MenuProps} from '@material-ui/core/Menu'
 import MenuItem, {MenuItemProps} from '@material-ui/core/MenuItem'
 import ArrowRight from '@material-ui/icons/ArrowRight'
+import ArrowLeft from '@material-ui/icons/ArrowLeft'
 import clsx from 'clsx'
 
 export interface NestedMenuItemProps extends Omit<MenuItemProps, 'button'> {
@@ -25,6 +26,10 @@ export interface NestedMenuItemProps extends Omit<MenuItemProps, 'button'> {
    * @default <ArrowRight />
    */
   rightIcon?: React.ReactNode
+  /**
+   * @default <ArrowLeft />
+   */
+  leftIcon?: React.ReactNode
   /**
    * Props passed to container element.
    */
@@ -38,6 +43,10 @@ export interface NestedMenuItemProps extends Omit<MenuItemProps, 'button'> {
    * @see https://material-ui.com/api/list-item/
    */
   button?: true | undefined
+  /**
+   * Specifies whether the menu should open to the right or left
+   */
+  direction?: 'left' | 'right'
 }
 
 const TRANSPARENT = 'rgba(0,0,0,0)'
@@ -59,7 +68,9 @@ const NestedMenuItem = React.forwardRef<
     parentMenuOpen,
     component = 'div',
     label,
+    direction = 'right',
     rightIcon = <ArrowRight />,
+    leftIcon = <ArrowLeft />,
     children,
     className,
     tabIndex: tabIndexProp,
@@ -71,6 +82,7 @@ const NestedMenuItem = React.forwardRef<
   const {ref: containerRefProp, ...ContainerProps} = ContainerPropsProp
 
   const menuItemRef = useRef<HTMLLIElement>(null)
+
   useImperativeHandle(ref, () => menuItemRef.current)
 
   const containerRef = useRef<HTMLDivElement>(null)
@@ -151,7 +163,13 @@ const NestedMenuItem = React.forwardRef<
   if (!props.disabled) {
     tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1
   }
-
+  let iconStyle ={};
+  let icon = rightIcon;
+  if (direction=="left") { 
+    iconStyle={position:'absolute', left:'-3px', top:'1px'}
+    icon = leftIcon;
+  }
+
   return (
     <div
       {...ContainerProps}
@@ -168,7 +186,7 @@ const NestedMenuItem = React.forwardRef<
         ref={menuItemRef}
       >
         {label}
-        {rightIcon}
+        <div style={iconStyle}>{icon}</div>
       </MenuItem>
       <Menu
         // Set pointer events to 'none' to prevent the invisible Popover div
@@ -177,11 +195,11 @@ const NestedMenuItem = React.forwardRef<
         anchorEl={menuItemRef.current}
         anchorOrigin={{
           vertical: 'top',
-          horizontal: 'right'
+          horizontal: direction=='right' ? 'right' : 'left'
         }}
         transformOrigin={{
           vertical: 'top',
-          horizontal: 'left'
+          horizontal: direction=='right' ? 'left' : 'right'
         }}
         open={open}
         autoFocus={false}