@dxos/react-ui 0.8.4-main.f9ba587 → 0.8.4-main.fffef41

package/src/components/Menus/DropdownMenu.tsx

@@ -15,17 +15,18 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, {
-  type ReactNode,
-  type FC,
-  useRef,
-  type ElementRef,
-  useCallback,
-  type ComponentPropsWithoutRef,
-  forwardRef,
   type ComponentPropsWithRef,
-  useEffect,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type FC,
   type MutableRefObject,
+  type ReactNode,
   type RefObject,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
 } from 'react';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
@@ -42,7 +43,7 @@ const DROPDOWN_MENU_NAME = 'DropdownMenu';
 
 type ScopedProps<P> = P & { __scopeDropdownMenu?: Scope };
 const [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [createMenuScope]);
-const useMenuScope = createMenuScope();
+const useMenuScope: (scope?: Scope) => any = createMenuScope();
 
 type DropdownMenuContextValue = {
   triggerId: string;
@@ -124,6 +125,7 @@ const DropdownMenuTrigger = forwardRef<DropdownMenuTriggerElement, DropdownMenuT
           disabled={disabled}
           {...triggerProps}
           ref={composeRefs(forwardedRef, context.triggerRef)}
+          data-arrow-keys='down'
           onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {
             // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
             // but not when the control key is pressed (avoiding MacOS right click)
@@ -167,7 +169,7 @@ DropdownMenuTrigger.displayName = TRIGGER_NAME;
 const VIRTUAL_TRIGGER_NAME = 'DropdownMenuVirtualTrigger';
 
 interface DropdownMenuVirtualTriggerProps {
-  virtualRef: RefObject<DropdownMenuTriggerElement>;
+  virtualRef: RefObject<DropdownMenuTriggerElement | null>;
 }
 
 const DropdownMenuVirtualTrigger = (props: ScopedProps<DropdownMenuVirtualTriggerProps>) => {
@@ -179,7 +181,7 @@ const DropdownMenuVirtualTrigger = (props: ScopedProps<DropdownMenuVirtualTrigge
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return <MenuPrimitive.Anchor {...menuScope} virtualRef={virtualRef} />;
+  return <MenuPrimitive.Anchor {...menuScope} virtualRef={virtualRef as RefObject<DropdownMenuTriggerElement>} />;
 };
 
 DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
@@ -233,19 +235,35 @@ interface DropdownMenuContentProps extends Omit<MenuContentProps, 'onEntryFocus'
 
 const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
   (props: ScopedProps<DropdownMenuContentProps>, forwardedRef) => {
-    const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
+    const { __scopeDropdownMenu, classNames, collisionPadding = 8, collisionBoundary, ...contentProps } = props;
     const { tx } = useThemeContext();
     const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
     const elevation = useElevationContext();
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = useRef(false);
     const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+
+    // Check for the closest annotated collision boundary in the DOM tree.
+    const computedCollisionBoundary = useMemo(() => {
+      const closestBoundary = context.triggerRef.current?.closest(
+        '[data-popover-collision-boundary]',
+      ) as HTMLElement | null;
+      return closestBoundary
+        ? Array.isArray(collisionBoundary)
+          ? [closestBoundary, ...collisionBoundary]
+          : collisionBoundary
+            ? [closestBoundary, collisionBoundary]
+            : [closestBoundary]
+        : collisionBoundary;
+    }, [context.open, collisionBoundary, context.triggerRef.current]);
+
     return (
       <MenuPrimitive.Content
         id={context.contentId}
         aria-labelledby={context.triggerId}
         {...menuScope}
         {...contentProps}
+        collisionBoundary={computedCollisionBoundary}
         collisionPadding={safeCollisionPadding}
         ref={forwardedRef}
         onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
@@ -264,6 +282,7 @@ const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuC
             hasInteractedOutsideRef.current = true;
           }
         })}
+        data-arrow-keys='up down'
         className={tx('menu.content', 'menu', { elevation }, classNames)}
         style={{
           ...props.style,
@@ -415,13 +434,21 @@ const RADIO_ITEM_NAME = 'DropdownMenuRadioItem';
 
 type DropdownMenuRadioItemElement = ElementRef<typeof MenuPrimitive.RadioItem>;
 type MenuRadioItemProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>;
-interface DropdownMenuRadioItemProps extends MenuRadioItemProps {}
+type DropdownMenuRadioItemProps = ThemedClassName<MenuRadioItemProps>;
 
 const DropdownMenuRadioItem = forwardRef<DropdownMenuRadioItemElement, DropdownMenuRadioItemProps>(
   (props: ScopedProps<DropdownMenuRadioItemProps>, forwardedRef) => {
-    const { __scopeDropdownMenu, ...radioItemProps } = props;
+    const { __scopeDropdownMenu, classNames, ...itemProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return <MenuPrimitive.RadioItem {...menuScope} {...radioItemProps} ref={forwardedRef} />;
+    const { tx } = useThemeContext();
+    return (
+      <MenuPrimitive.Item
+        {...menuScope}
+        {...itemProps}
+        className={tx('menu.item', 'menu__item', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
   },
 );
 
@@ -611,7 +638,9 @@ export const DropdownMenu = {
   SubContent: DropdownMenuSubContent,
 };
 
-const useDropdownMenuMenuScope = useMenuScope;
+type DropdownMenuScope = Scope;
+
+const useDropdownMenuMenuScope: (scope?: DropdownMenuScope) => any = useMenuScope;
 
 export { createDropdownMenuScope, useDropdownMenuContext, useDropdownMenuMenuScope };
 

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

@@ -2,15 +2,15 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { type MessageValence } from '@dxos/react-ui-types';
 
-import { Callout } from './Message';
 import { withTheme } from '../../testing';
 
+import { Callout } from './Message';
+
 type StoryProps = {
   valence: MessageValence;
   title: string;
@@ -24,9 +24,9 @@ const DefaultStory = ({ valence, title, body }: StoryProps) => (
   </Callout.Root>
 );
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Callout',
-  component: Callout,
+  component: Callout.Root as any,
   render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
@@ -36,9 +36,13 @@ export default {
       options: ['success', 'info', 'warning', 'error', 'neutral'],
     },
   },
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     valence: 'neutral',
     title: 'Alert title',

package/src/components/Message/Message.tsx

@@ -8,7 +8,7 @@ import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithRef, forwardRef } from 'react';
 
 import { useId } from '@dxos/react-hooks';
-import { type MessageValence, type Elevation } from '@dxos/react-ui-types';
+import { type Elevation, type MessageValence } from '@dxos/react-ui-types';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';

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

@@ -2,15 +2,15 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type PropsWithChildren, type ReactNode, useRef, useState } from 'react';
 
 import { faker } from '@dxos/random';
 
-import { Popover } from './Popover';
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
+
+import { Popover } from './Popover';
 
 faker.seed(1234);
 
@@ -28,15 +28,18 @@ const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Popover',
-  component: Popover,
+  component: Popover.Root,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     openTrigger: <Button>Open popover</Button>,
     children: faker.lorem.paragraphs(3),

package/src/components/Popover/Popover.tsx

@@ -22,17 +22,18 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { hideOthers } from 'aria-hidden';
 import React, {
   type ComponentPropsWithRef,
-  forwardRef,
+  type ComponentPropsWithoutRef,
   type ElementRef,
-  type RefObject,
+  type FC,
+  type MutableRefObject,
   type ReactNode,
-  useRef,
+  type RefObject,
+  forwardRef,
   useCallback,
-  type ComponentPropsWithoutRef,
-  type FC,
-  useState,
   useEffect,
-  type MutableRefObject,
+  useMemo,
+  useRef,
+  useState,
 } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
 
@@ -182,7 +183,7 @@ PopoverTrigger.displayName = TRIGGER_NAME;
 const VIRTUAL_TRIGGER_NAME = 'PopoverVirtualTrigger';
 
 interface PopoverVirtualTriggerProps {
-  virtualRef: RefObject<PopoverTriggerElement>;
+  virtualRef: RefObject<PopoverTriggerElement | null>;
 }
 
 const PopoverVirtualTrigger = (props: ScopedProps<PopoverVirtualTriggerProps>) => {
@@ -194,7 +195,7 @@ const PopoverVirtualTrigger = (props: ScopedProps<PopoverVirtualTriggerProps>) =
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return <PopperPrimitive.Anchor {...popperScope} virtualRef={virtualRef} />;
+  return <PopperPrimitive.Anchor {...popperScope} virtualRef={virtualRef as RefObject<PopoverTriggerElement>} />;
 };
 
 PopoverVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
@@ -396,6 +397,7 @@ type PopoverContentImplElement = ElementRef<typeof PopperPrimitive.Content>;
 type FocusScopeProps = ComponentPropsWithoutRef<typeof FocusScope>;
 type DismissableLayerProps = ComponentPropsWithoutRef<typeof DismissableLayer>;
 type PopperContentProps = ThemedClassName<ComponentPropsWithoutRef<typeof PopperPrimitive.Content>>;
+
 interface PopoverContentImplProps
   extends Omit<PopperContentProps, 'onPlaced'>,
     Omit<DismissableLayerProps, 'onDismiss'> {
@@ -431,6 +433,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
       onFocusOutside,
       onInteractOutside,
       collisionPadding = 8,
+      collisionBoundary,
       classNames,
       ...contentProps
     } = props;
@@ -440,10 +443,23 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
     const elevation = useElevationContext();
     const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
 
-    // Make sure the whole tree has focus guards as our `Popover` may be
-    // the last element in the DOM (because of the `Portal`)
+    // Make sure the whole tree has focus guards as our `Popover` may be the last element in the DOM (because of the `Portal`)
     useFocusGuards();
 
+    // Check for the closest annotated collision boundary in the DOM tree.
+    const computedCollisionBoundary = useMemo(() => {
+      const closestBoundary = context.triggerRef.current?.closest(
+        '[data-popover-collision-boundary]',
+      ) as HTMLElement | null;
+      return closestBoundary
+        ? Array.isArray(collisionBoundary)
+          ? [closestBoundary, ...collisionBoundary]
+          : collisionBoundary
+            ? [closestBoundary, collisionBoundary]
+            : [closestBoundary]
+        : collisionBoundary;
+    }, [context.open, collisionBoundary, context.triggerRef.current]);
+
     return (
       <FocusScope
         asChild
@@ -468,11 +484,12 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
             {...popperScope}
             {...contentProps}
             collisionPadding={safeCollisionPadding}
+            collisionBoundary={computedCollisionBoundary}
             className={tx('popover.content', 'popover', { elevation }, classNames)}
             ref={forwardedRef}
             style={{
               ...contentProps.style,
-              // re-namespace exposed content custom properties
+              // Re-namespace exposed content custom properties.
               ...{
                 '--radix-popover-content-transform-origin': 'var(--radix-popper-transform-origin)',
                 '--radix-popover-content-available-width': 'var(--radix-popper-available-width)',

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

@@ -2,16 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type PropsWithChildren } from 'react';
 
 import { faker } from '@dxos/random';
 import { activeSurface, surfaceShadow } from '@dxos/react-ui-theme';
 
-import { ScrollArea } from './ScrollArea';
 import { withTheme } from '../../testing';
 
+import { ScrollArea } from './ScrollArea';
+
 faker.seed(1234);
 
 const DefaultStory = ({ children }: PropsWithChildren<{}>) => {
@@ -33,15 +33,18 @@ const DefaultStory = ({ children }: PropsWithChildren<{}>) => {
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/Scroll area',
-  component: ScrollArea,
+const meta = {
+  title: 'ui/react-ui-core/ScrollArea',
+  component: ScrollArea as any,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     children: faker.lorem.paragraphs(5),
   },

package/src/components/ScrollArea/ScrollArea.tsx

@@ -3,16 +3,16 @@
 //
 
 import {
+  Corner as ScrollAreaPrimitiveCorner,
+  type ScrollAreaCornerProps as ScrollAreaPrimitiveCornerProps,
   Root as ScrollAreaPrimitiveRoot,
   type ScrollAreaProps as ScrollAreaPrimitiveRootProps,
-  Viewport as ScrollAreaPrimitiveViewport,
-  type ScrollAreaViewportProps as ScrollAreaPrimitiveViewportProps,
   Scrollbar as ScrollAreaPrimitiveScrollbar,
   type ScrollAreaScrollbarProps as ScrollAreaPrimitiveScrollbarProps,
   Thumb as ScrollAreaPrimitiveThumb,
   type ScrollAreaThumbProps as ScrollAreaPrimitiveThumbProps,
-  Corner as ScrollAreaPrimitiveCorner,
-  type ScrollAreaCornerProps as ScrollAreaPrimitiveCornerProps,
+  Viewport as ScrollAreaPrimitiveViewport,
+  type ScrollAreaViewportProps as ScrollAreaPrimitiveViewportProps,
 } from '@radix-ui/react-scroll-area';
 import React, { forwardRef } from 'react';
 

package/src/components/ScrollContainer/ScrollContainer.stories.tsx

@@ -0,0 +1,69 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { faker } from '@dxos/random';
+
+import { withLayout, withTheme } from '../../testing';
+import { Button } from '../Button';
+import { Toolbar } from '../Toolbar';
+
+import { ScrollContainer, type ScrollContainerRootProps, type ScrollController } from './ScrollContainer';
+
+const DefaultStory = (props: ScrollContainerRootProps) => {
+  const [lines, setLines] = useState<string[]>([]);
+  const [running, setRunning] = useState(true);
+  const scroller = useRef<ScrollController>(null);
+  useEffect(() => {
+    if (!running) {
+      return;
+    }
+
+    const i = setInterval(() => {
+      setLines((lines) => [...lines, faker.lorem.paragraph()]);
+    }, 500);
+
+    return () => clearInterval(i);
+  }, [running]);
+
+  return (
+    <div className='flex flex-col bs-full overflow-hidden'>
+      <Toolbar.Root>
+        <Button onClick={() => setRunning((running) => !running)}>{running ? 'Stop' : 'Start'}</Button>
+        <Button onClick={() => scroller.current?.scrollToBottom()}>Scroll to bottom</Button>
+        <div className='flex-1' />
+        <div>{lines.length}</div>
+      </Toolbar.Root>
+      <ScrollContainer.Root {...props} ref={scroller}>
+        <ScrollContainer.Viewport>
+          {lines.map((line, index) => (
+            <div key={index} className='p-2'>
+              {line}
+            </div>
+          ))}
+        </ScrollContainer.Viewport>
+      </ScrollContainer.Root>
+    </div>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/ScrollContainer',
+  component: ScrollContainer.Root,
+  render: DefaultStory,
+  decorators: [withTheme, withLayout({ container: 'column', classNames: 'is-[30rem]' })],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    pin: true,
+    fade: true,
+  },
+};