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

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@dxos/react-ui-tabs",
-  "version": "0.8.4-main.fd6878d",
+  "version": "0.8.4-staging.60fe92afc8",
   "description": "Components for facilitating a Tabs pattern.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
@@ -17,41 +21,37 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@fluentui/react-tabster": "^9.24.2",
-    "@preact-signals/safe-react": "^0.9.0",
+    "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-primitive": "2.0.2",
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-tabs": "1.1.3",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/react-ui-attention": "0.8.4-main.fd6878d",
-    "@dxos/util": "0.8.4-main.fd6878d"
+    "@dxos/react-ui-attention": "0.8.4-staging.60fe92afc8",
+    "@dxos/util": "0.8.4-staging.60fe92afc8"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/random": "0.8.4-main.fd6878d",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
-    "@dxos/storybook-utils": "0.8.4-main.fd6878d"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^8.0.16",
+    "@dxos/react-ui": "0.8.4-staging.60fe92afc8",
+    "@dxos/storybook-utils": "0.8.4-staging.60fe92afc8",
+    "@dxos/ui-theme": "0.8.4-staging.60fe92afc8",
+    "@dxos/random": "0.8.4-staging.60fe92afc8"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-staging.60fe92afc8",
+    "@dxos/ui-theme": "0.8.4-staging.60fe92afc8"
   },
   "publishConfig": {
     "access": "public"

package/src/Tabs.stories.tsx

@@ -2,64 +2,76 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { faker } from '@dxos/random';
-import { Dialog, Icon } from '@dxos/react-ui';
-import { withTheme } from '@dxos/storybook-utils';
+import { random } from '@dxos/random';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/ui-theme';
 
-import { Tabs as NaturalTabs } from './Tabs';
+import { Tabs, TabsRootProps } from './Tabs';
 
-faker.seed(1234);
+random.seed(1234);
+
+const DefaultStory = ({ orientation }: TabsRootProps) => {
+  return (
+    <Tabs.Root orientation={orientation} defaultValue={Object.keys(content)[3]} defaultActivePart='list'>
+      <Tabs.Viewport
+        classNames={mx(
+          'w-full overflow-hidden grid',
+          orientation === 'vertical' && 'grid-cols-[minmax(min-content,1fr)_3fr]',
+        )}
+      >
+        <Tabs.Tablist>
+          {Object.entries(content).map(([id, { title }]) => (
+            <Tabs.Tab key={id} value={id}>
+              {title}
+            </Tabs.Tab>
+          ))}
+        </Tabs.Tablist>
+        <div className='dx-container'>
+          {Object.entries(content).map(([id, { panel }]) => (
+            <Tabs.Panel key={id} value={id}>
+              <p className='px-1'>{panel}</p>
+            </Tabs.Panel>
+          ))}
+        </div>
+      </Tabs.Viewport>
+    </Tabs.Root>
+  );
+};
 
 const content = [...Array(24)].reduce((acc: { [key: string]: { title: string; panel: string } }, _, index) => {
   acc[`t${index}`] = {
-    title: faker.commerce.productName(),
-    panel: faker.lorem.paragraphs(5),
+    title: random.commerce.productName(),
+    panel: random.lorem.paragraphs(5),
   };
   return acc;
 }, {});
 
-export default {
+const meta = {
   title: 'ui/react-ui-tabs/Tabs',
-  component: NaturalTabs.Root,
-  decorators: [withTheme],
-  // parameters: { translations },
+  component: Tabs.Root,
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// TODO(burdon): Scrolling.
+export const Horizontal: Story = {
+  args: {
+    orientation: 'horizontal',
+  },
 };
 
-export const Tabs = {
-  render: () => {
-    return (
-      <Dialog.Root open>
-        <Dialog.Overlay blockAlign='start'>
-          <Dialog.Content classNames='is-[calc(100dvw-4rem)] !max-is-full'>
-            <NaturalTabs.Root orientation='vertical' defaultValue={Object.keys(content)[3]} defaultActivePart='list'>
-              <NaturalTabs.Viewport>
-                <NaturalTabs.Tablist>
-                  {Object.entries(content).map(([id, { title }]) => {
-                    return (
-                      <NaturalTabs.Tab key={id} value={id}>
-                        {title}
-                      </NaturalTabs.Tab>
-                    );
-                  })}
-                </NaturalTabs.Tablist>
-                {Object.entries(content).map(([id, { panel }]) => {
-                  return (
-                    <NaturalTabs.Tabpanel key={id} value={id} classNames='m-1'>
-                      <NaturalTabs.BackButton density='fine'>
-                        <Icon icon='ph--arrow-left--bold' size={4} />
-                        <span>Back to tab list</span>
-                      </NaturalTabs.BackButton>
-                      <p className='pli-1'>{panel}</p>
-                    </NaturalTabs.Tabpanel>
-                  );
-                })}
-              </NaturalTabs.Viewport>
-            </NaturalTabs.Root>
-          </Dialog.Content>
-        </Dialog.Overlay>
-      </Dialog.Root>
-    );
+export const Vertical: Story = {
+  args: {
+    orientation: 'vertical',
   },
 };

package/src/Tabs.tsx

@@ -6,149 +6,164 @@ import { useArrowNavigationGroup, useFocusFinders, useFocusableGroup } from '@fl
 import { createContext } from '@radix-ui/react-context';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, useLayoutEffect, useRef } from 'react';
+import React, { type ComponentPropsWithoutRef, type MouseEvent, forwardRef, useCallback, useLayoutEffect } from 'react';
 
-import { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';
+import {
+  Button,
+  type ButtonProps,
+  IconButton,
+  type IconButtonProps,
+  type ThemedClassName,
+  useForwardedRef,
+} from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
+
+// TODO(burdon): Move to @dxos/react-ui.
 
 type TabsActivePart = 'list' | 'panel';
 
 const TABS_NAME = 'Tabs';
 
+//
+// Context
+//
+
 type TabsContextValue = {
   activePart: TabsActivePart;
   setActivePart: (nextActivePart: TabsActivePart) => void;
   attendableId?: string;
-  verticalVariant?: 'stateful' | 'stateless';
 } & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;
 
 const [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {
+  orientation: 'vertical',
   activePart: 'list',
   setActivePart: () => {},
-  orientation: 'vertical',
 });
 
+//
+// Root
+//
+
 type TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &
-  Partial<Pick<TabsContextValue, 'activePart' | 'verticalVariant' | 'attendableId'>> &
-  Partial<{
-    onActivePartChange: (nextActivePart: TabsActivePart) => void;
-    defaultActivePart: TabsActivePart;
-  }>;
-
-const TabsRoot = ({
-  children,
-  classNames,
-  activePart: propsActivePart,
-  onActivePartChange,
-  defaultActivePart,
-  value: propsValue,
-  onValueChange,
-  defaultValue,
-  orientation = 'vertical',
-  activationMode = 'manual',
-  verticalVariant = 'stateful',
-  attendableId,
-  ...props
-}: TabsRootProps) => {
-  // TODO(thure): Without these, we get Groupper/Mover `API used before initialization`, but why?
-  const _1 = useArrowNavigationGroup();
-  const _2 = useFocusableGroup();
-  const [activePart = 'list', setActivePart] = useControllableState({
-    prop: propsActivePart,
-    onChange: onActivePartChange,
-    defaultProp: defaultActivePart,
-  });
-
-  const [value, setValue] = useControllableState({
-    prop: propsValue,
-    onChange: onValueChange,
-    defaultProp: defaultValue,
-  });
-
-  const handleValueChange = useCallback(
-    (nextValue: string) => {
-      setActivePart('panel');
-      setValue(nextValue);
+  Partial<
+    Pick<TabsContextValue, 'activePart' | 'attendableId'> & {
+      onActivePartChange: (nextActivePart: TabsActivePart) => void;
+      defaultActivePart: TabsActivePart;
+    }
+  >;
+
+const TabsRoot = forwardRef<HTMLDivElement, TabsRootProps>(
+  (
+    {
+      children,
+      classNames,
+      activePart: propsActivePart,
+      onActivePartChange,
+      defaultActivePart,
+      value: propsValue,
+      onValueChange,
+      defaultValue,
+      orientation = 'vertical',
+      activationMode = 'manual',
+      attendableId,
+      ...props
     },
-    [value],
-  );
+    forwardedRef,
+  ) => {
+    const tabsRoot = useForwardedRef(forwardedRef);
 
-  const { findFirstFocusable } = useFocusFinders();
-  const tabsRoot = useRef<HTMLDivElement | null>(null);
+    // TODO(thure): Without these, we get Groupper/Mover `API used before initialization`, but why?
+    const _1 = useArrowNavigationGroup();
+    const _2 = useFocusableGroup();
+    const [activePart = 'list', setActivePart] = useControllableState({
+      prop: propsActivePart,
+      onChange: onActivePartChange,
+      defaultProp: defaultActivePart,
+    });
 
-  useLayoutEffect(() => {
-    if (tabsRoot.current) {
-      findFirstFocusable(tabsRoot.current)?.focus();
-    }
-  }, [activePart]);
+    const [value, setValue] = useControllableState({
+      prop: propsValue,
+      onChange: onValueChange,
+      defaultProp: defaultValue,
+    });
 
-  return (
-    <TabsContextProvider
-      orientation={orientation}
-      activePart={activePart}
-      setActivePart={setActivePart}
-      value={value}
-      attendableId={attendableId}
-      verticalVariant={verticalVariant}
-    >
-      <TabsPrimitive.Root
-        activationMode={activationMode}
-        data-active={activePart}
+    const handleValueChange = useCallback(
+      (nextValue: string) => {
+        setActivePart('panel');
+        setValue(nextValue);
+      },
+      [value],
+    );
+
+    const { findFirstFocusable } = useFocusFinders();
+
+    useLayoutEffect(() => {
+      if (tabsRoot.current) {
+        findFirstFocusable(tabsRoot.current)?.focus();
+      }
+    }, [activePart]);
+
+    return (
+      <TabsContextProvider
         orientation={orientation}
-        {...props}
+        activePart={activePart}
+        setActivePart={setActivePart}
         value={value}
-        onValueChange={handleValueChange}
-        className={mx(
-          'overflow-hidden',
-          orientation === 'vertical' &&
-            verticalVariant === 'stateful' &&
-            '[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible',
-          classNames,
-        )}
-        ref={tabsRoot}
+        attendableId={attendableId}
       >
-        {children}
-      </TabsPrimitive.Root>
-    </TabsContextProvider>
-  );
-};
+        <TabsPrimitive.Root
+          {...props}
+          className={mx('overflow-hidden', classNames)}
+          orientation={orientation}
+          activationMode={activationMode}
+          data-active={activePart}
+          value={value}
+          onValueChange={handleValueChange}
+          ref={tabsRoot}
+        >
+          {children}
+        </TabsPrimitive.Root>
+      </TabsContextProvider>
+    );
+  },
+);
+
+TabsRoot.displayName = 'Tabs.Root';
+
+//
+// Viewport
+//
 
 type TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
 
 const TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) => {
-  const { orientation, activePart, verticalVariant } = useTabsContext('TabsViewport');
+  const { activePart } = useTabsContext('TabsViewport');
   return (
-    <div
-      role='none'
-      {...props}
-      data-active={activePart}
-      className={mx(
-        orientation === 'vertical' &&
-          verticalVariant === 'stateful' && [
-            'grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]',
-            '@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1',
-          ],
-        classNames,
-      )}
-    >
+    <div {...props} data-active={activePart} className={mx(classNames)}>
       {children}
     </div>
   );
 };
 
+TabsViewport.displayName = 'Tabs.Viewport';
+
+//
+// Tablist
+//
+
 type TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;
 
 const TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {
-  const { orientation, verticalVariant } = useTabsContext('TabsTablist');
+  const { orientation } = useTabsContext('TabsTablist');
   return (
     <TabsPrimitive.List
       {...props}
+      data-arrow-keys={orientation === 'vertical' ? 'up down' : 'left right'}
       className={mx(
-        'max-bs-full is-full',
-        // NOTE: Padding should be common to Toolbar.
-        orientation === 'vertical' ? 'overflow-y-auto' : 'flex items-stretch justify-start overflow-x-auto p-1 gap-1',
-        orientation === 'vertical' && verticalVariant === 'stateful' && 'place-self-start p-1',
+        'max-h-full w-full',
+        // TODO(burdon): Should be embeddable inside Toolbar (if horizontal).
+        orientation === 'vertical' ? 'overflow-y-auto' : 'flex p-1 gap-1 items-stretch justify-start overflow-x-auto',
         classNames,
       )}
     >
@@ -157,6 +172,12 @@ const TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {
   );
 };
 
+TabsTablist.displayName = 'Tabs.Tablist';
+
+//
+// BackButton
+//
+
 const TabsBackButton = ({ onClick, classNames, ...props }: ButtonProps) => {
   const { setActivePart } = useTabsContext('TabsBackButton');
   const handleClick = useCallback(
@@ -164,27 +185,38 @@ const TabsBackButton = ({ onClick, classNames, ...props }: ButtonProps) => {
       setActivePart('list');
       return onClick?.(event);
     },
-    [onClick, setActivePart],
+    [setActivePart, onClick],
   );
 
-  return <Button {...props} classNames={['is-full text-start @md:hidden mbe-2', classNames]} onClick={handleClick} />;
+  return <Button {...props} classNames={['@md:hidden text-start', classNames]} onClick={handleClick} />;
 };
 
+TabsBackButton.displayName = 'Tabs.BackButton';
+
+//
+// TabGroupHeading
+//
+
 type TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;
 
-const TabsTabGroupHeading = ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => {
-  return (
-    <h2 {...props} className={mx('mlb-1 pli-2 text-sm text-unAccent', classNames)}>
-      {children}
-    </h2>
-  );
-};
+const TabsTabGroupHeading = ({ children, classNames, ...props }: TabsTabGroupHeadingProps) => (
+  <h2 {...props} className={mx('my-1 px-2 text-sm text-un-accent', classNames)}>
+    {children}
+  </h2>
+);
+
+TabsTabGroupHeading.displayName = 'Tabs.TabGroupHeading';
+
+//
+// Tab
+//
 
 type TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;
 
 const TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProps) => {
   const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');
   const { hasAttention } = useAttention(attendableId);
+
   const handleClick = useCallback(
     // NOTE: This handler is only called if the tab is *already active*.
     (event: MouseEvent<HTMLButtonElement>) => {
@@ -197,19 +229,16 @@ const TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProp
   return (
     <TabsPrimitive.Trigger value={value} asChild>
       <Button
-        density='fine'
+        {...props}
         variant={
           orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'
         }
-        {...props}
-        onClick={handleClick}
         classNames={[
-          'pli-2 rounded-sm',
-          orientation === 'vertical' && 'block justify-start text-start is-full',
-          orientation === 'vertical' && ghostSelectedContainerMd,
-          ghostHover,
+          orientation === 'vertical' && 'block justify-start text-start w-full',
+          orientation === 'vertical' && 'dx-selected',
           classNames,
         ]}
+        onClick={handleClick}
       >
         {children}
       </Button>
@@ -217,27 +246,83 @@ const TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProp
   );
 };
 
-type TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;
+TabsTab.displayName = 'Tabs.Tab';
+
+//
+// IconTab
+//
+
+type TabsIconTabProps = IconButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;
+
+const TabsIconTab = ({ value, classNames, onClick, ...props }: TabsIconTabProps) => {
+  const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');
+  const { hasAttention } = useAttention(attendableId);
+
+  // NOTE: This handler is only called if the tab is *already active*.
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      setActivePart('panel');
+      onClick?.(event);
+    },
+    [setActivePart, onClick],
+  );
 
-const TabsTabpanel = ({ classNames, children, ...props }: TabsTabpanelProps) => {
   return (
-    <TabsPrimitive.Content {...props} className={mx('dx-focus-ring-inset-over-all', classNames)}>
-      {children}
-    </TabsPrimitive.Content>
+    <TabsPrimitive.Trigger value={value} asChild>
+      <IconButton
+        {...props}
+        variant={
+          orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'
+        }
+        classNames={[
+          orientation === 'vertical' && 'justify-start text-start w-full',
+          orientation === 'vertical' && 'dx-selected',
+          classNames,
+        ]}
+        onClick={handleClick}
+      />
+    </TabsPrimitive.Trigger>
   );
 };
 
+TabsIconTab.displayName = 'Tabs.IconTab';
+
+//
+// Panel
+//
+// Do NOT wrap TabsPanel children in React.Activity.
+// Radix TabsPrimitive.Content already unmounts inactive panels (no forceMount) — inactive tab
+// content is not in the DOM and effects do not run, which is the desired behaviour.
+// React.Activity (experimental in React 19) is a reconciler-level symbol that deactivates its
+// subtree when mode='hidden'. It was redundant here and prevented initial render of active panels.
+//
+
+type TabsPanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;
+
+const TabsPanel = ({ classNames, children, ...props }: TabsPanelProps) => (
+  <TabsPrimitive.Content {...props} className={mx('p-0! dx-focus-ring-inset-over-all', classNames)}>
+    {children}
+  </TabsPrimitive.Content>
+);
+
+TabsPanel.displayName = 'Tabs.Panel';
+
 type TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;
 
+//
+// Tabs
+//
+
 export const Tabs = {
   Root: TabsRoot,
   Tablist: TabsTablist,
   Tab: TabsTab,
+  IconTab: TabsIconTab,
   TabPrimitive: TabsPrimitive.Trigger,
   TabGroupHeading: TabsTabGroupHeading,
-  Tabpanel: TabsTabpanel,
-  BackButton: TabsBackButton,
   Viewport: TabsViewport,
+  Panel: TabsPanel,
+  BackButton: TabsBackButton,
 };
 
 export type {
@@ -247,6 +332,6 @@ export type {
   TabsTabProps,
   TabsTabPrimitiveProps,
   TabsTabGroupHeadingProps,
-  TabsTabpanelProps,
   TabsViewportProps,
+  TabsPanelProps,
 };