@dxos/react-ui 0.8.4-main.84f28bd → 0.8.4-main.937b3ca

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 → Menu}/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 → Menu}/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 → Menu}/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 },