@dxos/react-ui 0.8.3 → 0.8.4-main.1068cf700f

package/package.json

@@ -1,23 +1,29 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.3",
+  "version": "0.8.4-main.1068cf700f",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs"
+      "node": "./dist/lib/node-esm/index.mjs",
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts"
     },
     "./testing": {
-      "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
-      "node": "./dist/lib/node-esm/testing/index.mjs"
+      "node": "./dist/lib/node-esm/testing/index.mjs",
+      "source": "./src/testing/index.ts",
+      "types": "./dist/types/src/testing/index.d.ts"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -33,9 +39,9 @@
     "src"
   ],
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@fluentui/react-tabster": "^9.24.2",
-    "@preact-signals/safe-react": "^0.9.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-alert-dialog": "1.1.6",
     "@radix-ui/react-avatar": "1.1.3",
@@ -54,7 +60,7 @@
     "@radix-ui/react-portal": "1.1.4",
     "@radix-ui/react-presence": "1.1.2",
     "@radix-ui/react-primitive": "2.0.2",
-    "@radix-ui/react-scroll-area": "1.2.3",
+    "@radix-ui/react-scroll-area": "1.2.10",
     "@radix-ui/react-select": "2.1.6",
     "@radix-ui/react-separator": "1.1.2",
     "@radix-ui/react-slot": "1.1.2",
@@ -72,34 +78,36 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.3",
-    "@dxos/lit-ui": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/react-input": "0.8.3",
-    "@dxos/react-hooks": "0.8.3",
-    "@dxos/react-ui-types": "0.8.3",
-    "@dxos/react-list": "0.8.3",
-    "@dxos/util": "0.8.3"
+    "@dxos/invariant": "0.8.4-main.1068cf700f",
+    "@dxos/async": "0.8.4-main.1068cf700f",
+    "@dxos/debug": "0.8.4-main.1068cf700f",
+    "@dxos/lit-ui": "0.8.4-main.1068cf700f",
+    "@dxos/log": "0.8.4-main.1068cf700f",
+    "@dxos/react-hooks": "0.8.4-main.1068cf700f",
+    "@dxos/react-input": "0.8.4-main.1068cf700f",
+    "@dxos/react-list": "0.8.4-main.1068cf700f",
+    "@dxos/ui-types": "0.8.4-main.1068cf700f",
+    "@dxos/util": "0.8.4-main.1068cf700f"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",
-    "@phosphor-icons/react": "^2.1.5",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/random": "0.8.3",
-    "@dxos/util": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@phosphor-icons/react": "2.1.10",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "tabster": "^8.5.5",
+    "vite": "7.1.9",
+    "@dxos/random": "0.8.4-main.1068cf700f",
+    "@dxos/ui-theme": "0.8.4-main.1068cf700f",
+    "@dxos/util": "0.8.4-main.1068cf700f"
   },
   "peerDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.3"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/ui-theme": "0.8.4-main.1068cf700f"
   },
   "publishConfig": {
     "access": "public"

package/src/components/AnchoredOverflow/AnchoredOverflow.tsx

@@ -18,12 +18,7 @@ const AnchoredOverflowRoot = forwardRef<HTMLDivElement, AnchoredOverflowRootProp
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : Primitive.div;
     return (
-      <Root
-        role='none'
-        {...props}
-        className={tx('anchoredOverflow.root', 'overflow-anchored', {}, classNames)}
-        ref={forwardedRef}
-      >
+      <Root role='none' {...props} className={tx('anchoredOverflow.root', {}, classNames)} ref={forwardedRef}>
         {children}
       </Root>
     );
@@ -39,18 +34,21 @@ const AnchoredOverflowAnchor = forwardRef<HTMLDivElement, AnchoredOverflowAnchor
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : Primitive.div;
     return (
-      <Root
-        role='none'
-        {...props}
-        className={tx('anchoredOverflow.anchor', 'overflow-anchor', {}, classNames)}
-        ref={forwardedRef}
-      >
+      <Root role='none' {...props} className={tx('anchoredOverflow.anchor', {}, classNames)} ref={forwardedRef}>
         {children}
       </Root>
     );
   },
 );
 
