@dxos/react-ui 0.8.4-main.f9ba587 → 0.8.4-main.fffef41

package/src/components/{Lists → List}/List.tsx

@@ -2,34 +2,35 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretDown, CaretRight } from '@phosphor-icons/react';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithoutRef, type FC, forwardRef, type ForwardRefExoticComponent } from 'react';
+import React, { type ComponentPropsWithoutRef, type FC, type ForwardRefExoticComponent, forwardRef } from 'react';
 
 import {
+  LIST_ITEM_NAME,
+  LIST_NAME,
+  ListItemCollapsibleContent,
+  type ListItemCollapsibleContentProps,
+  type ListItemScopedProps,
   List as ListPrimitive,
-  type ListProps as ListPrimitiveProps,
-  type ListScopedProps,
+  ListItem as ListPrimitiveItem,
   ListItemHeading as ListPrimitiveItemHeading,
   type ListItemHeadingProps as ListPrimitiveItemHeadingProps,
   ListItemOpenTrigger as ListPrimitiveItemOpenTrigger,
   type ListItemOpenTriggerProps as ListPrimitiveItemOpenTriggerProps,
-  ListItemCollapsibleContent,
-  type ListItemCollapsibleContentProps,
-  ListItem as ListPrimitiveItem,
   type ListItemProps as ListPrimitiveItemProps,
-  type ListItemScopedProps,
-  LIST_NAME,
-  LIST_ITEM_NAME,
+  type ListProps as ListPrimitiveProps,
+  type ListScopedProps,
   useListContext,
   useListItemContext,
 } from '@dxos/react-list';
 import { type Density } from '@dxos/react-ui-types';
 
