@dxos/react-ui 0.8.4-main.8360d9e660 → 0.8.4-main.8baae0fced

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

@@ -5,15 +5,15 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
 import { Input } from '../Input';
-
+import { ScrollArea } from '../ScrollArea';
 import { Dialog, type DialogContentProps } from './Dialog';
 
-type StoryProps = Pick<DialogContentProps, 'size'> &
+type DefaultStoryProps = Pick<DialogContentProps, 'size'> &
   Partial<{
     title: string;
     description: string;
@@ -22,7 +22,11 @@ type StoryProps = Pick<DialogContentProps, 'size'> &
     blockAlign: 'start' | 'center';
   }>;
 
-const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: StoryProps) => {
+/**
+ * Standard Dialog with non-scrolling content in Dialog.Body.
+ * Dialog.Body propagates the Column grid via subgrid. Children auto-center via --dx-col.
+ */
+const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: DefaultStoryProps) => {
   return (
     <Dialog.Root defaultOpen modal>
       <Dialog.Trigger asChild>
@@ -56,6 +60,45 @@ const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blo
   );
 };
 
+/**
+ * Dialog with a ScrollArea child inside Dialog.Body.
+ * The ScrollArea breaks out of Body's gutter padding via `--gutter`
+ * and applies its own asymmetric padding (accounting for scrollbar width).
+ */
+const ScrollingStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: DefaultStoryProps) => {
+  return (
+    <Dialog.Root defaultOpen modal>
+      <Dialog.Trigger asChild>
+        <Button>{openTrigger}</Button>
+      </Dialog.Trigger>
+      <Dialog.Overlay blockAlign={blockAlign}>
+        <Dialog.Content size={size}>
+          <Dialog.Header>
+            <Dialog.Title>{title}</Dialog.Title>
+            {closeTrigger && (
+              <Dialog.Close asChild>
+                <Dialog.CloseIconButton />
+              </Dialog.Close>
+            )}
+          </Dialog.Header>
+          <Dialog.Body>
+            <ScrollArea.Root orientation='vertical' padding thin>
+              <ScrollArea.Viewport>
+                <Dialog.Description>{description}</Dialog.Description>
+              </ScrollArea.Viewport>
+            </ScrollArea.Root>
+          </Dialog.Body>
+          <Dialog.ActionBar>
+            <Dialog.Close asChild>
+              <Button variant='primary'>{closeTrigger}</Button>
+            </Dialog.Close>
+          </Dialog.ActionBar>
+        </Dialog.Content>
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};
+
 const meta = {
   title: 'ui/react-ui-core/components/Dialog',
   component: Dialog as any,
@@ -70,7 +113,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(1),
+    description: random.lorem.paragraph(1),
     openTrigger: 'Open',
     closeTrigger: 'Close',
     blockAlign: 'start',
@@ -80,7 +123,7 @@ export const Default: Story = {
 export const Small: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(1),
+    description: random.lorem.paragraph(1),
     openTrigger: 'Open',
     closeTrigger: 'Close',
     blockAlign: 'center',
@@ -91,7 +134,7 @@ export const Small: Story = {
 export const Medium: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(1),
+    description: random.lorem.paragraph(1),
     openTrigger: 'Open',
     closeTrigger: 'Close',
     blockAlign: 'center',
@@ -102,7 +145,7 @@ export const Medium: Story = {
 export const Large: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(2),
+    description: random.lorem.paragraph(2),
     openTrigger: 'Open Dialog',
     closeTrigger: 'Close',
     blockAlign: 'center',
@@ -113,10 +156,22 @@ export const Large: Story = {
 export const ExtraLarge: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(2),
+    description: random.lorem.paragraph(2),
     openTrigger: 'Open Dialog',
     closeTrigger: 'Close',
     blockAlign: 'center',
     size: 'xl',
   },
 };
+
+export const Scrolling: Story = {
+  render: ScrollingStory,
+  args: {
+    title: 'Dialog title',
+    description: random.lorem.paragraph(20),
+    openTrigger: 'Open Dialog',
+    closeTrigger: 'Close',
+    blockAlign: 'center',
+    size: 'md',
+  },
+};

package/src/components/Dialog/Dialog.tsx

@@ -2,18 +2,20 @@
 // Copyright 2023 DXOS.org
 //
 
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { createContext } from '@radix-ui/react-context';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
 import React, {
   type ComponentPropsWithRef,
   type ForwardRefExoticComponent,
   type FunctionComponent,
-  type PropsWithChildren,
   forwardRef,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { type DialogSize, osTranslations } from '@dxos/ui-theme';
+import { composableProps, type DialogSize, osTranslations, slottable } from '@dxos/ui-theme';
+import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
 import { Column } from '../../primitives';
@@ -29,7 +31,12 @@ type DialogRootProps = DialogPrimitive.DialogProps;
 
 const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
   <ElevationProvider elevation='dialog'>
-    <DialogPrimitive.Root {...props} />
+    <DialogPrimitive.Root
+      // NOTE: Radix warning unless set to undefined.
+      // https://www.radix-ui.com/primitives/docs/components/dialog#description
+      aria-describedby={undefined}
+      {...props}
+    />
   </ElevationProvider>
 );
 
@@ -107,10 +114,19 @@ const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<
         // NOTE: Radix warning unless set to undefined.
         // https://www.radix-ui.com/primitives/docs/components/dialog#description
         aria-describedby={undefined}
-        className={tx('dialog.content', { inOverlayLayout: propsInOverlayLayout || inOverlayLayout, size }, classNames)}
+        className={tx(
+          'dialog.content',
+          {
+            size,
+            inOverlayLayout: propsInOverlayLayout || inOverlayLayout,
+          },
+          classNames,
+        )}
         ref={forwardedRef}
       >
-        <Column.Root gutter='md'>{children}</Column.Root>
+        <Column.Root classNames='dx-expander' gutter='sm'>
+          {children}
+        </Column.Root>
       </DialogPrimitive.Content>
     );
   },
@@ -122,18 +138,18 @@ DialogContent.displayName = DIALOG_CONTENT_NAME;
 // Header
 //
 
-type DialogHeaderProps = ThemedClassName<PropsWithChildren> & { srOnly?: boolean };
+type DialogHeaderProps = SlottableProps;
 
-const DialogHeader: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
-  ({ classNames, srOnly, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <Column.Segment asChild>
-        <div role='heading' {...props} className={tx('dialog.header', { srOnly }, [classNames])} ref={forwardedRef} />
-      </Column.Segment>
-    );
-  },
-);
+const DialogHeader = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+  return (
+    <Comp {...rest} className={tx('dialog.header', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
 
 //
 // CloseIconButton
@@ -147,11 +163,10 @@ const DialogCloseIconButton = forwardRef<HTMLButtonElement, DialogCloseIconButto
     return (
       <IconButton
         {...props}
-        label={label ?? t('close dialog label')}
+        label={label ?? t('close-dialog.label')}
         icon='ph--x--regular'
         iconOnly
         size={4}
-        density='fine'
         variant='ghost'
         ref={forwardedRef}
       />
@@ -163,20 +178,18 @@ const DialogCloseIconButton = forwardRef<HTMLButtonElement, DialogCloseIconButto
 // Body
 //
 
-type DialogBodyProps = PropsWithChildren;
+type DialogBodyProps = SlottableProps;
 
-const DialogBody: ForwardRefExoticComponent<DialogBodyProps> = forwardRef<HTMLDivElement, DialogBodyProps>(
-  ({ children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <Column.Segment asChild>
-        <div role='none' {...props} className={tx('dialog.body')} ref={forwardedRef}>
-          {children}
-        </div>
-      </Column.Segment>
-    );
-  },
-);
+const DialogBody = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+  return (
+    <Comp {...rest} className={tx('dialog.body', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
 
 //
 // Title
@@ -184,7 +197,7 @@ const DialogBody: ForwardRefExoticComponent<DialogBodyProps> = forwardRef<HTMLDi
 
 type DialogTitleProps = ThemedClassName<DialogPrimitive.DialogTitleProps> & { srOnly?: boolean };
 
-const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
+const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
   ({ classNames, srOnly, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
@@ -199,37 +212,33 @@ const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTML
 
 type DialogDescriptionProps = ThemedClassName<DialogPrimitive.DialogDescriptionProps> & { srOnly?: boolean };
 
-const DialogDescription: ForwardRefExoticComponent<DialogDescriptionProps> = forwardRef<
-  HTMLParagraphElement,
-  DialogDescriptionProps
->(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <DialogPrimitive.Description
-      {...props}
-      className={tx('dialog.description', { srOnly }, classNames)}
-      ref={forwardedRef}
-    />
-  );
-});
+const DialogDescription = forwardRef<HTMLParagraphElement, DialogDescriptionProps>(
+  ({ classNames, srOnly, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DialogPrimitive.Description
+        {...props}
+        className={tx('dialog.description', { srOnly }, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
 
 //
 // ActionBar
 //
 
-type DialogActionBarProps = ThemedClassName<PropsWithChildren>;
+type DialogActionBarProps = SlottableProps;
 
-const DialogActionBar: ForwardRefExoticComponent<DialogActionBarProps> = forwardRef<
-  HTMLDivElement,
-  DialogActionBarProps
->(({ children, classNames, ...props }, forwardedRef) => {
+const DialogActionBar = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className: classNames, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
   const { tx } = useThemeContext();
   return (
-    <Column.Segment asChild>
-      <div {...props} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
-        {children}
-      </div>
-    </Column.Segment>
+    <Comp {...rest} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
+      {children}
+    </Comp>
   );
 });
 
@@ -272,4 +281,5 @@ export type {
   DialogDescriptionProps,
   DialogActionBarProps,
   DialogCloseProps,
+  DialogCloseIconButtonProps,
 };

package/src/components/ErrorFallback/ErrorFallback.stories.tsx

@@ -8,11 +8,10 @@ import React from 'react';
 import { ErrorBoundary } from '@dxos/react-error-boundary';
 
 import { withLayout, withTheme } from '../../testing';
-
 import { ErrorFallback } from './ErrorFallback';
 import { ThrowError } from './ThrowError';
 
-const BasicStory = () => {
+const DefaultStory = () => {
   return (
     <ErrorBoundary name='story' FallbackComponent={ErrorFallback}>
       <ThrowError />
@@ -20,10 +19,6 @@ const BasicStory = () => {
   );
 };
 
-const StringErrorStory = () => {
-  return <ErrorFallback error='This is a string error message' data={{ context: 'story' }} />;
-};
-
 const meta: Meta = {
   title: 'ui/react-ui-core/components/ErrorFallback',
   component: ErrorFallback,
@@ -38,7 +33,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  render: BasicStory,
+  render: DefaultStory,
   play: async () => {
     // This story intentionally renders an ErrorBoundary fallback; clear the smoke-test error flag.
     (window as any).__ERROR_BOUNDARY_ERRORS__ = [];
@@ -46,5 +41,5 @@ export const Default: Story = {
 };
 
 export const StringError: Story = {
-  render: StringErrorStory,
+  render: () => <ErrorFallback error='This is a string error message' data={{ context: 'story' }} />,
 };

package/src/components/ErrorFallback/ErrorStack.tsx

@@ -9,11 +9,45 @@ import { mx } from '@dxos/ui-theme';
 
 type LocalFrame = { href: string; fileName: string };
 
+export type ParsedStackFrame = ReturnType<typeof ErrorStackParser.parse>[number];
+
+export type ErrorStackProps = {
+  /** When set, these frames are shown instead of parsing `error`. */
+  frames?: ParsedStackFrame[];
+  /** Used when `frames` is omitted. */
+  error?: Error;
+};
+
+/**
+ * Parses `captureOwnerStack()` output (React dev) into frames for {@link ErrorStack}.
+ * Prefixes a synthetic Error line when needed so `error-stack-parser` can read V8-style stacks.
+ */
+export const parseCaptureOwnerStack = (stack: string | null): ParsedStackFrame[] | null => {
+  if (stack == null || stack.length === 0) {
+    return null;
+  }
+  const err = new Error();
+  err.stack = stack;
+  try {
+    return ErrorStackParser.parse(err);
+  } catch {
+    err.stack = `Error\n${stack}`;
+    try {
+      return ErrorStackParser.parse(err);
+    } catch {
+      return null;
+    }
+  }
+};
+
 /**
  * Renders a parsed error stack trace with tree connector symbols and clickable vscode:// links for local frames.
  */
-export const ErrorStack = ({ error }: { error: Error }) => {
-  const frames = ErrorStackParser.parse(error);
+export const ErrorStack = ({ error, frames: framesProp }: ErrorStackProps) => {
+  const frames = framesProp ?? (error ? ErrorStackParser.parse(error) : []);
+  if (frames.length === 0) {
+    return null;
+  }
 
   return (
     <div className='font-mono text-sm'>

package/src/components/Focus/AUDIT.md

@@ -0,0 +1,43 @@
+# Focus
+
+## Problem
+
+Grid cells use `overflow-hidden` which clips outward CSS `ring` (box-shadow) and `outline` styles.
+Using `border` for focus indicators creates doubled lines at grid cell boundaries.
+Inset `box-shadow` alone is obscured by child elements with backgrounds (e.g., toolbar headers).
+
+## Solution
+
+Uses a `::after` pseudo-element overlay with `ring-inset` to paint the focus ring above all child content.
+The pseudo-element is absolutely positioned, `pointer-events-none`, and inherits `border-radius`.
+
+- **Default**: ring is transparent (invisible until focused).
+- **`border` prop**: shows a CSS `border-separator` when unfocused (e.g., for grid cell edges).
+- **Focus/active/error states**: ring color changes to the appropriate indicator color.
+
+Both `Focus.Group` and `Focus.Item` support the `border` prop.
+
+## Why `::after` overlay
+
+| Approach                 | Clipped? | Obscured by children? | Notes                                                                 |
+| ------------------------ | -------- | --------------------- | --------------------------------------------------------------------- |
+| `ring` (outward)         | Yes      | N/A                   | Extends outside bounds, clipped by parent `overflow-hidden`.          |
+| `ring-inset`             | No       | Yes                   | Inset box-shadow is part of background layer; children paint over it. |
+| `::after` + `ring-inset` | No       | No                    | Pseudo-element paints above children. Requires `position: relative`.  |
+
+## Relationship to `dx-focus-ring-inset-over-all`
+
+The CSS class `dx-focus-ring-inset-over-all` (in `focus-ring.css`) uses the same `::after` technique
+but only reacts to `:focus-visible`. `Focus.Group/Item` additionally support programmatic states
+via `data-focus-state` (`active`, `error`).
+
+## Clean-up
+
+- [ ] Unify: extend `dx-focus-ring-inset-over-all` to support `data-focus-state` attributes,
+      then have `Focus.Group/Item` use the CSS class instead of inline Tailwind utilities.
+      Consumers: Plank, StackItem, Tabs, AttentionProvider, main sidebar.
+
+## Audit
+
+- [ ] Create a list of all container components (outside of `react-ui`) that directly use `overflow-hidden`;
+      Consider containers to be components that have `children` and expand (e.g., `grid`, `grow`, `h-full`, `w-full`).