@availity/mui-menu 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -2,12 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.1.3](https://github.com/Availity/element/compare/@availity/mui-menu@0.1.2...@availity/mui-menu@0.1.3) (2023-10-12)
+
+## [0.1.2](https://github.com/Availity/element/compare/@availity/mui-menu@0.1.1...@availity/mui-menu@0.1.2) (2023-10-06)
+
 ## [0.1.1](https://github.com/Availity/element/compare/@availity/mui-menu@0.1.0...@availity/mui-menu@0.1.1) (2023-08-23)
 
 ## 0.1.0 (2023-06-06)
 
-
 ### Features
 
-* **mui-menu:** add menu component ([5cc8b1f](https://github.com/Availity/element/commit/5cc8b1f15e0aa987135e0bbac99943f2f46f6287))
-* **mui-menu:** omit menu props ([b81152a](https://github.com/Availity/element/commit/b81152a0f7804d34055962617f32194b02f2557f))
+- **mui-menu:** add menu component ([5cc8b1f](https://github.com/Availity/element/commit/5cc8b1f15e0aa987135e0bbac99943f2f46f6287))
+- **mui-menu:** omit menu props ([b81152a](https://github.com/Availity/element/commit/b81152a0f7804d34055962617f32194b02f2557f))

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import { MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, MenuListProps as MenuListProps$1 } from '@mui/material';
 
-type MenuProps = Omit<MenuProps$1, 'BackdropComponent' | 'BackdropProps' | 'classes' | 'disableAutoFocusItem' | 'disableEnforceFocus' | 'disableEscapeKeyDown' | 'onBackdropClick' | 'PopoverClasses' | 'ref' | 'sx' | 'TransitionComponent' | 'TransitionProps'>;
+type MenuProps = Omit<MenuProps$1, 'BackdropComponent' | 'BackdropProps' | 'classes' | 'disableAutoFocusItem' | 'disableEnforceFocus' | 'disableEscapeKeyDown' | 'elevation' | 'onBackdropClick' | 'PopoverClasses' | 'ref' | 'sx' | 'TransitionComponent' | 'TransitionProps'>;
 declare const Menu: (props: MenuProps) => JSX.Element;
-type MenuItemProps = MenuItemProps$1;
+type MenuItemProps = Omit<MenuItemProps$1, 'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'TouchRippleProps' | 'touchRippleRef'>;
 declare const MenuItem: (props: MenuItemProps) => JSX.Element;
 type MenuListProps = MenuListProps$1;
 declare const MenuList: (props: MenuListProps) => JSX.Element;

package/dist/index.js

@@ -31,12 +31,15 @@ var import_material = require("@mui/material");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Menu = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Menu, {
-    ...props
+    ...props,
+    slotProps: { paper: { variant: "elevation" } }
   });
 };
 var MenuItem = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.MenuItem, {
-    ...props
+    ...props,
+    disableRipple: true,
+    disableTouchRipple: true
   });
 };
 var MenuList = (props) => {

package/dist/index.mjs

@@ -7,12 +7,15 @@ import {
 import { jsx } from "react/jsx-runtime";
 var Menu = (props) => {
   return /* @__PURE__ */ jsx(MuiMenu, {
-    ...props
+    ...props,
+    slotProps: { paper: { variant: "elevation" } }
   });
 };
 var MenuItem = (props) => {
   return /* @__PURE__ */ jsx(MuiMenuItem, {
-    ...props
+    ...props,
+    disableRipple: true,
+    disableTouchRipple: true
   });
 };
 var MenuList = (props) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-menu",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Availity MUI Menu Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -33,7 +33,8 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "devDependencies": {
-    "@mui/material": "^5.11.9",
+    "@availity/mui-icon": "^0.6.1",
+    "@mui/material": "^5.14.12",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tsup": "^5.12.7",

package/src/lib/Menu.stories.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useRef, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from '@availity/mui-button';
+import { UserIcon, SettingsIcon, ArrowCircleLeftIcon, HelpCircleIcon } from '@availity/mui-icon';
 import { Menu, MenuItem } from './Menu';
 
 const meta: Meta<typeof Menu> = {
@@ -30,7 +31,7 @@ export const _Menu: StoryObj<typeof Menu> = {
     };
 
     return (
-      <>
+      <div>
         <Button
           id="basic-button"
           aria-controls={open ? 'basic-menu' : undefined}
@@ -52,10 +53,76 @@ export const _Menu: StoryObj<typeof Menu> = {
           {...args}
         >
           <MenuItem onClick={handleClose}>Profile</MenuItem>
-          <MenuItem onClick={handleClose}>My account</MenuItem>
+          <MenuItem onClick={handleClose} selected>
+            My account
+          </MenuItem>
+          <MenuItem onClick={handleClose} disabled>
+            Help
+          </MenuItem>
           <MenuItem onClick={handleClose}>Logout</MenuItem>
         </Menu>
-      </>
+      </div>
+    );
+  },
+};
+
+export const _MenuWithIcons: StoryObj<typeof Menu> = {
+  render: ({ open, ...args }) => {
+    const anchorEl = useRef<HTMLButtonElement>(null);
+    const [controlledOpen, setControlledOpen] = useState(false);
+
+    useEffect(() => {
+      setControlledOpen(open);
+    }, [open]);
+
+    const handleClick = () => {
+      setControlledOpen((prev) => !prev);
+    };
+
+    const handleClose = () => {
+      setControlledOpen(false);
+    };
+
+    return (
+      <div>
+        <Button
+          id="basic-button"
+          aria-controls={open ? 'basic-menu' : undefined}
+          aria-haspopup="true"
+          aria-expanded={open ? 'true' : undefined}
+          onClick={handleClick}
+          ref={anchorEl}
+        >
+          Dashboard
+        </Button>
+        <Menu
+          id="basic-menu"
+          anchorEl={anchorEl.current}
+          open={controlledOpen}
+          onClose={handleClose}
+          MenuListProps={{
+            'aria-labelledby': 'basic-button',
+          }}
+          {...args}
+        >
+          <MenuItem onClick={handleClose}>
+            <UserIcon />
+            Profile
+          </MenuItem>
+          <MenuItem onClick={handleClose} selected>
+            <SettingsIcon />
+            My account
+          </MenuItem>
+          <MenuItem onClick={handleClose} disabled>
+            <HelpCircleIcon />
+            Help
+          </MenuItem>
+          <MenuItem onClick={handleClose}>
+            <ArrowCircleLeftIcon />
+            Logout
+          </MenuItem>
+        </Menu>
+      </div>
     );
   },
 };

package/src/lib/Menu.tsx

@@ -15,6 +15,7 @@ export type MenuProps = Omit<
   | 'disableAutoFocusItem'
   | 'disableEnforceFocus'
   | 'disableEscapeKeyDown'
+  | 'elevation'
   | 'onBackdropClick'
   | 'PopoverClasses'
   | 'ref'
@@ -24,13 +25,16 @@ export type MenuProps = Omit<
 >;
 
 export const Menu = (props: MenuProps): JSX.Element => {
-  return <MuiMenu {...props} />;
+  return <MuiMenu {...props} slotProps={{ paper: { variant: 'elevation' } }} />;
 };
 
-export type MenuItemProps = MuiMenuItemProps;
+export type MenuItemProps = Omit<
+  MuiMenuItemProps,
+  'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'TouchRippleProps' | 'touchRippleRef'
+>;
 
 export const MenuItem = (props: MenuItemProps) => {
-  return <MuiMenuItem {...props} />;
+  return <MuiMenuItem {...props} disableRipple disableTouchRipple />;
 };
 
 export type MenuListProps = MuiMenuListProps;