@dxos/react-ui 0.8.4-main.66e292d → 0.8.4-main.69d29f4

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

@@ -45,6 +45,7 @@ const DefaultStory = (props: ScrollContainerRootProps) => {
             </div>
           ))}
         </ScrollContainer.Viewport>
+        <ScrollContainer.ScrollDownButton />
       </ScrollContainer.Root>
     </div>
   );
@@ -54,7 +55,7 @@ const meta = {
   title: 'ui/react-ui-core/ScrollContainer',
   component: ScrollContainer.Root,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ container: 'column', classNames: 'is-[30rem]' })],
+  decorators: [withTheme, withLayout({ layout: 'column', classNames: 'is-[30rem]' })],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/ScrollContainer/ScrollContainer.tsx

@@ -2,7 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useState } from '@preact-signals/safe-react/react';
 import { createContext } from '@radix-ui/react-context';
 import React, {
   type HTMLAttributes,
@@ -13,13 +12,14 @@ import React, {
   useImperativeHandle,
   useMemo,
   useRef,
+  useState,
 } from 'react';
 
 // TODO(burdon): Move these deps to @dxos/dom-util.
 import { addEventListener, combine } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
 import { useForwardedRef } from '@dxos/react-hooks';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { type ThemedClassName } from '../../util';
 import { IconButton } from '../Button';
@@ -51,98 +51,101 @@ type RootProps = ThemedClassName<
   PropsWithChildren<{
     pin?: boolean;
     fade?: boolean;
+    behavior?: ScrollBehavior;
   }>
 >;
 
 /**
  * Scroll container that automatically scrolls to the bottom when new content is added.
  */
-const Root = forwardRef<ScrollController, RootProps>(({ children, classNames, pin, fade }, forwardedRef) => {
-  const scrollerRef = useRef<HTMLDivElement>(null);
-  const autoScrollRef = useRef(false);
-  const [overflow, setOverflow] = useState(false);
-  const [pinned, setPinned] = useState(pin);
-
-  const timeoutRef = useRef<NodeJS.Timeout>(undefined);
-  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'instant') => {
-    if (scrollerRef.current) {
-      // Temporarily hide scrollbar to prevent flicker.
-      autoScrollRef.current = true;
-      scrollerRef.current.classList.add('scrollbar-none');
-      scrollerRef.current.scrollTo({
-        top: scrollerRef.current.scrollHeight,
-        behavior,
-      });
-
-      clearTimeout(timeoutRef.current);
-      if (behavior !== 'instant') {
-        timeoutRef.current = setTimeout(() => {
-          scrollerRef.current?.classList.remove('scrollbar-none');
-          autoScrollRef.current = false;
-        }, 500);
+const Root = forwardRef<ScrollController, RootProps>(
+  ({ children, classNames, pin, fade, behavior: behaviorProp = 'smooth' }, forwardedRef) => {
+    const scrollerRef = useRef<HTMLDivElement>(null);
+    const autoScrollRef = useRef(false);
+    const [overflow, setOverflow] = useState(false);
+    const [pinned, setPinned] = useState(pin);
+
+    const timeoutRef = useRef<NodeJS.Timeout>(undefined);
+    const scrollToBottom = useCallback((behavior: ScrollBehavior = behaviorProp) => {
+      if (scrollerRef.current) {
+        // Temporarily hide scrollbar to prevent flicker.
+        autoScrollRef.current = true;
+        scrollerRef.current.classList.add('scrollbar-none');
+        scrollerRef.current.scrollTo({
+          top: scrollerRef.current.scrollHeight,
+          behavior,
+        });
+
+        clearTimeout(timeoutRef.current);
+        if (behavior !== 'instant') {
+          timeoutRef.current = setTimeout(() => {
+            scrollerRef.current?.classList.remove('scrollbar-none');
+            autoScrollRef.current = false;
+          }, 500);
+        }
+        setPinned(true);
       }
-      setPinned(true);
-    }
-  }, []);
-
-  const controller = useMemo(
-    () => ({
-      viewport: scrollerRef.current,
-      scrollToTop: () => {
-        invariant(scrollerRef.current);
-        scrollerRef.current.scrollTo({ top: 0, behavior: 'smooth' });
-        setPinned(false);
-      },
-      scrollToBottom: () => {
-        scrollToBottom('smooth');
-      },
-    }),
-    [scrollToBottom, scrollerRef.current],
-  );
-
-  // Scroll controller imperative ref.
-  useImperativeHandle(forwardedRef, () => controller, [controller]);
-
-  // Listen for scroll events.
-  useEffect(() => {
-    if (!scrollerRef.current) {
-      return;
-    }
-
-    return combine(
-      // Check if user scrolls.
-      addEventListener(scrollerRef.current, 'wheel', () => {
-        setPinned(isBottom(scrollerRef.current));
-      }),
-      // Check if scrolls.
-      addEventListener(scrollerRef.current, 'scroll', () => {
-        setOverflow((scrollerRef.current?.scrollTop ?? 0) > 0);
+    }, []);
+
+    const controller = useMemo(
+      () => ({
+        viewport: scrollerRef.current,
+        scrollToTop: () => {
+          invariant(scrollerRef.current);
+          scrollerRef.current.scrollTo({ top: 0, behavior: 'smooth' });
+          setPinned(false);
+        },
+        scrollToBottom: () => {
+          scrollToBottom('smooth');
+        },
       }),
+      [scrollToBottom, scrollerRef.current],
     );
-  }, []);
 
-  return (
-    <ScrollContainerProvider pinned={pinned} controller={controller} scrollToBottom={scrollToBottom}>
-      <div className='relative grid flex-1 min-bs-0 overflow-hidden'>
-        {fade && (
-          <div
-            role='none'
-            data-visible={overflow}
-            className={mx(
-              // NOTE: Gradients may not be visible with dark reader extensions.
-              'z-10 absolute block-start-0 inset-inline-0 bs-24 is-full',
-              'opacity-0 duration-200 transition-opacity data-[visible="true"]:opacity-100',
-              'bg-gradient-to-b from-[--surface-bg] to-transparent pointer-events-none',
-            )}
-          />
-        )}
-        <div className={mx('flex flex-col min-bs-0 overflow-y-auto scrollbar-thin', classNames)} ref={scrollerRef}>
-          {children}
+    // Scroll controller imperative ref.
+    useImperativeHandle(forwardedRef, () => controller, [controller]);
+
+    // Listen for scroll events.
+    useEffect(() => {
+      if (!scrollerRef.current) {
+        return;
+      }
+
+      return combine(
+        // Check if user scrolls.
+        addEventListener(scrollerRef.current, 'wheel', () => {
+          setPinned(isBottom(scrollerRef.current));
+        }),
+        // Check if scrolls.
+        addEventListener(scrollerRef.current, 'scroll', () => {
+          setOverflow((scrollerRef.current?.scrollTop ?? 0) > 0);
+        }),
+      );
+    }, []);
+
+    return (
+      <ScrollContainerProvider pinned={pinned} controller={controller} scrollToBottom={scrollToBottom}>
+        <div className='relative grid flex-1 min-bs-0 overflow-hidden'>
+          {fade && (
+            <div
+              role='none'
+              data-visible={overflow}
+              className={mx(
+                // NOTE: Gradients may not be visible with dark reader extensions.
+                'z-10 absolute block-start-0 inset-inline-0 bs-24 is-full',
+                'opacity-0 duration-200 transition-opacity data-[visible="true"]:opacity-100',
+                'bg-gradient-to-b from-[--surface-bg] to-transparent pointer-events-none',
+              )}
+            />
+          )}
+          <div className={mx('flex flex-col min-bs-0 overflow-y-auto scrollbar-thin', classNames)} ref={scrollerRef}>
+            {children}
+          </div>
         </div>
-      </div>
-    </ScrollContainerProvider>
-  );
-});
+      </ScrollContainerProvider>
+    );
+  },
+);
 
 Root.displayName = 'ScrollContainer.Root';
 
@@ -161,14 +164,13 @@ const Viewport = forwardRef<HTMLDivElement, ViewportProps>(({ classNames, childr
       return;
     }
 
+    // Scroll instantly otherwise it might move while we're scrolling.
+    scrollToBottom();
+
     // Setup resize observer to detect content changes.
     const resizeObserver = new ResizeObserver(() => scrollToBottom());
-    scrollToBottom('instant');
-
     resizeObserver.observe(contentRef.current);
-    return () => {
-      resizeObserver.disconnect();
-    };
+    return () => resizeObserver.disconnect();
   }, [pinned, scrollToBottom]);
 
   return (

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

@@ -5,8 +5,8 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { hues } from '@dxos/react-ui-theme';
-import { type ChromaticPalette, type MessageValence } from '@dxos/react-ui-types';
+import { hues } from '@dxos/ui-theme';
+import { type ChromaticPalette, type MessageValence } from '@dxos/ui-types';
 
 import { withTheme } from '../../testing';
 

package/src/components/Tag/Tag.tsx

@@ -6,7 +6,7 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithRef, forwardRef } from 'react';
 
-import { type ChromaticPalette, type MessageValence, type NeutralPalette } from '@dxos/react-ui-types';
+import { type ChromaticPalette, type MessageValence, type NeutralPalette } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -5,7 +5,7 @@
 import { createKeyborg } from 'keyborg';
 import React, { type PropsWithChildren, createContext, useEffect, useMemo } from 'react';
 
-import { type Density, type Elevation, type ThemeFunction } from '@dxos/react-ui-types';
+import { type Density, type Elevation, type ThemeFunction, type ThemeMode } from '@dxos/ui-types';
 
 import { type SafeAreaPadding, useSafeArea } from '../../hooks';
 import { hasIosKeyboard } from '../../util';
@@ -14,8 +14,6 @@ import { ElevationProvider } from '../ElevationProvider';
 
 import { TranslationsProvider, type TranslationsProviderProps } from './TranslationsProvider';
 
-export type ThemeMode = 'dark' | 'light';
-
 export type ThemeContextValue = {
   tx: ThemeFunction<any>;
   themeMode: ThemeMode;

package/src/components/ThemeProvider/TranslationsProvider.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Locale, enUS as dtLocaleEnUs } from 'date-fns/locale';
-import i18Next, { type Resource, type TFunction } from 'i18next';
+import i18Next, { type Resource } from 'i18next';
 import React, { type ReactNode, Suspense, createContext, useContext, useEffect, useState } from 'react';
 import { initReactI18next, useTranslation as useI18NextTranslation } from 'react-i18next';
 
@@ -11,21 +11,6 @@ const initialLng = 'en-US';
 const initialNs = 'dxos-common';
 const initialDtLocale = dtLocaleEnUs;
 
-// TODO(thure): `Parameters<TFunction>` causes typechecking issues because `TFunction` has so many signatures.
-export type Label = string | [string, { ns: string; count?: number; defaultValue?: string }];
-
-export const isLabel = (o: any): o is Label =>
-  typeof o === 'string' ||
-  (Array.isArray(o) &&
-    o.length === 2 &&
-    typeof o[0] === 'string' &&
-    !!o[1] &&
-    typeof o[1] === 'object' &&
-    'ns' in o[1] &&
-    typeof o[1].ns === 'string');
-
-export const toLocalizedString = (label: Label, t: TFunction) => (Array.isArray(label) ? t(...label) : label);
-
 export const resources = {
   [initialLng]: {
     [initialNs]: {

package/src/components/ThemeProvider/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-export * from './ThemeProvider';
-export { type Label, isLabel, toLocalizedString, useTranslation } from './TranslationsProvider';
+export { type Label, isLabel, toLocalizedString } from '@dxos/ui-types';
 
-// TODO(burdon): Use `@internal` with barrel exports (rather than picking individual exports?)
+export * from './ThemeProvider';
+export { useTranslation } from './TranslationsProvider';

package/src/components/Toolbar/Toolbar.tsx

@@ -24,18 +24,22 @@ import { Separator, type SeparatorProps } from '../Separator';
 
 type ToolbarRootProps = ThemedClassName<
   ToolbarPrimitive.ToolbarProps & {
-    textBlockWidth?: boolean;
-    layoutManaged?: boolean;
     disabled?: boolean;
+    layoutManaged?: boolean; // TODO(burdon): Replace with Toolbar.Content to allow inner layout management?
+    textBlockWidth?: boolean;
   }
 >;
 
+// TODO(burdon): Implement asChild.
 const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarRootProps>(
-  ({ classNames, children, layoutManaged, textBlockWidth: textBlockWidthParam, disabled, ...props }, forwardedRef) => {
+  ({ classNames, children, disabled, layoutManaged, textBlockWidth: textBlockWidthProp, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const InnerRoot = textBlockWidthParam ? 'div' : Fragment;
-    const innerRootProps = textBlockWidthParam
-      ? { role: 'none', className: tx('toolbar.inner', 'toolbar', { layoutManaged }, classNames) }
+    const InnerRoot = textBlockWidthProp ? 'div' : Fragment;
+    const innerRootProps = textBlockWidthProp
+      ? {
+          role: 'none',
+          className: tx('toolbar.inner', 'toolbar', { layoutManaged }, classNames),
+        }
       : {};
 
     return (
@@ -66,7 +70,7 @@ type ToolbarIconButtonProps = IconButtonProps;
 const ToolbarIconButton = forwardRef<HTMLButtonElement, ToolbarIconButtonProps>((props, forwardedRef) => {
   return (
     <ToolbarPrimitive.Button asChild>
-      <IconButton {...props} ref={forwardedRef} />
+      <IconButton {...props} noTooltip ref={forwardedRef} />
     </ToolbarPrimitive.Button>
   );
 });
@@ -125,7 +129,18 @@ const ToolbarToggleGroupIconItem = forwardRef<HTMLButtonElement, ToolbarToggleGr
   ({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
     return (
       <ToolbarPrimitive.ToolbarToggleItem {...props} asChild>
-        <IconButton {...{ variant, density, elevation, classNames, icon, label, iconOnly }} ref={forwardedRef} />
+        <IconButton
+          {...{
+            variant,
+            density,
+            elevation,
+            classNames,
+            icon,
+            label,
+            iconOnly,
+          }}
+          ref={forwardedRef}
+        />
       </ToolbarPrimitive.ToolbarToggleItem>
     );
   },

package/src/components/Tooltip/Tooltip.tsx

@@ -41,9 +41,9 @@ type TooltipScopedProps<P = {}> = P & { __scopeTooltip?: Scope };
 const [createTooltipContext, createTooltipScope] = createContextScope('Tooltip', [createPopperScope]);
 const usePopperScope = createPopperScope();
 
-/* -------------------------------------------------------------------------------------------------
- * Tooltip
- * ----------------------------------------------------------------------------------------------- */
+//
+// Tooltip
+//
 
 const DEFAULT_DELAY_DURATION = 700;
 const TOOLTIP_OPEN = 'tooltip.open';
@@ -228,9 +228,9 @@ const TooltipProvider: FC<TooltipProviderProps> = (props: TooltipScopedProps<Too
 
 TooltipProvider.displayName = TOOLTIP_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * TooltipVirtualTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// TooltipVirtualTrigger
+//
 
 const TooltipVirtualTrigger = ({
   virtualRef,
@@ -240,9 +240,9 @@ const TooltipVirtualTrigger = ({
   return <PopperPrimitive.Anchor asChild {...popperScope} virtualRef={virtualRef} />;
 };
 
-/* -------------------------------------------------------------------------------------------------
- * TooltipTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// TooltipTrigger
+//
 
 const TRIGGER_NAME = 'TooltipTrigger';
 
@@ -322,9 +322,9 @@ const TooltipTrigger = forwardRef<TooltipTriggerElement, TooltipTriggerProps>(
 
 TooltipTrigger.displayName = TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * TooltipPortal
- * ----------------------------------------------------------------------------------------------- */
+//
+// TooltipPortal
+//
 
 const PORTAL_NAME = 'TooltipPortal';
 
@@ -363,9 +363,9 @@ const TooltipPortal: FC<TooltipPortalProps> = (props: TooltipScopedProps<Tooltip
 
 TooltipPortal.displayName = PORTAL_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * TooltipContent
- * ----------------------------------------------------------------------------------------------- */
+//
+// TooltipContent
+//
 
 const CONTENT_NAME = 'TooltipContent';
 
@@ -574,9 +574,9 @@ const TooltipContentImpl = forwardRef<TooltipContentImplElement, TooltipContentI
 
 TooltipContent.displayName = CONTENT_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * TooltipArrow
- * ----------------------------------------------------------------------------------------------- */
+//
+// TooltipArrow
+//
 
 const ARROW_NAME = 'TooltipArrow';
 
@@ -599,8 +599,6 @@ const TooltipArrow = forwardRef<TooltipArrowElement, TooltipArrowProps>(
 
 TooltipArrow.displayName = ARROW_NAME;
 
-/* ----------------------------------------------------------------------------------------------- */
-
 type TooltipSide = NonNullable<TooltipContentProps['side']>;
 
 const getExitSideFromRect = (point: Point, rect: DOMRect): TooltipSide => {
@@ -755,6 +753,10 @@ const getHullPresorted = <P extends Point>(points: Readonly<Array<P>>): Array<P>
   }
 };
 
+//
+// Tooltip
+//
+
 export const Tooltip = {
   Provider: TooltipProvider,
   Trigger: TooltipTrigger,

package/src/components/index.ts

@@ -13,7 +13,7 @@ export * from './Input';
 export * from './Link';
 export * from './List';
 export * from './Main';
-export * from './Menus';
+export * from './Menu';
 export * from './Message';
 export * from './Popover';
 export * from './Status';

package/src/hooks/useDensityContext.ts

@@ -4,7 +4,7 @@
 
 import { useContext } from 'react';
 
-import { type Density } from '@dxos/react-ui-types';
+import { type Density } from '@dxos/ui-types';
 
 import { DensityContext } from '../components';
 

package/src/hooks/useElevationContext.ts

@@ -4,7 +4,7 @@
 
 import { useContext } from 'react';
 
-import { type Elevation } from '@dxos/react-ui-types';
+import { type Elevation } from '@dxos/ui-types';
 
 import { ElevationContext } from '../components';
 

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 * from '@dxos/react-ui-types';
+export * from '@dxos/ui-types';
 
 export * from './components';
 export * from './hooks';