@dxos/react-ui 0.8.4-main.dedc0f3 → 0.8.4-main.ead640a

package/src/components/Popover/Popover.tsx

@@ -182,7 +182,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 +194,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 +396,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'> {
@@ -440,8 +441,7 @@ 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();
 
     return (
@@ -472,7 +472,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
             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,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type PropsWithChildren } from 'react';
 
@@ -40,7 +38,6 @@ const meta = {
   component: ScrollArea as any,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/Select/Select.stories.tsx

@@ -2,14 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { faker } from '@dxos/random';
 
-import { withSurfaceVariantsLayout, withTheme } from '../../testing';
+import { withTheme } from '../../testing';
+import { withSurfaceVariantsLayout } from '../../testing';
 
 import { Select } from './Select';
 
@@ -45,8 +44,7 @@ const DefaultStory = ({ items = [] }: StoryProps) => {
 const meta = {
   title: 'ui/react-ui-core/Select',
   render: DefaultStory,
-  decorators: [withSurfaceVariantsLayout(), withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
+  decorators: [withTheme, withSurfaceVariantsLayout()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/Status/Status.stories.tsx

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
@@ -15,7 +13,6 @@ const meta = {
   title: 'ui/react-ui-core/Status',
   component: Status,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
 } satisfies Meta<typeof Status>;
 
 export default meta;

package/src/components/Tag/Tag.stories.tsx

@@ -2,8 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
@@ -19,11 +17,6 @@ const palettes = ['neutral', 'success', 'info', 'warning', 'error', ...hues] as
 const meta = {
   title: 'ui/react-ui-core/Tag',
   component: Tag,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-} as const;
-
-export const Default: Story = {
   render: () => (
     <div role='grid' className='grid grid-cols-5 gap-2 max-is-screen-md'>
       {palettes.map((palette) => (
@@ -33,8 +26,16 @@ export const Default: Story = {
       ))}
     </div>
   ),
+  decorators: [withTheme],
+  parameters: {
+    chromatic: {
+      disableSnapshot: false,
+    },
+  },
 } satisfies Meta<typeof Tag>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Toast/Toast.stories.tsx

@@ -2,8 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type ReactNode, useState } from 'react';
 
@@ -51,7 +49,6 @@ const meta = {
   component: Toast as any,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
@@ -77,7 +75,6 @@ const meta = {
   component: Toolbar as any,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/Toolbar/Toolbar.tsx

@@ -4,7 +4,7 @@
 
 import type { ToggleGroupItemProps as ToggleGroupItemPrimitiveProps } from '@radix-ui/react-toggle-group';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
-import React, { forwardRef } from 'react';
+import React, { Fragment, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -22,11 +22,21 @@ import {
 import { Link, type LinkProps } from '../Link';
 import { Separator, type SeparatorProps } from '../Separator';
 
-type ToolbarRootProps = ThemedClassName<ToolbarPrimitive.ToolbarProps> & { layoutManaged?: boolean };
+type ToolbarRootProps = ThemedClassName<
+  ToolbarPrimitive.ToolbarProps & {
+    layoutManaged?: boolean;
+    textBlockWidth?: boolean;
+  }
+>;
 
 const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarRootProps>(
-  ({ classNames, children, layoutManaged, ...props }, forwardedRef) => {
+  ({ classNames, children, layoutManaged, textBlockWidth: wrapContents, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
+    const InnerRoot = wrapContents ? 'div' : Fragment;
+    const innerRootProps = wrapContents
+      ? { role: 'none', className: tx('toolbar.inner', 'toolbar', { layoutManaged }, classNames) }
+      : {};
+
     return (
       <ToolbarPrimitive.Root
         {...props}
@@ -34,7 +44,7 @@ const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarRootProps>(
         className={tx('toolbar.root', 'toolbar', { layoutManaged }, classNames)}
         ref={forwardedRef}
       >
-        {children}
+        <InnerRoot {...innerRootProps}>{children}</InnerRoot>
       </ToolbarPrimitive.Root>
     );
   },

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -2,8 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
@@ -36,7 +34,6 @@ const meta = {
   component: Tooltip as any,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/Tooltip/Tooltip.tsx

@@ -25,6 +25,7 @@ import React, {
   type FC,
   type MutableRefObject,
   type ReactNode,
+  type RefObject,
   type SyntheticEvent,
   forwardRef,
   useCallback,
@@ -218,7 +219,7 @@ const TooltipProvider: FC<TooltipProviderProps> = (props: TooltipScopedProps<Too
           {content}
           <TooltipArrow className={tx('tooltip.arrow', 'tooltip__arrow')} />
         </TooltipContent>
-        <TooltipVirtualTrigger virtualRef={triggerRef} />
+        <TooltipVirtualTrigger virtualRef={triggerRef as RefObject<HTMLButtonElement>} />
         {children}
       </TooltipContextProvider>
     </PopperPrimitive.Root>

package/src/hooks/useSafeArea.ts

@@ -4,7 +4,7 @@
 
 import { useCallback, useState } from 'react';
 
-import { useResize } from '@dxos/react-hooks';
+import { useViewportResize } from '@dxos/react-hooks';
 
 export type SafeAreaPadding = Record<'top' | 'right' | 'bottom' | 'left', number>;
 
@@ -20,6 +20,7 @@ export const useSafeArea = (): SafeAreaPadding => {
       left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-left')),
     });
   }, []);
-  useResize(handleResize);
+
+  useViewportResize(handleResize);
   return padding;
 };

package/src/hooks/useVisualViewport.ts

@@ -2,11 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { useCallback, type useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
-import { useResize } from '@dxos/react-hooks';
+import { useViewportResize } from '@dxos/react-hooks';
 
-export const useVisualViewport = (deps?: Parameters<typeof useEffect>[1]) => {
+export const useVisualViewport = (deps?: Parameters<typeof useViewportResize>[1]) => {
   const [width, setWidth] = useState<number | null>(null);
   const [height, setHeight] = useState<number | null>(null);
 
@@ -17,7 +17,7 @@ export const useVisualViewport = (deps?: Parameters<typeof useEffect>[1]) => {
     }
   }, []);
 
-  useResize(handleResize);
+  useViewportResize(handleResize, deps);
 
   return { width, height };
 };

package/src/index.ts

@@ -6,7 +6,7 @@ export { type Resource, type TFunction } from 'i18next';
 export { Trans } from 'react-i18next';
 
 export * from '@dxos/react-hooks';
-export type * from '@dxos/react-ui-types';
+export * from '@dxos/react-ui-types';
 
 export * from './components';
 export * from './hooks';

package/src/playground/Controls.stories.tsx

@@ -2,13 +2,12 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { Icon, Input, Select, Toggle, Toolbar } from '../components';
-import { withSurfaceVariantsLayout, withTheme } from '../testing';
+import { withTheme } from '../testing';
+import { withSurfaceVariantsLayout } from '../testing';
 
 const DefaultStory = () => {
   const [checked, setChecked] = useState<boolean>(false);
@@ -85,8 +84,7 @@ const DefaultStory = () => {
 const meta = {
   title: 'ui/react-ui-core/Playground/Controls',
   render: DefaultStory,
-  decorators: [withSurfaceVariantsLayout(), withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
+  decorators: [withTheme, withSurfaceVariantsLayout()],
 } satisfies Meta<typeof Icon>;
 
 export default meta;

package/src/playground/Custom.stories.tsx

@@ -2,23 +2,12 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { Button, type ButtonProps, IconButton, Tooltip } from '../components';
 import { withTheme } from '../testing';
 
-// TODO(burdon): Change density to 3 or 4 sizes: (large, medium, small; or 22, 28, 32, 40)
-// TODO(burdon): IconButton should be square if no text.
-// TODO(burdon): IconButton icon should be auto-sized based on density.
-
-// TODO(burdon): Remove custom padding from all Buttons.
-
-// TODO(burdon): Forms w/ labels.
-// TODO(burdon): Card preview with sections.
-
 const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   return (
     <Tooltip.Provider>
@@ -125,7 +114,9 @@ const meta = {
   component: Button,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { layout: 'centered' },
+  parameters: {
+    layout: 'centered',
+  },
 } satisfies Meta<typeof Button>;
 
 export default meta;

package/src/playground/Typography.stories.tsx

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
@@ -48,7 +46,6 @@ const meta = {
   title: 'ui/react-ui-core/Playground/Typography',
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/testing/decorators/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './withTheme';
+export * from './withLayout';
 export * from './withSurfaceVariantsLayout';
+export * from './withTheme';

package/src/testing/decorators/withLayout.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React, { type FC, type PropsWithChildren } from 'react';
+
+import { type ClassNameValue, type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+export type ContainerProps = ThemedClassName<PropsWithChildren>;
+
+export type ContainerType = 'default' | 'column';
+
+export type WithLayoutProps =
+  | FC<ContainerProps>
+  | { classNames?: ClassNameValue; container?: ContainerType; scroll?: boolean };
+
+/**
+ * Adds layout container.
+ */
+export const withLayout =
+  (props: WithLayoutProps): Decorator =>
+  (Story) => {
+    if (typeof props === 'function') {
+      const Container = props;
+      return (
+        <Container>
+          <Story />
+        </Container>
+      );
+    }
+
+    const Container = layouts[(props as any).container as ContainerType] ?? layouts.default;
+    return (
+      <Container classNames={mx(props.classNames, props.scroll ? 'overflow-y-auto' : 'overflow-hidden')}>
+        <Story />
+      </Container>
+    );
+  };
+
+const layouts: Record<ContainerType, FC<ContainerProps>> = {
+  default: ({ children, classNames }: ContainerProps) => (
+    <div role='none' className={mx(classNames)}>
+      {children}
+    </div>
+  ),
+
+  column: ({ children, classNames }: ContainerProps) => (
+    <div role='none' className='fixed inset-0 flex justify-center overflow-hidden bg-deckSurface'>
+      <div role='none' className={mx('flex flex-col is-[40rem] bg-baseSurface', classNames)}>
+        {children}
+      </div>
+    </div>
+  ),
+};

package/src/testing/decorators/withTheme.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React, { memo } from 'react';
+
+import { defaultTx } from '@dxos/react-ui-theme';
+
+import { type ThemeMode, ThemeProvider, Tooltip } from '../../components';
+
+/**
+ * Adds theme decorator (add to preview.ts)
+ */
+export const withTheme: Decorator = (Story, context) => {
+  const {
+    globals: { theme },
+    parameters: { translations },
+  } = context;
+
+  // Prevent re-rendering of the story.
+  const MemoizedStory = memo(Story);
+
+  return (
+    <ThemeProvider tx={defaultTx} themeMode={theme as ThemeMode} resourceExtensions={translations} noCache>
+      <Tooltip.Provider>
+        <MemoizedStory />
+      </Tooltip.Provider>
+    </ThemeProvider>
+  );
+};

package/src/util/domino.ts

@@ -0,0 +1,53 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { mx } from '@dxos/react-ui-theme';
+import { type ClassNameValue } from '@dxos/react-ui-types';
+
+/**
+ * Super lightweight chainable DOM builder.
+ */
+export class Domino<T extends HTMLElement> {
+  static of<K extends keyof HTMLElementTagNameMap>(tag: K): Domino<HTMLElementTagNameMap[K]> {
+    return new Domino<HTMLElementTagNameMap[K]>(tag);
+  }
+
+  private readonly _el: T;
+  constructor(tag: keyof HTMLElementTagNameMap) {
+    this._el = document.createElement(tag) as T;
+  }
+  classNames(...classNames: ClassNameValue[]): this {
+    this._el.className = mx(classNames);
+    return this;
+  }
+  text(value: string): this {
+    this._el.textContent = value;
+    return this;
+  }
+  data(key: string, value: string): this {
+    this._el.dataset[key] = value;
+    return this;
+  }
+  attributes(attr: Record<string, string | undefined>): this {
+    Object.entries(attr)
+      .filter(([_, value]) => value !== undefined)
+      .map(([key, value]) => this._el.setAttribute(key, value!));
+    return this;
+  }
+  style(styles: Partial<CSSStyleDeclaration>): this {
+    Object.assign(this._el.style, styles);
+    return this;
+  }
+  children<C extends HTMLElement>(...children: Domino<C>[]): this {
+    children.forEach((child) => this._el.appendChild(child.build()));
+    return this;
+  }
+  on(event: string, handler: (e: Event) => void): this {
+    this._el.addEventListener(event, handler);
+    return this;
+  }
+  build(): T {
+    return this._el;
+  }
+}

package/src/util/index.ts

@@ -2,5 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './domino';
 export * from './hasIosKeyboard';
 export type * from './ThemedClassName';
+export * from './usePx';

package/src/util/usePx.ts

@@ -0,0 +1,61 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+const getDocumentElementFontSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+/**
+ * React hook that converts rem values to pixels and updates when the root font size changes.
+ *
+ * @param rem The rem value to convert to pixels
+ * @returns The current pixel value equivalent of the rem input
+ */
+export const usePx = (rem: number): number => {
+  const [fontSize, setFontSize] = useState(() => {
+    if (typeof document !== 'undefined') {
+      return getDocumentElementFontSize();
+    }
+    return 16; // Default fallback for SSR
+  });
+
+  const updateFontSize = useCallback(() => {
+    setFontSize(getDocumentElementFontSize());
+  }, []);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    // Create a ResizeObserver to watch for font size changes on the document element
+    const resizeObserver = new ResizeObserver(updateFontSize);
+    resizeObserver.observe(document.documentElement);
+
+    // Also listen for viewport changes that might affect font size
+    const mediaQueryList = window.matchMedia('all');
+    const handleMediaChange = () => {
+      updateFontSize();
+    };
+
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener('change', handleMediaChange);
+    } else {
+      // Fallback for older browsers
+      mediaQueryList.addListener(handleMediaChange);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+      if (mediaQueryList.removeEventListener) {
+        mediaQueryList.removeEventListener('change', handleMediaChange);
+      } else {
+        // Fallback for older browsers
+        mediaQueryList.removeListener(handleMediaChange);
+      }
+    };
+  }, []);
+
+  return useMemo(() => rem * fontSize, [fontSize]);
+};