@okta/odyssey-react-mui 0.19.0 → 0.21.0

package/src/MenuButton.tsx

@@ -0,0 +1,99 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {
+  Button,
+  ButtonProps,
+  ChevronDownIcon,
+  Divider,
+  ListSubheader,
+  Menu,
+  MenuItem,
+  useUniqueId,
+} from "./";
+import { memo, MouseEvent, ReactElement, useMemo, useState } from "react";
+
+export interface MenuButtonProps {
+  /**
+   * The <MenuItem> components within the Menu.
+   */
+  children: Array<
+    ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>
+  >;
+  /**
+   * The end Icon on the trigggering Button
+   */
+  buttonEndIcon?: ReactElement;
+  /**
+   * The label on the triggering Button
+   */
+  buttonLabel?: string;
+  /**
+   * The variant of the triggering Button
+   */
+  buttonVariant?: ButtonProps["variant"];
+}
+
+const MenuButton = ({
+  buttonLabel = "",
+  children,
+  buttonEndIcon = <ChevronDownIcon />,
+  buttonVariant = "secondary",
+}: MenuButtonProps) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const uniqueId = useUniqueId();
+
+  const menuListProps = useMemo(
+    () => ({ "aria-labelledby": `${uniqueId}-button` }),
+    [uniqueId]
+  );
+
+  return (
+    <div>
+      <Button
+        endIcon={buttonEndIcon}
+        id={`${uniqueId}-button`}
+        aria-controls={open ? `${uniqueId}-menu` : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? "true" : undefined}
+        onClick={handleClick}
+        variant={buttonVariant}
+      >
+        {buttonLabel}
+      </Button>
+      <Menu
+        id={`${uniqueId}-menu`}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={menuListProps}
+      >
+        {children}
+      </Menu>
+    </div>
+  );
+};
+
+const MemoizedMenuButton = memo(MenuButton);
+
+export { MemoizedMenuButton as MenuButton };

package/src/MenuItem.tsx

@@ -0,0 +1,50 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, forwardRef } from "react";
+import { MenuItem as MuiMenuItem } from "@mui/material";
+import { menuItemClasses } from "@mui/material/MenuItem";
+import type { MenuItemProps as MuiMenuItemProps } from "@mui/material";
+
+export interface MenuItemProps
+  extends Omit<
+    MuiMenuItemProps,
+    | "component"
+    | "dense"
+    | "disableGutters"
+    | "divider"
+    | "focusVisibleClassName"
+  > {
+  /**
+   * Toggles whether or not the MenuItem represents a destructive action.
+   */
+  isDestructive?: boolean;
+}
+
+const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
+  ({ isDestructive, ...props }, ref) => (
+    <MuiMenuItem
+      {...props}
+      ref={ref}
+      className={
+        isDestructive ? `${menuItemClasses.root}-destructive` : undefined
+      }
+    >
+      {props.children}
+    </MuiMenuItem>
+  )
+);
+
+const MemoizedMenuItem = memo(MenuItem);
+MemoizedMenuItem.displayName = "MenuItem";
+
+export { MemoizedMenuItem as MenuItem };

package/src/index.ts

