@dxos/react-ui 0.8.4-staging.ac66bdf99f → 0.9.1-main.c7dcc2e112

package/src/components/Toast/Toast.stories.tsx

@@ -12,32 +12,43 @@ import { Toast } from './Toast';
 type ActionTriggerProps = { altText: string; trigger: ReactNode };
 
 type StorybookToastProps = Partial<{
+  icon: string;
   title: string;
   description: string;
+  duration: number;
   actionTriggers: ActionTriggerProps[];
   openTrigger: string;
-  closeTrigger: ReactNode;
+  defaultOpen: boolean;
 }>;
 
-const DefaultStory = ({ title, description, actionTriggers, openTrigger, closeTrigger }: StorybookToastProps) => {
-  const [open, setOpen] = useState(true);
+const DefaultStory = ({
+  icon,
+  title,
+  description,
+  duration,
+  actionTriggers,
+  openTrigger,
+  defaultOpen = true,
+}: StorybookToastProps) => {
+  const [open, setOpen] = useState(defaultOpen);
   return (
     <Toast.Provider>
       <Button onClick={() => setOpen(true)}>{openTrigger}</Button>
       <Toast.Viewport />
-      <Toast.Root open={open} onOpenChange={setOpen}>
-        <Toast.Body>
-          <Toast.Title>{title}</Toast.Title>
-          <Toast.Description>{description}</Toast.Description>
-        </Toast.Body>
-        <Toast.Actions>
-          <Toast.Close asChild={typeof closeTrigger !== 'string'}>{closeTrigger}</Toast.Close>
-          {(actionTriggers || []).map(({ altText, trigger }: ActionTriggerProps, index: number) => (
-            <Toast.Action key={index} altText={altText} asChild={typeof trigger !== 'string'}>
-              {trigger}
-            </Toast.Action>
-          ))}
-        </Toast.Actions>
+      <Toast.Root open={open} onOpenChange={setOpen} defaultOpen={defaultOpen} duration={duration}>
+        <Toast.Title icon={icon} onClose={() => setOpen(false)}>
+          {title}
+        </Toast.Title>
+        <Toast.Description>{description}</Toast.Description>
+        {actionTriggers && actionTriggers.length > 0 && (
+          <Toast.Actions>
+            {actionTriggers.map(({ altText, trigger }: ActionTriggerProps, index: number) => (
+              <Toast.Action key={index} altText={altText} asChild={typeof trigger !== 'string'}>
+                {trigger}
+              </Toast.Action>
+            ))}
+          </Toast.Actions>
+        )}
       </Toast.Root>
     </Toast.Provider>
   );
@@ -56,18 +67,28 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
+    defaultOpen: true,
     openTrigger: 'Open toast',
+    icon: 'ph--sparkle--regular',
     title: 'This is a toast',
     description: 'This goes away on its own with a timer.',
+    duration: 100_000,
+  },
+};
+
+export const WithAction: Story = {
+  args: {
+    defaultOpen: true,
+    openTrigger: 'Open toast',
+    icon: 'ph--sparkle--regular',
+    title: 'This is a toast',
+    description: 'This goes away on its own with a timer.',
+    duration: 100_000,
     actionTriggers: [
       {
         altText: 'Press F5 to reload the page',
         trigger: <Button variant='primary'>Reload</Button>,
       },
     ],
-    closeTrigger: <Button>Close</Button>,
-  },
-  parameters: {
-    chromatic: { delay: 800 },
   },
 };

