fix: Update tooltip component

Author: Who-is-PS

pages/tooltip/internal-tooltip-examples.page.tsx

@@ -94,7 +94,7 @@ function InteractivePositionControlExample() {
                   onBlur: () => setShowTooltip(false),
                 }}
               >
-                Hover me
+                Hover
               </Button>
               {showTooltip && (
                 <Tooltip

src/tooltip/__tests__/tooltip.test.tsx

@@ -30,7 +30,7 @@ function renderTooltip(props: Partial<TooltipProps>) {
       getTrack={props.getTrack ?? (() => null)}
       trackKey={props.trackKey}
       content={props.content ?? ''}
-      onEscape={props.onEscape ?? (() => {})}
+      onEscape={props.onEscape}
     />
   );
   return new TooltipInternalWrapper(container);

src/tooltip/index.tsx

@@ -1,89 +1,24 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 'use client';
-import React, { useEffect } from 'react';
-import clsx from 'clsx';
+import React from 'react';
 
-import { Portal } from '@cloudscape-design/component-toolkit/internal';
-
-import { Transition } from '../internal/components/transition';
-import { fireNonCancelableEvent } from '../internal/events';
-import PopoverArrow from '../popover/arrow';
-import PopoverBody from '../popover/body';
-import PopoverContainer from '../popover/container';
-import { InternalTooltipProps, TooltipProps } from './interfaces';
-
-import styles from './styles.css.js';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { getExternalProps } from '../internal/utils/external-props';
+import { TooltipProps } from './interfaces';
+import InternalTooltip from './internal';
 
 export { TooltipProps };
 
-export default function Tooltip({
-  content,
-  getTrack,
-  trackKey,
-  position = 'top',
-  __dismissOnScroll,
-  className,
-  onEscape,
-}: InternalTooltipProps) {
-  const trackRef = React.useRef<HTMLElement | SVGElement | null>(null);
-
-  // Update the ref with the current tracked element
-  React.useEffect(() => {
-    trackRef.current = getTrack();
+const Tooltip = ({ position = 'top', ...rest }: TooltipProps) => {
+  const baseComponentProps = useBaseComponent('Tooltip', {
+    props: { position },
   });
+  const externalProps = getExternalProps(rest);
 
-  if (!trackKey && (typeof content === 'string' || typeof content === 'number')) {
-    trackKey = content;
-  }
-
-  useEffect(() => {
-    const controller = new AbortController();
-    window.addEventListener(
-      'keydown',
-      (event: KeyboardEvent) => {
-        if (event.key === 'Escape') {
-          // Prevent any surrounding modals or dialogs from acting on this Esc.
-          event.stopPropagation();
-          fireNonCancelableEvent(onEscape);
-        }
-      },
-      {
-        // The tooltip is often activated on mouseover, which means the focus can
-        // be anywhere else on the page. Capture also means that this gets called
-        // before any wrapper modals or dialogs can detect it and act on it.
-        capture: true,
-        signal: controller.signal,
-      }
-    );
-    return () => {
-      controller.abort();
-    };
-  }, [onEscape]);
+  return <InternalTooltip position={position} {...externalProps} {...baseComponentProps} />;
+};
 
-  return (
-    <Portal>
-      <div className={clsx(styles.root, className)} data-testid={trackKey}>
-        <Transition in={true}>
-          {() => (
-            <PopoverContainer
-              trackRef={trackRef}
-              trackKey={trackKey}
-              size="medium"
-              fixedWidth={false}
-              position={position}
-              zIndex={7000}
-              arrow={position => <PopoverArrow position={position} />}
-              hideOnOverscroll={__dismissOnScroll}
-              className={className}
-            >
-              <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={undefined} header={undefined}>
-                {content}
-              </PopoverBody>
-            </PopoverContainer>
-          )}
-        </Transition>
-      </div>
-    </Portal>
-  );
-}
+applyDisplayName(Tooltip, 'Tooltip');
+export default Tooltip;

src/tooltip/internal.tsx

@@ -1,3 +1,96 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-export { default, TooltipProps } from './index.js';
+import React, { useEffect } from 'react';
+import clsx from 'clsx';
+
+import { Portal } from '@cloudscape-design/component-toolkit/internal';
+
+import { getBaseProps } from '../internal/base-component';
+import { Transition } from '../internal/components/transition';
+import { fireNonCancelableEvent } from '../internal/events';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import PopoverArrow from '../popover/arrow';
+import PopoverBody from '../popover/body';
+import PopoverContainer from '../popover/container';
+import { InternalTooltipProps } from './interfaces';
+
+import styles from './styles.css.js';
+
+type InternalTooltipComponentProps = InternalTooltipProps & InternalBaseComponentProps;
+
+export default function InternalTooltip({
+  content,
+  getTrack,
+  trackKey,
+  position = 'top',
+  __dismissOnScroll,
+  onEscape,
+  __internalRootRef,
+  ...restProps
+}: InternalTooltipComponentProps) {
+  const baseProps = getBaseProps(restProps);
+  const trackRef = React.useRef<HTMLElement | SVGElement | null>(null);
+
+  // Update the ref with the current tracked element
+  React.useEffect(() => {
+    trackRef.current = getTrack();
+  });
+
+  if (!trackKey && (typeof content === 'string' || typeof content === 'number')) {
+    trackKey = content;
+  }
+
+  useEffect(() => {
+    const controller = new AbortController();
+    window.addEventListener(
+      'keydown',
+      (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          // Prevent any surrounding modals or dialogs from acting on this Esc.
+          event.stopPropagation();
+          fireNonCancelableEvent(onEscape);
+        }
+      },
+      {
+        // The tooltip is often activated on mouseover, which means the focus can
+        // be anywhere else on the page. Capture also means that this gets called
+        // before any wrapper modals or dialogs can detect it and act on it.
+        capture: true,
+        signal: controller.signal,
+      }
+    );
+    return () => {
+      controller.abort();
+    };
+  }, [onEscape]);
+
+  return (
+    <Portal>
+      <div
+        {...baseProps}
+        className={clsx(styles.root, baseProps.className)}
+        data-testid={trackKey}
+        ref={__internalRootRef}
+      >
+        <Transition in={true}>
+          {() => (
+            <PopoverContainer
+              trackRef={trackRef}
+              trackKey={trackKey}
+              size="medium"
+              fixedWidth={false}
+              position={position}
+              zIndex={7000}
+              arrow={position => <PopoverArrow position={position} />}
+              hideOnOverscroll={__dismissOnScroll}
+            >
+              <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={undefined} header={undefined}>
+                {content}
+              </PopoverBody>
+            </PopoverContainer>
+          )}
+        </Transition>
+      </div>
+    </Portal>
+  );
+}