@dxos/react-ui 0.9.0 → 0.9.1-main.c7dcc2e112

package/src/components/Card/Card.tsx

@@ -5,25 +5,23 @@
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import DOMPurify from 'dompurify';
-import React, { CSSProperties, JSX, MouseEventHandler, type ReactNode, forwardRef, useId, useMemo } from 'react';
+import React, { CSSProperties, MouseEventHandler, type ReactNode, forwardRef, useId, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { iconSize } from '@dxos/ui-theme';
-import { type Density } from '@dxos/ui-types';
+import { type Density, type SlottableProps } from '@dxos/ui-types';
+
+import { translationKey } from '#translations';
 
 import { useThemeContext } from '../../hooks';
 import { composable, composableProps, slottable } from '../../util';
 import { type ThemedClassName } from '../../util';
-import { Button } from '../Button';
+import { Button, IconButton } from '../Button';
 import { Column } from '../Column';
-import { Icon, IconBlock, type IconBlockProps, type IconProps } from '../Icon';
+import { Icon } from '../Icon';
 import { Image, type ImageProps } from '../Image';
-import {
-  Toolbar,
-  type ToolbarActionIconButtonProps,
-  ToolbarDragHandleProps,
-  type ToolbarMenuProps,
-  type ToolbarRootProps,
-} from '../Toolbar';
+import { DropdownMenu } from '../Menu';
+import { type ToolbarActionIconButtonProps, type ToolbarDragHandleProps, type ToolbarMenuProps } from '../Toolbar';
 
 //
 // Root
@@ -82,22 +80,34 @@ CardRoot.displayName = CARD_ROOT_NAME;
 
 const CARD_HEADER_NAME = 'Card.Header';
 
-type CardHeaderProps = ToolbarRootProps;
+type CardHeaderProps = SlottableProps;
 
 /**
- * Top "header" slot of a Card. Despite the name, this renders as an ARIA
- * toolbar (`role="toolbar"`) so its action children get keyboard navigation
- * for free — `<header>` is allowed to contain a toolbar.
+ * Top header row of a Card. Renders as a `<header>` and shares `Card.Row`'s subgrid +
+ * `data-slot` layout: `Card.Block` children land in the gutters, anonymous children
+ * (e.g. `Card.Title`) in the center. Sets `--icon-size` 5 — header icons are larger than
+ * row icons (which use 4). Not a toolbar: most headers carry 0–1 controls, so `role="toolbar"`
+ * was inaccurate; controls are reached by normal tab order.
  */
-const CardHeader = composable<HTMLDivElement, CardHeaderProps>(({ children, classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
+const CardHeader = slottable<HTMLDivElement, CardHeaderProps>(
+  ({ children, asChild, style, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const { className, ...rest } = composableProps(props);
+    // `@radix-ui/react-primitive` has no `header` node; the intrinsic element handles asChild via Slot.
+    const Comp = asChild ? Slot : 'header';
 
-  return (
-    <Toolbar.Root {...props} style={iconSize(5)} classNames={[tx('card.header', {}), classNames]} ref={forwardedRef}>
-      {children}
-    </Toolbar.Root>
-  );
-});
+    return (
+      <Comp
+        {...rest}
+        style={{ ...iconSize(5), ...style }}
+        className={tx('card.header', {}, className)}
+        ref={forwardedRef}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
 
 CardHeader.displayName = CARD_HEADER_NAME;
 
@@ -109,13 +119,27 @@ const CARD_DRAG_HANDLE_NAME = 'Card.DragHandle';
 
 type CardDragHandleProps = ToolbarDragHandleProps;
 
-const CardDragHandle = forwardRef<HTMLButtonElement, CardDragHandleProps>((props, forwardedRef) => {
-  return (
-    <CardIconBlock>
-      <Toolbar.DragHandle {...props} ref={forwardedRef} />
-    </CardIconBlock>
-  );
-});
+const CardDragHandle = forwardRef<HTMLButtonElement, CardDragHandleProps>(
+  ({ testId = 'drag-handle', label }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    return (
+      <CardBlock>
+        <IconButton
+          data-testid={testId}
+          tabIndex={-1}
+          noTooltip
+          iconOnly
+          icon='ph--dots-six-vertical--regular'
+          variant='ghost'
+          label={label ?? t('toolbar-drag-handle.label')}
+          classNames='dx-focus-ring-none cursor-pointer text-base-fg'
+          disabled={!forwardedRef}
+          ref={forwardedRef}
+        />
+      </CardBlock>
+    );
+  },
+);
 
 CardDragHandle.displayName = CARD_DRAG_HANDLE_NAME;
 
@@ -127,13 +151,28 @@ const CARD_ACTION_ICON_BUTTON_NAME = 'Card.ActionIconButton';
 
 type CardActionIconButtonProps = ToolbarActionIconButtonProps;
 
-const CardActionIconButton = forwardRef<HTMLButtonElement, CardActionIconButtonProps>((props, forwardedRef) => {
-  return (
-    <CardIconBlock>
-      <Toolbar.ActionIconButton {...props} ref={forwardedRef} />
-    </CardIconBlock>
-  );
-});
+const CARD_ACTION_ICONS = { close: 'ph--x--regular', delete: 'ph--trash--regular' } as const;
+
+const CARD_ACTION_LABEL_KEYS = { close: 'toolbar-close.label', delete: 'toolbar-delete.label' } as const;
+
+const CardActionIconButton = forwardRef<HTMLButtonElement, CardActionIconButtonProps>(
+  ({ action, onClick, label }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    return (
+      <CardBlock end>
+        <IconButton
+          iconOnly
+          icon={CARD_ACTION_ICONS[action]}
+          variant='ghost'
+          label={label ?? t(CARD_ACTION_LABEL_KEYS[action])}
+          classNames='cursor-pointer'
+          onClick={onClick}
+          ref={forwardedRef}
+        />
+      </CardBlock>
+    );
+  },
+);
 
 CardActionIconButton.displayName = CARD_ACTION_ICON_BUTTON_NAME;
 
@@ -145,43 +184,67 @@ const CARD_MENU_NAME = 'Card.Menu';
 
 type CardMenuProps<T extends any | void = void> = ToolbarMenuProps<T>;
 
-function CardMenu<T extends any | void = void>({ context, items, ...props }: CardMenuProps<T>) {
+function CardMenu<T extends any | void = void>({ context, items }: CardMenuProps<T>) {
+  const { t } = useTranslation(translationKey);
   return (
-    <CardIconBlock>
-      <Toolbar.Menu {...props} context={context} items={items ?? []} />
-    </CardIconBlock>
+    <CardBlock end>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger disabled={!items?.length} asChild>
+          <IconButton
+            iconOnly
+            variant='ghost'
+            icon='ph--dots-three-vertical--regular'
+            label={t('toolbar-menu.label')}
+          />
+        </DropdownMenu.Trigger>
+        {(items?.length ?? 0) > 0 && (
+          <DropdownMenu.Portal>
+            <DropdownMenu.Content>
+              <DropdownMenu.Viewport>
+                {items?.map(({ label, onClick: onSelect }, index) => (
+                  // `context` is the generic payload threaded to each handler; the cast is the
+                  // generic boundary (T may be `void`, so `context` is typed `T | undefined`).
+                  <DropdownMenu.Item key={index} onSelect={() => onSelect(context as T)}>
+                    {label}
+                  </DropdownMenu.Item>
+                ))}
+              </DropdownMenu.Viewport>
+              <DropdownMenu.Arrow />
+            </DropdownMenu.Content>
+          </DropdownMenu.Portal>
+        )}
+      </DropdownMenu.Root>
+    </CardBlock>
   );
 }
 
 CardMenu.displayName = CARD_MENU_NAME;
 
 //
-// Icon
+// Block
 //
 
-const CARD_ICON_NAME = 'Card.Icon';
+const CARD_BLOCK_NAME = 'Card.Block';
 
-function CardIcon(props: IconProps) {
-  return (
-    <CardIconBlock>
-      <Icon {...props} />
-    </CardIconBlock>
-  );
-}
+type CardBlockProps = SlottableProps<{ end?: boolean; compact?: boolean; square?: boolean }>;
 
-CardIcon.displayName = CARD_ICON_NAME;
-
-//
-// IconBlock
-//
-
-const CARD_ICON_BLOCK_NAME = 'Card.IconBlock';
+/**
+ * Leading (default) or trailing (`end`) gutter slot of a Card row/header. Sized to the
+ * rail-item square so a passive `<Icon>` aligns with an `IconButton`. Defaults text color to
+ * `subdued` so a decorative `<Icon>` child needs no styling; interactive children set their own.
+ */
+const CardBlock = composable<HTMLDivElement, CardBlockProps>(({ children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { className, ...rest } = composableProps(props);
 
-const CardIconBlock = forwardRef<HTMLDivElement, IconBlockProps>((props, forwardedRef) => {
-  return <IconBlock {...props} ref={forwardedRef} />;
+  return (
+    <Column.Block {...rest} classNames={tx('card.block', {}, className)} ref={forwardedRef}>
+      {children}
+    </Column.Block>
+  );
 });
 
-CardIconBlock.displayName = CARD_ICON_BLOCK_NAME;
+CardBlock.displayName = CARD_BLOCK_NAME;
 
 //
 // Title
@@ -271,32 +334,28 @@ CardSection.displayName = CARD_SECTION_NAME;
 
 const CARD_ROW_NAME = 'Card.Row';
 
-type CardRowProps = { icon?: string | JSX.Element; fullWidth?: boolean };
+type CardRowProps = { fullWidth?: boolean };
 
 /**
  * A row inside a Card.
- * - Default: spans all 3 columns and establishes a subgrid so children align to the Card's columns.
- *   An optional `icon` lands in the first column; when omitted, the first column is left empty.
- * - `fullWidth`: spans all columns without a subgrid — children do their own internal layout.
- *   The `icon` prop is ignored in this mode.
+ * - Default: spans all 3 columns as a subgrid; children align via `data-slot` — `Card.Block`
+ *   lands in the gutters (start/end), anonymous children in the center. Sets `--icon-size` 4.
+ * - `fullWidth`: spans all columns without a subgrid — children do their own internal layout;
+ *   `Card.Block` placement is inert in this mode.
  */
 const CardRow = slottable<HTMLDivElement, CardRowProps>(
-  ({ children, asChild, icon: iconProp, fullWidth, ...props }, forwardedRef) => {
+  ({ children, asChild, fullWidth, style, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { className, ...rest } = composableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
-    const icon =
-      typeof iconProp === 'string' ? (
-        <CardIcon classNames='text-subdued' icon={iconProp as string} size={4} />
-      ) : iconProp ? (
-        iconProp
-      ) : (
-        <div />
-      );
 
     return (
-      <Comp {...rest} className={tx('card.row', { fullWidth }, className)} ref={forwardedRef}>
-        {!fullWidth && icon}
+      <Comp
+        {...rest}
+        style={{ ...iconSize(4), ...style }}
+        className={tx('card.row', { fullWidth }, className)}
+        ref={forwardedRef}
+      >
         {children}
       </Comp>
     );
@@ -379,15 +438,21 @@ type CardPosterProps = ThemedClassName<
     Omit<ImageProps, 'src' | 'alt' | 'classNames'>
 >;
 
-function CardPoster({ classNames, alt, aspect: aspectProp, image, icon, ...imageProps }: CardPosterProps) {
+function CardPoster({
+  classNames,
+  alt,
+  aspect: aspectProp,
+  image,
+  icon,
+  fit = 'cover',
+  ...imageProps
+}: CardPosterProps) {
   const { tx } = useThemeContext();
   const aspect = aspectProp === 'auto' ? 'aspect-auto' : 'aspect-video';
 
   if (image) {
     return (
-      <div className='col-span-full'>
-        <Image classNames={[tx('card.poster', {}), aspect, classNames]} src={image} alt={alt} {...imageProps} />
-      </div>
+      <Image classNames={[tx('card.poster', {}), aspect, classNames]} src={image} alt={alt} fit={fit} {...imageProps} />
     );
   }
 
@@ -414,9 +479,17 @@ function CardAction({ icon, actionIcon = 'ph--arrow-right--regular', label, onCl
   const { tx } = useThemeContext();
   return (
     <Button variant='ghost' classNames={tx('card.action', {})} onClick={onClick}>
-      {icon ? <CardIcon classNames='text-subdued' icon={icon} size={4} /> : <div />}
-      <span className={tx('card.action-label', {}, !actionIcon ? 'col-span-2' : undefined)}>{label}</span>
-      {actionIcon && <CardIcon icon={actionIcon} size={4} />}
+      {icon && (
+        <CardBlock>
+          <Icon icon={icon} size={4} />
+        </CardBlock>
+      )}
+      <span className={tx('card.action-label', {})}>{label}</span>
+      {actionIcon && (
+        <CardBlock end>
+          <Icon icon={actionIcon} size={4} />
+        </CardBlock>
+      )}
     </Button>
   );
 }
@@ -435,9 +508,13 @@ function CardLink({ label, href }: CardLinkProps) {
   const { tx } = useThemeContext();
   return (
     <a className={tx('card.link', {})} data-variant='ghost' href={href} target='_blank' rel='noreferrer'>
-      <CardIcon classNames='text-subdued' icon='ph--link--regular' />
+      <CardBlock>
+        <Icon icon='ph--link--regular' size={4} />
+      </CardBlock>
       <span className={tx('card.link-label', {})}>{label}</span>
-      <CardIcon classNames='invisible group-hover:visible' icon='ph--arrow-square-out--regular' />
+      <CardBlock end classNames='invisible group-hover:visible'>
+        <Icon icon='ph--arrow-square-out--regular' size={4} />
+      </CardBlock>
     </a>
   );
 }
@@ -454,12 +531,11 @@ export const Card = {
   // Header
   Header: CardHeader,
 
-  // Header parts
-  IconBlock: CardIconBlock,
+  // Header / row parts
+  Block: CardBlock,
   DragHandle: CardDragHandle,
   ActionIconButton: CardActionIconButton,
   Menu: CardMenu,
-  Icon: CardIcon,
   Title: CardTitle,
 
   // Body
@@ -478,6 +554,7 @@ export const Card = {
 export type {
   CardRootProps,
   CardHeaderProps,
+  CardBlockProps,
   CardDragHandleProps,
   CardActionIconButtonProps,
   CardMenuProps,

package/src/components/Column/Column.theme.ts

@@ -9,20 +9,47 @@ import { withColumn } from './withColumn';
 
 export type ColumnStyleProps = {};
 
+export type ColumnBlockStyleProps = {
+  /** Trailing gutter (column 3) instead of the default leading gutter (column 1). */
+  end?: boolean;
+  compact?: boolean;
+  /** Constrain to a square (1:1) slot rather than the default rail-item width. */
+  square?: boolean;
+};
+
 const root: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
   return mx('dx-column-root grid', ...etc);
 };
 
 /**
- * Three-column icon-slot row: spans all 3 columns of the parent Column.Root grid.
- * Uses CSS subgrid to inherit column sizing from the parent Column.
- * Children map to: [col-1: icon/slot] [col-2: content] [col-3: icon/action].
+ * Three-column subgrid row spanning all 3 columns of the parent Column.Root grid.
+ * Placement is explicit, not source-order based:
+ * - `Column.Block` self-places into column 1 (leading) or column 3 (trailing, `end`) and
+ *   carries the `dx-gutter` marker class.
+ * - Every other (content) child is placed in column 2 via `[&>*:not(.dx-gutter)]`.
+ * Class-based placement (rather than `[data-slot=…]`) is used because Tailwind does not
+ * generate arbitrary variants that nest a square-bracket attribute selector.
+ * Robust to conditional children: a falsy leading slot never shifts content into a gutter.
  * NOTE: Must not use overflow-hidden here since it will clip input focus rings.
  */
 const row: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
-  return mx('col-span-3 grid grid-cols-subgrid', ...etc);
+  return mx('col-span-3 grid grid-cols-subgrid', '[&>*:not(.dx-gutter)]:col-start-2', ...etc);
 };
 
+/**
+ * Gutter slot geometry: a `--dx-rail-item` square that centers its child, so a passive
+ * `<Icon>` and an interactive `IconButton` line up to the pixel. Self-places into column 1
+ * (default) or column 3 (`end`); the `dx-gutter` marker keeps it out of the content track.
+ */
+const block: ComponentFunction<ColumnBlockStyleProps> = ({ end, compact, square }, ...etc) =>
+  mx(
+    'dx-gutter grid place-items-center [&>img]:max-w-[1.5rem]',
+    end ? 'col-start-3' : 'col-start-1',
+    square ? 'aspect-square' : 'w-[var(--dx-rail-item)]',
+    compact ? '' : 'h-[var(--dx-rail-item)]',
+    ...etc,
+  );
+
 /**
  * Bleed placement: spans all 3 columns of the parent Column.Root grid (gutter-to-gutter).
  * Use for `ScrollArea`, full-width dividers, tables, or any content that should ignore gutters.
@@ -43,6 +70,7 @@ const center: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
 export const columnTheme = {
   root,
   row,
+  block,
   bleed,
   center,
 };

package/src/components/Column/Column.tsx

@@ -152,6 +152,40 @@ const ColumnCenter = slottable<HTMLDivElement>(({ children, asChild, ...props },
 
 ColumnCenter.displayName = COLUMN_CENTER_NAME;
 
+//
+// Block
+//
+
+const COLUMN_BLOCK_NAME = 'Column.Block';
+
+type ColumnBlockProps = SlottableProps<{ end?: boolean; compact?: boolean; square?: boolean }>;
+
+/**
+ * A gutter slot inside a Column.Row. Sized to `--dx-rail-item` and centers its child so a passive
+ * `<Icon>` and an interactive `IconButton` align to the pixel. `end` opts into the trailing gutter
+ * (column 3); default is the leading gutter (column 1). Placement is via `data-slot`, so it is
+ * robust to conditional rendering and source order.
+ */
+const ColumnBlock = slottable<HTMLDivElement, ColumnBlockProps>(
+  ({ children, asChild, end, compact, square, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    return (
+      <Comp
+        {...rest}
+        data-slot={end ? 'end' : 'start'}
+        className={tx('column.block', { end, compact, square }, className)}
+        ref={forwardedRef}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+ColumnBlock.displayName = COLUMN_BLOCK_NAME;
+
 //
 // Column
 //
@@ -159,8 +193,9 @@ ColumnCenter.displayName = COLUMN_CENTER_NAME;
 export const Column = {
   Root: ColumnRoot,
   Row: ColumnRow,
+  Block: ColumnBlock,
   Bleed: ColumnBleed,
   Center: ColumnCenter,
 };
 
-export type { ColumnRootProps, ColumnRowProps, ColumnBleedProps, ColumnCenterProps };
+export type { ColumnRootProps, ColumnRowProps, ColumnBlockProps, ColumnBleedProps, ColumnCenterProps };

package/src/components/Input/constants.ts

@@ -2,4 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+/**
+ * @deprecated Create TW variable.
+ */
 export const inputTextLabel = 'py-1 text-sm text-description';

package/src/components/Message/Message.theme.ts

@@ -22,14 +22,6 @@ const title: ComponentFunction<MessageStyleProps> = (_, etc) => {
   return mx('col-start-2 overflow-hidden truncate', etc);
 };
 
-const icon: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('col-start-1 grid place-items-center', etc);
-};
-
-const close: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('col-start-3', etc);
-};
-
 const content: ComponentFunction<MessageStyleProps> = (_, etc) => {
   return mx('col-start-2 flex flex-col first:font-medium pb-1.5', etc);
 };
@@ -37,8 +29,6 @@ const content: ComponentFunction<MessageStyleProps> = (_, etc) => {
 export const messageTheme: Theme<MessageStyleProps> = {
   root,
   header,
-  icon,
   title,
-  close,
   content,
 };

package/src/components/Message/Message.tsx

@@ -141,15 +141,15 @@ const MessageTitle = forwardRef<HTMLDivElement, MessageTitleProps>(
     return (
       <Column.Row classNames={tx('message.header', {}, classNames)} ref={forwardedRef}>
         {icon && (
-          <div className={tx('message.icon', { valence })}>
+          <Column.Block>
             <Icon icon={icon} />
-          </div>
+          </Column.Block>
         )}
         <h2 className={tx('message.title', {}, classNames)} id={titleId}>
           {children}
         </h2>
         {onClose && (
-          <div className={tx('message.close', {})}>
+          <Column.Block end>
             <IconButton
               variant='ghost'
               icon='ph--x--regular'
@@ -158,7 +158,7 @@ const MessageTitle = forwardRef<HTMLDivElement, MessageTitleProps>(
               label={t('toolbar-close.label')}
               onClick={onClose}
             />
-          </div>
+          </Column.Block>
         )}
       </Column.Row>
     );

package/src/components/Popover/Popover.theme.ts

@@ -13,7 +13,7 @@ export type PopoverStyleProps = Partial<{
 
 const content: ComponentFunction<PopoverStyleProps> = ({ elevation }, ...etc) =>
   mx(
-    'dx-popover-surface border border-separator rounded-sm',
+    'dx-popover-surface overflow-hidden border border-separator rounded-sm',
     surfaceShadow({ elevation: 'positioned' }),
     surfaceZIndex({ elevation, level: 'menu' }),
     'dx-focus-ring',

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

@@ -32,12 +32,8 @@ const grid: ComponentFunction<ToastStyleProps> = (_props, ...etc) => mx('gap-y-1
 
 const header: ComponentFunction<ToastStyleProps> = (_props, ...etc) => mx('items-center', ...etc);
 
-const icon: ComponentFunction<ToastStyleProps> = (_props, ...etc) => mx('col-start-1 grid place-items-center', ...etc);
-
 const title: ComponentFunction<ToastStyleProps> = (_props, ...etc) => mx('col-start-2 truncate font-medium', ...etc);
 
-const close: ComponentFunction<ToastStyleProps> = (_props, ...etc) => mx('col-start-3', ...etc);
-
 const description: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
   mx('col-start-2 overflow-hidden text-description', ...etc);
 
@@ -48,9 +44,7 @@ export const toastTheme: Theme<ToastStyleProps> = {
   root,
   grid,
   header,
-  icon,
   title,
-  close,
   description,
   actions,
 };

package/src/components/Toast/Toast.tsx

@@ -71,22 +71,23 @@ const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(
     return (
       <Column.Row classNames={tx('toast.header', {})}>
         {icon && (
-          <div className={tx('toast.icon', {})}>
+          <Column.Block>
             <Icon icon={icon} size={5} />
-          </div>
+          </Column.Block>
         )}
         <ToastPrimitive.Title {...props} className={tx('toast.title', {}, classNames)} ref={forwardedRef}>
           {children}
         </ToastPrimitive.Title>
         {onClose && (
-          <IconButton
-            variant='ghost'
-            icon='ph--x--regular'
-            iconOnly
-            label={t('toolbar-close.label')}
-            classNames={tx('toast.close', {})}
-            onClick={onClose}
-          />
+          <Column.Block end>
+            <IconButton
+              variant='ghost'
+              icon='ph--x--regular'
+              iconOnly
+              label={t('toolbar-close.label')}
+              onClick={onClose}
+            />
+          </Column.Block>
         )}
       </Column.Row>
     );

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>
+    );
+  },
+);