@dxos/react-ui 0.8.2-main.f081794 → 0.8.2-main.fbd8ed0

package/src/components/Lists/Treegrid.stories.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { faker } from '@dxos/random';
 
-import { Treegrid as Tg } from './Treegrid';
+import { Treegrid } from './Treegrid';
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
 
@@ -122,30 +122,30 @@ const flattenedContent = Array.from(visitor(content, () => true));
 
 const DefaultStory = () => {
   return (
-    <Tg.Root gridTemplateColumns='1fr'>
+    <Treegrid.Root gridTemplateColumns='1fr'>
       {flattenedContent.map(({ node, parentOf, path }) => {
         return (
-          <Tg.Row
+          <Treegrid.Row
             key={node.id}
-            id={path.join(Tg.PATH_SEPARATOR)}
-            {...(parentOf && { parentOf: parentOf.join(Tg.PARENT_OF_SEPARATOR) })}
+            id={path.join(Treegrid.PATH_SEPARATOR)}
+            {...(parentOf && { parentOf: parentOf.join(Treegrid.PARENT_OF_SEPARATOR) })}
           >
-            <Tg.Cell indent classNames='flex items-center'>
+            <Treegrid.Cell indent classNames='flex items-center'>
               {node.icon && <Icon icon={node.icon} classNames='is-[1em] bs-[1em] mlb-1' />}
               {node.title}
-            </Tg.Cell>
-          </Tg.Row>
+            </Treegrid.Cell>
+          </Treegrid.Row>
         );
       })}
-    </Tg.Root>
+    </Treegrid.Root>
   );
 };
 
-export const Default = {};
-
 export default {
   title: 'ui/react-ui-core/Treegrid',
-  component: Tg.Root,
+  component: Treegrid.Root,
   render: DefaultStory,
   decorators: [withTheme],
 };
+
+export const Default = {};

package/src/components/Main/Main.stories.tsx

@@ -22,7 +22,7 @@ const ComplementarySidebarToggle = () => {
   return <Button onClick={toggleComplementarySidebar}>Toggle complementary sidebar</Button>;
 };
 
