@dxos/react-ui 0.6.13 → 0.6.14-main.69511f5

package/src/components/Buttons/Button.tsx

@@ -5,7 +5,7 @@
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
 
 import { type Density, type Elevation } from '@dxos/react-ui-types';
 
@@ -27,41 +27,51 @@ const [ButtonGroupProvider, useButtonGroupContext] = createContext<ButtonGroupCo
   inGroup: false,
 });
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    { classNames, children, density: propsDensity, elevation: propsElevation, variant = 'default', asChild, ...props },
-    ref,
-  ) => {
-    const { inGroup } = useButtonGroupContext(BUTTON_NAME);
-    const { tx } = useThemeContext();
-    const elevation = useElevationContext(propsElevation);
-    const density = useDensityContext(propsDensity);
-    const Root = asChild ? Slot : Primitive.button;
-    return (
-      <Root
-        ref={ref}
-        {...props}
-        data-variant={variant}
-        data-density={density}
-        data-props={inGroup ? 'grouped' : ''}
-        className={tx(
-          'button.root',
-          'button',
-          {
-            variant,
-            inGroup,
-            disabled: props.disabled,
-            density,
-            elevation,
-          },
-          classNames,
-        )}
-        {...(props.disabled && { disabled: true })}
-      >
-        {children}
-      </Root>
-    );
-  },
+const Button = memo(
+  forwardRef<HTMLButtonElement, ButtonProps>(
+    (
+      {
+        classNames,
+        children,
+        density: propsDensity,
+        elevation: propsElevation,
+        variant = 'default',
+        asChild,
+        ...props
+      },
+      ref,
+    ) => {
+      const { inGroup } = useButtonGroupContext(BUTTON_NAME);
+      const { tx } = useThemeContext();
+      const elevation = useElevationContext(propsElevation);
+      const density = useDensityContext(propsDensity);
+      const Root = asChild ? Slot : Primitive.button;
+      return (
+        <Root
+          ref={ref}
+          {...props}
+          data-variant={variant}
+          data-density={density}
+          data-props={inGroup ? 'grouped' : ''}
+          className={tx(
+            'button.root',
+            'button',
+            {
+              variant,
+              inGroup,
+              disabled: props.disabled,
+              density,
+              elevation,
+            },
+            classNames,
+          )}
+          {...(props.disabled && { disabled: true })}
+        >
+          {children}
+        </Root>
+      );
+    },
+  ),
 );
 
 Button.displayName = BUTTON_NAME;

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

@@ -21,8 +21,9 @@ const StorybookToggle = (props: StorybookToggleProps) => {
 };
 
 export default {
-  title: 'react-ui/Toggle button',
-  component: StorybookToggle,
+  title: 'ui/react-ui-core/Toggle',
+  component: Toggle,
+  render: StorybookToggle,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -29,8 +29,9 @@ const StorybookToggleGroup = (props: StorybookToggleGroupProps) => {
 };
 
 export default {
-  title: 'react-ui/Toggle button group',
-  component: StorybookToggleGroup,
+  title: 'ui/react-ui-core/ToggleGroup',
+  component: ToggleGroup,
+  render: StorybookToggleGroup,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/DensityProvider/DensityProvider.tsx

@@ -14,7 +14,7 @@ export type DensityProviderProps = PropsWithChildren<{
   density?: Density;
 }>;
 
-export const DensityContext = createContext<DensityContextValue>({ density: 'coarse' });
+export const DensityContext = createContext<DensityContextValue>({ density: 'fine' });
 
 export const DensityProvider = ({ density, children }: DensityProviderProps) => (
   <DensityContext.Provider value={{ density }}>{children}</DensityContext.Provider>

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

@@ -54,8 +54,9 @@ const StorybookAlertDialog = ({
 };
 
 export default {
-  title: 'react-ui/Dialog (alert)',
-  component: StorybookAlertDialog,
+  title: 'ui/react-ui-core/AlertDialog',
+  component: AlertDialog,
+  render: StorybookAlertDialog,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -40,8 +40,9 @@ const StorybookDialog = ({ title, openTrigger, description, body, closeTrigger,
 };
 
 export default {
-  title: 'react-ui/Dialog',
-  component: StorybookDialog,
+  title: 'ui/react-ui-core/Dialog',
+  component: Dialog,
+  render: StorybookDialog,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Icon/Icon.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Primitive } from '@radix-ui/react-primitive';
-import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
 
 import { type Size } from '@dxos/react-ui-types';
 
@@ -12,11 +12,13 @@ import { type ThemedClassName } from '../../util';
 
 export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.svg>> & { icon: string; size?: Size };
 
-export const Icon = forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <svg {...props} className={tx('icon.root', 'icon', { size }, classNames)} ref={forwardedRef}>
-      <use href={`/icons.svg#${icon}`} />
-    </svg>
-  );
-});
+export const Icon = memo(
+  forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <svg {...props} className={tx('icon.root', 'icon', { size }, classNames)} ref={forwardedRef}>
+        <use href={`/icons.svg#${icon}`} />
+      </svg>
+    );
+  }),
+);

package/src/components/Input/Input.stories.tsx

