chore(website): Fix usage of useTooltip when it is conditionally applied

Author: mlaursen

packages/documentation/src/components/AppBarAction.tsx

@@ -11,6 +11,7 @@ interface Props extends AppBarActionProps {
 export default function AppBarAction({
   id,
   tooltip,
+  children,
   onClick,
   onBlur,
   onFocus,
@@ -19,24 +20,29 @@ export default function AppBarAction({
   onMouseLeave,
   onTouchStart,
   onContextMenu,
-  children,
   ...props
 }: Props): ReactElement {
-  const { elementProps, tooltipProps } = useTooltip({
-    baseId: id,
+  const handlers = {
     onClick,
     onBlur,
     onFocus,
+    onKeyDown,
     onMouseEnter,
     onMouseLeave,
-    onKeyDown,
     onTouchStart,
     onContextMenu,
+  };
+  const { elementProps, tooltipProps } = useTooltip({
+    baseId: id,
+    ...handlers,
   });
 
   return (
     <>
-      <RMDAppBarAction {...props} {...(tooltip ? elementProps : { id })}>
+      <RMDAppBarAction
+        {...props}
+        {...(tooltip ? elementProps : { id, ...handlers })}
+      >
         {children}
       </RMDAppBarAction>
       <Tooltip {...tooltipProps}>{tooltip}</Tooltip>

packages/documentation/src/components/AppBarNav.tsx

@@ -11,6 +11,7 @@ interface Props extends AppBarNavProps {
 export default function AppBarNav({
   id,
   tooltip,
+  children,
   onClick,
   onBlur,
   onFocus,
@@ -19,24 +20,29 @@ export default function AppBarNav({
   onMouseLeave,
   onTouchStart,
   onContextMenu,
-  children,
   ...props
 }: Props): ReactElement {
-  const { elementProps, tooltipProps } = useTooltip({
-    baseId: id,
+  const handlers = {
     onClick,
     onBlur,
     onFocus,
+    onKeyDown,
     onMouseEnter,
     onMouseLeave,
-    onKeyDown,
     onTouchStart,
     onContextMenu,
+  };
+  const { elementProps, tooltipProps } = useTooltip({
+    baseId: id,
+    ...handlers,
   });
 
   return (
     <>
-      <RMDAppBarNav {...props} {...(tooltip ? elementProps : { id })}>
+      <RMDAppBarNav
+        {...props}
+        {...(tooltip ? elementProps : { id, ...handlers })}
+      >
         {children}
       </RMDAppBarNav>
       <Tooltip {...tooltipProps}>{tooltip}</Tooltip>

packages/documentation/src/components/Button.tsx

@@ -11,6 +11,7 @@ interface Props extends ButtonProps {
 export default function Button({
   id,
   tooltip,
+  children,
   onClick,
   onBlur,
   onFocus,
@@ -19,24 +20,26 @@ export default function Button({
   onMouseLeave,
   onTouchStart,
   onContextMenu,
-  children,
   ...props
 }: Props): ReactElement {
-  const { elementProps, tooltipProps } = useTooltip({
-    baseId: id,
+  const handlers = {
     onClick,
     onBlur,
     onFocus,
+    onKeyDown,
     onMouseEnter,
     onMouseLeave,
-    onKeyDown,
     onTouchStart,
     onContextMenu,
+  };
+  const { elementProps, tooltipProps } = useTooltip({
+    baseId: id,
+    ...handlers,
   });
 
   return (
     <>
-      <RMDButton {...props} {...(tooltip ? elementProps : { id })}>
+      <RMDButton {...props} {...(tooltip ? elementProps : { id, ...handlers })}>
         {children}
       </RMDButton>
       <Tooltip {...tooltipProps}>{tooltip}</Tooltip>

packages/documentation/src/components/Demos/Badge/TooltippedBadgedButton.tsx

@@ -31,8 +31,7 @@ export default forwardRef<HTMLButtonElement, TooltippedBadgedButtonProps>(
     },
     ref
   ) {
-    const { elementProps, tooltipProps } = useTooltip({
-      baseId: id,
+    const handlers = {
       onClick,
       onBlur,
       onFocus,
@@ -41,13 +40,17 @@ export default forwardRef<HTMLButtonElement, TooltippedBadgedButtonProps>(
       onKeyDown,
       onTouchStart,
       onContextMenu,
+    };
+    const { elementProps, tooltipProps } = useTooltip({
+      baseId: id,
+      ...handlers,
     });
 
     return (
       <>
         <BadgedButton
           {...props}
-          {...(tooltip ? elementProps : { id })}
+          {...(tooltip ? elementProps : { id, ...handlers })}
           ref={ref}
         >
           {children}

packages/documentation/src/components/Demos/Tooltip/TooltipHookExample.tsx

@@ -5,6 +5,9 @@ import { Tooltip, useTooltip } from "@react-md/tooltip";
 export default function TooltipHookExample(): ReactElement {
   const { tooltipProps, elementProps } = useTooltip({
     baseId: "my-element-id",
+    onClick: (_event) => {
+      // if the button has a custom click event, it should be set here
+    },
   });
 
   return (

packages/documentation/src/components/Demos/Tooltip/TooltippedButton.tsx

@@ -11,7 +11,7 @@ interface TooltippedButtonProps
       "defaultPosition" | "dense" | "position" | "focusTime" | "touchTime"
     > {
   id: string;
-  tooltip?: ReactNode;
+  tooltip: ReactNode;
 }
 
 export default function TooltippedButton({
@@ -24,6 +24,7 @@ export default function TooltippedButton({
   onMouseEnter,
   onMouseLeave,
   onTouchStart,
+  onContextMenu,
   children,
   dense,
   position,
@@ -42,6 +43,7 @@ export default function TooltippedButton({
     onMouseEnter,
     onMouseLeave,
     onTouchStart,
+    onContextMenu,
     position,
     focusTime,
     touchTime,