-const StoryMain = (_args: StoryMainArgs) => {
+const DefaultStory = (_args: StoryMainArgs) => {
   return (
     <Main.Root>
       <Main.Overlay />
@@ -48,7 +48,7 @@ const StoryMain = (_args: StoryMainArgs) => {
 export default {
   title: 'ui/react-ui-core/Main',
   component: Main.Root,
-  render: StoryMain,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Menus/ContextMenu.stories.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { ContextMenu } from './ContextMenu';
 import { withTheme } from '../../testing';
 
-const StorybookContextMenu = () => {
+const DefaultStory = () => {
   // NOTE(thure): Since long-tap will select text in some OSs, apply `select-none` to `ContextMenu.Trigger` where possible.
   return (
     <ContextMenu.Root>
@@ -94,7 +94,7 @@ const StorybookContextMenu = () => {
 export default {
   title: 'ui/react-ui-core/ContextMenu',
   component: ContextMenu,
-  render: StorybookContextMenu,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Menus/DropdownMenu.stories.tsx

@@ -10,7 +10,7 @@ import { DropdownMenu } from './DropdownMenu';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
-const StorybookDropdownMenu = () => {
+const DefaultStory = () => {
   return (
     <DropdownMenu.Root defaultOpen>
       <DropdownMenu.Trigger asChild>
@@ -94,7 +94,7 @@ const StorybookDropdownMenu = () => {
 export default {
   title: 'ui/react-ui-core/DropdownMenu',
   component: DropdownMenu,
-  render: StorybookDropdownMenu,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Message/Message.stories.tsx

@@ -12,13 +12,13 @@ import { type MessageValence } from '@dxos/react-ui-types';
 import { Message } from './Message';
 import { withTheme } from '../../testing';
 
-type StoryMessageProps = {
+type StoryProps = {
   valence: MessageValence;
   title: string;
   body: string;
 };
 
-const StoryMessage = ({ valence, title, body }: StoryMessageProps) => (
+const DefaultStory = ({ valence, title, body }: StoryProps) => (
   <Message.Root valence={valence}>
     <Message.Title>
       <Info className='inline w-5 h-5 mb-1' weight='duotone' /> {title}
@@ -30,7 +30,7 @@ const StoryMessage = ({ valence, title, body }: StoryMessageProps) => (
 export default {
   title: 'ui/react-ui-core/Message',
   component: Message,
-  render: StoryMessage,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Popover/Popover.stories.tsx

@@ -14,7 +14,7 @@ import { Button } from '../Buttons';
 
 faker.seed(1234);
 
-const StorybookPopover = ({ openTrigger, children }: PropsWithChildren<{ openTrigger: ReactNode }>) => {
+const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger: ReactNode }>) => {
   return (
     <Popover.Root defaultOpen>
       <Popover.Trigger asChild>{openTrigger}</Popover.Trigger>
@@ -31,7 +31,7 @@ const StorybookPopover = ({ openTrigger, children }: PropsWithChildren<{ openTri
 export default {
   title: 'ui/react-ui-core/Popover',
   component: Popover,
-  render: StorybookPopover,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Popover/Popover.tsx

@@ -246,13 +246,13 @@ PopoverPortal.displayName = PORTAL_NAME;
 
 const CONTENT_NAME = 'PopoverContent';
 
-interface PopoverContentProps extends PopoverContentTypeProps {
+type PopoverContentProps = ThemedClassName<PopoverContentTypeProps> & {
   /**
    * Used to force mounting when more control is needed. Useful when
    * controlling animation with React animation libraries.
    */
-  forceMount?: true;
-}
+  forceMount?: boolean;
+};
 
 const PopoverContent = forwardRef<PopoverContentTypeElement, PopoverContentProps>(
   (props: ScopedProps<PopoverContentProps>, forwardedRef) => {
@@ -277,7 +277,8 @@ PopoverContent.displayName = CONTENT_NAME;
 /* ----------------------------------------------------------------------------------------------- */
 
 type PopoverContentTypeElement = PopoverContentImplElement;
-interface PopoverContentTypeProps extends Omit<PopoverContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}
+export interface PopoverContentTypeProps
+  extends Omit<PopoverContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}
 
 const PopoverContentModal = forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(
   (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {
@@ -571,6 +572,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 +598,5 @@ export type {
   PopoverCloseProps,
   PopoverArrowProps,
   PopoverViewportProps,
+  PopoverContentInteractOutsideEvent,
 };

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -14,7 +14,7 @@ import { withTheme } from '../../testing';
 
 faker.seed(1234);
 
-const StorybookScrollArea = ({ children }: PropsWithChildren<{}>) => {
+const DefaultStory = ({ children }: PropsWithChildren<{}>) => {
   return (
     <ScrollArea.Root
       classNames={['is-[300px] bs-[400px] rounded', groupSurface, surfaceShadow({ elevation: 'positioned' })]}
@@ -36,7 +36,7 @@ const StorybookScrollArea = ({ children }: PropsWithChildren<{}>) => {
 export default {
   title: 'ui/react-ui-core/Scroll area',
   component: ScrollArea,
-  render: StorybookScrollArea,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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/Toast/Toast.stories.tsx

@@ -13,27 +13,27 @@ import { Button } from '../Buttons';
 type ActionTriggerProps = { altText: string; trigger: ReactNode };
 
 type StorybookToastProps = Partial<{
-  openTrigger: string;
   title: string;
   description: string;
   actionTriggers: ActionTriggerProps[];
+  openTrigger: string;
   closeTrigger: ReactNode;
 }>;
 
-const StorybookToast = (props: StorybookToastProps) => {
+const DefaultStory = ({ title, description, actionTriggers, openTrigger, closeTrigger }: StorybookToastProps) => {
   const [open, setOpen] = useState(true);
   return (
     <Toast.Provider>
-      <Button onClick={() => setOpen(true)}>{props.openTrigger}</Button>
+      <Button onClick={() => setOpen(true)}>{openTrigger}</Button>
       <Toast.Viewport />
       <Toast.Root open={open} onOpenChange={setOpen}>
         <Toast.Body>
-          <Toast.Title>{props.title}</Toast.Title>
-          <Toast.Description>{props.description}</Toast.Description>
+          <Toast.Title>{title}</Toast.Title>
+          <Toast.Description>{description}</Toast.Description>
         </Toast.Body>
         <Toast.Actions>
-          <Toast.Close asChild={typeof props.closeTrigger !== 'string'}>{props.closeTrigger}</Toast.Close>
-          {(props.actionTriggers || []).map(({ altText, trigger }: ActionTriggerProps, index: number) => (
+          <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>
@@ -47,7 +47,7 @@ const StorybookToast = (props: StorybookToastProps) => {
 export default {
   title: 'ui/react-ui-core/Toast',
   component: Toast,
-  render: StorybookToast,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
@@ -55,9 +55,14 @@ export default {
 export const Default = {
   args: {
     openTrigger: 'Open toast',
-    title: 'Hi, this is a toast',
+    title: 'This is a toast',
     description: 'This goes away on its own with a timer.',
-    actionTriggers: [{ altText: 'Press F5 to reload the page', trigger: <Button variant='primary'>Reload</Button> }],
+    actionTriggers: [
+      {
+        altText: 'Press F5 to reload the page',
+        trigger: <Button variant='primary'>Reload</Button>,
+      },
+    ],
     closeTrigger: <Button>Close</Button>,
   },
   parameters: {

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -14,7 +14,7 @@ import { Select } from '../Select';
 
 type StorybookToolbarProps = {};
 
-const StorybookToolbar = (props: StorybookToolbarProps) => {
+const DefaultStory = (props: StorybookToolbarProps) => {
   return (
     <Toolbar.Root>
       {/* TODO(burdon): Should be fixed width (regardless of selection). */}
@@ -72,7 +72,7 @@ const StorybookToolbar = (props: StorybookToolbarProps) => {
 export default {
   title: 'ui/react-ui-core/Toolbar',
   component: Toolbar,
-  render: StorybookToolbar,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -3,55 +3,80 @@
 //
 
 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;
+type StoryProps = {
+  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 DefaultStory = ({ tooltips, defaultOpen }: StoryProps) => (
+  <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>
 );
 
 export default {
   title: 'ui/react-ui-core/Tooltip',
   component: Tooltip,
-  render: StoryTooltip,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
 
 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 },
+  },
+};