@dxos/react-ui 0.8.2-main.12df754 → 0.8.2-main.30e4dbb

package/src/components/Buttons/IconButton.tsx

@@ -2,60 +2,35 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { forwardRef, type ReactNode, type MutableRefObject, useState } from 'react';
+import React, { forwardRef, type MutableRefObject } from 'react';
 
 import { Button, type ButtonProps } from './Button';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Icon, type IconProps } from '../Icon';
-import { Tooltip, type TooltipContentProps } from '../Tooltip';
+import { Tooltip, type TooltipSide } from '../Tooltip';
 
 type IconButtonProps = Omit<ButtonProps, 'children'> &
   Pick<IconProps, 'icon' | 'size'> & {
-    label: NonNullable<ReactNode>;
+    label: string;
     iconOnly?: boolean;
     noTooltip?: boolean;
     caretDown?: boolean;
-    // TODO(burdon): Create slots abstraction?
     iconClassNames?: ThemedClassName<any>['classNames'];
     tooltipPortal?: boolean;
-    tooltipZIndex?: string;
-    tooltipSide?: TooltipContentProps['side'];
+    tooltipSide?: TooltipSide;
     suppressNextTooltip?: MutableRefObject<boolean>;
   };
 
 const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  (
-    { noTooltip, tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props },
-    forwardedRef,
-  ) => {
-    const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
+  ({ noTooltip, tooltipPortal = true, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
     if (noTooltip) {
       return <LabelledIconButton {...props} ref={forwardedRef} />;
     }
-    const content = (
-      <Tooltip.Content {...(zIndex && { style: { zIndex } })} side={tooltipSide}>
-        {props.label}
-        <Tooltip.Arrow />
-      </Tooltip.Content>
-    );
     return (
-      <Tooltip.Root
-        open={triggerTooltipOpen}
-        onOpenChange={(nextOpen) => {
-          if (suppressNextTooltip?.current) {
-            setTriggerTooltipOpen(false);
-            suppressNextTooltip.current = false;
-          } else {
-            setTriggerTooltipOpen(nextOpen);
-          }
-        }}
-      >
-        <Tooltip.Trigger asChild>
-          <LabelledIconButton {...props} ref={forwardedRef} />
-        </Tooltip.Trigger>
-        {tooltipPortal ? <Tooltip.Portal>{content}</Tooltip.Portal> : content}
-      </Tooltip.Root>
+      <Tooltip.Trigger asChild content={props.label} side={tooltipSide} suppressNextTooltip={suppressNextTooltip}>
+        <LabelledIconButton {...props} ref={forwardedRef} />
+      </Tooltip.Trigger>
     );
   },
 );

package/src/components/Clipboard/CopyButton.tsx

@@ -3,15 +3,15 @@
 //
 
 import { type IconProps } from '@phosphor-icons/react';
-import React, { useState } from 'react';
+import React from 'react';
 
 import { mx } from '@dxos/react-ui-theme';
 
 import { useClipboard } from './ClipboardProvider';
-import { Button, type ButtonProps } from '../Buttons';
+import { Button, type ButtonProps, IconButton } from '../Buttons';
 import { Icon } from '../Icon';
 import { useTranslation } from '../ThemeProvider';
-import { Tooltip } from '../Tooltip';
+import { type TooltipScopedProps, useTooltipContext } from '../Tooltip';
 
 export type CopyButtonProps = ButtonProps & {
   value: string;
@@ -48,31 +48,29 @@ type CopyButtonIconOnlyProps = CopyButtonProps & {
   label?: string;
 };
 
-export const CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }: CopyButtonIconOnlyProps) => {
+export const CopyButtonIconOnly = ({
+  __scopeTooltip,
+  value,
+  classNames,
+  iconProps,
+  variant,
+  ...props
+}: TooltipScopedProps<CopyButtonIconOnlyProps>) => {
   const { t } = useTranslation('os');
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
   const label = isCopied ? t('copy success label') : props.label ?? t('copy label');
-  const [open, setOpen] = useState(false);
+  const { onOpen } = useTooltipContext('CopyButton', __scopeTooltip);
   return (
-    <Tooltip.Root delayDuration={1500} open={open} onOpenChange={setOpen}>
-      <Tooltip.Portal>
-        <Tooltip.Content side='bottom' sideOffset={12}>
-          <span>{label}</span>
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-      <Tooltip.Trigger
-        aria-label={label}
-        {...props}
-        onClick={() => setTextValue(value).then(() => setOpen(true))}
-        data-testid='copy-invitation'
-        asChild
-      >
-        <Button variant={variant} classNames={['inline-flex flex-col justify-center', classNames]}>
-          <Icon icon='ph--copy--regular' size={5 as any} {...iconProps} />
-        </Button>
-      </Tooltip.Trigger>
-    </Tooltip.Root>
+    <IconButton
+      iconOnly
+      label={label!}
+      icon='ph--copy--regular'
+      size={5}
+      variant={variant}
+      classNames={['inline-flex flex-col justify-center', classNames]}
+      onClick={() => setTextValue(value).then(onOpen)}
+      data-testid='copy-invitation'
+    />
   );
 };

package/src/components/Dialogs/Dialog.tsx

@@ -78,14 +78,18 @@ type DialogCloseProps = DialogClosePrimitiveProps;
 
 const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
 
-type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
+type OverlayLayoutContextValue = { descriptionId?: string; inOverlayLayout?: boolean };
 const DIALOG_OVERLAY_NAME = 'DialogOverlay';
 const DIALOG_CONTENT_NAME = 'DialogContent';
-const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(DIALOG_OVERLAY_NAME, {
-  inOverlayLayout: false,
-});
+const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
+  DIALOG_OVERLAY_NAME,
+  {},
+);
 
