Merge pull request #15 from Exabyte-io/feature/SOF-6782

Feature/sof 6782
Exabyte-io · Aug 2, 2023 · 3ebf396 · 3ebf396
2 parents a64bcf9 + f35d59d
commit 3ebf396
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 20 deletions.
diff --git a/src/mui/components/nested-dropdown/NestedDropdown.tsx b/src/mui/components/nested-dropdown/NestedDropdown.tsx
@@ -9,9 +9,9 @@ import Divider from "@mui/material/Divider";
 import Grow from "@mui/material/Grow";
 import ListItem from "@mui/material/ListItem";
 import MenuList from "@mui/material/MenuList";
-import Paper, { PaperProps } from "@mui/material/Paper";
+import Paper from "@mui/material/Paper";
 import Popper, { PopperPlacementType, PopperProps } from "@mui/material/Popper";
-import { useTheme } from "@mui/material/styles";
+import { SxProps, useTheme } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import React, { useCallback, useRef, useState } from "react";
 
@@ -34,6 +34,7 @@ export interface NestedDropdownAction {
     rightIcon?: React.ReactElement;
     header?: string;
     contentObject?: React.ReactNode[];
+    paperPlacement?: PopperPlacementType;
 }
 
 export interface NestedDropdownProps {
@@ -44,7 +45,7 @@ export interface NestedDropdownProps {
         "data-popper-id"?: string;
     };
     buttonProps?: { content: string };
-    paperSx?: PaperProps["sx"];
+    paperSx?: SxProps;
     actions?: NestedDropdownAction[];
     children?: React.ReactNode | React.ReactNode[];
     paperPlacement?: PopperPlacementType;
@@ -83,7 +84,7 @@ export default function NestedDropdown({
     paperSx = {},
     children = null,
     disabled = false,
-    paperPlacement = "auto-start",
+    paperPlacement = "auto-end",
     className = "",
     header,
     isMobile = false,
@@ -148,11 +149,14 @@ export default function NestedDropdown({
                                 ...paperSx,
                             }}>
                             {Boolean(header) && (
-                                <ListItem>
-                                    <Typography variant="h6" color="text.primary">
-                                        {header}
-                                    </Typography>
-                                </ListItem>
+                                <>
+                                    <ListItem>
+                                        <Typography variant="h6" color="text.primary">
+                                            {header}
+                                        </Typography>
+                                    </ListItem>
+                                    <Divider />
+                                </>
                             )}
                             <ClickAwayListener onClickAway={onClickAway}>
                                 <Box>
@@ -173,7 +177,11 @@ export default function NestedDropdown({
                                                     return (
                                                         <NestedDropdown
                                                             actions={action.actions}
-                                                            header={action.header}>
+                                                            header={action.header}
+                                                            paperPlacement={
+                                                                action.paperPlacement ||
+                                                                paperPlacement
+                                                            }>
                                                             <NestedDropdownItem
                                                                 disabled={action.disabled}
                                                                 id={action.id}

diff --git a/src/mui/components/nested-dropdown/NestedDropdownItem.tsx b/src/mui/components/nested-dropdown/NestedDropdownItem.tsx
@@ -1,9 +1,23 @@
-import Container from "@mui/material/Container";
+import Box from "@mui/material/Box";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import MenuItem from "@mui/material/MenuItem";
+import { styled, Theme } from "@mui/material/styles";
 import Typography, { TypographyProps } from "@mui/material/Typography";
 import React, { useCallback } from "react";
 
+const StyledListItemIcon = styled(ListItemIcon)({
+    position: "absolute",
+    right: 0,
+});
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const StyledBox = styled(Box)(({ theme }: { theme: Theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    marginRight: theme.spacing(1),
+    paddingRight: theme.spacing(2),
+}));
+
 export interface DropdownItemProps {
     disabled: boolean;
     id: string;
@@ -39,17 +53,24 @@ export function NestedDropdownItem({
     }, [id, onClick]);
 
     return (
-        <MenuItem key={key} id={id} disabled={disabled} onClick={onItemClick}>
-            {Boolean(leftIcon) && <ListItemIcon>{leftIcon}</ListItemIcon>}
-            {Boolean(content) && (
-                <Container>
-                    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-                    <Typography {...typographyProps} className="DropdownItemText">
+        <MenuItem
+            key={key}
+            id={id}
+            disabled={disabled}
+            onClick={onItemClick}
+            sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+            <StyledBox>
+                {Boolean(leftIcon) && <ListItemIcon>{leftIcon}</ListItemIcon>}
+                {Boolean(content) && (
+                    <Typography
+                        /* eslint-disable-next-line react/jsx-props-no-spreading */
+                        {...typographyProps}
+                        className="DropdownItemText">
                         {content}
                     </Typography>
-                </Container>
-            )}
-            {Boolean(rightIcon) && <ListItemIcon>{rightIcon}</ListItemIcon>}
+                )}
+            </StyledBox>
+            {Boolean(rightIcon) && <StyledListItemIcon>{rightIcon}</StyledListItemIcon>}
         </MenuItem>
     );
 }