@dxos/react-ui 0.8.4-main.c1de068 → 0.8.4-main.c351d160a8

package/src/exemplars/generics.stories.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type ReactElement, type Ref, forwardRef } from 'react';
+
+import { type SlottableProps } from '@dxos/ui-types';
+
+import { withTheme } from '../testing';
+
+const ComponentInner = forwardRef<HTMLDivElement, ComponentProps>(({ children, ...props }, forwardedRef) => {
+  return (
+    <div {...props} ref={forwardedRef}>
+      {children}
+    </div>
+  );
+});
+
+ComponentInner.displayName = 'Component';
+
+/**
+ * Generic component pattern.
+ */
+type ComponentProps<P extends HTMLElement = any> = SlottableProps<P>;
+
+const Component = ComponentInner as <P extends HTMLElement>(
+  props: SlottableProps<P> & { ref?: Ref<P> },
+) => ReactElement;
+
+const meta = {
+  title: 'ui/react-ui-core/exemplars/generics',
+  component: Component,
+  render: (props) => <Component<HTMLDivElement> {...props} />,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Hello',
+  },
+};

package/src/exemplars/slot.stories.tsx

@@ -0,0 +1,107 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Primitive } from '@radix-ui/react-primitive';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { HTMLAttributes, type PropsWithChildren, forwardRef } from 'react';
+
+import { composableProps } from '@dxos/ui-theme';
+import { type ComposableProps, type SlottableProps, type ThemedClassName } from '@dxos/ui-types';
+
+import { withTheme } from '../testing';
+import { Slot } from '@radix-ui/react-slot';
+
+/**
+ * Composition
+ *
+ * All Radix primitive parts that render a DOM element accept an asChild prop.
+ * When asChild is set to true, Radix will not render a default DOM element, instead cloning the part's child and passing it the props and behavior required to make it functional.
+ * https://www.radix-ui.com/primitives/docs/guides/composition
+ */
+
+const Outer = forwardRef<HTMLDivElement, SlottableProps<HTMLDivElement>>(
+  ({ children, asChild, ...props }, forwardedRef) => {
+    const Comp = asChild ? Slot : Primitive.div;
+    return (
+      <Comp {...composableProps<HTMLDivElement>(props, { role: 'none' })} ref={forwardedRef}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+const Middle = forwardRef<HTMLDivElement, SlottableProps<HTMLDivElement>>(
+  ({ children, asChild, ...props }, forwardedRef) => {
+    const Comp = asChild ? Slot : Primitive.div;
+    return (
+      <Comp {...composableProps<HTMLDivElement>(props, { role: 'none' })} ref={forwardedRef}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+const Leaf = forwardRef<HTMLButtonElement, ComposableProps<HTMLButtonElement>>(
+  ({ children, ...props }, forwardedRef) => {
+    return (
+      <button {...composableProps<HTMLButtonElement>(props, { role: 'none' })} ref={forwardedRef}>
+        {children}
+      </button>
+    );
+  },
+);
+
+const TestSingle = (props: ThemedClassName<{ role?: string }>) => {
+  return (
+    <Outer asChild {...composableProps<HTMLDivElement>(props, { role: 'none' })}>
+      <Leaf>Single asChild (non-compliant — see console)</Leaf>
+    </Outer>
+  );
+};
+
+const TestNested = (props: ThemedClassName<{ role?: string }>) => {
+  return (
+    <Outer asChild {...composableProps<HTMLDivElement>(props, { role: 'none' })}>
+      <Middle asChild>
+        <Leaf>Nested asChild</Leaf>
+      </Middle>
+    </Outer>
+  );
+};
+
+const TestInner = (props: ThemedClassName<{ role?: string }>) => {
+  return (
+    <Outer asChild {...composableProps<HTMLDivElement>(props, { role: 'none' })}>
+      <Middle asChild>
+        <Leaf>
+          <div role='none'>Leaf</div>
+        </Leaf>
+      </Middle>
+    </Outer>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/exemplars/slot',
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Single: Story = {
+  render: () => <TestSingle role='listitem' classNames='border-red-500' />,
+};
+
+export const Nested: Story = {
+  render: () => <TestNested role='listitem' classNames='border-green-500' />,
+};
+
+export const Inner: Story = {
+  render: () => <TestInner role='listitem' classNames='border-blue-500' />,
+};

package/src/exemplars/tabster.stories.tsx

@@ -0,0 +1,127 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import {
+  useArrowNavigationGroup,
+  useFocusFinders,
+  useFocusableGroup,
+  useMergedTabsterAttributes_unstable,
+} from '@fluentui/react-tabster';
+import { type Decorator, type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { createTabster, disposeTabster } from 'tabster';
+
+import { Input, ScrollArea } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/ui-theme';
+
+// TODO(burdon): Factor out styles (incl. tabster debugging).
+// TODO(burdon): Implement horizontal movement between columns when column is selected.
+// TODO(burdon): Prevent tab out of app.
+
+const border =
+  'rounded-xs outline-hidden border border-subdued-separator focus:border-primary-500 focus-within:border-rose-500';
+
+const Board = forwardRef<HTMLDivElement, { columns: string[][] }>(({ columns }, ref) => {
+  const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'horizontal', memorizeCurrent: true, tabbable: true });
+
+  return (
+    <div ref={ref} tabIndex={0} {...arrowNavigationAttrs} className='flex h-full w-full overflow-hidden'>
+      <div className={mx('flex h-full overflow-x-auto p-4 gap-4')}>
+        {columns.map((column) => (
+          <Column key={column[0]} items={column} />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+const Column = forwardRef<HTMLDivElement, { items: string[] }>(({ items }, ref) => {
+  const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
+  const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'vertical', memorizeCurrent: true });
+  const tabsterAttrs = useMergedTabsterAttributes_unstable(focusableGroupAttrs, arrowNavigationAttrs);
+
+  return (
+    <ScrollArea.Root tabIndex={0} orientation='vertical' classNames={mx('w-[25rem]', border)}>
+      <ScrollArea.Viewport {...tabsterAttrs} classNames='p-4 gap-4' ref={ref}>
+        {items.map((item) => (
+          <Item key={item} value={item} />
+        ))}
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+});
+
+const Item = forwardRef<HTMLDivElement, { value: string }>(({ value }, ref) => {
+  const focusableGroupAttrs = useFocusableGroup();
+
+  return (
+    <div
+      ref={ref}
+      tabIndex={0}
+      {...focusableGroupAttrs}
+      className={mx('flex shrink-0 w-full gap-4 p-4 items-center', border)}
+    >
+      <Input.Root>
+        <Input.Checkbox />
+      </Input.Root>
+      <Input.Root>
+        <Input.TextInput defaultValue={value} />
+      </Input.Root>
+    </div>
+  );
+});
+
+const DefaultStory = () => {
+  const columns = useMemo(() => {
+    return [['A1', 'A2', 'A3'], ['B1'], ['C1', 'C2', 'C3', 'C4', 'C5', 'C6'], ['D1', 'D2']];
+  }, []);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const { findFirstFocusable } = useFocusFinders();
+  useEffect(() => {
+    if (ref.current) {
+      findFirstFocusable(ref.current)?.focus();
+    }
+  }, []);
+
+  return <Board columns={columns} ref={ref} />;
+};
+
+// TODO(burdon): This doesn't seem to be necessary or recongized; memoization doesn't work.
+const withTabster: Decorator = (Story) => {
+  useEffect(() => {
+    const tabster = createTabster(window, {
+      autoRoot: {},
+      // TODO(burdon): Not called.
+      // checkUncontrolledCompletely: (el) => {
+      //   console.log(el);
+      //   return true;
+      // },
+    });
+
+    return () => {
+      disposeTabster(tabster);
+    };
+  }, []);
+
+  return <Story />;
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'ui/react-ui-core/exemplars/tabster',
+  component: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withTabster],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/exemplars/virtualizer.stories.tsx

@@ -0,0 +1,137 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta } from '@storybook/react-vite';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+import { faker } from '@dxos/random';
+import { Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+faker.seed(999);
+
+type TestItem = {
+  name: string;
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/exemplars/virtualizer',
+  decorators: [withLayout({ layout: 'column' }), withTheme()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+const NUM_ITEMS = 500;
+
+/**
+ * https://tanstack.com/virtual/latest/docs/introduction
+ */
+export const Default = {
+  render: () => {
+    const [index, setIndex] = useState(0);
+    const items = useMemo<TestItem[]>(
+      () =>
+        Array.from({ length: NUM_ITEMS }, () => ({
+          name: faker.lorem.paragraph(),
+        })),
+      [],
+    );
+
+    const parentRef = useRef(null);
+    const [viewport, setViewport] = useState<HTMLElement | null>(null);
+    const virtualizer = useVirtualizer({
+      getScrollElement: () => viewport,
+      estimateSize: () => 40,
+      count: items.length,
+      gap: 8,
+    });
+
+    useEffect(() => {
+      virtualizer.scrollToIndex(index, { align: 'start' });
+    }, [virtualizer, index]);
+
+    const virtualItems = virtualizer.getVirtualItems();
+
+    return (
+      <Panel.Root>
+        <Panel.Toolbar asChild>
+          <ScrollToolbar items={items} index={index} setIndex={setIndex} />
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <ScrollArea.Root orientation='vertical' margin>
+            <ScrollArea.Viewport classNames='p-2' ref={setViewport}>
+              <div
+                role='none'
+                style={{
+                  position: 'relative',
+                  height: virtualizer.getTotalSize(),
+                  width: '100%',
+                }}
+                ref={parentRef}
+              >
+                {virtualItems.map((virtualItem) => (
+                  <div
+                    key={virtualItem.key}
+                    role='list'
+                    className='grid grid-cols-[3rem_1fr] overflow-hidden border border-separator rounded-xs'
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      width: '100%',
+                      transform: `translateY(${virtualItem.start}px)`,
+                    }}
+                    data-index={virtualItem.index}
+                    ref={virtualizer.measureElement}
+                  >
+                    <div className='p-1'>{virtualItem.index + 1}</div>
+                    <div className='p-1'>{items[virtualItem.index].name}</div>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Panel.Content>
+      </Panel.Root>
+    );
+  },
+};
+
+const ScrollToolbar = ({
+  items,
+  index,
+  setIndex,
+}: {
+  items: any[];
+  index: number;
+  setIndex: (index: number) => void;
+}) => {
+  return (
+    <Toolbar.Root classNames='grid grid-cols-3'>
+      <div />
+      <div className='flex justify-center gap-1'>
+        <Toolbar.IconButton icon='ph--arrow-line-left--regular' iconOnly label='start' onClick={() => setIndex(0)} />
+        <Toolbar.IconButton
+          icon='ph--arrows-out-line-horizontal--regular'
+          iconOnly
+          label='random'
+          onClick={() => setIndex(Math.floor(Math.random() * items.length))}
+        />
+        <Toolbar.IconButton
+          icon='ph--arrow-line-right--regular'
+          iconOnly
+          label='end'
+          onClick={() => setIndex(items.length - 1)}
+        />
+      </div>
+      <div className='p-1 text-right'>
+        {index + 1}/{items.length}
+      </div>
+    </Toolbar.Root>
+  );
+};

package/src/hooks/index.ts

@@ -6,6 +6,7 @@ export * from './useDensityContext';
 export * from './useElevationContext';
 export * from './useIconHref';
 export * from './useSafeArea';
+export * from './useSafeCollisionPadding';
 export * from './useTranslationsContext';
 export * from './useThemeContext';
 export * from './useVisualViewport';

package/src/hooks/useDensityContext.ts

@@ -4,7 +4,7 @@
 
 import { useContext } from 'react';
 
-import { type Density } from '@dxos/react-ui-types';
+import { type Density } from '@dxos/ui-types';
 
 import { DensityContext } from '../components';
 

package/src/hooks/useElevationContext.ts

@@ -4,7 +4,7 @@
 
 import { useContext } from 'react';
 
-import { type Elevation } from '@dxos/react-ui-types';
+import { type Elevation } from '@dxos/ui-types';
 
 import { ElevationContext } from '../components';
 

package/src/hooks/useSafeArea.ts

@@ -4,7 +4,7 @@
 
 import { useCallback, useState } from 'react';
 
-import { useResize } from '@dxos/react-hooks';
+import { useViewportResize } from '@dxos/react-hooks';
 
 export type SafeAreaPadding = Record<'top' | 'right' | 'bottom' | 'left', number>;
 
@@ -20,6 +20,7 @@ export const useSafeArea = (): SafeAreaPadding => {
       left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-left')),
     });
   }, []);
-  useResize(handleResize);
+
+  useViewportResize(handleResize);
   return padding;
 };

package/src/hooks/useVisualViewport.ts

@@ -2,11 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { useCallback, type useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
-import { useResize } from '@dxos/react-hooks';
+import { useViewportResize } from '@dxos/react-hooks';
 
-export const useVisualViewport = (deps?: Parameters<typeof useEffect>[1]) => {
+export const useVisualViewport = (deps?: Parameters<typeof useViewportResize>[1]) => {
   const [width, setWidth] = useState<number | null>(null);
   const [height, setHeight] = useState<number | null>(null);
 
@@ -17,7 +17,7 @@ export const useVisualViewport = (deps?: Parameters<typeof useEffect>[1]) => {
     }
   }, []);
 
-  useResize(handleResize);
+  useViewportResize(handleResize, deps);
 
   return { width, height };
 };

package/src/index.ts

@@ -6,8 +6,9 @@ export { type Resource, type TFunction } from 'i18next';
 export { Trans } from 'react-i18next';
 
 export * from '@dxos/react-hooks';
-export type * from '@dxos/react-ui-types';
+export * from '@dxos/ui-types';
 
 export * from './components';
 export * from './hooks';
+export * from './primitives';
 export * from './util';

package/src/playground/Controls.stories.tsx

@@ -2,12 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { Icon, Input, Select, Toggle, Toolbar } from '../components';
-import { withTheme, withSurfaceVariantsLayout } from '../testing';
+import { withLayoutVariants, withTheme } from '../testing';
 
 const DefaultStory = () => {
   const [checked, setChecked] = useState<boolean>(false);
@@ -28,12 +27,10 @@ const DefaultStory = () => {
                 <Select.Option value={'b'}>B</Select.Option>
                 <Select.Option value={'c'}>C</Select.Option>
               </Select.Viewport>
+              <Select.Arrow />
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-        {/* TODO(burdon): Highlight is cyan. */}
-        {/* TODO(burdon): Show vertical divider by default. */}
-        {/* TODO(burdon): Icon sizes should adapt to density. */}
         <Toolbar.ToggleGroup type='multiple'>
           <Toolbar.ToggleGroupItem value='a'>
             <Icon icon='ph--text-b--regular' />
@@ -45,7 +42,6 @@ const DefaultStory = () => {
             <Icon icon='ph--text-underline--regular' />
           </Toolbar.ToggleGroupItem>
         </Toolbar.ToggleGroup>
-        {/* TODO(burdon): Highlight isn't shown. */}
         <Toolbar.ToggleGroup type='single' defaultValue='a'>
           <Toolbar.ToggleGroupItem value='a'>
             <Icon icon='ph--file-ts--regular' />
@@ -59,11 +55,9 @@ const DefaultStory = () => {
             <Icon icon='ph--bug--regular' />
           </Toggle>
         </Toolbar.Button>
-        {/* TODO(burdon): Should not be 'is-full' by default. */}
         <Input.Root>
           <Input.TextInput placeholder='Enter text...' />
         </Input.Root>
-        {/* TODO(burdon): Checkbox collapsed. */}
         <Input.Root>
           <Input.Checkbox checked={checked} onCheckedChange={(value) => setChecked(!!value)} />
           <Input.Label>Checkbox</Input.Label>
@@ -80,11 +74,14 @@ const DefaultStory = () => {
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/Playground/Controls',
+const meta = {
+  title: 'ui/react-ui-core/playground/Controls',
   render: DefaultStory,
-  decorators: [withSurfaceVariantsLayout(), withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme(), withLayoutVariants()],
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {};
+export const Default: Story = {};