@dxos/react-ui 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/components/Avatars/AvatarGroup.stories.tsx

@@ -13,7 +13,7 @@ import { withTheme } from '../../testing';
 
 const hues = ['lime', 'teal', 'purple', 'pink'];
 
-const AvatarItem = ({ n }: { n: number }) => {
+const StorybookAvatarGroupItem = ({ n }: { n: number }) => {
   const emoji = toEmoji(n);
   return (
     <Avatar.Root>
@@ -22,12 +22,12 @@ const AvatarItem = ({ n }: { n: number }) => {
   );
 };
 
-const DefaultStory = () => {
+const StorybookAvatarGroup = () => {
   const labelId = useId('sb-avatar-group');
   return (
     <div className='dx-avatar-group' aria-labelledby={labelId}>
       {[0, 1, 2, 3].map((n) => (
-        <AvatarItem key={n} n={n} />
+        <StorybookAvatarGroupItem key={n} n={n} />
       ))}
       <span className='sr-only' id={labelId}>
         23
@@ -38,7 +38,8 @@ const DefaultStory = () => {
 
 export default {
   title: 'ui/react-ui-core/AvatarGroup',
-  render: DefaultStory,
+  component: StorybookAvatarGroup,
+  render: StorybookAvatarGroup,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -10,7 +10,7 @@ import { Breadcrumb } from './Breadcrumb';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
-const DefaultStory = () => {
+const StorybookBreadcrumb = () => {
   return (
     <Breadcrumb.Root aria-label='Breadcrumb'>
       <Breadcrumb.List>
@@ -41,7 +41,7 @@ const DefaultStory = () => {
 export default {
   title: 'ui/react-ui-core/Breadcrumb',
   component: Breadcrumb,
-  render: DefaultStory,
+  render: StorybookBreadcrumb,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Buttons/Button.stories.tsx

@@ -5,7 +5,6 @@
 import '@dxos-theme';
 
 import { CaretLeft, CaretRight } from '@phosphor-icons/react';
-import { type StoryObj, type Meta } from '@storybook/react';
 import React from 'react';
 
 import { Button, ButtonGroup, type ButtonProps } from './Button';
@@ -32,36 +31,32 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   );
 };
 
-const meta: Meta<typeof Button> = {
-  title: 'ui/react-ui-core/Button',
-  component: Button,
-  render: DefaultStory,
-  decorators: [withVariants(), withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
+const defaults = { children: 'Test' };
 
-const defaults: Story['args'] = { children: 'Test' };
-
-export const Default: Story = {
+export const Default = {
   args: { ...defaults, variant: 'default' },
 };
 
-export const Primary: Story = {
+export const Primary = {
   args: { ...defaults, variant: 'primary' },
 };
 
-export const Destructive: Story = {
+export const Destructive = {
   args: { ...defaults, variant: 'destructive' },
 };
 
-export const Outline: Story = {
+export const Outline = {
   args: { ...defaults, variant: 'outline' },
 };
 
-export const Ghost: Story = {
+export const Ghost = {
   args: { ...defaults, variant: 'ghost' },
 };
+
+export default {
+  title: 'ui/react-ui-core/Button',
+  component: Button,
+  decorators: [withVariants(), withTheme],
+  render: DefaultStory,
+  parameters: { chromatic: { disableSnapshot: false } },
+};

package/src/components/Buttons/IconButton.stories.tsx

@@ -6,18 +6,22 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { IconButton, type IconButtonProps } from './IconButton';
+import { IconButton } from './IconButton';
 import { withTheme } from '../../testing';
 import { Tooltip } from '../Tooltip';
 
-const DefaultStory = (props: IconButtonProps) => {
+type StorybookIconButtonProps = {
+  iconOnly?: boolean;
+};
+
+const StorybookIconButton = (props: StorybookIconButtonProps) => {
   return (
     <Tooltip.Provider>
       <div className='mbe-4'>
-        <IconButton {...props} />
+        <IconButton label='Bold' icon='ph--text-b--bold' {...props} />
       </div>
       <div className='mbe-4'>
-        <IconButton iconOnly {...props} />
+        <IconButton iconOnly label='Bold' icon='ph--text-b--bold' {...props} />
       </div>
     </Tooltip.Provider>
   );
@@ -26,14 +30,11 @@ const DefaultStory = (props: IconButtonProps) => {
 export default {
   title: 'ui/react-ui-core/IconButton',
   component: IconButton,
-  render: DefaultStory,
+  render: StorybookIconButton,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
 
 export const Default = {
-  args: {
-    label: 'Bold',
-    icon: 'ph--text-b--regular',
-  },
+  args: {},
 };

package/src/components/Buttons/IconButton.tsx

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

package/src/components/Buttons/Toggle.stories.tsx

@@ -12,7 +12,7 @@ import { withTheme } from '../../testing';
 
 type StorybookToggleProps = {};
 
-const DefaultStory = (props: StorybookToggleProps) => {
+const StorybookToggle = (props: StorybookToggleProps) => {
   return (
     <Toggle {...props}>
       <TextB />
@@ -23,7 +23,7 @@ const DefaultStory = (props: StorybookToggleProps) => {
 export default {
   title: 'ui/react-ui-core/Toggle',
   component: Toggle,
-  render: DefaultStory,
+  render: StorybookToggle,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Buttons/ToggleGroup.stories.tsx

@@ -10,8 +10,12 @@ import React from 'react';
 import { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from './ToggleGroup';
 import { withTheme } from '../../testing';
 
-// TODO(burdon): Create Radix-style Root, Item, etc?
-const DefaultStory = (props: ToggleGroupProps) => {
+type StorybookToggleGroupProps = {
+  type: ToggleGroupProps['type'];
+};
+
+// TODO(burdon): ToggleGroup.Item.
+const StorybookToggleGroup = (props: StorybookToggleGroupProps) => {
   return (
     <ToggleGroup {...props}>
       <ToggleGroupItem value='textb'>
@@ -27,7 +31,7 @@ const DefaultStory = (props: ToggleGroupProps) => {
 export default {
   title: 'ui/react-ui-core/ToggleGroup',
   component: ToggleGroup,
-  render: DefaultStory,
+  render: StorybookToggleGroup,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Clipboard/CopyButton.tsx

@@ -3,15 +3,15 @@
 //
 
 import { type IconProps } from '@phosphor-icons/react';
-import React from 'react';
+import React, { useState } from 'react';
 
 import { mx } from '@dxos/react-ui-theme';
 
 import { useClipboard } from './ClipboardProvider';
-import { Button, type ButtonProps, IconButton } from '../Buttons';
+import { Button, type ButtonProps } from '../Buttons';
 import { Icon } from '../Icon';
 import { useTranslation } from '../ThemeProvider';
-import { type TooltipScopedProps, useTooltipContext } from '../Tooltip';
+import { Tooltip } from '../Tooltip';
 
 export type CopyButtonProps = ButtonProps & {
   value: string;
@@ -48,29 +48,31 @@ type CopyButtonIconOnlyProps = CopyButtonProps & {
   label?: string;
 };
 
-export const CopyButtonIconOnly = ({
-  __scopeTooltip,
-  value,
-  classNames,
-  iconProps,
-  variant,
-  ...props
-}: TooltipScopedProps<CopyButtonIconOnlyProps>) => {
+export const CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }: 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 { onOpen } = useTooltipContext('CopyButton', __scopeTooltip);
+  const [open, setOpen] = useState(false);
   return (
-    <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'
-    />
+    <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>
   );
 };

package/src/components/Dialogs/AlertDialog.stories.tsx

@@ -11,16 +11,23 @@ import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 import { Toolbar } from '../Toolbar';
 
-type DefaultStoryProps = Partial<{
+type StorybookAlertDialogProps = Partial<{
   title: string;
   description: string;
   body: string;
-  cancelTrigger: string;
+  cancelTrigger: string; // TODO(burdon): Why trigger?
   actionTrigger: string;
   openTrigger: string;
 }>;
 
-const DefaultStory = ({ title, openTrigger, description, body, cancelTrigger, actionTrigger }: DefaultStoryProps) => {
+const StorybookAlertDialog = ({
+  title,
+  openTrigger,
+  description,
+  body,
+  cancelTrigger,
+  actionTrigger,
+}: StorybookAlertDialogProps) => {
   return (
     <AlertDialog.Root defaultOpen>
       <AlertDialog.Trigger asChild>
@@ -49,7 +56,7 @@ const DefaultStory = ({ title, openTrigger, description, body, cancelTrigger, ac
 export default {
   title: 'ui/react-ui-core/AlertDialog',
   component: AlertDialog,
-  render: DefaultStory,
+  render: StorybookAlertDialog,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Dialogs/Dialog.stories.tsx

@@ -10,7 +10,7 @@ import { Dialog } from './Dialog';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
-type DefaultStoryProps = Partial<{
+type StorybookDialogProps = Partial<{
   title: string;
   description: string;
   body: string;
@@ -19,7 +19,7 @@ type DefaultStoryProps = Partial<{
   blockAlign: 'center' | 'start';
 }>;
 
-const DefaultStory = ({ title, openTrigger, description, body, closeTrigger, blockAlign }: DefaultStoryProps) => {
+const StorybookDialog = ({ title, openTrigger, description, body, closeTrigger, blockAlign }: StorybookDialogProps) => {
   return (
     <Dialog.Root defaultOpen>
       <Dialog.Trigger asChild>
@@ -42,7 +42,7 @@ const DefaultStory = ({ title, openTrigger, description, body, closeTrigger, blo
 export default {
   title: 'ui/react-ui-core/Dialog',
   component: Dialog,
-  render: DefaultStory,
+  render: StorybookDialog,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Dialogs/Dialog.tsx

@@ -81,12 +81,11 @@ const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
 type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
 const DIALOG_OVERLAY_NAME = 'DialogOverlay';
 const DIALOG_CONTENT_NAME = 'DialogContent';
-const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
-  DIALOG_OVERLAY_NAME,
-  {},
-);
+const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(DIALOG_OVERLAY_NAME, {
+  inOverlayLayout: false,
+});
 
-type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps & { blockAlign?: 'center' | 'start' | 'end' }>;
+type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps> & { blockAlign?: 'center' | 'start' | 'end' };
 
 const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<HTMLDivElement, DialogOverlayProps>(
   ({ classNames, children, blockAlign, ...props }, forwardedRef) => {
@@ -116,9 +115,6 @@ const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<
 
     return (
       <DialogContentPrimitive
-        // NOTE: Radix warning unless set to undefined.
-        // https://www.radix-ui.com/primitives/docs/components/dialog#description
-        aria-describedby={undefined}
         {...props}
         className={tx(
           'dialog.content',