diff --git a/packages/odyssey-react-mui/src/Button.tsx b/packages/odyssey-react-mui/src/Button.tsx index ddceff5356..8732091717 100644 --- a/packages/odyssey-react-mui/src/Button.tsx +++ b/packages/odyssey-react-mui/src/Button.tsx @@ -12,7 +12,7 @@ import { Button as MuiButton } from "@mui/material"; import type { ButtonProps as MuiButtonProps } from "@mui/material"; -import { memo, ReactElement, useContext, useMemo } from "react"; +import { memo, ReactElement, useCallback, useContext } from "react"; import { Icon } from "./Icon"; import { MuiPropsContext } from "./MuiPropsContext"; @@ -62,8 +62,8 @@ const Button = ({ }: ButtonProps) => { const muiProps = useContext(MuiPropsContext); - const button = useMemo( - () => ( + const renderButton = useCallback( + (muiProps) => ( {tooltipText && ( - - {button} + + {renderButton} )} - {!tooltipText && button} + + {!tooltipText && renderButton(muiProps)} ); }; diff --git a/packages/odyssey-react-mui/src/Tag.tsx b/packages/odyssey-react-mui/src/Tag.tsx index 70e5c55774..d1c164f4c1 100644 --- a/packages/odyssey-react-mui/src/Tag.tsx +++ b/packages/odyssey-react-mui/src/Tag.tsx @@ -10,34 +10,41 @@ * See the License for the specific language governing permissions and limitations under the License. */ -import { Chip, ChipProps } from "@mui/material"; -import { memo, ReactElement, useContext } from "react"; +import { Chip as MuiChip, ChipProps as MuiChipProps } from "@mui/material"; +import { memo, ReactElement, useCallback, useContext } from "react"; import { TagListContext } from "./TagListContext"; import { Icon } from "./Icon"; +import { MuiPropsContext } from "./MuiPropsContext"; export type TagProps = { icon?: ReactElement; isDisabled?: boolean; label: string; - onClick?: ChipProps["onClick"]; - onRemove?: ChipProps["onDelete"]; + onClick?: MuiChipProps["onClick"]; + onRemove?: MuiChipProps["onDelete"]; }; const Tag = ({ icon, isDisabled, label, onClick, onRemove }: TagProps) => { const { chipElementType } = useContext(TagListContext); - return ( - + const renderTag = useCallback( + (muiProps) => ( + + ), + [chipElementType, icon, isDisabled, label, onClick, onRemove] ); + + return {renderTag}; }; const MemoizedTag = memo(Tag); diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx index 43a5f4733e..21fc438bee 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Tooltip/Tooltip.stories.tsx @@ -14,6 +14,7 @@ import { Meta, StoryObj } from "@storybook/react"; import { Button, DownloadIcon, + Tag, Tooltip, TooltipProps, } from "@okta/odyssey-react-mui"; @@ -145,16 +146,19 @@ export const Placement: StoryObj = { return ( <> -