-type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps> & { blockAlign?: 'center' | 'start' | 'end' };
+type DialogOverlayProps = ThemedClassName<
+  DialogOverlayPrimitiveProps &
+    Pick<OverlayLayoutContextValue, 'descriptionId'> & { blockAlign?: 'center' | 'start' | 'end' }
+>;
 
 const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<HTMLDivElement, DialogOverlayProps>(
   ({ classNames, children, blockAlign, ...props }, forwardedRef) => {
@@ -111,11 +115,12 @@ type DialogContentProps = ThemedClassName<DialogContentPrimitiveProps> & { inOve
 const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<HTMLDivElement, DialogContentProps>(
   ({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
+    const { inOverlayLayout, descriptionId } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
 
     return (
       <DialogContentPrimitive
-        aria-describedby={undefined}
+        // NOTE: Radix warning unless set.
+        aria-describedby={descriptionId ?? 'unknown'}
         {...props}
         className={tx(
           'dialog.content',

package/src/components/Popover/Popover.tsx

@@ -571,6 +571,8 @@ const PopoverViewport = forwardRef<HTMLDivElement, PopoverViewportProps>(
 
 const getState = (open: boolean) => (open ? 'open' : 'closed');
 
+type PopoverContentInteractOutsideEvent = Parameters<NonNullable<PopoverContentProps['onInteractOutside']>>[0];
+
 export const Popover = {
   Root: PopoverRoot,
   Anchor: PopoverAnchor,
@@ -595,4 +597,5 @@ export type {
   PopoverCloseProps,
   PopoverArrowProps,
   PopoverViewportProps,
+  PopoverContentInteractOutsideEvent,
 };

package/src/components/ScrollArea/ScrollArea.tsx

@@ -23,6 +23,9 @@ type ScrollAreaVariant = 'coarse' | 'fine';
 
 type ScrollAreaRootProps = ThemedClassName<ScrollAreaPrimitiveRootProps>;
 
+/**
+ * @deprecated
+ */
 const ScrollAreaRoot = forwardRef<HTMLDivElement, ScrollAreaRootProps>(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (

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

@@ -3,29 +3,28 @@
 //
 
 import '@dxos-theme';
-
 import React from 'react';
 
+import { faker } from '@dxos/random';
+
 import { Tooltip } from './Tooltip';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
 type StoryTooltipProps = {
-  content: string;
+  tooltips: { label: string; content: string }[];
   defaultOpen?: boolean;
 };
 
-const StoryTooltip = ({ content, defaultOpen }: StoryTooltipProps) => (
-  <Tooltip.Provider>
-    <Tooltip.Root defaultOpen={defaultOpen}>
-      <Tooltip.Trigger asChild>
-        <Button>Trigger tooltip</Button>
-      </Tooltip.Trigger>
-      <Tooltip.Content side='right'>
-        <Tooltip.Arrow />
-        {content}
-      </Tooltip.Content>
-    </Tooltip.Root>
+const StoryTooltip = ({ tooltips, defaultOpen }: StoryTooltipProps) => (
+  <Tooltip.Provider defaultOpen={defaultOpen}>
+    <div role='none' className='is-32'>
+      {tooltips.map(({ label, content }, i) => (
+        <Tooltip.Trigger asChild key={i} content={content} side='right'>
+          <Button classNames='block is-full'>{label}</Button>
+        </Tooltip.Trigger>
+      ))}
+    </div>
   </Tooltip.Provider>
 );
 
@@ -39,19 +38,45 @@ export default {
 
 export const Default = {
   args: {
-    content: 'This is the tooltip content',
+    tooltips: [
+      {
+        label: 'Tooltip trigger',
+        content: 'This is the tooltip content',
+      },
+    ],
   },
   parameters: {
     chromatic: { delay: 500 },
   },
 };
 
-export const Testing = {
+export const DefaultOpen = {
   args: {
     defaultOption: true,
-    content: 'This is the tooltip content',
+    tooltips: [
+      {
+        label: 'Tooltip trigger',
+        content: 'This is the tooltip content',
+      },
+    ],
   },
   parameters: {
     chromatic: { delay: 500 },
   },
 };
+
+export const StressTest = {
+  args: {
+    defaultOption: true,
+    tooltips: faker.helpers.multiple(
+      () => ({
+        label: faker.lorem.words(2),
+        content: faker.lorem.words(5),
+      }),
+      { count: 32 },
+    ),
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};