@dxos/react-ui 0.8.4-main.67995b8 → 0.8.4-main.6fa680abb7

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);
 
@@ -20,7 +20,7 @@ const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger
       <Popover.Trigger asChild>{openTrigger}</Popover.Trigger>
       <Popover.Content>
         <Popover.Viewport>
-          <p className='pli-2 plb-1 min-is-[18rem] max-is-[38rem]'>{children}</p>
+          <p className='px-2 py-1 min-w-[18rem] max-w-[38rem]'>{children}</p>
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>
@@ -28,15 +28,18 @@ const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/Popover',
-  component: Popover,
+const meta = {
+  title: 'ui/react-ui-core/components/Popover',
+  component: Popover.Root,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme()],
+} 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),
@@ -56,7 +59,7 @@ export const VirtualTrigger = {
           <Popover.VirtualTrigger virtualRef={buttonRef} />
           <Popover.Content>
             <Popover.Viewport>
-              <p className='pli-2 plb-1 min-is-[18rem] max-is-[38rem]'>{faker.lorem.paragraphs(3)}</p>
+              <p className='px-2 py-1 min-w-[18rem] max-w-[38rem]'>{faker.lorem.paragraphs(3)}</p>
             </Popover.Viewport>
             <Popover.Arrow />
           </Popover.Content>

package/src/components/Popover/Popover.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-// This is based upon `@radix-ui/react-popover` fetched 25 Oct 2024 at https://github.com/radix-ui/primitives at commit 374c7d7.
+// This is based upon `@radix-ui/react-popover` fetched Oct 25, 2024 at https://github.com/radix-ui/primitives at commit 374c7d7.
 
 import { composeEventHandlers } from '@radix-ui/primitive';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
@@ -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 ComponentRef,
   type ElementRef,
-  type RefObject,
+  type FC,
   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';
 
@@ -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';
 
@@ -51,7 +52,7 @@ const [createPopoverContext, createPopoverScope] = createContextScope(POPOVER_NA
 const usePopperScope = createPopperScope();
 
 type PopoverContextValue = {
-  triggerRef: MutableRefObject<HTMLButtonElement>;
+  triggerRef: RefObject<HTMLButtonElement>;
   contentId: string;
   open: boolean;
   onOpenChange(open: boolean): void;
@@ -64,6 +65,10 @@ type PopoverContextValue = {
 
 const [PopoverProvider, usePopoverContext] = createPopoverContext<PopoverContextValue>(POPOVER_NAME);
 
+//
+// PopoverRoot
+//
+
 interface PopoverRootProps {
   children?: ReactNode;
   open?: boolean;
@@ -88,7 +93,7 @@ const PopoverRoot: FC<PopoverRootProps> = (props: ScopedProps<PopoverRootProps>)
       <PopoverProvider
         scope={__scopePopover}
         contentId={useId()}
-        triggerRef={triggerRef as MutableRefObject<HTMLButtonElement>}
+        triggerRef={triggerRef as RefObject<HTMLButtonElement>}
         open={open}
         onOpenChange={setOpen}
         onOpenToggle={useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}
@@ -105,13 +110,13 @@ const PopoverRoot: FC<PopoverRootProps> = (props: ScopedProps<PopoverRootProps>)
 
 PopoverRoot.displayName = POPOVER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverAnchor
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverAnchor
+//
 
 const ANCHOR_NAME = 'PopoverAnchor';
 
-type PopoverAnchorElement = ElementRef<typeof PopperPrimitive.Anchor>;
+type PopoverAnchorElement = ComponentRef<typeof PopperPrimitive.Anchor>;
 type PopperAnchorProps = ComponentPropsWithoutRef<typeof PopperPrimitive.Anchor>;
 interface PopoverAnchorProps extends PopperAnchorProps {}
 
@@ -133,25 +138,28 @@ const PopoverAnchor = forwardRef<PopoverAnchorElement, PopoverAnchorProps>(
 
 PopoverAnchor.displayName = ANCHOR_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverTrigger
+//
 
 const TRIGGER_NAME = 'PopoverTrigger';
 
 type PopoverTriggerElement = ElementRef<typeof Primitive.button>;
 type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
-interface PopoverTriggerProps extends PrimitiveButtonProps {}
+interface PopoverTriggerProps extends PrimitiveButtonProps {
+  asChild?: boolean;
+}
 
 const PopoverTrigger = forwardRef<PopoverTriggerElement, PopoverTriggerProps>(
   (props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {
-    const { __scopePopover, ...triggerProps } = props;
+    const { __scopePopover, asChild, ...triggerProps } = props;
     const context = usePopoverContext(TRIGGER_NAME, __scopePopover);
     const popperScope = usePopperScope(__scopePopover);
     const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+    const Comp = asChild ? Slot : Primitive.button;
 
     const trigger = (
-      <Primitive.button
+      <Comp
         type='button'
         aria-haspopup='dialog'
         aria-expanded={context.open}
@@ -175,14 +183,14 @@ const PopoverTrigger = forwardRef<PopoverTriggerElement, PopoverTriggerProps>(
 
 PopoverTrigger.displayName = TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverVirtualTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverVirtualTrigger
+//
 
 const VIRTUAL_TRIGGER_NAME = 'PopoverVirtualTrigger';
 
 interface PopoverVirtualTriggerProps {
-  virtualRef: RefObject<PopoverTriggerElement>;
+  virtualRef: RefObject<PopoverTriggerElement | null>;
 }
 
 const PopoverVirtualTrigger = (props: ScopedProps<PopoverVirtualTriggerProps>) => {
@@ -194,14 +202,14 @@ 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;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverPortal
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverPortal
+//
 
 const PORTAL_NAME = 'PopoverPortal';
 
@@ -240,9 +248,9 @@ const PopoverPortal: FC<PopoverPortalProps> = (props: ScopedProps<PopoverPortalP
 
 PopoverPortal.displayName = PORTAL_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverContent
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverContent
+//
 
 const CONTENT_NAME = 'PopoverContent';
 
@@ -274,11 +282,11 @@ const PopoverContent = forwardRef<PopoverContentTypeElement, PopoverContentProps
 
 PopoverContent.displayName = CONTENT_NAME;
 
-/* ----------------------------------------------------------------------------------------------- */
-
 type PopoverContentTypeElement = PopoverContentImplElement;
-export interface PopoverContentTypeProps
-  extends Omit<PopoverContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}
+export interface PopoverContentTypeProps extends Omit<
+  PopoverContentImplProps,
+  'trapFocus' | 'disableOutsidePointerEvents'
+> {}
 
 const PopoverContentModal = forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(
   (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {
@@ -300,8 +308,7 @@ const PopoverContentModal = forwardRef<PopoverContentTypeElement, PopoverContent
         <PopoverContentImpl
           {...props}
           ref={composedRefs}
-          // we make sure we're not trapping once it's been closed
-          // (closed !== unmounted when animating out)
+          // Make sure we're not trapping once it's been closed (closed !== unmounted when animating out).
           trapFocus={context.open}
           disableOutsidePointerEvents
           onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
@@ -390,15 +397,13 @@ const PopoverContentNonModal = forwardRef<PopoverContentTypeElement, PopoverCont
   },
 );
 
-/* ----------------------------------------------------------------------------------------------- */
-
 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'> {
+  extends Omit<PopperContentProps, 'onPlaced'>, Omit<DismissableLayerProps, 'onDismiss'> {
   /**
    * Whether focus should be trapped within the `Popover`
    * (default: false)
@@ -431,6 +436,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
       onFocusOutside,
       onInteractOutside,
       collisionPadding = 8,
+      collisionBoundary,
       classNames,
       ...contentProps
     } = props;
@@ -440,10 +446,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 +487,12 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
             {...popperScope}
             {...contentProps}
             collisionPadding={safeCollisionPadding}
-            className={tx('popover.content', 'popover', { elevation }, classNames)}
+            collisionBoundary={computedCollisionBoundary}
+            className={tx('popover.content', { 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)',
@@ -488,9 +508,9 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
   },
 );
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverClose
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverClose
+//
 
 const CLOSE_NAME = 'PopoverClose';
 
@@ -514,9 +534,9 @@ const PopoverClose = forwardRef<PopoverCloseElement, PopoverCloseProps>(
 
 PopoverClose.displayName = CLOSE_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverArrow
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverArrow
+//
 
 const ARROW_NAME = 'PopoverArrow';
 
@@ -533,7 +553,7 @@ const PopoverArrow = forwardRef<PopoverArrowElement, PopoverArrowProps>(
       <PopperPrimitive.Arrow
         {...popperScope}
         {...arrowProps}
-        className={tx('popover.arrow', 'popover__arrow', {}, classNames)}
+        className={tx('popover.arrow', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -542,9 +562,9 @@ const PopoverArrow = forwardRef<PopoverArrowElement, PopoverArrowProps>(
 
 PopoverArrow.displayName = ARROW_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverViewport
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverViewport
+//
 
 type PopoverViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
   asChild?: boolean;
@@ -555,25 +575,27 @@ type PopoverViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primiti
 const PopoverViewport = forwardRef<HTMLDivElement, PopoverViewportProps>(
   ({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Root
+      <Comp
         {...props}
-        className={tx('popover.viewport', 'popover__viewport', { constrainInline, constrainBlock }, classNames)}
+        className={tx('popover.viewport', { constrainInline, constrainBlock }, classNames)}
         ref={forwardedRef}
       >
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
 
-/* ----------------------------------------------------------------------------------------------- */
-
 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

@@ -1,48 +1,177 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2026 DXOS.org
 //
 
-import '@dxos-theme';
-
-import React, { type PropsWithChildren } from 'react';
+import React, { useMemo } from 'react';
 
 import { faker } from '@dxos/random';
-import { activeSurface, surfaceShadow } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
+
+import { withLayout, withTheme } from '../../testing';
 
 import { ScrollArea } from './ScrollArea';
-import { withTheme } from '../../testing';
-
-faker.seed(1234);
-
-const DefaultStory = ({ children }: PropsWithChildren<{}>) => {
-  return (
-    <ScrollArea.Root
-      classNames={['is-[300px] bs-[400px] rounded', activeSurface, surfaceShadow({ elevation: 'positioned' })]}
-    >
-      <ScrollArea.Viewport classNames='rounded p-4'>
-        <p>{children}</p>
-      </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar orientation='horizontal'>
-        <ScrollArea.Thumb />
-      </ScrollArea.Scrollbar>
-      <ScrollArea.Scrollbar orientation='vertical'>
-        <ScrollArea.Thumb />
-      </ScrollArea.Scrollbar>
-      <ScrollArea.Corner />
-    </ScrollArea.Root>
-  );
-};
+
+faker.seed(123);
 
 export default {
-  title: 'ui/react-ui-core/Scroll area',
+  title: 'ui/react-ui-core/components/ScrollArea',
   component: ScrollArea,
-  render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+const Column = () => (
+  <div>
+    {Array.from({ length: 50 }).map((_, index) => (
+      <div key={index} className='px-1 text-sm cursor-pointer hover:bg-hover-surface'>
+        Item {index + 1}
+      </div>
+    ))}
+  </div>
+);
+
+const Row = () => (
+  <div className='flex gap-2 w-max'>
+    {Array.from({ length: 50 }).map((_, index) => (
+      <div
+        key={index}
+        className='shrink-0 h-20 w-20 cursor-pointer border border-separator rounded-md flex items-center justify-center text-sm hover:bg-hover-surface'
+      >
+        {index + 1}
+      </div>
+    ))}
+  </div>
+);
+
+export const Vertical = {
+  render: () => (
+    <div className='h-72 w-48 p-2 border border-separator rounded-md'>
+      <ScrollArea.Root orientation='vertical' padding>
+        <ScrollArea.Viewport>
+          <Column />
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+    </div>
+  ),
+};
+
+export const VerticalThin = {
+  render: () => (
+    <div className='h-72 w-48 p-2 border border-separator rounded-md'>
+      <ScrollArea.Root orientation='vertical' padding thin>
+        <ScrollArea.Viewport>
+          <Column />
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+    </div>
+  ),
+};
+
+export const Horizontal = {
+  render: () => (
+    <div className='w-96 p-2 border border-separator rounded-md'>
+      <ScrollArea.Root orientation='horizontal' padding>
+        <ScrollArea.Viewport>
+          <Row />
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+    </div>
+  ),
+};
+
+export const HorizontalThin = {
+  render: () => (
+    <div className='w-96 p-2 border border-separator rounded-md'>
+      <ScrollArea.Root orientation='horizontal' padding thin>
+        <ScrollArea.Viewport>
+          <Row />
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+    </div>
+  ),
 };
 
-export const Default = {
-  args: {
-    children: faker.lorem.paragraphs(5),
+export const Both = {
+  render: () => (
+    <div className='h-96 w-96 p-2 border border-separator rounded-md'>
+      <ScrollArea.Root orientation='all' padding>
+        <ScrollArea.Viewport>
+          <div className='flex flex-col gap-2'>
+            {Array.from({ length: 50 }).map((_, rowIndex) => (
+              <div key={rowIndex} className='flex gap-2'>
+                {Array.from({ length: 50 }).map((_, colIndex) => (
+                  <div
+                    key={colIndex}
+                    className='shrink-0 h-20 w-20 flex items-center justify-center text-sm border border-separator font-mono'
+                  >
+                    [{colIndex}:{rowIndex}]
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+    </div>
+  ),
+};
+
+export const NestedScrollAreas = {
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  render: () => {
+    const columns = useMemo(
+      () =>
+        Array.from({ length: 8 }).map((_, index) => ({
+          id: String(index),
+          count: faker.number.int({ min: 5, max: 20 }),
+        })),
+      [],
+    );
+
+    return (
+      <ScrollArea.Root thin orientation='horizontal'>
+        <ScrollArea.Viewport classNames='gap-4'>
+          {columns.map((column) => (
+            <section
+              key={column.id}
+              className='shrink-0 h-full w-[16rem] grid grid-rows-[min-content_1fr_min-content] border border-separator'
+            >
+              <header className='flex shrink-0 p-2 border-b border-separator'>Column {column.id}</header>
+              <ScrollArea.Root thin orientation='vertical'>
+                <ScrollArea.Viewport classNames='py-2 px-2 gap-2'>
+                  {Array.from({ length: column.count }, (_, i) => (
+                    <div key={i} role='listitem' className={`shrink-0 p-2 text-sm border border-separator rounded-xs`}>
+                      Item {i + 1}
+                    </div>
+                  ))}
+                </ScrollArea.Viewport>
+              </ScrollArea.Root>
+              <footer className={`p-2 text-subdued border-t border-separator`}>{column.count}</footer>
+            </section>
+          ))}
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+    );
   },
 };
+
+export const NativeScroll = {
+  render: () => (
+    <div className='group h-48 w-48 border border-separator'>
+      <div
+        className={mx(
+          'group h-full w-full overflow-y-scroll',
+          '[&::-webkit-scrollbar]:w-3',
+          '[&::-webkit-scrollbar-thumb]:rounded-none',
+          '[&::-webkit-scrollbar-track]:bg-scrollbar-track',
+          '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumbSubdued',
+          'group-hover:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+        )}
+      >
+        <Column />
+      </div>
+    </div>
+  ),
+};