feat: Tooltip component

src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx

@@ -12,7 +12,7 @@ import {
 import { ButtonProps } from '../../../../button/interfaces';
 import { IconProps } from '../../../../icon/interfaces';
 import Icon from '../../../../icon/internal';
-import Tooltip from '../../../../internal/components/tooltip';
+import Tooltip from '../../../../tooltip/internal.js';
 
 import testutilStyles from '../../../test-classes/styles.css.js';
 import styles from './styles.css.js';
@@ -241,10 +241,10 @@ function TriggerButton(
       {badge && <div className={styles.dot} />}
       {tooltipVisible && (
         <Tooltip
-          trackRef={containerRef}
-          value={tooltipValue}
+          getTrack={() => containerRef.current}
           className={testutilStyles['trigger-tooltip']}
-          onDismiss={() => {
+          content={tooltipValue}
+          onEscape={() => {
             setShowTooltip(false);
             setSupressTooltip(false);
           }}

src/area-chart/chart-container.tsx

@@ -27,21 +27,20 @@
 
 type TickFormatter = undefined | ((value: AreaChartProps.DataTypes) => string);
 
-interface ChartContainerProps<T extends AreaChartProps.DataTypes>
-  extends Pick<
-    AreaChartProps<T>,
-    | 'xTitle'
-    | 'yTitle'
-    | 'xTickFormatter'
-    | 'yTickFormatter'
-    | 'detailTotalFormatter'
-    | 'detailPopoverSize'
-    | 'detailPopoverFooter'
-    | 'ariaLabel'
-    | 'ariaLabelledby'
-    | 'ariaDescription'
-    | 'i18nStrings'
-  > {
+interface ChartContainerProps<T extends AreaChartProps.DataTypes> extends Pick<
+  AreaChartProps<T>,
+  | 'xTitle'
+  | 'yTitle'
+  | 'xTickFormatter'
+  | 'yTickFormatter'
+  | 'detailTotalFormatter'
+  | 'detailPopoverSize'
+  | 'detailPopoverFooter'
+  | 'ariaLabel'
+  | 'ariaLabelledby'
+  | 'ariaDescription'
+  | 'i18nStrings'
+> {
   model: ChartModel<T>;
   autoWidth: (value: number) => void;
   fitHeight?: boolean;

src/area-chart/interfaces.ts

@@ -2,8 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 import { CartesianChartProps, ChartDataTypes } from '../internal/components/cartesian-chart/interfaces';
 
-export interface AreaChartProps<T extends AreaChartProps.DataTypes>
-  extends CartesianChartProps<T, AreaChartProps.Series<T>> {
+export interface AreaChartProps<T extends AreaChartProps.DataTypes> extends CartesianChartProps<
+  T,
+  AreaChartProps.Series<T>
+> {
   /**
    * Array that represents the source of data for the displayed chart.
    * Each element can represent an area series, or a threshold, and can have the following properties:

src/autosuggest/interfaces.ts

@@ -15,7 +15,8 @@ import { FormFieldValidationControlProps } from '../internal/context/form-field-
 import { NonCancelableEventHandler } from '../internal/events';
 
 export interface AutosuggestProps
-  extends BaseComponentProps,
+  extends
+    BaseComponentProps,
     BaseInputProps,
     InputAutoCorrect,
     BaseDropdownHostProps,

src/autosuggest/options-list.tsx

@@ -8,8 +8,10 @@ import { AutosuggestItemsHandlers, AutosuggestItemsState } from './options-contr
 import PlainList from './plain-list';
 import VirtualList from './virtual-list';
 
-interface AutosuggestOptionsListProps
-  extends Pick<AutosuggestProps, 'virtualScroll' | 'selectedAriaLabel' | 'renderHighlightedAriaLive'> {
+interface AutosuggestOptionsListProps extends Pick<
+  AutosuggestProps,
+  'virtualScroll' | 'selectedAriaLabel' | 'renderHighlightedAriaLive'
+> {
   statusType: AutosuggestProps.StatusType;
   autosuggestItemsState: AutosuggestItemsState;
   autosuggestItemsHandlers: AutosuggestItemsHandlers;

src/breadcrumb-group/__integ__/breadcrumb-group.test.ts

@@ -6,7 +6,7 @@ import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 import createWrapper from '../../../lib/components/test-utils/selectors';
 
 import breadcrumbGroupStyles from '../../../lib/components/breadcrumb-group/styles.selectors.js';
-import tooltipStyles from '../../../lib/components/internal/components/tooltip/styles.selectors.js';
+import tooltipStyles from '../../../lib/components/tooltip/styles.selectors.js';
 
 const breadcrumbGroupWrapper = createWrapper().findBreadcrumbGroup();
 const dropdownWrapper = breadcrumbGroupWrapper.findDropdown();

src/breadcrumb-group/__tests__/breadcrumb-item.test.tsx

@@ -10,7 +10,7 @@ import { BreadcrumbItem } from '../../../lib/components/breadcrumb-group/item/it
 import createWrapper, { BreadcrumbGroupWrapper } from '../../../lib/components/test-utils/dom';
 
 import breadcrumbItemStyles from '../../../lib/components/breadcrumb-group/item/styles.selectors.js';
-import tooltipStyles from '../../../lib/components/internal/components/tooltip/styles.selectors.js';
+import tooltipStyles from '../../../lib/components/tooltip/styles.selectors.js';
 
 const renderBreadcrumbGroup = (props: BreadcrumbGroupProps) => {
   const { container } = render(<BreadcrumbGroup {...props} />);

src/breadcrumb-group/interfaces.ts

@@ -5,8 +5,9 @@ import { BaseComponentProps } from '../internal/base-component';
 import { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 
-export interface BreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>
-  extends BaseComponentProps {
+export interface BreadcrumbGroupProps<
+  T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item,
+> extends BaseComponentProps {
   /**
    * An array of breadcrumb items that describes the link hierarchy for this navigation.
    * Each option has the following properties:
@@ -47,8 +48,9 @@ export namespace BreadcrumbGroupProps {
     href: string;
   }
 
-  export interface ClickDetail<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>
-    extends BaseNavigationDetail {
+  export interface ClickDetail<
+    T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item,
+  > extends BaseNavigationDetail {
     item: T;
     text: string;
     href: string;

src/breadcrumb-group/item/item.tsx

@@ -4,8 +4,8 @@ import React, { useRef, useState } from 'react';
 import clsx from 'clsx';
 
 import InternalIcon from '../../icon/internal';
-import Tooltip from '../../internal/components/tooltip';
 import { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';
+import Tooltip from '../../tooltip/internal.js';
 import { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';
 import { getEventDetail } from '../utils';
 import { FunnelBreadcrumbItem } from './funnel';
@@ -47,7 +47,7 @@ const BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({
     >
       {children}
       {showTooltip && (
-        <Tooltip trackRef={textRef} value={item.text} size="medium" onDismiss={() => setShowTooltip(false)} />
+        <Tooltip getTrack={() => textRef.current} content={item.text} onEscape={() => setShowTooltip(false)} />
       )}
     </Item>
   );

src/button-dropdown/interfaces.ts

@@ -209,8 +209,10 @@ export namespace ButtonDropdownProps {
     labelTag?: string;
   }
 
-  export interface CheckboxItem
-    extends Omit<ButtonDropdownProps.Item, 'href' | 'download' | 'external' | 'externalIconAriaLabel' | 'itemType'> {
+  export interface CheckboxItem extends Omit<
+    ButtonDropdownProps.Item,
+    'href' | 'download' | 'external' | 'externalIconAriaLabel' | 'itemType'
+  > {
     itemType: 'checkbox';
     checked: boolean;
   }
@@ -331,8 +333,7 @@ type InternalItems = ReadonlyArray<InternalItemOrGroup>;
 export type InternalItemOrGroup = InternalItem | InternalCheckboxItem | InternalItemGroup;
 
 export interface InternalButtonDropdownProps
-  extends Omit<ButtonDropdownProps, 'variant' | 'items'>,
-    InternalBaseComponentProps {
+  extends Omit<ButtonDropdownProps, 'variant' | 'items'>, InternalBaseComponentProps {
   customTriggerBuilder?: (props: CustomTriggerProps) => React.ReactNode;
   variant?: ButtonDropdownProps['variant'] | 'navigation';
   items: ReadonlyArray<InternalItemOrGroup>;

src/button-group/file-input-item.tsx

@@ -5,8 +5,8 @@ import clsx from 'clsx';
 
 import { FileInputProps } from '../file-input/interfaces.js';
 import InternalFileInput from '../file-input/internal.js';
-import Tooltip from '../internal/components/tooltip/index.js';
 import { CancelableEventHandler, fireCancelableEvent } from '../internal/events/index.js';
+import Tooltip from '../tooltip/internal.js';
 import { ButtonGroupProps } from './interfaces.js';
 
 import testUtilStyles from './test-classes/styles.css.js';
@@ -47,11 +47,11 @@ const FileInputItem = forwardRef(
         />
         {canShowTooltip && (
           <Tooltip
-            trackRef={containerRef}
-            trackKey={item.id}
-            value={item.text}
             className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}
-            onDismiss={onTooltipDismiss}
+            getTrack={() => containerRef.current}
+            trackKey={item.id}
+            content={item.text}
+            onEscape={onTooltipDismiss}
           />
         )}
       </div>

src/button-group/icon-button-item.tsx

@@ -7,9 +7,8 @@ import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import { ButtonProps } from '../button/interfaces.js';
 import { InternalButton } from '../button/internal.js';
-import Tooltip from '../internal/components/tooltip/index.js';
 import { CancelableEventHandler, fireCancelableEvent } from '../internal/events/index.js';
-import InternalLiveRegion from '../live-region/internal.js';
+import Tooltip from '../tooltip/internal.js';
 import { ButtonGroupProps, InternalIconButton } from './interfaces.js';
 
 import testUtilStyles from './test-classes/styles.css.js';
@@ -62,14 +61,17 @@ const IconButtonItem = forwardRef(
         </InternalButton>
         {(canShowTooltip || canShowFeedback) && (
           <Tooltip
-            trackRef={containerRef}
+            className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}
+            getTrack={() => containerRef.current}
             trackKey={item.id}
-            value={
-              (showFeedback && <InternalLiveRegion tagName="span">{item.popoverFeedback}</InternalLiveRegion>) ||
-              item.text
+            content={
+              canShowFeedback
+                ? typeof item.popoverFeedback === 'string'
+                  ? item.popoverFeedback
+                  : item.text
+                : item.text
             }
-            className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}
-            onDismiss={onTooltipDismiss}
+            onEscape={onTooltipDismiss}
           />
         )}
       </div>

src/button-group/icon-toggle-button-item.tsx

@@ -6,10 +6,10 @@ import clsx from 'clsx';
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import { ButtonProps } from '../button/interfaces.js';
-import Tooltip from '../internal/components/tooltip/index.js';
 import { CancelableEventHandler, fireCancelableEvent } from '../internal/events/index.js';
 import InternalLiveRegion from '../live-region/internal.js';
 import { InternalToggleButton } from '../toggle-button/internal.js';
+import Tooltip from '../tooltip/internal.js';
 import { ButtonGroupProps, InternalIconToggleButton } from './interfaces.js';
 
 import testUtilStyles from './test-classes/styles.css.js';
@@ -69,13 +69,13 @@ const IconToggleButtonItem = forwardRef(
         </InternalToggleButton>
         {(canShowTooltip || canShowFeedback) && (
           <Tooltip
-            trackRef={containerRef}
+            className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}
+            getTrack={() => containerRef.current}
             trackKey={item.id}
-            value={
+            content={
               (showFeedback && <InternalLiveRegion tagName="span">{feedbackContent}</InternalLiveRegion>) || item.text
             }
-            className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}
-            onDismiss={onTooltipDismiss}
+            onEscape={onTooltipDismiss}
           />
         )}
       </div>

src/button-group/interfaces.ts

@@ -120,8 +120,7 @@ export type InternalItem =
   | ButtonGroupProps.MenuDropdown;
 
 export interface InternalButtonGroupProps
-  extends SomeRequired<ButtonGroupProps, 'dropdownExpandToViewport'>,
-    InternalBaseComponentProps {
+  extends SomeRequired<ButtonGroupProps, 'dropdownExpandToViewport'>, InternalBaseComponentProps {
   style?: ButtonGroupProps.Style;
   items: ReadonlyArray<InternalItemOrGroup>;
 }

src/button-group/menu-dropdown-item.tsx

@@ -8,8 +8,8 @@ import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-tool
 import InternalButton from '../button/internal';
 import { ButtonDropdownProps } from '../button-dropdown/interfaces';
 import ButtonDropdown from '../button-dropdown/internal';
-import Tooltip from '../internal/components/tooltip';
 import { CancelableEventHandler, fireCancelableEvent } from '../internal/events';
+import Tooltip from '../tooltip/internal.js';
 import { ButtonGroupProps } from './interfaces';
 
 import testUtilStyles from './test-classes/styles.css.js';
@@ -49,11 +49,11 @@ const MenuDropdownItem = React.forwardRef(
           <div ref={containerRef} {...(item.disabled ? {} : getAnalyticsMetadataAttribute({ detail: { position } }))}>
             {!isOpen && showTooltip && !item.disabled && !item.loading && (
               <Tooltip
-                trackRef={containerRef}
-                trackKey={item.id}
-                value={item.text}
                 className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}
-                onDismiss={onTooltipDismiss}
+                getTrack={() => containerRef.current}
+                trackKey={item.id}
+                content={item.text}
+                onEscape={onTooltipDismiss}
               />
             )}
             <InternalButton

src/button/internal.tsx

@@ -20,7 +20,6 @@ import {
   getSubStepAllSelector,
   getTextFromSelector,
 } from '../internal/analytics/selectors';
-import Tooltip from '../internal/components/tooltip/index.js';
 import { useButtonContext } from '../internal/context/button-context';
 import { fireCancelableEvent, isPlainLeftClick } from '../internal/events';
 import useForwardFocus from '../internal/hooks/forward-focus';
@@ -31,6 +30,7 @@ import { usePerformanceMarks } from '../internal/hooks/use-performance-marks';
 import { checkSafeUrl } from '../internal/utils/check-safe-url';
 import WithNativeAttributes from '../internal/utils/with-native-attributes';
 import InternalLiveRegion from '../live-region/internal';
+import Tooltip from '../tooltip/internal.js';
 import { GeneratedAnalyticsMetadataButtonFragment } from './analytics-metadata/interfaces';
 import { ButtonIconProps, LeftIcon, RightIcon } from './icon-helper';
 import { ButtonProps } from './interfaces';
@@ -283,9 +283,9 @@ export const InternalButton = React.forwardRef(
         {showTooltip && (
           <Tooltip
             className={testUtilStyles['disabled-reason-tooltip']}
-            trackRef={buttonRef}
-            value={disabledReason!}
-            onDismiss={() => setShowTooltip(false)}
+            getTrack={() => buttonRef.current}
+            content={disabledReason!}
+            onEscape={() => setShowTooltip(false)}
           />
         )}
       </>

src/calendar/grid/index.tsx

@@ -7,10 +7,10 @@ import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
 
 import { DatePickerProps } from '../../date-picker/interfaces';
 import ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';
-import Tooltip from '../../internal/components/tooltip';
 import { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';
 import useHiddenDescription from '../../internal/hooks/use-hidden-description';
 import { applyDisplayName } from '../../internal/utils/apply-display-name';
+import Tooltip from '../../tooltip/internal.js';
 import { CalendarProps } from '../interfaces';
 
 import styles from '../styles.css.js';
@@ -77,9 +77,9 @@ const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTM
           {showTooltip && (
             <Tooltip
               className={styles['disabled-reason-tooltip']}
-              trackRef={ref}
-              value={disabledReason!}
-              onDismiss={() => setShowTooltip(false)}
+              getTrack={() => ref.current}
+              content={disabledReason!}
+              onEscape={() => setShowTooltip(false)}
             />
           )}
         </>

src/column-layout/flexible-column-layout/index.tsx

@@ -31,11 +31,10 @@ export function calculcateCssColumnCount(
   );
 }
 
-interface FlexibleColumnLayoutProps
-  extends Pick<
-    InternalColumnLayoutProps,
-    'minColumnWidth' | 'columns' | 'variant' | 'borders' | 'disableGutters' | '__tagOverride'
-  > {
+interface FlexibleColumnLayoutProps extends Pick<
+  InternalColumnLayoutProps,
+  'minColumnWidth' | 'columns' | 'variant' | 'borders' | 'disableGutters' | '__tagOverride'
+> {
   children: React.ReactNode;
 }
 

src/column-layout/grid-column-layout.tsx

@@ -21,7 +21,8 @@ const COLUMN_DEFS: Record<number, GridProps.ElementDefinition | undefined> = {
 };
 
 interface GridColumnLayoutProps
-  extends Required<Pick<InternalColumnLayoutProps, 'columns' | 'variant' | 'borders' | 'disableGutters'>>,
+  extends
+    Required<Pick<InternalColumnLayoutProps, 'columns' | 'variant' | 'borders' | 'disableGutters'>>,
     Pick<InternalColumnLayoutProps, '__tagOverride'> {
   children: React.ReactNode;
   __breakpoint?: ColumnLayoutBreakpoint;

src/column-layout/styles.scss

@@ -54,7 +54,10 @@ $column-breakpoint-spans: (
 
 @mixin remove-useless-vertical-borders($col-size, $direction) {
   $items-per-row: math.div($grid-columns, $col-size);
-  $items-modifier: if($direction == 'inline-start', '+1', '');
+  $items-modifier: '';
+  @if $direction == 'inline-start' {
+    $items-modifier: '+1';
+  }
   > *:nth-child(#{$items-per-row}n#{$items-modifier}) {
     border-#{$direction}-width: 0;
   }