From 081bae6f441a27f433a23fc2263ac513f1bb4752 Mon Sep 17 00:00:00 2001 From: jordankoschei-okta Date: Wed, 7 Jun 2023 10:53:32 -0400 Subject: [PATCH 1/6] refactor: make MenuItem use our own props --- packages/odyssey-react-mui/src/MenuItem.tsx | 49 +++++++++------------ 1 file changed, 22 insertions(+), 27 deletions(-) diff --git a/packages/odyssey-react-mui/src/MenuItem.tsx b/packages/odyssey-react-mui/src/MenuItem.tsx index 7d09a2847e..be9802fa78 100644 --- a/packages/odyssey-react-mui/src/MenuItem.tsx +++ b/packages/odyssey-react-mui/src/MenuItem.tsx @@ -10,38 +10,33 @@ * See the License for the specific language governing permissions and limitations under the License. */ -import { memo, forwardRef } from "react"; +import { ReactNode, memo } 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. - */ +export type MenuItemProps = { + hasInitialFocus?: boolean; + children: ReactNode; + isSelected?: boolean; isDestructive?: boolean; -} +}; -const MenuItem = forwardRef( - ({ isDestructive, ...props }, ref) => ( - - {props.children} - - ) +const MenuItem = ({ + children, + hasInitialFocus, + isDestructive, + isSelected, +}: MenuItemProps) => ( + + {children} + ); const MemoizedMenuItem = memo(MenuItem); From 5f7d9a84593fffa06a84a6e67f7a8fd4b4f177af Mon Sep 17 00:00:00 2001 From: jordankoschei-okta Date: Wed, 21 Jun 2023 11:10:55 -0400 Subject: [PATCH 2/6] feat: add props to MenuItem --- packages/odyssey-react-mui/src/MenuItem.tsx | 34 ++++++++++++++++----- 1 file changed, 27 insertions(+), 7 deletions(-) diff --git a/packages/odyssey-react-mui/src/MenuItem.tsx b/packages/odyssey-react-mui/src/MenuItem.tsx index cf84965787..03cce41b70 100644 --- a/packages/odyssey-react-mui/src/MenuItem.tsx +++ b/packages/odyssey-react-mui/src/MenuItem.tsx @@ -10,28 +10,48 @@ * See the License for the specific language governing permissions and limitations under the License. */ -import { MenuItem as MuiMenuItem } from "@mui/material"; +import { + MenuItem as MuiMenuItem, + MenuItemProps as MuiMenuItemProps, +} from "@mui/material"; import { menuItemClasses } from "@mui/material/MenuItem"; -import type { MenuItemProps as MuiMenuItemProps } from "@mui/material"; -import { memo, useContext } from "react"; +import { ReactNode, memo, useCallback, useContext } from "react"; import { MenuContext } from "./MenuContext"; export type MenuItemProps = { - hasInitialFocus?: boolean; children: ReactNode; + content?: string; + "data-testid"?: string; + hasInitialFocus?: boolean; + href?: string; isSelected?: boolean; isDestructive?: boolean; + onClick?: MuiMenuItemProps["onClick"]; + rel?: string; + rev?: string; + value?: string; }; -const MenuItem = ({ isDestructive, ...props }: MenuItemProps) => { +const MenuItem = ({ + isDestructive, + onClick: onClickProp, + ...props +}: MenuItemProps) => { const { closeMenu } = useContext(MenuContext); - console.log(closeMenu); + + const onClick = useCallback( + (event: React.MouseEvent) => { + onClickProp?.(event); + closeMenu(); + }, + [onClickProp] + ); return ( Date: Wed, 5 Jul 2023 10:48:13 -0400 Subject: [PATCH 3/6] fix: update MenuItem API --- packages/odyssey-react-mui/src/MenuItem.tsx | 22 +++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/odyssey-react-mui/src/MenuItem.tsx b/packages/odyssey-react-mui/src/MenuItem.tsx index 03cce41b70..4f73c00d7a 100644 --- a/packages/odyssey-react-mui/src/MenuItem.tsx +++ b/packages/odyssey-react-mui/src/MenuItem.tsx @@ -22,9 +22,7 @@ import { MenuContext } from "./MenuContext"; export type MenuItemProps = { children: ReactNode; content?: string; - "data-testid"?: string; hasInitialFocus?: boolean; - href?: string; isSelected?: boolean; isDestructive?: boolean; onClick?: MuiMenuItemProps["onClick"]; @@ -34,9 +32,15 @@ export type MenuItemProps = { }; const MenuItem = ({ + children, + content, + hasInitialFocus, + isSelected, isDestructive, onClick: onClickProp, - ...props + rel, + rev, + value, }: MenuItemProps) => { const { closeMenu } = useContext(MenuContext); @@ -45,18 +49,24 @@ const MenuItem = ({ onClickProp?.(event); closeMenu(); }, - [onClickProp] + [onClickProp, closeMenu] ); return ( - {props.children} + {children} ); }; From 720a5150fc1170fd1c8e8f8681bb6b24cd0e50f2 Mon Sep 17 00:00:00 2001 From: jordankoschei-okta Date: Wed, 5 Jul 2023 16:10:31 -0400 Subject: [PATCH 4/6] refactor: commit KG suggestions --- packages/odyssey-react-mui/src/MenuItem.tsx | 28 ++++++++++----------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/odyssey-react-mui/src/MenuItem.tsx b/packages/odyssey-react-mui/src/MenuItem.tsx index 4f73c00d7a..037a8e2669 100644 --- a/packages/odyssey-react-mui/src/MenuItem.tsx +++ b/packages/odyssey-react-mui/src/MenuItem.tsx @@ -15,37 +15,38 @@ import { MenuItemProps as MuiMenuItemProps, } from "@mui/material"; import { menuItemClasses } from "@mui/material/MenuItem"; -import { ReactNode, memo, useCallback, useContext } from "react"; +import { + memo, + useCallback, + useContext, + type MouseEventHandler, + type ReactNode, +} from "react"; import { MenuContext } from "./MenuContext"; export type MenuItemProps = { children: ReactNode; - content?: string; hasInitialFocus?: boolean; isSelected?: boolean; isDestructive?: boolean; onClick?: MuiMenuItemProps["onClick"]; - rel?: string; - rev?: string; value?: string; + variant?: "default" | "destructive"; }; const MenuItem = ({ children, - content, hasInitialFocus, isSelected, - isDestructive, onClick: onClickProp, - rel, - rev, value, + variant = "default", }: MenuItemProps) => { const { closeMenu } = useContext(MenuContext); - const onClick = useCallback( - (event: React.MouseEvent) => { + const onClick = useCallback>( + (event) => { onClickProp?.(event); closeMenu(); }, @@ -54,16 +55,15 @@ const MenuItem = ({ return ( {children} From 3bda14a53372b44651f4d1097c91089acb0e91f9 Mon Sep 17 00:00:00 2001 From: jordankoschei-okta Date: Fri, 7 Jul 2023 11:13:29 -0400 Subject: [PATCH 5/6] docs: add prop docs to MenuItem --- packages/odyssey-react-mui/src/MenuItem.tsx | 33 ++++++++++++++++----- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/packages/odyssey-react-mui/src/MenuItem.tsx b/packages/odyssey-react-mui/src/MenuItem.tsx index 037a8e2669..1905cf0a6b 100644 --- a/packages/odyssey-react-mui/src/MenuItem.tsx +++ b/packages/odyssey-react-mui/src/MenuItem.tsx @@ -15,23 +15,40 @@ import { MenuItemProps as MuiMenuItemProps, } from "@mui/material"; import { menuItemClasses } from "@mui/material/MenuItem"; -import { - memo, - useCallback, - useContext, - type MouseEventHandler, - type ReactNode, -} from "react"; +import { memo, useCallback, useContext, type ReactNode } from "react"; import { MenuContext } from "./MenuContext"; export type MenuItemProps = { + /** + * The content of the menu item. + */ children: ReactNode; + /** + * If `true`, the menu item will receive focus automatically. + */ hasInitialFocus?: boolean; + /** + * If `true`, the menu item will be visually marked as selected. + */ isSelected?: boolean; + /** + * If `true`, the menu item will be visually marked as destructive. + */ isDestructive?: boolean; + /** + * Callback fired when the menu item is clicked. + */ onClick?: MuiMenuItemProps["onClick"]; + /** + * The value associated with the menu item. + */ value?: string; + /** + * The variant of the menu item. + * - "default": The default variant. + * - "destructive": A variant indicating a destructive action. + */ variant?: "default" | "destructive"; }; @@ -45,7 +62,7 @@ const MenuItem = ({ }: MenuItemProps) => { const { closeMenu } = useContext(MenuContext); - const onClick = useCallback>( + const onClick = useCallback( (event) => { onClickProp?.(event); closeMenu(); From d837a30eae5bc92769b2e62fb2b6978446c7f4be Mon Sep 17 00:00:00 2001 From: jordankoschei-okta Date: Thu, 13 Jul 2023 12:39:58 -0400 Subject: [PATCH 6/6] fix: add NonNullable to fix broken type --- packages/odyssey-react-mui/src/MenuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/odyssey-react-mui/src/MenuItem.tsx b/packages/odyssey-react-mui/src/MenuItem.tsx index 1905cf0a6b..062f7b8f32 100644 --- a/packages/odyssey-react-mui/src/MenuItem.tsx +++ b/packages/odyssey-react-mui/src/MenuItem.tsx @@ -62,7 +62,7 @@ const MenuItem = ({ }: MenuItemProps) => { const { closeMenu } = useContext(MenuContext); - const onClick = useCallback( + const onClick = useCallback>( (event) => { onClickProp?.(event); closeMenu();