-import { ListDropIndicator } from './ListDropIndicator';
 import { useDensityContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { DensityProvider } from '../DensityProvider';
+import { Icon } from '../Icon';
+
+import { ListDropIndicator } from './ListDropIndicator';
 
 type ListProps = ThemedClassName<ListPrimitiveProps> & { density?: Density };
 
@@ -106,7 +107,6 @@ const ListItemOpenTrigger = forwardRef<HTMLButtonElement, ListItemOpenTriggerPro
     const { tx } = useThemeContext();
     const density = useDensityContext();
     const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
-    const Icon = open ? CaretDown : CaretRight;
     return (
       <ListPrimitiveItemOpenTrigger
         {...props}
@@ -115,10 +115,9 @@ const ListItemOpenTrigger = forwardRef<HTMLButtonElement, ListItemOpenTriggerPro
       >
         {children || (
           <Icon
-            {...{
-              weight: 'bold',
-              className: tx('list.item.openTriggerIcon', 'list__listItem__openTrigger__icon', {}),
-            }}
+            size={3}
+            icon={open ? 'ph--caret-down--bold' : 'ph--caret-right--bold'}
+            classNames={tx('list.item.openTriggerIcon', 'list__listItem__openTrigger__icon', {})}
           />
         )}
       </ListPrimitiveItemOpenTrigger>

package/src/components/{Lists → List}/ListDropIndicator.tsx

@@ -18,7 +18,7 @@ const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['classN
   horizontal:
     'h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]',
   vertical:
-    'w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]',
+    'is-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]',
 };
 
 const edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {

package/src/components/{Lists → List}/Tree.stories.tsx

@@ -2,13 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Tree, TreeItem } from './Tree';
 import { withTheme } from '../../testing';
 
+import { Tree, TreeItem } from './Tree';
+
 type StorybookTreeProps = {
   data: any;
 };
@@ -55,15 +55,18 @@ const DefaultStory = ({ data }: StorybookTreeProps) => {
   return <StorybookTreeItem data={data} />;
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Tree',
-  component: Tree,
+  component: Tree as any,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     data: {
       foo: 100,

package/src/components/{Lists → List}/Tree.tsx

@@ -2,9 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type ComponentPropsWithoutRef, type FC, forwardRef, type ForwardRefExoticComponent } from 'react';
+import React, { type ComponentPropsWithoutRef, type FC, type ForwardRefExoticComponent, forwardRef } from 'react';
+
+import { type ThemedClassName } from '../../util';
 
 import {
+  LIST_ITEM_NAME,
   List,
   ListItem,
   type ListItemCollapsibleContentProps,
@@ -13,11 +16,9 @@ import {
   type ListItemRootProps,
   type ListProps,
   type ListScopedProps,
-  LIST_ITEM_NAME,
   useListItemContext,
 } from './List';
 import { TreeDropIndicator } from './TreeDropIndicator';
-import { type ThemedClassName } from '../../util';
 
 type TreeRootProps = ListProps;
 

package/src/components/{Lists → List}/TreeDropIndicator.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import React, { type HTMLAttributes, type CSSProperties } from 'react';
+import React, { type CSSProperties, type HTMLAttributes } from 'react';
 
 // Tree item hitbox
 // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx#tree-item

package/src/components/{Lists → List}/Treegrid.stories.tsx

@@ -2,14 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { faker } from '@dxos/random';
 
-import { Treegrid } from './Treegrid';
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
 
+import { Treegrid } from './Treegrid';
+
 faker.seed(1234);
 
 type StorybookNode = {
@@ -86,7 +88,7 @@ const content = {
       icon: 'ph--planet--regular',
     },
   ],
-} satisfies StorybookNode;
+} as StorybookNode;
 
 function* visitor(node: StorybookNode, isOpen?: (node: StorybookNode) => boolean): Generator<StorybookIteratorNode> {
   const stack: StorybookIteratorNode[] = [
@@ -141,11 +143,15 @@ const DefaultStory = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Treegrid',
-  component: Treegrid.Root,
+  component: Treegrid.Root as any,
   render: DefaultStory,
   decorators: [withTheme],
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {};
+export const Default: Story = {};

package/src/components/{Lists → List}/Treegrid.tsx

@@ -2,12 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';
-import { createContextScope, type Scope } from '@radix-ui/react-context';
+import { useFocusFinders } from '@fluentui/react-tabster';
+import { type Scope, createContextScope } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type ComponentPropsWithRef, type CSSProperties, forwardRef } from 'react';
+import React, {
+  type CSSProperties,
+  type ComponentPropsWithRef,
+  type KeyboardEvent,
+  forwardRef,
+  useCallback,
+} from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -40,12 +46,58 @@ const TreegridRoot = forwardRef<HTMLDivElement, TreegridRootProps>(
   ({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : Primitive.div;
-    const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'vertical', tabbable: false, circular: true });
+    const { findFirstFocusable } = useFocusFinders();
+
+    const handleKeyDown = useCallback(
+      (event: KeyboardEvent<HTMLDivElement>) => {
+        switch (event.key) {
+          case 'ArrowDown':
+          case 'ArrowUp': {
+            const direction = event.key === 'ArrowDown' ? 'down' : 'up';
+            const target = event.target as HTMLElement;
+
+            // Find ancestor with data-arrow-keys containing the relevant direction.
+            const ancestorWithArrowKeys = target.closest(`[data-arrow-keys*="${direction}"], [data-arrow-keys="all"]`);
+
+            // If no ancestor with data-arrow-keys found, proceed with row navigation.
+            if (!ancestorWithArrowKeys) {
+              // Find the closest row
+              const currentRow = target.closest('[role="row"]');
+              if (currentRow) {
+                // Find the treegrid container.
+                const treegrid = currentRow.closest('[role="treegrid"]');
+                if (treegrid) {
+                  // Get all rows in the treegrid.
+                  const rows = Array.from(treegrid.querySelectorAll('[role="row"]'));
+                  const currentIndex = rows.indexOf(currentRow as Element);
+
+                  // Find next or previous row.
+                  const nextIndex = direction === 'down' ? currentIndex + 1 : currentIndex - 1;
+                  const targetRow = rows[nextIndex];
+
+                  if (targetRow) {
+                    // Focus the first focusable element in the target row.
+                    const firstFocusable = findFirstFocusable(targetRow as HTMLElement);
+                    if (firstFocusable) {
+                      event.preventDefault();
+                      firstFocusable.focus();
+                    }
+                  }
+                }
+              }
+            }
+            break;
+          }
+        }
+        props.onKeyDown?.(event);
+      },
+      [findFirstFocusable],
+    );
 
     return (
       <Root
         role='treegrid'
-        {...arrowNavigationAttrs}
+        onKeyDown={handleKeyDown}
         {...props}
         className={tx('treegrid.root', 'treegrid', {}, classNames)}
         style={{ ...style, gridTemplateColumns }}
@@ -91,13 +143,6 @@ const TreegridRow = forwardRef<HTMLDivElement, TreegridRowScopedProps<TreegridRo
       onChange: propsOnOpenChange,
       defaultProp: defaultOpen,
     });
-    const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
-    const arrowGroupAttrs = useArrowNavigationGroup({
-      axis: 'horizontal',
-      tabbable: false,
-      circular: false,
-      memorizeCurrent: false,
-    });
 
     return (
       <TreegridRowProvider open={open} onOpenChange={onOpenChange} scope={__treegridRowScope}>
@@ -106,15 +151,11 @@ const TreegridRow = forwardRef<HTMLDivElement, TreegridRowScopedProps<TreegridRo
           aria-level={level}
           className={tx('treegrid.row', 'treegrid__row', { level }, classNames)}
           {...(parentOf && { 'aria-expanded': open, 'aria-owns': parentOf })}
-          tabIndex={0}
-          {...focusableGroupAttrs}
           {...props}
           id={id}
           ref={forwardedRef}
         >
-          <div role='none' className='contents' {...arrowGroupAttrs}>
-            {children}
-          </div>
+          {children}
         </Root>
       </TreegridRowProvider>
     );

package/src/components/Main/Main.stories.tsx

@@ -2,13 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Main, useSidebars } from './Main';
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
+
+import { Main, useSidebars } from './Main';
 
 type StoryMainArgs = {};
 
@@ -45,15 +45,23 @@ const DefaultStory = (_args: StoryMainArgs) => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Main',
   component: Main.Root,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  parameters: {
+    layout: 'fullscreen',
+    chromatic: {
+      disableSnapshot: false,
+    },
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
-  layout: 'fullscreen',
 };

package/src/components/Main/Main.tsx

@@ -2,49 +2,41 @@
 // Copyright 2023 DXOS.org
 //
 
+import { useFocusableGroup } from '@fluentui/react-tabster';
 import { createContext } from '@radix-ui/react-context';
-import { Root as DialogRoot, DialogContent, DialogTitle } from '@radix-ui/react-dialog';
+import { DialogContent, Root as DialogRoot, DialogTitle } from '@radix-ui/react-dialog';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, {
   type ComponentPropsWithRef,
+  type ComponentPropsWithoutRef,
   type Dispatch,
-  forwardRef,
+  type KeyboardEvent,
   type PropsWithChildren,
   type SetStateAction,
+  forwardRef,
   useCallback,
   useEffect,
   useRef,
   useState,
-  type KeyboardEvent,
-  type ComponentPropsWithoutRef,
 } from 'react';
 
 import { log } from '@dxos/log';
-import { useMediaQuery, useForwardedRef } from '@dxos/react-hooks';
+import { useForwardedRef, useMediaQuery } from '@dxos/react-hooks';
 
-import { useSwipeToDismiss } from './useSwipeToDismiss';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { type Label, toLocalizedString, useTranslation } from '../ThemeProvider';
 
+import { useSwipeToDismiss } from './useSwipeToDismiss';
+
+const MAIN_NAME = 'Main';
 const MAIN_ROOT_NAME = 'MainRoot';
 const NAVIGATION_SIDEBAR_NAME = 'NavigationSidebar';
 const COMPLEMENTARY_SIDEBAR_NAME = 'ComplementarySidebar';
-const MAIN_NAME = 'Main';
 const GENERIC_CONSUMER_NAME = 'GenericConsumer';
 
-type SidebarState = 'expanded' | 'collapsed' | 'closed';
-
-type MainContextValue = {
-  resizing: boolean;
-  navigationSidebarState: SidebarState;
-  setNavigationSidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
-  complementarySidebarState: SidebarState;
-  setComplementarySidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
-};
-
 const landmarkAttr = 'data-main-landmark';
 
 /**
@@ -69,20 +61,38 @@ const useLandmarkMover = (propsOnKeyDown: ComponentPropsWithoutRef<'div'>['onKey
     },
     [propsOnKeyDown],
   );
-  const focusableGroupAttrs = window ? {} : { tabBehavior: 'limited', ignoreDefaultKeydown: { Tab: true } };
 
-  return { onKeyDown: handleKeyDown, [landmarkAttr]: landmark, tabIndex: 0, ...focusableGroupAttrs };
+  // TODO(thure): This was disconnected once before in #8818;
+  //  if this should change again to support the browser extension, please ensure the change doesn’t break web, desktop and mobile.
+  const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited', ignoreDefaultKeydown: { Tab: true } });
+
+  return {
+    onKeyDown: handleKeyDown,
+    [landmarkAttr]: landmark,
+    tabIndex: 0,
+    ...focusableGroupAttrs,
+  };
+};
+
+type SidebarState = 'expanded' | 'collapsed' | 'closed';
+
+type MainContextValue = {
+  resizing: boolean;
+  navigationSidebarState: SidebarState;
+  setNavigationSidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
+  complementarySidebarState: SidebarState;
+  setComplementarySidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
 };
 
 const [MainProvider, useMainContext] = createContext<MainContextValue>(MAIN_NAME, {
   resizing: false,
   navigationSidebarState: 'closed',
-  setNavigationSidebarState: (nextState) => {
+  setNavigationSidebarState: (_nextState) => {
     // TODO(burdon): Standardize with other context missing errors using raise.
     log.warn('Attempt to set sidebar state without initializing `MainRoot`');
   },
   complementarySidebarState: 'closed',
-  setComplementarySidebarState: (nextState) => {
+  setComplementarySidebarState: (_nextState) => {
     // TODO(burdon): Standardize with other context missing errors using raise.
     log.warn('Attempt to set sidebar state without initializing `MainRoot`');
   },
@@ -135,7 +145,7 @@ const MainRoot = ({
   children,
   ...props
 }: MainRootProps) => {
-  const [isLg] = useMediaQuery('lg', { ssr: false });
+  const [isLg] = useMediaQuery('lg');
   const [navigationSidebarState = isLg ? 'expanded' : 'collapsed', setNavigationSidebarState] =
     useControllableState<SidebarState>({
       prop: propsNavigationSidebarState,
@@ -204,7 +214,7 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
     { classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props },
     forwardedRef,
   ) => {
-    const [isLg] = useMediaQuery('lg', { ssr: false });
+    const [isLg] = useMediaQuery('lg');
     const { tx } = useThemeContext();
     const { t } = useTranslation();
     const ref = useForwardedRef(forwardedRef);
@@ -212,10 +222,15 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
     useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
       onDismiss: () => onStateChange?.('closed'),
     });
+    // NOTE(thure): This is a workaround for something further down the tree grabbing focus on Escape. Adding this
+    //   intervention to `Tabs.Root` or `Tabs.Tabpenel` instances is somehow ineffectual.
     const handleKeyDown = useCallback(
       (event: KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === 'Escape') {
-          ((event.target as HTMLDivElement).closest('[data-tabster]') as HTMLDivElement)?.focus();
+        const focusGroupParent = (event.target as HTMLElement).closest('[data-tabster]');
+        if (event.key === 'Escape' && focusGroupParent) {
+          event.preventDefault();
+          event.stopPropagation();
+          (focusGroupParent as HTMLElement).focus();
         }
         props.onKeyDown?.(event);
       },
@@ -233,8 +248,8 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
           data-state={state}
           data-resizing={resizing ? 'true' : 'false'}
           className={tx('main.sidebar', 'main__sidebar', {}, classNames)}
-          onKeyDown={handleKeyDown}
-          {...(state === 'closed' && { inert: 'true' })}
+          onKeyDownCapture={handleKeyDown}
+          {...(state === 'closed' && { inert: true })}
           ref={ref}
         >
           {children}
@@ -323,7 +338,7 @@ MainContent.displayName = MAIN_NAME;
 type MainOverlayProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.div>, 'children'>>;
 
 const MainOverlay = forwardRef<HTMLDivElement, MainOverlayProps>(({ classNames, ...props }, forwardedRef) => {
-  const [isLg] = useMediaQuery('lg', { ssr: false });
+  const [isLg] = useMediaQuery('lg');
   const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } =
     useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();

package/src/components/Menus/ContextMenu.stories.tsx

@@ -2,13 +2,13 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { ContextMenu } from './ContextMenu';
 import { withTheme } from '../../testing';
 
+import { ContextMenu } from './ContextMenu';
+
 const DefaultStory = () => {
   // NOTE(thure): Since long-tap will select text in some OSs, apply `select-none` to `ContextMenu.Trigger` where possible.
   return (
@@ -91,15 +91,18 @@ const DefaultStory = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/ContextMenu',
-  component: ContextMenu,
+  component: ContextMenu.Root as any,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
   parameters: {
     chromatic: { delay: 1600 },

package/src/components/Menus/ContextMenu.tsx

@@ -34,6 +34,7 @@ const ContextMenuContent = forwardRef<HTMLDivElement, ContextMenuContentProps>(
     return (
       <ContextMenuPrimitive.Content
         {...props}
+        data-arrow-keys='up down'
         collisionPadding={safeCollisionPadding}
         className={tx('menu.content', 'menu', { elevation }, classNames)}
         ref={forwardedRef}

package/src/components/Menus/DropdownMenu.stories.tsx

@@ -2,13 +2,13 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useRef, useState } from 'react';
 
-import { DropdownMenu } from './DropdownMenu';
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
+
+import { DropdownMenu } from './DropdownMenu';
 
 const DefaultStory = () => {
   return (
@@ -91,15 +91,18 @@ const DefaultStory = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/DropdownMenu',
-  component: DropdownMenu,
+  component: DropdownMenu.Root,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
   parameters: {
     chromatic: { delay: 1600 },