@dxos/react-ui 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/src/components/List/Treegrid.theme.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import type { ComponentFunction, Theme } from '@dxos/ui-types';
+
+export type TreegridStyleProps = Partial<{
+  level: number;
+  indent: boolean;
+}>;
+
+const levelStyles = new Map<number, string>([
+  [1, '[&>.indent:first-of-type]:pl-0 font-medium'],
+  [2, '[&>.indent:first-of-type]:pl-0'],
+  [3, '[&>.indent:first-of-type]:pl-1'],
+  [4, '[&>.indent:first-of-type]:pl-2'],
+  [5, '[&>.indent:first-of-type]:pl-3'],
+  [6, '[&>.indent:first-of-type]:pl-4'],
+  [7, '[&>.indent:first-of-type]:pl-5'],
+  [8, '[&>.indent:first-of-type]:pl-6'],
+]);
+
+const root: ComponentFunction<TreegridStyleProps> = (_, ...etc) => mx('grid', ...etc);
+
+const row: ComponentFunction<TreegridStyleProps> = ({ level = 1 }, ...etc) =>
+  mx(levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
+
+const cell: ComponentFunction<TreegridStyleProps> = ({ indent }, ...etc) => mx(indent && 'indent', ...etc);
+
+export const treegridTheme: Theme<TreegridStyleProps> = {
+  root,
+  row,
+  cell,
+};

package/src/components/List/Treegrid.tsx

@@ -0,0 +1,187 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+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 CSSProperties,
+  type ComponentPropsWithRef,
+  type KeyboardEvent,
+  forwardRef,
+  useCallback,
+} from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { composable, composableProps } from '../../util';
+import { type ThemedClassName } from '../../util';
+
+// TODO(thure): https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treegrid_role
+
+const TREEGRID_ROW_NAME = 'Treegrid.Row';
+
+type TreegridRowScopedProps<P> = P & { __treegridRowScope?: Scope };
+
+const [createTreegridRowContext, createTreegridRowScope] = createContextScope(TREEGRID_ROW_NAME, []);
+
+type TreegridRowContextValue = {
+  open?: boolean;
+  onOpenChange?: (nextOpen: boolean) => void;
+};
+
+const [TreegridRowProvider, useTreegridRowContext] =
+  createTreegridRowContext<TreegridRowContextValue>(TREEGRID_ROW_NAME);
+
+// TODO(burdon): Replace with functions.
+export const TREEGRID_PATH_SEPARATOR = '~';
+export const TREEGRID_PARENT_OF_SEPARATOR = ' ';
+
+type TreegridRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
+  gridTemplateColumns?: CSSProperties['gridTemplateColumns'];
+  asChild?: boolean;
+};
+
+const TreegridRoot = composable<HTMLDivElement, TreegridRootProps>(
+  ({ asChild, classNames, children, style, gridTemplateColumns, onKeyDown: onKeyDownProp, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const { className, role: _role, ...rest } = composableProps<HTMLDivElement>(props, { classNames });
+    const Comp = asChild ? Slot : Primitive.div;
+    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;
+          }
+        }
+        onKeyDownProp?.(event);
+      },
+      [findFirstFocusable, onKeyDownProp],
+    );
+
+    return (
+      <Comp
+        role='treegrid'
+        {...rest}
+        className={tx('treegrid.root', {}, className)}
+        style={{ ...style, gridTemplateColumns }}
+        onKeyDown={handleKeyDown}
+        ref={forwardedRef}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+type TreegridRowProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
+  id: string;
+  asChild?: boolean;
+  parentOf?: string;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?(open: boolean): void;
+};
+
+const TreegridRow = forwardRef<HTMLDivElement, TreegridRowScopedProps<TreegridRowProps>>(
+  (
+    {
+      __treegridRowScope,
+      asChild,
+      classNames,
+      children,
+      id,
+      parentOf,
+      open: propsOpen,
+      defaultOpen,
+      onOpenChange: propsOnOpenChange,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const { tx } = useThemeContext();
+    const Comp = asChild ? Slot : Primitive.div;
+    const pathParts = id.split(TREEGRID_PATH_SEPARATOR);
+    const level = pathParts.length - 1;
+    const [open, onOpenChange] = useControllableState({
+      prop: propsOpen,
+      onChange: propsOnOpenChange,
+      defaultProp: defaultOpen,
+    });
+
+    return (
+      <TreegridRowProvider open={open} onOpenChange={onOpenChange} scope={__treegridRowScope}>
+        <Comp
+          role='row'
+          aria-level={level}
+          className={tx('treegrid.row', { level }, classNames)}
+          {...(parentOf && { 'aria-expanded': open, 'aria-owns': parentOf })}
+          {...props}
+          id={id}
+          ref={forwardedRef}
+        >
+          {children}
+        </Comp>
+      </TreegridRowProvider>
+    );
+  },
+);
+
+type TreegridCellProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & { indent?: boolean };
+
+const TreegridCell = forwardRef<HTMLDivElement, TreegridCellProps>(
+  ({ classNames, children, indent, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <div role='gridcell' className={tx('treegrid.cell', { indent }, classNames)} {...props} ref={forwardedRef}>
+        {children}
+      </div>
+    );
+  },
+);
+
+export type { TreegridRootProps, TreegridRowProps };
+
+export const Treegrid = {
+  Root: TreegridRoot,
+  Row: TreegridRow,
+  Cell: TreegridCell,
+};

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

@@ -2,59 +2,83 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
-
+import { withLayout, withTheme } from '../../testing';
+import { IconButton } from '../Button';
+import { Toolbar } from '../Toolbar';
 import { Main, 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 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 />
+          <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='w-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 />
+          <h1>Complementary</h1>
+        </Toolbar.Root>
       </Main.ComplementarySidebar>
     </Main.Root>
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/Main',
+const meta = {
+  title: 'ui/react-ui-core/components/Main',
   component: Main.Root,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} 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.theme.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction } from '@dxos/ui-types';
+
+import { mainPaddingTransitions } from './constants';
+
+const padding = 'dx-main-content-padding';
+
+export type MainStyleProps = Partial<{
+  bounce: boolean;
+  handlesFocus: boolean;
+}>;
+
+const content: ComponentFunction<MainStyleProps> = ({ bounce }, ...etc) =>
+  mx(padding, mainPaddingTransitions, bounce && 'dx-main-bounce-layout', 'dx-focus-ring-main', ...etc);
+
+const sidebar: ComponentFunction<MainStyleProps> = (_, ...etc) =>
+  mx('dx-main-sidebar', 'dx-focus-ring-inset-over-all', ...etc);
+
+const overlay: ComponentFunction<MainStyleProps> = (_, ...etc) => mx('dx-main-overlay', ...etc);
+
+export const mainTheme = {
+  content,
+  sidebar,
+  overlay,
+};