+/**
+ * This component leverages the CSS https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor property to prevent unwanted scroll jumps when content is dynamically
+ * added above the viewport. This is particularly useful for:
+ * - Chat applications where new messages are prepended to the list.
+ * - Notification feeds where new items appear at the top.
+ * - Any scenario where content is inserted at the start of a scrollable container.
+ */
+// TODO(burdon): Move into container?
 export const AnchoredOverflow = {
   Root: AnchoredOverflowRoot,
   Anchor: AnchoredOverflowAnchor,

package/src/components/Avatars/Avatar.stories.tsx

@@ -2,17 +2,18 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta } from '@storybook/react-vite';
 import React, { type PropsWithChildren } from 'react';
 
-import { type HuePalette } from '@dxos/react-ui-theme';
-import { type Size } from '@dxos/react-ui-types';
+import { type HuePalette } from '@dxos/ui-theme';
+import { type Size } from '@dxos/ui-types';
 import { hexToFallback } from '@dxos/util';
 
-import { Avatar, type AvatarVariant, type AvatarStatus, type AvatarAnimation } from './Avatar';
 import { withTheme } from '../../testing';
 
-type StoryProps = {
+import { Avatar, type AvatarAnimation, type AvatarStatus, type AvatarVariant } from './Avatar';
+
+type StoryProps = PropsWithChildren<{
   id?: string;
   imgSrc?: string;
   fallbackText?: string;
@@ -23,9 +24,9 @@ type StoryProps = {
   animation?: AvatarAnimation;
   size?: Size;
   hue?: HuePalette;
-};
+}>;
 
-const DefaultStory = (props: PropsWithChildren<StoryProps>) => {
+const DefaultStory = (props: StoryProps) => {
   const {
     id = '20970b563fc49b5bb194a6ffdff376031a3a11f9481360c071c3fed87874106b',
     status,
@@ -55,17 +56,19 @@ const DefaultStory = (props: PropsWithChildren<StoryProps>) => {
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/Avatar',
-  component: Avatar,
-  render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+const meta = {
+  title: 'ui/react-ui-core/components/Avatar',
+  component: Avatar.Root,
+  decorators: [withTheme()],
+} satisfies Meta<typeof Avatar.Root>;
+
+export default meta;
 
 const sampleImage =
   'https://png.pngtree.com/thumb_back/fh260/background/20230614/pngtree-the-photo-of-a-woman-with-red-sunglasses-is-surrounded-by-image_2931163.jpg';
 
+const brokenImage = 'https://png.pngtree.com/potato_squirrel.png';
+
 const row = (size: Size) => (
   <>
     <DefaultStory size={size} status='inactive' description='Offline' />
@@ -97,6 +100,12 @@ export const Image = () => (
   </div>
 );
 
+export const BrokenImage = () => (
+  <div>
+    <DefaultStory variant='circle' imgSrc={brokenImage} />
+  </div>
+);
+
 export const Square = () => (
   <div className='flex flex-row gap-4'>
     <DefaultStory variant='square' status='inactive' description='Offline' />

package/src/components/Avatars/Avatar.tsx

@@ -7,17 +7,17 @@ import '@dxos/lit-ui/dx-avatar.pcss';
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentProps, type ComponentPropsWithRef, forwardRef, type PropsWithChildren } from 'react';
+import React, { type ComponentProps, type ComponentPropsWithRef, type PropsWithChildren, forwardRef } from 'react';
 
 import {
-  type AvatarVariant,
-  type AvatarStatus,
   type AvatarAnimation,
+  type AvatarStatus,
+  type AvatarVariant,
   type DxAvatar as NaturalDxAvatar,
 } from '@dxos/lit-ui';
 import { DxAvatar } from '@dxos/lit-ui/react';
 import { useId } from '@dxos/react-hooks';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { useIconHref, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -67,14 +67,7 @@ const AvatarLabel = forwardRef<HTMLSpanElement, AvatarLabelProps>(
     const Root = asChild ? Slot : Primitive.span;
     const { tx } = useThemeContext();
     const { labelId } = useAvatarContext('AvatarLabel');
-    return (
-      <Root
-        {...props}
-        id={labelId}
-        ref={forwardedRef}
-        className={tx('avatar.label', 'avatar__label', { srOnly }, classNames)}
-      />
-    );
+    return <Root {...props} id={labelId} ref={forwardedRef} className={tx('avatar.label', { srOnly }, classNames)} />;
   },
 );
 
@@ -93,7 +86,7 @@ const AvatarDescription = forwardRef<HTMLSpanElement, AvatarDescriptionProps>(
         {...props}
         id={descriptionId}
         ref={forwardedRef}
-        className={tx('avatar.description', 'avatar__description', { srOnly }, classNames)}
+        className={tx('avatar.description', { srOnly }, classNames)}
       />
     );
   },

package/src/components/Avatars/AvatarGroup.stories.tsx

@@ -2,15 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { useId } from '@dxos/react-hooks';
 import { toEmoji } from '@dxos/util';
 
-import { Avatar } from './Avatar';
 import { withTheme } from '../../testing';
 
+import { Avatar } from './Avatar';
+
 const hues = ['lime', 'teal', 'purple', 'pink'];
 
 const AvatarItem = ({ n }: { n: number }) => {
@@ -36,13 +37,16 @@ const DefaultStory = () => {
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/AvatarGroup',
+const meta = {
+  title: 'ui/react-ui-core/components/AvatarGroup',
   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: {},
 };

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -2,17 +2,17 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Breadcrumb } from './Breadcrumb';
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
+
+import { Breadcrumb, type BreadcrumbRootProps } from './Breadcrumb';
 
-const DefaultStory = () => {
+const DefaultStory = (props: BreadcrumbRootProps) => {
   return (
-    <Breadcrumb.Root aria-label='Breadcrumb'>
+    <Breadcrumb.Root {...props}>
       <Breadcrumb.List>
         <Breadcrumb.ListItem>
           <Breadcrumb.Link asChild>
@@ -38,14 +38,19 @@ const DefaultStory = () => {
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/Breadcrumb',
-  component: Breadcrumb,
+const meta = {
+  title: 'ui/react-ui-core/components/Breadcrumb',
+  component: Breadcrumb.Root as any,
   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 = {
-  args: {},
+export const Default: Story = {
+  args: {
+    'aria-label': 'Breadcrumb',
+  },
 };

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -2,13 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Dot } from '@phosphor-icons/react';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, forwardRef } from 'react';
+import React, { type ComponentPropsWithRef, type ComponentPropsWithoutRef, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { Icon } from '../Icon';
 import { Link, type LinkProps } from '../Link';
 
 type BreadcrumbRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
@@ -20,14 +20,7 @@ const BreadcrumbRoot = forwardRef<HTMLDivElement, BreadcrumbRootProps>(
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : Primitive.div;
-    return (
-      <Root
-        role='navigation'
-        {...props}
-        className={tx('breadcrumb.root', 'breadcrumb', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
+    return <Root role='navigation' {...props} className={tx('breadcrumb.root', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
@@ -37,14 +30,7 @@ const BreadcrumbList = forwardRef<HTMLOListElement, BreadcrumbListProps>(
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : Primitive.ol;
-    return (
-      <Root
-        role='list'
-        {...props}
-        className={tx('breadcrumb.list', 'breadcrumb__list', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
+    return <Root role='list' {...props} className={tx('breadcrumb.list', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
@@ -54,14 +40,7 @@ const BreadcrumbListItem = forwardRef<HTMLLIElement, BreadcrumbListItemProps>(
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : Primitive.li;
-    return (
-      <Root
-        role='listitem'
-        {...props}
-        className={tx('breadcrumb.listItem', 'breadcrumb__list__item', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
+    return <Root role='listitem' {...props} className={tx('breadcrumb.listItem', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
@@ -79,12 +58,7 @@ const BreadcrumbCurrent = forwardRef<HTMLHeadingElement, BreadcrumbCurrentProps>
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : 'h1';
     return (
-      <Root
-        {...props}
-        aria-current='page'
-        className={tx('breadcrumb.current', 'breadcrumb__item__heading--current', {}, classNames)}
-        ref={forwardedRef}
-      />
+      <Root {...props} aria-current='page' className={tx('breadcrumb.current', {}, classNames)} ref={forwardedRef} />
     );
   },
 );
@@ -98,9 +72,9 @@ const BreadcrumbSeparator = ({ children, classNames, ...props }: BreadcrumbSepar
       role='separator'
       aria-hidden='true'
       {...props}
-      className={tx('breadcrumb.separator', 'breadcrumb__separator', {}, classNames)}
+      className={tx('breadcrumb.separator', {}, classNames)}
     >
-      {children ?? <Dot weight='bold' />}
+      {children ?? <Icon icon='ph--dot--bold' />}
     </Primitive.span>
   );
 };

package/src/components/{Buttons → Button}/Button.stories.tsx

@@ -2,14 +2,14 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { CaretLeft, CaretRight } from '@phosphor-icons/react';
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { withTheme } from '../../testing';
+import { withLayoutVariants } from '../../testing';
+import { Icon } from '../Icon';
+
 import { Button, ButtonGroup, type ButtonProps } from './Button';
-import { withSurfaceVariantsLayout, withTheme } from '../../testing';
 
 const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   return (
@@ -21,10 +21,10 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
       {(args.variant === 'default' || args.variant === 'primary') && (
         <ButtonGroup>
           <Button {...args}>
-            <CaretLeft />
+            <Icon icon='ph--caret-left--regular' />
           </Button>
           <Button {...args}>
-            <CaretRight />
+            <Icon icon='ph--caret-right--regular' />
           </Button>
         </ButtonGroup>
       )}
@@ -32,13 +32,12 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   );
 };
 
-const meta: Meta<typeof Button> = {
-  title: 'ui/react-ui-core/Button',
+const meta = {
+  title: 'ui/react-ui-core/components/Button',
   component: Button,
   render: DefaultStory,
-  decorators: [withSurfaceVariantsLayout(), withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme(), withLayoutVariants()],
+} satisfies Meta<typeof Button>;
 
 export default meta;
 

package/src/components/{Buttons → Button}/Button.tsx

@@ -7,7 +7,7 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
 
-import { type Density, type Elevation } from '@dxos/react-ui-types';
+import { type Density, type Elevation } from '@dxos/ui-types';
 
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -23,6 +23,7 @@ type ButtonGroupContextValue = { inGroup?: boolean };
 
 const BUTTON_GROUP_NAME = 'ButtonGroup';
 const BUTTON_NAME = 'Button';
+
 const [ButtonGroupProvider, useButtonGroupContext] = createContext<ButtonGroupContextValue>(BUTTON_GROUP_NAME, {
   inGroup: false,
 });
@@ -55,7 +56,6 @@ const Button = memo(
           data-props={inGroup ? 'grouped' : ''}
           className={tx(
             'button.root',
-            'button',
             {
               variant,
               inGroup,
@@ -87,12 +87,7 @@ const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
     const elevation = useElevationContext(propsElevation);
     const Root = asChild ? Slot : Primitive.div;
     return (
-      <Root
-        role='none'
-        {...props}
-        className={tx('button.group', 'button-group', { elevation }, classNames)}
-        ref={forwardedRef}
-      >
+      <Root role='none' {...props} className={tx('button.group', { elevation }, classNames)} ref={forwardedRef}>
         <ButtonGroupProvider inGroup>{children}</ButtonGroupProvider>
       </Root>
     );

package/src/components/{Buttons → Button}/IconButton.stories.tsx

@@ -2,14 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { IconButton, type IconButtonProps } from './IconButton';
 import { withTheme } from '../../testing';
 import { Tooltip } from '../Tooltip';
 
+import { IconButton, type IconButtonProps } from './IconButton';
+
 const DefaultStory = (props: IconButtonProps) => {
   return (
     <Tooltip.Provider>
@@ -23,15 +23,18 @@ const DefaultStory = (props: IconButtonProps) => {
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/IconButton',
+const meta = {
+  title: 'ui/react-ui-core/components/IconButton',
   component: IconButton,
-  render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  render: DefaultStory as any,
+  decorators: [withTheme()],
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     label: 'Bold',
     icon: 'ph--text-b--regular',