@dxos/react-ui 0.8.4-main.406dc2a → 0.8.4-main.59c2e9b

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 Elevation, type MessageValence } from '@dxos/react-ui-types';
+import { type Elevation, type MessageValence } from '@dxos/ui-types';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -31,9 +31,15 @@ type MessageRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.d
 };
 
 type MessageContextValue = { titleId?: string; descriptionId: string; valence: MessageValence };
+
 const MESSAGE_NAME = 'Message';
+
 const [MessageProvider, useMessageContext] = createContext<MessageContextValue>(MESSAGE_NAME);
 
+//
+// Root
+//
+
 const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
   (
     {
@@ -53,6 +59,7 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
     const descriptionId = useId('message__description', propsDescriptionId);
     const elevation = useElevationContext(propsElevation);
     const Root = asChild ? Slot : Primitive.div;
+
     return (
       <MessageProvider {...{ titleId, descriptionId, valence }}>
         <Root
@@ -72,6 +79,10 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
 
 MessageRoot.displayName = MESSAGE_NAME;
 
+//
+// Title
+//
+
 type MessageTitleProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primitive.h2>>, 'id'> & {
   asChild?: boolean;
   icon?: string;
@@ -84,6 +95,7 @@ const MessageTitle = forwardRef<HTMLHeadingElement, MessageTitleProps>(
     const { tx } = useThemeContext();
     const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
     const Root = asChild ? Slot : Primitive.h2;
+
     return (
       <Root
         {...props}
@@ -106,16 +118,20 @@ const MessageTitle = forwardRef<HTMLHeadingElement, MessageTitleProps>(
 
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 
+//
+// Content
+//
+
 type MessageContentProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primitive.h2>>, 'id'> & {
   asChild?: boolean;
 };
 
-const MESSAGE_BODY_NAME = 'MessageContent';
+const MESSAGE_CONTENT_NAME = 'MessageContent';
 
 const MessageContent = forwardRef<HTMLParagraphElement, MessageContentProps>(
   ({ asChild, classNames, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
+    const { descriptionId } = useMessageContext(MESSAGE_CONTENT_NAME);
     const Root = asChild ? Slot : Primitive.p;
     return (
       <Root
@@ -130,9 +146,18 @@ const MessageContent = forwardRef<HTMLParagraphElement, MessageContentProps>(
   },
 );
 
-MessageContent.displayName = MESSAGE_BODY_NAME;
+MessageContent.displayName = MESSAGE_CONTENT_NAME;
+
+//
+// Message
+//
+
+export const Message = {
+  Root: MessageRoot,
+  Title: MessageTitle,
+  Content: MessageContent,
+};
 
-export const Message = { Root: MessageRoot, Title: MessageTitle, Content: MessageContent };
 export const Callout = Message;
 
 export type { MessageRootProps, MessageTitleProps, MessageContentProps };

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

@@ -8,7 +8,7 @@ import React, { type PropsWithChildren, type ReactNode, useRef, useState } from
 import { faker } from '@dxos/random';
 
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
 
 import { Popover } from './Popover';
 

package/src/components/Popover/Popover.tsx

@@ -31,6 +31,7 @@ import React, {
   forwardRef,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -40,9 +41,9 @@ import { useElevationContext, useThemeContext } from '../../hooks';
 import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
 
-/* -------------------------------------------------------------------------------------------------
- * Popover
- * ----------------------------------------------------------------------------------------------- */
+//
+// Context
+//
 
 const POPOVER_NAME = 'Popover';
 
@@ -64,6 +65,10 @@ type PopoverContextValue = {
 
 const [PopoverProvider, usePopoverContext] = createPopoverContext<PopoverContextValue>(POPOVER_NAME);
 
+//
+// PopoverRoot
+//
+
 interface PopoverRootProps {
   children?: ReactNode;
   open?: boolean;
@@ -105,9 +110,9 @@ const PopoverRoot: FC<PopoverRootProps> = (props: ScopedProps<PopoverRootProps>)
 
 PopoverRoot.displayName = POPOVER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverAnchor
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverAnchor
+//
 
 const ANCHOR_NAME = 'PopoverAnchor';
 
@@ -133,9 +138,9 @@ const PopoverAnchor = forwardRef<PopoverAnchorElement, PopoverAnchorProps>(
 
 PopoverAnchor.displayName = ANCHOR_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverTrigger
+//
 
 const TRIGGER_NAME = 'PopoverTrigger';
 
@@ -175,9 +180,9 @@ const PopoverTrigger = forwardRef<PopoverTriggerElement, PopoverTriggerProps>(
 
 PopoverTrigger.displayName = TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverVirtualTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverVirtualTrigger
+//
 
 const VIRTUAL_TRIGGER_NAME = 'PopoverVirtualTrigger';
 
@@ -199,9 +204,9 @@ const PopoverVirtualTrigger = (props: ScopedProps<PopoverVirtualTriggerProps>) =
 
 PopoverVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverPortal
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverPortal
+//
 
 const PORTAL_NAME = 'PopoverPortal';
 
@@ -240,9 +245,9 @@ const PopoverPortal: FC<PopoverPortalProps> = (props: ScopedProps<PopoverPortalP
 
 PopoverPortal.displayName = PORTAL_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverContent
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverContent
+//
 
 const CONTENT_NAME = 'PopoverContent';
 
@@ -274,8 +279,6 @@ const PopoverContent = forwardRef<PopoverContentTypeElement, PopoverContentProps
 
 PopoverContent.displayName = CONTENT_NAME;
 
-/* ----------------------------------------------------------------------------------------------- */
-
 type PopoverContentTypeElement = PopoverContentImplElement;
 export interface PopoverContentTypeProps
   extends Omit<PopoverContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}
@@ -390,8 +393,6 @@ const PopoverContentNonModal = forwardRef<PopoverContentTypeElement, PopoverCont
   },
 );
 
-/* ----------------------------------------------------------------------------------------------- */
-
 type PopoverContentImplElement = ElementRef<typeof PopperPrimitive.Content>;
 type FocusScopeProps = ComponentPropsWithoutRef<typeof FocusScope>;
 type DismissableLayerProps = ComponentPropsWithoutRef<typeof DismissableLayer>;
@@ -432,6 +433,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
       onFocusOutside,
       onInteractOutside,
       collisionPadding = 8,
+      collisionBoundary,
       classNames,
       ...contentProps
     } = props;
@@ -444,6 +446,20 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
     // 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,6 +484,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
             {...popperScope}
             {...contentProps}
             collisionPadding={safeCollisionPadding}
+            collisionBoundary={computedCollisionBoundary}
             className={tx('popover.content', 'popover', { elevation }, classNames)}
             ref={forwardedRef}
             style={{
@@ -488,9 +505,9 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
   },
 );
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverClose
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverClose
+//
 
 const CLOSE_NAME = 'PopoverClose';
 
@@ -514,9 +531,9 @@ const PopoverClose = forwardRef<PopoverCloseElement, PopoverCloseProps>(
 
 PopoverClose.displayName = CLOSE_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverArrow
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverArrow
+//
 
 const ARROW_NAME = 'PopoverArrow';
 
@@ -542,9 +559,9 @@ const PopoverArrow = forwardRef<PopoverArrowElement, PopoverArrowProps>(
 
 PopoverArrow.displayName = ARROW_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverViewport
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverViewport
+//
 
 type PopoverViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
   asChild?: boolean;
@@ -568,12 +585,14 @@ const PopoverViewport = forwardRef<HTMLDivElement, PopoverViewportProps>(
   },
 );
 
-/* ----------------------------------------------------------------------------------------------- */
-
 const getState = (open: boolean) => (open ? 'open' : 'closed');
 
 type PopoverContentInteractOutsideEvent = Parameters<NonNullable<PopoverContentProps['onInteractOutside']>>[0];
 
+//
+// Popver
+//
+
 export const Popover = {
   Root: PopoverRoot,
   Anchor: PopoverAnchor,

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

@@ -6,9 +6,9 @@ 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 { activeSurface, surfaceShadow } from '@dxos/ui-theme';
 
-import { withTheme } from '../../testing';
+import { withLayout, withTheme } from '../../testing';
 
 import { ScrollArea } from './ScrollArea';
 
@@ -34,10 +34,13 @@ const DefaultStory = ({ children }: PropsWithChildren<{}>) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Scroll area',
+  title: 'ui/react-ui-core/ScrollArea',
   component: ScrollArea as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme, withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
@@ -49,3 +52,50 @@ export const Default: Story = {
     children: faker.lorem.paragraphs(5),
   },
 };
+
+export const NestedScrollAreas: Story = {
+  render: () => {
+    const columns = Array.from({ length: 3 }).map((_, index) => ({
+      id: String(index),
+      itemCount: 20,
+    }));
+
+    return (
+      <div className='p-4 bs-full is-full overflow-hidden'>
+        <div className='flex bs-full is-full overflow-hidden border border-sky-500'>
+          <ScrollArea.Root>
+            <ScrollArea.Viewport>
+              <div className='flex gap-4 p-3 bs-full overflow-hidden'>
+                {columns.map((column) => (
+                  <div key={column.id} className='flex flex-col gap-1 bs-full overflow-hidden is-[300px]'>
+                    <div className='flex shrink-0 p-2 border border-separator'>Column {column.id}</div>
+                    <ScrollArea.Expander classNames='border border-rose-500'>
+                      <ScrollArea.Root>
+                        <ScrollArea.Viewport>
+                          <div className='flex flex-col p-3 space-y-2'>
+                            {Array.from({ length: column.itemCount }, (_, i) => (
+                              <div key={i} className={`p-3 border border-separator rounded-sm`}>
+                                Item {i + 1}
+                              </div>
+                            ))}
+                          </div>
+                        </ScrollArea.Viewport>
+                        <ScrollArea.Scrollbar orientation='vertical'>
+                          <ScrollArea.Thumb />
+                        </ScrollArea.Scrollbar>
+                      </ScrollArea.Root>
+                    </ScrollArea.Expander>
+                    <div className={`p-2 border border-separator`}>Footer</div>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea.Viewport>
+            <ScrollArea.Scrollbar orientation='horizontal'>
+              <ScrollArea.Thumb />
+            </ScrollArea.Scrollbar>
+          </ScrollArea.Root>
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/ScrollArea/ScrollArea.tsx

@@ -14,18 +14,21 @@ import {
   Viewport as ScrollAreaPrimitiveViewport,
   type ScrollAreaViewportProps as ScrollAreaPrimitiveViewportProps,
 } from '@radix-ui/react-scroll-area';
-import React, { forwardRef } from 'react';
+import React, { type PropsWithChildren, forwardRef } from 'react';
+
+import { mx } from '@dxos/ui-theme';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
 type ScrollAreaVariant = 'coarse' | 'fine';
 
+//
+// Root
+//
+
 type ScrollAreaRootProps = ThemedClassName<ScrollAreaPrimitiveRootProps>;
 
-/**
- * @deprecated
- */
 const ScrollAreaRoot = forwardRef<HTMLDivElement, ScrollAreaRootProps>(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
@@ -37,6 +40,10 @@ const ScrollAreaRoot = forwardRef<HTMLDivElement, ScrollAreaRootProps>(({ classN
   );
 });
 
+//
+// Viewport
+//
+
 type ScrollAreaViewportProps = ThemedClassName<ScrollAreaPrimitiveViewportProps>;
 
 const ScrollAreaViewport = forwardRef<HTMLDivElement, ScrollAreaViewportProps>(
@@ -52,6 +59,10 @@ const ScrollAreaViewport = forwardRef<HTMLDivElement, ScrollAreaViewportProps>(
   },
 );
 
+//
+// Scrollbar
+//
+
 type ScrollAreaScrollbarProps = ThemedClassName<ScrollAreaPrimitiveScrollbarProps> & { variant?: ScrollAreaVariant };
 
 const ScrollAreaScrollbar = forwardRef<HTMLDivElement, ScrollAreaScrollbarProps>(
@@ -68,6 +79,10 @@ const ScrollAreaScrollbar = forwardRef<HTMLDivElement, ScrollAreaScrollbarProps>
   },
 );
 
+//
+// Thumb
+//
+
 type ScrollAreaThumbProps = ThemedClassName<ScrollAreaPrimitiveThumbProps>;
 
 const ScrollAreaThumb = forwardRef<HTMLDivElement, ScrollAreaThumbProps>(({ classNames, ...props }, forwardedRef) => {
@@ -81,6 +96,10 @@ const ScrollAreaThumb = forwardRef<HTMLDivElement, ScrollAreaThumbProps>(({ clas
   );
 });
 
+//
+// Corner
+//
+
 type ScrollAreaCornerProps = ThemedClassName<ScrollAreaPrimitiveCornerProps>;
 
 const ScrollAreaCorner = forwardRef<HTMLDivElement, ScrollAreaCornerProps>(({ classNames, ...props }, forwardedRef) => {
@@ -94,12 +113,38 @@ const ScrollAreaCorner = forwardRef<HTMLDivElement, ScrollAreaCornerProps>(({ cl
   );
 });
 
+//
+// Expander
+//
+
+type ScrollAreaExpanderProps = ThemedClassName<PropsWithChildren>;
+
+/**
+ * Size-locking wrapper required for inner ScrollArea to function correctly.
+ * NOTE: Radix ScrollArea.Viewport applies `display: table` to its immediate child,
+ * causing the content to participate in table layout and escape the intended fixed-size viewport.
+ */
+const ScrollAreaExpander = ({ classNames, children }: ScrollAreaExpanderProps) => {
+  return (
+    <div role='none' className={mx('relative bs-full is-full overflow-hidden', classNames)}>
+      <div role='none' className='absolute inset-0 overflow-hidden'>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+//
+// ScrollArea
+//
+
 export const ScrollArea = {
   Root: ScrollAreaRoot,
   Viewport: ScrollAreaViewport,
   Scrollbar: ScrollAreaScrollbar,
   Thumb: ScrollAreaThumb,
   Corner: ScrollAreaCorner,
+  Expander: ScrollAreaExpander,
 };
 
 export type {
@@ -108,4 +153,5 @@ export type {
   ScrollAreaScrollbarProps,
   ScrollAreaThumbProps,
   ScrollAreaCornerProps,
+  ScrollAreaExpanderProps,
 };

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

@@ -0,0 +1,70 @@
+//
+// 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.ScrollDownButton />
+      </ScrollContainer.Root>
+    </div>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/ScrollContainer',
+  component: ScrollContainer.Root,
+  render: DefaultStory,
+  decorators: [withTheme, withLayout({ layout: '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,
+  },
+};