@@ -24,6 +24,7 @@ export {
   DialogContent,
   DialogContentText,
   DialogTitle,
+  Divider,
   FormControl,
   FormControlLabel,
   FormGroup,
@@ -38,7 +39,9 @@ export {
   ListItemIcon,
   ListItemText,
   ListSubheader,
-  MenuItem,
+  Menu,
+  MenuList,
+  Paper,
   ScopedCssBaseline,
   Select,
   Snackbar,
@@ -72,6 +75,7 @@ export type {
   DialogContentProps,
   DialogContentTextProps,
   DialogTitleProps,
+  DividerProps,
   FormControlLabelProps,
   FormControlProps,
   FormGroupProps,
@@ -86,7 +90,9 @@ export type {
   ListItemIconProps,
   ListItemTextProps,
   ListSubheaderProps,
-  MenuItemProps,
+  MenuProps,
+  MenuListProps,
+  PaperProps,
   ScopedCssBaselineProps,
   SelectChangeEvent,
   SelectProps,
@@ -121,6 +127,8 @@ export * from "./Icon";
 export * from "./iconDictionary";
 export * from "./Infobox";
 export * from "./Link";
+export * from "./MenuButton";
+export * from "./MenuItem";
 export * from "./OdysseyCacheProvider";
 export * from "./OdysseyThemeProvider";
 export * from "./PasswordInput";

package/src/theme/components.tsx

@@ -10,13 +10,18 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import type { ThemeOptions } from "@mui/material";
+import { ThemeOptions } from "@mui/material";
 import type {} from "@mui/lab/themeAugmentation";
 //import radioClasses from "@mui/material";
+import { buttonClasses } from "@mui/material/Button";
 import { chipClasses } from "@mui/material/Chip";
 import { dialogActionsClasses } from "@mui/material/DialogActions";
+import { dividerClasses } from "@mui/material/Divider";
 import { inputAdornmentClasses } from "@mui/material/InputAdornment";
 import { inputBaseClasses } from "@mui/material/InputBase";
+import { listItemIconClasses } from "@mui/material/ListItemIcon";
+import { listItemTextClasses } from "@mui/material/ListItemText";
+import { menuItemClasses } from "@mui/material/MenuItem";
 import { svgIconClasses } from "@mui/material/SvgIcon";
 import { tableBodyClasses } from "@mui/material/TableBody";
 import { tableCellClasses } from "@mui/material/TableCell";
@@ -292,7 +297,7 @@ export const components: ThemeOptions["components"] = {
         style: {
           minWidth: "auto",
 
-          ".MuiButton-startIcon": {
+          [`.${buttonClasses.endIcon}, .${buttonClasses.startIcon}`]: {
             margin: "0",
           },
         },
@@ -335,18 +340,31 @@ export const components: ThemeOptions["components"] = {
           pointerEvents: "inherit", // in order to have cursor: not-allowed, must change pointer-events from "none"
         },
 
-        ".MuiButton-startIcon > *:nth-of-type(1)": {
-          fontSize: `${theme.typography.ui.lineHeight}em`,
+        [`.${buttonClasses.startIcon}, .${buttonClasses.endIcon}`]: {
+          "& > *:nth-of-type(1)": {
+            fontSize: `${theme.typography.ui.lineHeight}em`,
+          },
         },
       }),
-      startIcon: ({ theme }) => ({
+
+      endIcon: ({ theme, ownerState }) => ({
+        display: "inline-flex",
+        margin: 0,
+        marginInlineStart: theme.spacing(2),
+
+        ...(ownerState.children === undefined && {
+          marginInlineStart: 0,
+        }),
+      }),
+
+      startIcon: ({ theme, ownerState }) => ({
         display: "inline-flex",
         margin: 0,
         marginInlineEnd: theme.spacing(2),
 
-        "&:only-child": {
-          margin: 0,
-        },
+        ...(ownerState.children === undefined && {
+          marginInlineEnd: 0,
+        }),
       }),
     },
   },
@@ -735,7 +753,7 @@ export const components: ThemeOptions["components"] = {
           },
         },
 
-        "ul, ol": {
+        "ul:not([class]), ol:not([class])": {
           maxWidth: theme.mixins.maxWidth,
           marginBlockStart: 0,
           marginBlockEnd: theme.spacing(4),
@@ -755,7 +773,7 @@ export const components: ThemeOptions["components"] = {
           },
         },
 
-        li: {
+        "li:not([class])": {
           marginBlockEnd: theme.spacing(2),
           paddingInlineStart: theme.spacing(1),
 
@@ -1263,6 +1281,7 @@ export const components: ThemeOptions["components"] = {
         paddingBlock: theme.spacing(2),
         paddingInline: theme.spacing(4),
         fontSize: theme.typography.caption.fontSize,
+        fontWeight: theme.typography.fontWeightBold,
         lineHeight: theme.typography.caption.lineHeight,
         color: theme.palette.text.secondary,
         textTransform: "uppercase",
@@ -1271,21 +1290,73 @@ export const components: ThemeOptions["components"] = {
   },
   MuiMenuItem: {
     styleOverrides: {
-      root: ({ theme }) => ({
-        justifyContent: "space-between",
+      root: ({ theme, ownerState }) => ({
         gap: theme.spacing(2),
+        minHeight: "unset",
+        paddingBlock: theme.spacing(3),
 
-        "&.Mui-selected": {
+        "&:hover": {
+          textDecoration: "none",
+          backgroundColor: theme.palette.grey[100],
+
+          // Reset on touch devices, it doesn't add specificity
+          "@media (hover: none)": {
+            backgroundColor: "transparent",
+          },
+        },
+
+        [`&.${menuItemClasses.root}-destructive`]: {
+          color: theme.palette.error.main,
+        },
+
+        [`&.${menuItemClasses.selected}`]: {
           backgroundColor: "transparent",
           color: theme.palette.primary.main,
 
           "&:hover": {
             backgroundColor: theme.palette.primary.lighter,
+
+            "@media (hover: none)": {
+              backgroundColor: `rgba(${theme.palette.primary.main} / ${theme.palette.action.selectedOpacity})`,
+            },
           },
         },
+
+        ...(!ownerState.disableGutters && {
+          paddingInline: theme.spacing(4),
+        }),
+
+        ...(ownerState.divider && {
+          borderBlockEnd: `1px solid ${theme.palette.divider}`,
+        }),
+
+        [`&.${menuItemClasses.disabled}`]: {
+          opacity: 1,
+          color: theme.palette.text.disabled,
+        },
+
+        [`& + .${dividerClasses.root}`]: {
+          marginBlock: theme.spacing(1),
+        },
+
+        [`& .${listItemTextClasses.root}`]: {
+          marginBlock: 0,
+        },
+
+        [`& .${listItemIconClasses.root}`]: {
+          minWidth: "unset",
+        },
       }),
     },
   },
+  MuiListItemIcon: {
+    styleOverrides: {
+      root: {
+        minWidth: "unset",
+        color: "inherit",
+      },
+    },
+  },
   MuiNativeSelect: {
     defaultProps: {
       variant: "standard",
@@ -1306,6 +1377,9 @@ export const components: ThemeOptions["components"] = {
     styleOverrides: {
       paper: ({ theme }) => ({
         marginBlockStart: theme.spacing(1),
+        borderWidth: theme.mixins.borderWidth,
+        borderStyle: theme.mixins.borderStyle,
+        borderColor: theme.palette.grey[200],
       }),
     },
   },