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

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,113 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type FC, type ReactElement, type SVGProps, forwardRef } from 'react';
+
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { withTheme } from '../../testing';
+
+import { Icon } from './Icon';
+
+/**
+ * Create icon from serializable data.
+ * https://github.com/phosphor-icons/react#custom-icons
+ * https://github.com/phosphor-icons/core/tree/main/assets
+ */
+const createIcon = ({
+  name,
+  weights,
+}: {
+  name: string;
+  weights: Record<string, SVGProps<SVGPathElement>[]>;
+}): FC<IconProps> => {
+  const CustomIcon = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+    <IconBase
+      ref={ref}
+      {...props}
+      weights={
+        new Map<IconWeight, ReactElement>(
+          Object.entries(weights).map(
+            ([key, paths]) =>
+              [
+                key,
+                <>
+                  {paths.map((props, i) => (
+                    <path key={`${key}-${i}`} {...props} />
+                  ))}
+                </>,
+              ] as [IconWeight, ReactElement],
+          ),
+        )
+      }
+    />
+  ));
+
+  CustomIcon.displayName = name;
+  return CustomIcon;
+};
+
+const DefaultStory = ({ CustomIcon }: { CustomIcon: FC<IconProps> }) => {
+  return (
+    <div className='grid grid-cols-2 gap-8'>
+      <CustomIcon weight={'regular'} className={mx(getSize(16))} />
+      <Icon icon='ph--github-logo--regular' classNames={mx(getSize(16))} />
+    </div>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/Icon',
+  render: DefaultStory,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    CustomIcon: createIcon({
+      name: 'GithubLogo',
+      weights: {
+        // https://github.com/phosphor-icons/core/tree/main/assets
+        // <path d="M119.83,56A52,52,0,0,0,76,32a51.92,51.92,0,0,0-3.49,44.7A49.28,49.28,0,0,0,64,104v8a48,48,0,0,0,48,48h48a48,48,0,0,0,48-48v-8a49.28,49.28,0,0,0-8.51-27.3A51.92,51.92,0,0,0,196,32a52,52,0,0,0-43.83,24Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+        // <path d="M104,232V192a32,32,0,0,1,32-32h0a32,32,0,0,1,32,32v40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+        // <path d="M104,208H72a32,32,0,0,1-32-32A32,32,0,0,0,8,144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+        regular: [
+          {
+            d: 'M119.83,56A52,52,0,0,0,76,32a51.92,51.92,0,0,0-3.49,44.7A49.28,49.28,0,0,0,64,104v8a48,48,0,0,0,48,48h48a48,48,0,0,0,48-48v-8a49.28,49.28,0,0,0-8.51-27.3A51.92,51.92,0,0,0,196,32a52,52,0,0,0-43.83,24Z',
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: '16',
+          },
+          {
+            d: 'M104,232V192a32,32,0,0,1,32-32h0a32,32,0,0,1,32,32v40',
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: '16',
+          },
+          {
+            d: 'M104,208H72a32,32,0,0,1-32-32A32,32,0,0,0,8,144',
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: '16',
+          },
+        ],
+      },
+    }),
+  },
+};

package/src/components/Icon/Icon.tsx