package/src/components/Toast/Toast.theme.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx, surfaceShadow } from '@dxos/ui-theme';
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+export type ToastStyleProps = {};
+
+const viewport: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
+  mx(
+    // TODO(burdon): block-end should take into account status bar.
+    'z-40 fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] inset-start-[calc(env(safe-area-inset-left)+1rem)] inset-end-[calc(env(safe-area-inset-right)+1rem)] w-auto md:end-[calc(env(safe-area-inset-right)+1rem)] md:left-auto md:w-full md:max-w-sm',
+    'rounded-md flex flex-col gap-2',
+    ...etc,
+  );
+
+const root: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
+  mx(
+    'dx-popover-surface rounded-md p-1',
+    surfaceShadow({ elevation: 'toast' }),
+    'radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right',
+    'radix-state-closed:animate-toast-hide',
+    'radix-swipe-end:animate-toast-swipe-out',
+    'translate-x-radix-toast-swipe-move-x',
+    'radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]',
+    'dx-focus-ring',
+    ...etc,
+  );
+
+const grid: ComponentFunction<ToastStyleProps> = (_props, ...etc) => mx('gap-y-1 pbe-1', ...etc);
+
+const header: ComponentFunction<ToastStyleProps> = (_props, ...etc) => mx('items-center', ...etc);
+
+const title: ComponentFunction<ToastStyleProps> = (_props, ...etc) => mx('col-start-2 truncate font-medium', ...etc);
+
+const description: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
+  mx('col-start-2 overflow-hidden text-description', ...etc);
+
+const actions: ComponentFunction<ToastStyleProps> = (_props, ...etc) => mx('flex gap-2 mbs-1', ...etc);
+
+export const toastTheme: Theme<ToastStyleProps> = {
+  viewport,
+  root,
+  grid,
+  header,
+  title,
+  description,
+  actions,
+};

package/src/components/Toast/Toast.tsx

@@ -2,18 +2,30 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Primitive } from '@radix-ui/react-primitive';
-import { Slot } from '@radix-ui/react-slot';
 import * as ToastPrimitive from '@radix-ui/react-toast';
-import React, { type ComponentPropsWithRef, type FunctionComponent, forwardRef } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { translationKey } from '#translations';
 
 import { useThemeContext } from '../../hooks';
+import { DensityProvider, ElevationProvider } from '../../primitives';
 import { type ThemedClassName } from '../../util';
-import { ElevationProvider } from '../ElevationProvider';
+import { IconButton } from '../Button';
+import { Column } from '../Column';
+import { Icon } from '../Icon';
+
+//
+// Provider
+//
 
 type ToastProviderProps = ToastPrimitive.ToastProviderProps;
 
-const ToastProvider: FunctionComponent<ToastProviderProps> = ToastPrimitive.Provider;
+const ToastProvider = ToastPrimitive.Provider;
+
+//
+// Viewport
+//
 
 type ToastViewportProps = ThemedClassName<ToastPrimitive.ToastViewportProps>;
 
@@ -22,68 +34,126 @@ const ToastViewport = forwardRef<HTMLOListElement, ToastViewportProps>(({ classN
   return <ToastPrimitive.Viewport {...props} className={tx('toast.viewport', {}, classNames)} ref={forwardedRef} />;
 });
 
+ToastViewport.displayName = 'Toast.Viewport';
+
+//
+// Root
+//
+
 type ToastRootProps = ThemedClassName<ToastPrimitive.ToastProps>;
 
 const ToastRoot = forwardRef<HTMLLIElement, ToastRootProps>(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
     <ToastPrimitive.Root {...props} className={tx('toast.root', {}, classNames)} ref={forwardedRef}>
-      <ElevationProvider elevation='toast'>{children}</ElevationProvider>
+      <ElevationProvider elevation='toast'>
+        <Column.Root classNames={tx('toast.grid', {})}>{children}</Column.Root>
+      </ElevationProvider>
     </ToastPrimitive.Root>
   );
 });
 
-type ToastBodyProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>>;
+ToastRoot.displayName = 'Toast.Root';
 