@@ -72,9 +72,10 @@ const StoryInput = (props: StoryInputProps) => {
 };
 
 export default {
-  title: 'react-ui/Input',
-  component: StoryInput,
-  // TODO(thure): Refactor
+  title: 'ui/react-ui-core/Input',
+  component: Input,
+  render: StoryInput,
+  // TODO(thure): Refactor.
   argTypes: {
     label: { control: 'text' },
     description: { control: 'text' },

package/src/components/Link/Link.stories.tsx

@@ -8,7 +8,7 @@ import { Link } from './Link';
 import { withTheme } from '../../testing';
 
 export default {
-  title: 'react-ui/Link',
+  title: 'ui/react-ui-core/Link',
   component: Link,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

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

@@ -9,7 +9,7 @@ import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy }
 import { CSS } from '@dnd-kit/utilities';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { DotsSixVertical, PushPin } from '@phosphor-icons/react';
-import React, { type FC, type ReactNode, useState } from 'react';
+import React, { type ReactNode, useState } from 'react';
 
 import {
   getSize,
@@ -20,12 +20,12 @@ import {
   surfaceElevation,
 } from '@dxos/react-ui-theme';
 
-import { List, ListItem, type ListProps, type ListScopedProps } from './List';
+import { List, ListItem, type ListScopedProps } from './List';
 import { withTheme } from '../../testing';
 
 export default {
-  title: 'react-ui/List',
-  component: List as FC<ListProps>,
+  title: 'ui/react-ui-core/List',
+  component: List,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -56,8 +56,9 @@ const StorybookTree = ({ data }: StorybookTreeProps) => {
 };
 
 export default {
-  title: 'react-ui/Tree',
-  component: StorybookTree,
+  title: 'ui/react-ui-core/Tree',
+  component: Tree,
+  render: StorybookTree,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -1,6 +1,7 @@
 //
 // Copyright 2024 DXOS.org
 //
+
 import React from 'react';
 
 import { faker } from '@dxos/random';
@@ -119,7 +120,7 @@ function* visitor(node: StorybookNode, isOpen?: (node: StorybookNode) => boolean
 
 const flattenedContent = Array.from(visitor(content, () => true));
 
-const StorybookTreegrid = () => {
+const DefaultStory = () => {
   return (
     <Tg.Root gridTemplateColumns='1fr'>
       {flattenedContent.map(({ node, parentOf, path }) => {
@@ -140,10 +141,11 @@ const StorybookTreegrid = () => {
   );
 };
 
+export const Default = {};
+
 export default {
-  title: 'react-ui/Treegrid',
-  component: StorybookTreegrid,
+  title: 'ui/react-ui-core/Treegrid',
+  component: Tg.Root,
+  render: DefaultStory,
   decorators: [withTheme],
 };
-
-export const Treegrid = () => <StorybookTreegrid />;

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

@@ -46,8 +46,9 @@ const StoryMain = (_args: StoryMainArgs) => {
 };
 
 export default {
-  title: 'react-ui/Main',
-  component: StoryMain,
+  title: 'ui/react-ui-core/Main',
+  component: Main.Root,
+  render: StoryMain,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -92,8 +92,9 @@ const StorybookContextMenu = () => {
 };
 
 export default {
-  title: 'react-ui/Context menu',
-  component: StorybookContextMenu,
+  title: 'ui/react-ui-core/ContextMenu',
+  component: ContextMenu,
+  render: StorybookContextMenu,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import React from 'react';
+import React, { useRef, useState } from 'react';
 
 import { DropdownMenu } from './DropdownMenu';
 import { withTheme } from '../../testing';
@@ -92,8 +92,9 @@ const StorybookDropdownMenu = () => {
 };
 
 export default {
-  title: 'react-ui/Dropdown menu',
-  component: StorybookDropdownMenu,
+  title: 'ui/react-ui-core/DropdownMenu',
+  component: DropdownMenu,
+  render: StorybookDropdownMenu,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
@@ -104,3 +105,42 @@ export const Default = {
     chromatic: { delay: 1600 },
   },
 };
+
+export const VirtualTrigger = {
+  render: () => {
+    const [menuOpen, setMenuOpen] = useState(true);
+    const buttonRef = useRef<HTMLButtonElement | null>(null);
+    return (
+      <>
+        <Button onClick={() => setMenuOpen(true)} ref={buttonRef}>
+          Customise options
+        </Button>
+        <DropdownMenu.Root open={menuOpen} onOpenChange={setMenuOpen}>
+          <DropdownMenu.VirtualTrigger virtualRef={buttonRef} />
+          <DropdownMenu.Content sideOffset={4} collisionPadding={8}>
+            <DropdownMenu.Viewport>
+              <DropdownMenu.Item>
+                <span className='grow'>New Tab</span>
+                <span className='opacity-50'>⌘+T</span>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item>
+                <span className='grow'>New Window</span>
+                <span className='opacity-50'>⌘+N</span>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item disabled>
+                <span className='grow'>New Private Window</span>
+                <span className='opacity-50'>⇧+⌘+N</span>
+              </DropdownMenu.Item>
+
+              <DropdownMenu.Separator />
+
+              <DropdownMenu.GroupLabel>People</DropdownMenu.GroupLabel>
+            </DropdownMenu.Viewport>
+
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </>
+    );
+  },
+};