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

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,58 +2,173 @@
 // 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 { withLayout, withTheme } from '../../testing';
+import { IconButton } from '../Button';
+import { Input } from '../Input';
+import { Toolbar } from '../Toolbar';
+
+import { Main, useDynamicDrawer, useSidebars } from './Main';
 
 type StoryMainArgs = {};
 
-const NavigationSidebarToggle = () => {
+const NavigationSidebarToggle = ({ close }: { close?: boolean }) => {
   const { toggleNavigationSidebar } = useSidebars('StoryMain__SidebarToggle');
-  return <Button onClick={toggleNavigationSidebar}>Toggle navigation sidebar</Button>;
+  return (
+    <IconButton
+      icon={close ? 'ph--caret-left--regular' : 'ph--caret-right--regular'}
+      iconOnly
+      label='Toggle navigation sidebar'
+      onClick={toggleNavigationSidebar}
+    />
+  );
 };
 
-const ComplementarySidebarToggle = () => {
+const ComplementarySidebarToggle = ({ close }: { close?: boolean }) => {
   const { toggleComplementarySidebar } = useSidebars('StoryMain__SidebarToggle');
-  return <Button onClick={toggleComplementarySidebar}>Toggle complementary sidebar</Button>;
+  return (
+    <IconButton
+      icon={close ? 'ph--caret-right--regular' : 'ph--caret-left--regular'}
+      iconOnly
+      label='Toggle complementary sidebar'
+      onClick={toggleComplementarySidebar}
+    />
+  );
+};
+
+const DrawerToggle = ({ close }: { close?: boolean }) => {
+  const { toggleDrawer } = useSidebars('StoryMain__DrawerToggle');
+  return (
+    <IconButton
+      icon={close ? 'ph--caret-down--regular' : 'ph--caret-up--regular'}
+      iconOnly
+      label='Toggle drawer'
+      onClick={toggleDrawer}
+    />
+  );
+};
+
+const DrawerState = () => {
+  const { drawerState } = useSidebars('StoryMain__DrawerStateDisplay');
+  return (
+    <div className='flex items-center gap-2'>
+      <span>Drawer</span>
+      <span>({drawerState})</span>
+      <span>[{window.innerHeight}]</span>
+    </div>
+  );
 };
 
 const DefaultStory = (_args: StoryMainArgs) => {
   return (
-    <Main.Root>
+    <Main.Root defaultComplementarySidebarState='closed' defaultNavigationSidebarState='closed'>
       <Main.Overlay />
-      <Main.NavigationSidebar label='Navigation' classNames='p-4'>
-        <p>Navigation sidebar content, hi!</p>
-        <NavigationSidebarToggle />
+      <Main.NavigationSidebar label='Navigation'>
+        <Toolbar.Root>
+          <h1>Navigation</h1>
+          <Toolbar.Separator variant='gap' classNames='grow' />
+          <NavigationSidebarToggle close />
+        </Toolbar.Root>
       </Main.NavigationSidebar>
-      <Main.Content>
-        <div role='group' className='m-2 p-4 bg-neutral-50 dark:bg-neutral-950 rounded space-y-2'>
-          <ComplementarySidebarToggle />
-          <p>Main content, hello!</p>
+      <Main.Content classNames='is-full'>
+        <Toolbar.Root>
           <NavigationSidebarToggle />
-        </div>
+          <div className='flex items-center grow justify-center'>Main</div>
+          <ComplementarySidebarToggle />
+        </Toolbar.Root>
       </Main.Content>
-      <Main.ComplementarySidebar label='Complementary content' classNames='p-4'>
-        <p>Complementary sidebar content, hello!</p>
-        <ComplementarySidebarToggle />
+      <Main.ComplementarySidebar label='Complementary'>
+        <Toolbar.Root>
+          <ComplementarySidebarToggle close />
+          <Toolbar.Separator variant='gap' classNames='grow' />
+          <h1>Complementary</h1>
+        </Toolbar.Root>
       </Main.ComplementarySidebar>
     </Main.Root>
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Main',
   component: Main.Root,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
+  decorators: [withTheme, withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    chromatic: {
+      disableSnapshot: false,
+    },
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+const DrawerStory = (_args: StoryMainArgs) => {
+  return (
+    <Main.Root>
+      <Main.Overlay />
+      <DrawerStoryInner />
+    </Main.Root>
+  );
+};
+
+const DrawerStoryInner = () => {
+  useDynamicDrawer('DrawerStoryInner');
+
+  return (
+    <>
+      <Main.Content classNames='flex flex-col is-full overflow-hidden'>
+        <Toolbar.Root classNames='pli-2'>
+          <h1>Main Content</h1>
+          <Toolbar.Separator variant='gap' classNames='grow' />
+          <DrawerToggle />
+        </Toolbar.Root>
+        <div className='flex flex-col bs-full overflow-y-auto p-2'>
+          <p className='text-sm text-description'>
+            The drawer is mutually exclusive with sidebars and is intended for mobile apps.
+          </p>
+          <div className='plb-2 space-y-2'>
+            {Array.from({ length: 50 }).map((_, i) => (
+              <p key={i}>Line {i + 1}</p>
+            ))}
+          </div>
+        </div>
+      </Main.Content>
+      <Main.Drawer label='Drawer' classNames='grid grid-rows-[min-content_1fr_min-content]'>
+        <Toolbar.Root classNames='pli-2'>
+          <DrawerState />
+          <Toolbar.Separator variant='gap' classNames='grow' />
+          <DrawerToggle close />
+        </Toolbar.Root>
+        <div className='p-2 overflow-y-auto'>
+          <p className='text-sm text-description'>
+            On mobile devices, the drawer automatically switches to fullscreenwhen the keyboard appears.
+          </p>
+          <div className='plb-2 space-y-2'>
+            {Array.from({ length: 50 }).map((_, i) => (
+              <p key={i}>Line {i + 1}</p>
+            ))}
+          </div>
+        </div>
+        <div className='p-2 border-bs border-separator'>
+          <Input.Root>
+            <Input.TextInput autoFocus placeholder='Search' />
+          </Input.Root>
+        </div>
+      </Main.Drawer>
+    </>
+  );
 };
 
-export const Default = {
+export const WithDrawer: Story = {
+  render: DrawerStory,
   args: {},
-  layout: 'fullscreen',
 };