-const ToastBody = forwardRef<HTMLDivElement, ToastBodyProps>(({ asChild, classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const Comp = asChild ? Slot : Primitive.div;
-  return <Comp {...props} className={tx('toast.body', {}, classNames)} ref={forwardedRef} />;
-});
+//
+// Title
+//
 
-type ToastTitleProps = ThemedClassName<ToastPrimitive.ToastTitleProps>;
+type ToastTitleProps = ThemedClassName<ToastPrimitive.ToastTitleProps> & {
+  icon?: string;
+  onClose?: () => void;
+};
 
 const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(
-  ({ asChild, classNames, ...props }, forwardedRef) => {
+  ({ classNames, children, icon, onClose, ...props }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
     const { tx } = useThemeContext();
-    const Comp = asChild ? Slot : ToastPrimitive.Title;
-    return <Comp {...props} className={tx('toast.title', {}, classNames)} ref={forwardedRef} />;
+    return (
+      <Column.Row classNames={tx('toast.header', {})}>
+        {icon && (
+          <Column.Block>
+            <Icon icon={icon} size={5} />
+          </Column.Block>
+        )}
+        <ToastPrimitive.Title {...props} className={tx('toast.title', {}, classNames)} ref={forwardedRef}>
+          {children}
+        </ToastPrimitive.Title>
+        {onClose && (
+          <Column.Block end>
+            <IconButton
+              variant='ghost'
+              icon='ph--x--regular'
+              iconOnly
+              label={t('toolbar-close.label')}
+              onClick={onClose}
+            />
+          </Column.Block>
+        )}
+      </Column.Row>
+    );
   },
 );
 
+ToastTitle.displayName = 'Toast.Title';
+
+//
+// Description
+//
+
 type ToastDescriptionProps = ThemedClassName<ToastPrimitive.ToastDescriptionProps>;
 
 const ToastDescription = forwardRef<HTMLParagraphElement, ToastDescriptionProps>(
-  ({ asChild, classNames, ...props }, forwardedRef) => {
+  ({ classNames, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Comp = asChild ? Slot : ToastPrimitive.Description;
-    return <Comp {...props} className={tx('toast.description', {}, classNames)} ref={forwardedRef} />;
+    return (
+      <ToastPrimitive.Description {...props} className={tx('toast.description', {}, classNames)} ref={forwardedRef}>
+        {children}
+      </ToastPrimitive.Description>
+    );
   },
 );
 
-type ToastActionsProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>>;
+ToastDescription.displayName = 'Toast.Description';
+
+//
+// Actions
+//
+
+type ToastActionsProps = ThemedClassName<ComponentPropsWithRef<'div'>>;
 
 const ToastActions = forwardRef<HTMLDivElement, ToastActionsProps>(
-  ({ asChild, classNames, ...props }, forwardedRef) => {
+  ({ classNames, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Comp = asChild ? Slot : Primitive.div;
-    return <Comp {...props} className={tx('toast.actions', {}, classNames)} ref={forwardedRef} />;
+    return (
+      <Column.Center classNames={tx('toast.actions', {}, classNames)} ref={forwardedRef} {...props}>
+        <DensityProvider density='sm'>{children}</DensityProvider>
+      </Column.Center>
+    );
   },
 );
 
+ToastActions.displayName = 'Toast.Actions';
+
+//
+// Action / Close
+//
+
 type ToastActionProps = ToastPrimitive.ToastActionProps;
 
-const ToastAction: FunctionComponent<ToastActionProps> = ToastPrimitive.Action;
+const ToastAction = ToastPrimitive.Action;
 
 type ToastCloseProps = ToastPrimitive.ToastCloseProps;
 
-const ToastClose: FunctionComponent<ToastCloseProps> = ToastPrimitive.Close;
+const ToastClose = ToastPrimitive.Close;
+
+//
+// Toast
+//
 
 export const Toast = {
   Provider: ToastProvider,
   Viewport: ToastViewport,
   Root: ToastRoot,
-  Body: ToastBody,
   Title: ToastTitle,
   Description: ToastDescription,
   Actions: ToastActions,
@@ -95,7 +165,6 @@ export type {
   ToastProviderProps,
   ToastViewportProps,
   ToastRootProps,
-  ToastBodyProps,
   ToastTitleProps,
   ToastDescriptionProps,
   ToastActionsProps,

package/src/components/Toolbar/Toolbar.theme.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
+
+export type ToolbarStyleProps = Partial<{
+  density: Density;
+  disabled: boolean;
+  layoutManaged: boolean;
+}>;
+
+const layout =
+  'w-full shrink-0 flex flex-nowrap p-1 gap-1 items-center overflow-x-auto scrollbar-none dx-contain-layout';
+
+const root: ComponentFunction<ToolbarStyleProps> = ({ density, disabled, layoutManaged }, ...etc) => {
+  return mx(
+    'bg-toolbar-surface dx-toolbar shadow-sm',
+    density === 'lg' && 'h-(--dx-rail-size) px-3!',
+    density === 'sm' && 'h-7 px-2!',
+    density === 'xs' && 'h-6 px-1!',
+    disabled && '*:opacity-20',
+    !layoutManaged && layout,
+    ...etc,
+  );
+};
+
+const text: ComponentFunction<ToolbarStyleProps> = (_, ...etc) => {
+  return mx('px-2 grow truncate items-center', ...etc);
+};
+
+export const toolbarTheme: Theme<ToolbarStyleProps> = {
+  root,
+  text,
+};

package/src/components/Toolbar/Toolbar.tsx

@@ -6,14 +6,16 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import type { ToggleGroupItemProps as ToggleGroupItemPrimitiveProps } from '@radix-ui/react-toggle-group';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
-import React, { forwardRef } from 'react';
+import React, { type MouseEventHandler, forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { composable, composableProps, slottable, type ToolbarStyleProps } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
+import { translationKey } from '#translations';
+
 import { useThemeContext } from '../../hooks';
-import { translationKey } from '../../translations';
+import { type ToolbarStyleProps } from '../../theme';
+import { composable, composableProps, slottable } from '../../util';
 import {
   Button,
   ButtonGroup,
@@ -56,6 +58,8 @@ const ToolbarRoot = composable<HTMLDivElement, ToolbarRootProps>(
   },
 );
 
+ToolbarRoot.displayName = 'Toolbar.Root';
+
 //
 // Text
 //
@@ -73,6 +77,8 @@ const ToolbarText = slottable<HTMLDivElement>(({ children, asChild, ...props },
   );
 });
 
+ToolbarText.displayName = 'Toolbar.Text';
+
 //
 // Button
 //
@@ -87,6 +93,8 @@ const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>((props,
   );
 });
 
+ToolbarButton.displayName = 'Toolbar.Button';
+
 //
 // IconButton
 //
@@ -96,11 +104,13 @@ type ToolbarIconButtonProps = IconButtonProps;
 const ToolbarIconButton = forwardRef<HTMLButtonElement, ToolbarIconButtonProps>((props, forwardedRef) => {
   return (
     <ToolbarPrimitive.Button asChild>
-      <IconButton {...props} noTooltip ref={forwardedRef} />
+      <IconButton {...props} ref={forwardedRef} />
     </ToolbarPrimitive.Button>
   );
 });
 
+ToolbarIconButton.displayName = 'Toolbar.IconButton';
+
 type ToolbarToggleProps = ToggleProps;
 
 const ToolbarToggle = forwardRef<HTMLButtonElement, ToolbarToggleProps>((props, forwardedRef) => {
@@ -111,6 +121,8 @@ const ToolbarToggle = forwardRef<HTMLButtonElement, ToolbarToggleProps>((props,
   );
 });
 
+ToolbarToggle.displayName = 'Toolbar.Toggle';
+
 //
 // Link
 //
@@ -125,6 +137,8 @@ const ToolbarLink = forwardRef<HTMLAnchorElement, ToolbarLinkProps>((props, forw
   );
 });
 
+ToolbarLink.displayName = 'Toolbar.Link';
+
 type ToolbarToggleGroupProps = (
   | Omit<ToolbarPrimitive.ToolbarToggleGroupSingleProps, 'className'>
   | Omit<ToolbarPrimitive.ToolbarToggleGroupMultipleProps, 'className'>
@@ -145,6 +159,8 @@ const ToolbarToggleGroup = forwardRef<HTMLDivElement, ToolbarToggleGroupProps>(
   },
 );
 
+ToolbarToggleGroup.displayName = 'Toolbar.ToggleGroup';
+
 type ToolbarToggleGroupItemProps = ToggleGroupItemProps;
 
 const ToolbarToggleGroupItem = forwardRef<HTMLButtonElement, ToolbarToggleGroupItemProps>(
@@ -157,10 +173,12 @@ const ToolbarToggleGroupItem = forwardRef<HTMLButtonElement, ToolbarToggleGroupI
   },
 );
 
+ToolbarToggleGroupItem.displayName = 'Toolbar.ToggleGroupItem';
+
 type ToolbarToggleGroupIconItemProps = Omit<ToggleGroupItemPrimitiveProps, 'className'> & IconButtonProps;
 
 const ToolbarToggleGroupIconItem = forwardRef<HTMLButtonElement, ToolbarToggleGroupIconItemProps>(
-  ({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+  ({ variant, density, elevation, classNames, icon, label, iconOnly, iconClassNames, ...props }, forwardedRef) => {
     return (
       <ToolbarPrimitive.ToolbarToggleItem {...props} asChild>
         <IconButton
@@ -172,6 +190,7 @@ const ToolbarToggleGroupIconItem = forwardRef<HTMLButtonElement, ToolbarToggleGr
             icon,
             label,
             iconOnly,
+            iconClassNames,
           }}
           ref={forwardedRef}
         />
@@ -180,6 +199,8 @@ const ToolbarToggleGroupIconItem = forwardRef<HTMLButtonElement, ToolbarToggleGr
   },
 );
 
+ToolbarToggleGroupIconItem.displayName = 'Toolbar.ToggleGroupIconItem';
+
 //
 // Separator
 //
@@ -198,6 +219,8 @@ const ToolbarSeparator = forwardRef<HTMLDivElement, ToolbarSeparatorProps>(
   },
 );
 
+ToolbarSeparator.displayName = 'Toolbar.Separator';
+
 //
 // DragHandle
 //
@@ -224,22 +247,46 @@ const ToolbarDragHandle = forwardRef<HTMLButtonElement, ToolbarDragHandleProps>(
   },
 );
 
+ToolbarDragHandle.displayName = 'Toolbar.DragHandle';
+
 //
-// CloseIconButton
+// ActionIconButton
 //
 
-type ToolbarCloseIconButtonProps = { onClick?: () => void; label?: string };
+/**
+ * Known semantic actions a toolbar icon-button can represent. Each action
+ * picks its own phosphor icon + default translation key so call sites just
+ * declare intent (`action='delete'`) rather than re-specifying the icon /
+ * label every time.
+ */
+type ToolbarActionIconButtonAction = 'close' | 'delete';
+
+type ToolbarActionIconButtonProps = {
+  action: ToolbarActionIconButtonAction;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  label?: string;
+};
+
+const TOOLBAR_ACTION_ICONS: Record<ToolbarActionIconButtonAction, string> = {
+  close: 'ph--x--regular',
+  delete: 'ph--trash--regular',
+};
+
+const TOOLBAR_ACTION_LABEL_KEYS: Record<ToolbarActionIconButtonAction, string> = {
+  close: 'toolbar-close.label',
+  delete: 'toolbar-delete.label',
+};
 
-const ToolbarCloseIconButton = forwardRef<HTMLButtonElement, ToolbarCloseIconButtonProps>(
-  ({ onClick, label }, forwardedRef) => {
+const ToolbarActionIconButton = forwardRef<HTMLButtonElement, ToolbarActionIconButtonProps>(
+  ({ action, onClick, label }, forwardedRef) => {
     const { t } = useTranslation(translationKey);
 
     return (
       <ToolbarIconButton
         iconOnly
-        icon='ph--x--regular'
+        icon={TOOLBAR_ACTION_ICONS[action]}
         variant='ghost'
-        label={label ?? t('toolbar-close.label')}
+        label={label ?? t(TOOLBAR_ACTION_LABEL_KEYS[action])}
         classNames='cursor-pointer'
         onClick={onClick}
         ref={forwardedRef}
@@ -248,6 +295,8 @@ const ToolbarCloseIconButton = forwardRef<HTMLButtonElement, ToolbarCloseIconBut
   },
 );
 
+ToolbarActionIconButton.displayName = 'Toolbar.ActionIconButton';
+
 //
 // Menu
 //
@@ -263,7 +312,7 @@ type ToolbarMenuProps<T extends any | void = void> = {
 };
 
 // TODO(burdon): Make slottable.
-const ToolbarMenu = <T extends any | void = void>({ context, items }: ToolbarMenuProps<T>) => {
+function ToolbarMenu<T extends any | void = void>({ context, items }: ToolbarMenuProps<T>) {
   const { t } = useTranslation(translationKey);
 
   return (
@@ -292,7 +341,9 @@ const ToolbarMenu = <T extends any | void = void>({ context, items }: ToolbarMen
       )}
     </DropdownMenu.Root>
   );
-};
+}
+
+ToolbarMenu.displayName = 'Toolbar.Menu';
 
 //
 // Toolbar
@@ -310,7 +361,7 @@ export const Toolbar = {
   ToggleGroupIconItem: ToolbarToggleGroupIconItem,
   Separator: ToolbarSeparator,
   DragHandle: ToolbarDragHandle,
-  CloseIconButton: ToolbarCloseIconButton,
+  ActionIconButton: ToolbarActionIconButton,
   Menu: ToolbarMenu,
 };
 
@@ -326,7 +377,8 @@ export type {
   ToolbarToggleGroupIconItemProps,
   ToolbarSeparatorProps,
   ToolbarDragHandleProps,
-  ToolbarCloseIconButtonProps,
+  ToolbarActionIconButtonAction,
+  ToolbarActionIconButtonProps,
   ToolbarMenuItem,
   ToolbarMenuProps,
 };

package/src/components/Tooltip/TextTooltip.tsx

@@ -0,0 +1,54 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import React, {
+  type ComponentPropsWithoutRef,
+  type PropsWithChildren,
+  type SyntheticEvent,
+  forwardRef,
+  useCallback,
+  useRef,
+} from 'react';
+
+import { Tooltip, type TooltipScopedProps, type TooltipTriggerProps } from './Tooltip';
+
+export type TextTooltipProps = PropsWithChildren<
+  {
+    text: string;
+    asChild?: boolean;
+    onlyWhenTruncating?: boolean;
+    truncateQuery?: string;
+  } & Pick<TooltipTriggerProps, 'side'> &
+    ComponentPropsWithoutRef<'button'>
+>;
+
+export const TextTooltip = forwardRef<HTMLButtonElement, TooltipScopedProps<TextTooltipProps>>(
+  (
+    { __scopeTooltip, text, children, onlyWhenTruncating, asChild = true, side, truncateQuery, ...props },
+    forwardedRef,
+  ) => {
+    const content = useRef<HTMLButtonElement | null>(null);
+    const ref = useComposedRefs(content, forwardedRef);
+    const handleInteract = useCallback(
+      (event: SyntheticEvent) => {
+        if (onlyWhenTruncating && content.current) {
+          const element: HTMLElement | null = truncateQuery
+            ? content.current.querySelector(truncateQuery)
+            : content.current;
+          if (!element || element.scrollWidth <= element.offsetWidth) {
+            event.preventDefault();
+          }
+        }
+      },
+      [onlyWhenTruncating, truncateQuery],
+    );
+
+    return (
+      <Tooltip.Trigger asChild={asChild} {...props} content={text} side={side} onInteract={handleInteract} ref={ref}>
+        {children}
+      </Tooltip.Trigger>
+    );
+  },
+);

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -19,7 +19,7 @@ type DefaultStoryProps = {
 const DefaultStory = ({ tooltips, defaultOpen }: DefaultStoryProps) => {
   return (
     <Tooltip.Provider defaultOpen={defaultOpen}>
-      <div role='none' className='w-32'>
+      <div className='w-32'>
         {tooltips.map(({ label, content }, i) => (
           <Tooltip.Trigger asChild key={i} content={content} side='right'>
             <Button classNames='block w-full'>{label}</Button>
@@ -50,9 +50,6 @@ export const Default: Story = {
       },
     ],
   },
-  parameters: {
-    chromatic: { delay: 500 },
-  },
 };
 
 export const DefaultOpen: Story = {
@@ -65,9 +62,6 @@ export const DefaultOpen: Story = {
       },
     ],
   },
-  parameters: {
-    chromatic: { delay: 500 },
-  },
 };
 
 export const StressTest: Story = {
@@ -81,7 +75,4 @@ export const StressTest: Story = {
       { count: 32 },
     ),
   },
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
 };