@dxos/react-ui 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/components/Message/Message.tsx

@@ -5,7 +5,7 @@
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type CSSProperties, type ComponentPropsWithRef, forwardRef } from 'react';
+import React, { type ComponentPropsWithRef, type CSSProperties, forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useId } from '@dxos/react-hooks';
@@ -141,15 +141,15 @@ const MessageTitle = forwardRef<HTMLDivElement, MessageTitleProps>(
     return (
       <Column.Row classNames={tx('message.header', {}, classNames)} ref={forwardedRef}>
         {icon && (
-          <div className={tx('message.icon', { valence })}>
+          <Column.Block>
             <Icon icon={icon} />
-          </div>
+          </Column.Block>
         )}
         <h2 className={tx('message.title', {}, classNames)} id={titleId}>
           {children}
         </h2>
         {onClose && (
-          <div className={tx('message.close', {})}>
+          <Column.Block end>
             <IconButton
               variant='ghost'
               icon='ph--x--regular'
@@ -158,7 +158,7 @@ const MessageTitle = forwardRef<HTMLDivElement, MessageTitleProps>(
               label={t('toolbar-close.label')}
               onClick={onClose}
             />
-          </div>
+          </Column.Block>
         )}
       </Column.Row>
     );
@@ -204,6 +204,6 @@ export const Message = {
 
 export const Callout = Message;
 
-export type { MessageRootProps, MessageTitleProps, MessageContentProps };
+export type { MessageContentProps, MessageRootProps, MessageTitleProps };
 
 export { messageIcons };

package/src/components/Panel/Panel.theme.ts

@@ -25,8 +25,9 @@ const root: ComponentFunction<PanelStyleProps> = (_, ...etc) =>
     ...etc,
   );
 
+// Toolbars default to the bar surface (tier 5); callers can still override via the trailing classes.
 const toolbar: ComponentFunction<PanelStyleProps> = ({ size = 'md' }, ...etc) =>
-  mx('[grid-area:toolbar]', 'shrink-0', sizes[size], ...etc);
+  mx('[grid-area:toolbar]', 'shrink-0', 'bg-toolbar-surface', sizes[size], ...etc);
 
 const content: ComponentFunction<PanelStyleProps> = (_, ...etc) => mx('[grid-area:content] min-h-0', ...etc);
 

package/src/components/Panel/Panel.tsx

@@ -118,4 +118,4 @@ export const Panel = {
   Statusbar: PanelStatusbar,
 };
 
-export type { PanelRootProps, PanelToolbarProps, PanelContentProps, PanelStatusbarProps };
+export type { PanelContentProps, PanelRootProps, PanelStatusbarProps, PanelToolbarProps };

package/src/components/Popover/Popover.theme.ts

@@ -13,7 +13,7 @@ export type PopoverStyleProps = Partial<{
 
 const content: ComponentFunction<PopoverStyleProps> = ({ elevation }, ...etc) =>
   mx(
-    'dx-popover-surface border border-separator rounded-sm',
+    'dx-popover-surface overflow-hidden border border-separator rounded-sm',
     surfaceShadow({ elevation: 'positioned' }),
     surfaceZIndex({ elevation, level: 'menu' }),
     'dx-focus-ring',

package/src/components/Popover/Popover.tsx

@@ -21,8 +21,8 @@ import { Slot } from '@radix-ui/react-slot';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { hideOthers } from 'aria-hidden';
 import React, {
-  type ComponentPropsWithRef,
   type ComponentPropsWithoutRef,
+  type ComponentPropsWithRef,
   type ComponentRef,
   type FC,
   type ReactNode,
@@ -36,7 +36,7 @@ import React, {
 } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
 
-import { useSafeCollisionPadding, useElevationContext, useThemeContext } from '../../hooks';
+import { useElevationContext, useSafeCollisionPadding, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
 //
@@ -611,14 +611,14 @@ export const Popover = {
 export { createPopoverScope };
 
 export type {
-  PopoverRootProps,
   PopoverAnchorProps,
-  PopoverTriggerProps,
-  PopoverVirtualTriggerProps,
-  PopoverPortalProps,
-  PopoverContentProps,
-  PopoverCloseProps,
   PopoverArrowProps,
-  PopoverViewportProps,
+  PopoverCloseProps,
   PopoverContentInteractOutsideEvent,
+  PopoverContentProps,
+  PopoverPortalProps,
+  PopoverRootProps,
+  PopoverTriggerProps,
+  PopoverViewportProps,
+  PopoverVirtualTriggerProps,
 };

package/src/components/ScrollArea/ScrollArea.tsx

@@ -24,6 +24,8 @@ type ScrollAreaContextType = {
   orientation: AllowedAxis;
   /** Hide scrollbars when not scrolling. */
   autoHide: boolean;
+  /** Show scrollbars. */
+  scrollbars?: boolean;
   /** Apply padding to opposite side of scrollbar. */
   centered?: boolean;
   /** Apply padding. */
@@ -54,6 +56,7 @@ const ScrollAreaRoot = slottable<HTMLDivElement, ScrollAreaRootProps>(
       asChild,
       orientation = 'vertical',
       autoHide = true,
+      scrollbars = true,
       centered = false,
       padding = false,
       thin = false,
@@ -66,8 +69,8 @@ const ScrollAreaRoot = slottable<HTMLDivElement, ScrollAreaRootProps>(
     const { className, ...rest } = composableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
     const options = useMemo(
-      () => ({ orientation, autoHide, centered, padding, thin, snap }),
-      [orientation, autoHide, centered, padding, thin, snap],
+      () => ({ orientation, autoHide, scrollbars, centered, padding, thin, snap }),
+      [orientation, autoHide, scrollbars, centered, padding, thin, snap],
     );
 
     return (
@@ -103,8 +106,8 @@ const ScrollAreaViewport = slottable<HTMLDivElement>(({ children, asChild, ...pr
       {...restWithoutStyle}
       style={
         {
-          '--scroll-width': `${density.size}px`,
-          '--scroll-padding': `${density.padding}px`,
+          '--scroll-width': options.scrollbars ? `${density.size}px` : '0px',
+          '--scroll-padding': options.scrollbars ? `${density.padding}px` : '0px',
           ...style,
         } as CSSProperties
       }

package/src/components/ScrollContainer/ScrollContainer.stories.tsx

@@ -13,9 +13,9 @@ import { Panel } from '../Panel';
 import { Toolbar } from '../Toolbar';
 import { ScrollContainer, type ScrollContainerRootProps, type ScrollController } from './ScrollContainer';
 
-type DefaultStoryProps = ScrollContainerRootProps & { running?: boolean; initialLines?: number };
+type StoryArgs = ScrollContainerRootProps & { running?: boolean; initialLines?: number };
 
-const DefaultStory = ({ initialLines = 0, running: runningProp, ...props }: DefaultStoryProps) => {
+const DefaultStory = ({ initialLines = 0, running: runningProp, ...props }: StoryArgs) => {
   const [lines, setLines] = useState<string[]>([]);
   const [running, setRunning] = useState(runningProp);
   const scroller = useRef<ScrollController>(null);

package/src/components/ScrollContainer/ScrollContainer.tsx

@@ -339,9 +339,9 @@ export const ScrollContainer = {
 };
 
 export type {
-  ScrollContainerRootProps,
   ScrollContainerContentProps,
-  ScrollContainerViewportProps,
   ScrollContainerFadeProps,
+  ScrollContainerRootProps,
   ScrollContainerScrollDownButtonProps,
+  ScrollContainerViewportProps,
 };

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

@@ -15,9 +15,9 @@ random.seed(1234);
 
 type ItemProps = { id: string; text: string };
 
-type DefaultStoryProps = { items: ItemProps[] };
+type StoryArgs = { items: ItemProps[] };
 
-const DefaultStory = ({ items = [] }: DefaultStoryProps) => {
+const DefaultStory = ({ items = [] }: StoryArgs) => {
   const [value, setValue] = useState<string>();
   return (
     <Select.Root value={value} onValueChange={setValue}>

package/src/components/Select/Select.theme.ts

@@ -20,7 +20,7 @@ const content: ComponentFunction<SelectStyleProps> = ({ elevation }, ...etc) =>
 };
 
 const triggerButton: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
-  mx('grid grid-cols-[1fr_auto] [&>span]:text-left', ...etc);
+  mx('bg-input-surface grid grid-cols-[1fr_auto] [&>span]:text-left', ...etc);
 
 const viewport: ComponentFunction<SelectStyleProps> = (_props, ...etc) => mx(...etc);
 

package/src/components/Select/Select.tsx

@@ -5,7 +5,7 @@
 import * as SelectPrimitive from '@radix-ui/react-select';
 import React, { forwardRef } from 'react';
 
-import { useSafeCollisionPadding, useElevationContext, useThemeContext } from '../../hooks';
+import { useElevationContext, useSafeCollisionPadding, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Button, type ButtonProps } from '../Button';
 import { Icon } from '../Icon';
@@ -222,22 +222,22 @@ export const Select = {
 };
 
 export type {
-  SelectRootProps,
-  SelectTriggerProps,
-  SelectTriggerButtonProps,
-  SelectValueProps,
-  SelectIconProps,
-  SelectPortalProps,
+  SelectArrowProps,
   SelectContentProps,
-  SelectScrollUpButtonProps,
-  SelectScrollDownButtonProps,
-  SelectViewportProps,
+  SelectGroupProps,
+  SelectIconProps,
+  SelectItemIndicatorProps,
   SelectItemProps,
   SelectItemTextProps,
-  SelectItemIndicatorProps,
-  SelectOptionProps,
-  SelectGroupProps,
   SelectLabelProps,
+  SelectOptionProps,
+  SelectPortalProps,
+  SelectRootProps,
+  SelectScrollDownButtonProps,
+  SelectScrollUpButtonProps,
   SelectSeparatorProps,
-  SelectArrowProps,
+  SelectTriggerButtonProps,
+  SelectTriggerProps,
+  SelectValueProps,
+  SelectViewportProps,
 };

package/src/components/Separator/Separator.tsx

@@ -1,6 +1,7 @@
 //
 // Copyright 2023 DXOS.org
 //
+
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import React, { forwardRef } from 'react';
 

package/src/components/Splitter/Splitter.stories.tsx

@@ -9,7 +9,7 @@ import { withLayout, withTheme } from '../../testing';
 import { Panel } from '../Panel';
 import { ScrollArea } from '../ScrollArea';
 import { Toolbar } from '../Toolbar';
-import { Splitter, type SplitterRootProps } from './Splitter';
+import { Splitter, type SplitterMode, type SplitterRootProps } from './Splitter';
 
 const PanelContent = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'> & { label: string }>(
   ({ label, ...props }, forwardedRef) => (
@@ -32,29 +32,44 @@ const PanelContent = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>
   ),
 );
 
-const DefaultStory = (props: SplitterRootProps) => {
-  const [mode, setMode] = useState(props.mode ?? 'split');
-  const [ratio, setRatio] = useState(props.ratio ?? 0.5);
+const Panes = () => (
+  <>
+    <Splitter.Panel position='start'>
+      <PanelContent label='A' />
+    </Splitter.Panel>
+    <Splitter.Handle />
+    <Splitter.Panel position='end'>
+      <PanelContent label='B' />
+    </Splitter.Panel>
+  </>
+);
+
+// Renders the splitter with no surrounding chrome (Panel.Root keeps the height chain without a toolbar).
+const BasicStory = (args: SplitterRootProps) => (
+  <Panel.Root>
+    <Panel.Content asChild>
+      <Splitter.Root {...args}>
+        <Panes />
+      </Splitter.Root>
+    </Panel.Content>
+  </Panel.Root>
+);
 
+// Toolbar drives the animated collapse via `mode`.
+const ToolbarStory = (args: SplitterRootProps) => {
+  const [mode, setMode] = useState<SplitterMode>(args.mode ?? 'split');
   return (
     <Panel.Root>
       <Panel.Toolbar asChild>
         <Toolbar.Root>
-          <Toolbar.Button onClick={() => setMode('top')}>A</Toolbar.Button>
+          <Toolbar.Button onClick={() => setMode('start')}>A</Toolbar.Button>
           <Toolbar.Button onClick={() => setMode('split')}>A+B</Toolbar.Button>
-          <Toolbar.Button onClick={() => setMode('bottom')}>B</Toolbar.Button>
-          <Toolbar.Separator />
-          <Toolbar.Button onClick={() => setRatio((r) => 1 - r)}>Toggle</Toolbar.Button>
+          <Toolbar.Button onClick={() => setMode('end')}>B</Toolbar.Button>
         </Toolbar.Root>
       </Panel.Toolbar>
       <Panel.Content asChild>
-        <Splitter.Root mode={mode} ratio={ratio}>
-          <Splitter.Panel asChild position='top'>
-            <PanelContent label='A' />
-          </Splitter.Panel>
-          <Splitter.Panel asChild position='bottom'>
-            <PanelContent label='B' />
-          </Splitter.Panel>
+        <Splitter.Root {...args} mode={mode}>
+          <Panes />
         </Splitter.Root>
       </Panel.Content>
     </Panel.Root>
@@ -64,8 +79,8 @@ const DefaultStory = (props: SplitterRootProps) => {
 const meta: Meta<SplitterRootProps> = {
   title: 'ui/react-ui-core/components/Splitter',
   component: Splitter.Root,
-  render: DefaultStory,
-  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  render: BasicStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -75,9 +90,58 @@ export default meta;
 
 type Story = StoryObj<SplitterRootProps>;
 
-export const Default: Story = {
+export const VerticalStart: Story = {
+  args: {
+    orientation: 'vertical',
+    anchor: 'start',
+    resizable: true,
+    defaultSize: 20,
+    minSize: 6,
+  },
+};
+
+export const VerticalEnd: Story = {
+  args: {
+    orientation: 'vertical',
+    anchor: 'end',
+    resizable: true,
+    defaultSize: 20,
+    minSize: 6,
+  },
+};
+
+export const VerticalAnimated: Story = {
+  render: ToolbarStory,
+  args: {
+    orientation: 'vertical',
+    transition: 250,
+  },
+};
+
+export const HorizontalStart: Story = {
+  args: {
+    orientation: 'horizontal',
+    anchor: 'start',
+    resizable: true,
+    defaultSize: 30,
+    minSize: 6,
+  },
+};
+
+export const HorizontalEnd: Story = {
+  args: {
+    orientation: 'horizontal',
+    anchor: 'end',
+    resizable: true,
+    defaultSize: 30,
+    minSize: 6,
+  },
+};
+
+export const HorizontalAnimated: Story = {
+  render: ToolbarStory,
   args: {
-    mode: 'split',
-    ratio: 0.4,
+    orientation: 'horizontal',
+    transition: 250,
   },
 };

package/src/components/Splitter/Splitter.theme.ts

@@ -5,14 +5,31 @@
 import { mx } from '@dxos/ui-theme';
 import { type ComponentFunction, type Theme } from '@dxos/ui-types';
 
-export type SplitterStyleProps = {};
+export type SplitterStyleProps = {
+  orientation?: 'horizontal' | 'vertical';
+};
 
-const root: ComponentFunction<SplitterStyleProps> = (_props, ...etc) => mx('relative h-full overflow-hidden', ...etc);
+const root: ComponentFunction<SplitterStyleProps> = ({ orientation }, ...etc) =>
+  mx('relative flex w-full h-full overflow-hidden', orientation === 'vertical' ? 'flex-col' : 'flex-row', ...etc);
 
 const panel: ComponentFunction<SplitterStyleProps> = (_props, ...etc) =>
-  mx('absolute inset-x-0 flex flex-col overflow-hidden', ...etc);
+  mx('relative grid overflow-hidden min-w-0 min-h-0', ...etc);
+
+// A 7px grab area, absolutely positioned and centered on the split point (the component sets the offset),
+// containing a persistent 1px divider line that brightens on hover/focus/active.
+const handle: ComponentFunction<SplitterStyleProps> = ({ orientation }, ...etc) =>
+  mx(
+    'group absolute z-10 touch-none select-none',
+    'before:absolute before:block before:bg-separator',
+    'before:transition-colors before:duration-100 before:ease-in-out hover:before:bg-focus-ring-subtle focus-visible:before:bg-focus-ring-subtle active:before:bg-focus-ring-subtle',
+    orientation === 'vertical'
+      ? 'h-[7px] cursor-row-resize before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-px'
+      : 'w-[7px] cursor-col-resize before:inset-y-0 before:left-1/2 before:-translate-x-1/2 before:w-px',
+    ...etc,
+  );
 
 export const splitterTheme: Theme<SplitterStyleProps> = {
   root,
   panel,
+  handle,
 };