@@ -16,7 +16,7 @@ export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.s
 };
 
 export const Icon = memo(
-  forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
+  forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size = 4, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const href = useIconHref(icon);
     return (

package/src/components/Input/Input.stories.tsx

@@ -2,12 +2,10 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { activeSurface, baseSurface, modalSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
+import { baseSurface, modalSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
 import { type MessageValence } from '@dxos/react-ui-types';
 
 import { withTheme } from '../../testing';
@@ -76,10 +74,10 @@ const Wrapper = ({
 const DefaultStory = (props: BaseProps) => {
   return (
     <div className='space-b-4'>
-      <div className={mx(baseSurface, 'p-4')}>
+      <div className={mx(baseSurface, 'p-4 rounded-md')}>
         <Wrapper {...props} />
       </div>
-      <div className={mx(activeSurface, 'p-4 rounded-md', surfaceShadow({ elevation: 'positioned' }))}>
+      <div className={mx('bg-cardSurface', 'p-4 rounded-md', surfaceShadow({ elevation: 'positioned' }))}>
         <Wrapper {...props} />
       </div>
       <div className={mx(modalSurface, 'p-4 rounded-md', surfaceShadow({ elevation: 'dialog' }))}>
@@ -89,13 +87,12 @@ const DefaultStory = (props: BaseProps) => {
   );
 };
 
-const meta: Meta<BaseProps> = {
+const meta = {
   title: 'ui/react-ui-core/Input',
-  component: Input.Root,
+  component: Input.Root as any,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
@@ -222,10 +219,10 @@ export const Checkbox: Story = {
   },
 };
 
-export const Switch = {
+export const Switch: Story = {
   args: {
     kind: 'switch',
     label: 'This is a switch',
-    description: 'It’s either off... or on.',
+    description: "It's either off... or on.",
   },
 };

package/src/components/Input/Input.tsx

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type IconWeight } from '@phosphor-icons/react';
 import { Root as CheckboxPrimitive, type CheckboxProps as CheckboxPrimitiveProps } from '@radix-ui/react-checkbox';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, { type ComponentPropsWithRef, type ForwardRefExoticComponent, forwardRef, useCallback } from 'react';
@@ -230,7 +229,9 @@ const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>
   },
 );
 
-type CheckboxProps = ThemedClassName<Omit<CheckboxPrimitiveProps, 'children'>> & { size?: Size; weight?: IconWeight };
+type CheckboxProps = ThemedClassName<Omit<CheckboxPrimitiveProps, 'children'>> & {
+  size?: Size;
+};
 
 const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
   HTMLButtonElement,
@@ -243,7 +244,6 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
       defaultChecked: propsDefaultChecked,
       onCheckedChange: propsOnCheckedChange,
       size,
-      weight = 'bold',
       classNames,
       ...props
     },

package/src/components/Link/Link.stories.tsx

@@ -2,17 +2,20 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withTheme } from '../../testing';
 
 import { Link } from './Link';
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Link',
   component: Link,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-} as any;
+} satisfies Meta<typeof Link>;
 
-export const Default = { args: { children: 'Hello', href: '#' } };
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { children: 'Hello', href: '#' } };

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

@@ -2,12 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { DndContext, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core';
 import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type ReactNode, useState } from 'react';
 
 import {
@@ -24,12 +23,15 @@ import { Icon } from '../Icon';
 
 import { List, ListItem, type ListScopedProps } from './List';
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/List',
   component: List,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof List>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 const UniformListItem = ({ id, text }: { id: string; text: string }) => {
   const { attributes, listeners, setNodeRef, transform } = useSortable({ id });
@@ -52,7 +54,7 @@ const UniformListItem = ({ id, text }: { id: string; text: string }) => {
   );
 };
 
-export const UniformSizeDraggable = {
+export const UniformSizeDraggable: Story = {
   render: ({ ...args }) => {
     const [items, setItems] = useState(
       [...Array(12)].map((_, index) => ({
@@ -116,7 +118,7 @@ const ManySizesDraggableListItem = ({
   );
 };
 
-export const ManySizesDraggable = {
+export const ManySizesDraggable: Story = {
   render: ({ ...args }) => {
     const [items, setItems] = useState(
       [...Array(12)].map((_, index) => ({
@@ -164,7 +166,7 @@ export const ManySizesDraggable = {
   args: {},
 };
 
-export const Collapsible = {
+export const Collapsible: Story = {
   render: ({ ...args }) => {
     const [items, _setItems] = useState(
       [...Array(12)].map((_, index) => ({
@@ -193,11 +195,10 @@ export const Collapsible = {
   },
   args: {
     variant: 'unordered',
-    // toggleOpenLabel: 'Open/close storybook list item', // TODO(burdon): ???
   },
 };
 
-export const SelectableListbox = {
+export const SelectableListbox: Story = {
   render: () => {
     const [selectedId, setSelectedId] = useState<string>();
     const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'vertical' });
@@ -224,11 +225,11 @@ export const SelectableListbox = {
             key={id}
             tabIndex={0}
             selected={selectedId === id}
-            classNames={mx('items-center', ghostHover, ghostSelected, ghostSelectedTrackingInterFromNormal)}
+            classNames={mx(ghostHover, ghostSelected, ghostSelectedTrackingInterFromNormal)}
             onClick={() => setSelectedId(id)}
             onKeyUp={(event) => handleKeyUp(event, id)}
           >
-            <ListItem.Heading classNames='grow'>Lorem ipsum dolor sit amet</ListItem.Heading>
+            <ListItem.Heading classNames='flex pli-1 items-center grow truncate'>{text}</ListItem.Heading>
           </ListItem.Root>
         ))}
       </List>

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

@@ -107,7 +107,6 @@ const ListItemOpenTrigger = forwardRef<HTMLButtonElement, ListItemOpenTriggerPro
     const { tx } = useThemeContext();
     const density = useDensityContext();
     const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
-    const iconName = open ? 'ph--caret-down--bold' : 'ph--caret-right--bold';
     return (
       <ListPrimitiveItemOpenTrigger
         {...props}
@@ -115,7 +114,11 @@ const ListItemOpenTrigger = forwardRef<HTMLButtonElement, ListItemOpenTriggerPro
         ref={forwardedRef}
       >
         {children || (
-          <Icon icon={iconName} classNames={tx('list.item.openTriggerIcon', 'list__listItem__openTrigger__icon', {})} />
+          <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,8 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
@@ -56,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}/Treegrid.stories.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { faker } from '@dxos/random';
@@ -87,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[] = [
@@ -142,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 { 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, 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,12 +2,11 @@
 // 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 { Button } from '../Button';
 
 import { Main, useSidebars } from './Main';
 
@@ -46,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',
 };