diff --git a/packages/components/src/custom/TooltipIcon.tsx b/packages/components/src/custom/TooltipIcon.tsx new file mode 100644 index 00000000..22d8613b --- /dev/null +++ b/packages/components/src/custom/TooltipIcon.tsx @@ -0,0 +1,36 @@ +import { SxProps } from '@mui/material/styles'; +import React from 'react'; +import { IconButton } from '../base/IconButton'; +import Tooltip from '../patches/Tooltip'; + +interface TooltipIconProps { + title: string; + onClick: (event: React.MouseEvent) => void; + icon: React.ReactNode; + arrow?: boolean; + style?: React.CSSProperties; +} + +export function TooltipIcon({ title, onClick, icon, style, arrow = false }: TooltipIconProps) { + return ( + + + {icon} + + + ); +} + +export default TooltipIcon; diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx index 092a01d4..693f0208 100644 --- a/packages/components/src/index.tsx +++ b/packages/components/src/index.tsx @@ -69,6 +69,7 @@ export { type ResponsiveDataTableProps } from './custom/ResponsiveDataTable'; export { default as SearchBar, type SearchBarProps } from './custom/SearchBar'; +export { default as TooltipIcon } from './custom/TooltipIcon'; export { default as UniversalFilter, type FilterColumn, diff --git a/packages/components/src/patches/Tooltip.tsx b/packages/components/src/patches/Tooltip.tsx new file mode 100644 index 00000000..6b66c6a7 --- /dev/null +++ b/packages/components/src/patches/Tooltip.tsx @@ -0,0 +1,20 @@ +import MuiTooltip, { TooltipProps } from '@mui/material/Tooltip'; +import React from 'react'; + +export interface ChildrenPropType { + children?: T; +} + +/** + * Create a custom Tooltip component to resolve the React.forwardRef warning + */ +export const Tooltip = React.forwardRef< + HTMLDivElement, + TooltipProps & ChildrenPropType +>((props, ref) => ( + + {props.children} + +)); + +export default Tooltip;