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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-tabs",
-  "version": "0.8.4-main.fd6878d",
+  "version": "0.8.4-main.fffef41",
   "description": "Components for facilitating a Tabs pattern.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -33,25 +33,25 @@
     "@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-main.fffef41",
+    "@dxos/util": "0.8.4-main.fffef41"
   },
   "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.2",
+    "@types/react-dom": "~19.2.2",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/random": "0.8.4-main.fffef41",
+    "@dxos/react-ui": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41",
+    "@dxos/storybook-utils": "0.8.4-main.fffef41"
   },
   "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.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41"
   },
   "publishConfig": {
     "access": "public"

package/src/Tabs.stories.tsx

@@ -2,16 +2,52 @@
 // 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 { withTheme } from '@dxos/react-ui/testing';
 
 import { Tabs as NaturalTabs } from './Tabs';
 
 faker.seed(1234);
 
+export const DefaultStory = () => {
+  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>
+  );
+};
+
 const content = [...Array(24)].reduce((acc: { [key: string]: { title: string; panel: string } }, _, index) => {
   acc[`t${index}`] = {
     title: faker.commerce.productName(),
@@ -20,46 +56,15 @@ const content = [...Array(24)].reduce((acc: { [key: string]: { title: string; pa
   return acc;
 }, {});
 
-export default {
+const meta = {
   title: 'ui/react-ui-tabs/Tabs',
   component: NaturalTabs.Root,
+  render: DefaultStory,
   decorators: [withTheme],
-  // parameters: { translations },
-};
+} satisfies Meta<typeof DefaultStory>;
 
-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 default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/Tabs.tsx

@@ -6,11 +6,18 @@ 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, {
+  Activity,
+  type ComponentPropsWithoutRef,
+  type MouseEvent,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+} from 'react';
 
-import { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';
+import { Button, type ButtonProps, IconButton, type IconButtonProps, type ThemedClassName } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';
+import { ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';
 
 type TabsActivePart = 'list' | 'panel';
 
@@ -144,6 +151,7 @@ const TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {
   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.
@@ -185,6 +193,7 @@ 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>) => {
@@ -204,10 +213,8 @@ const TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProp
         {...props}
         onClick={handleClick}
         classNames={[
-          'pli-2 rounded-sm',
           orientation === 'vertical' && 'block justify-start text-start is-full',
           orientation === 'vertical' && ghostSelectedContainerMd,
-          ghostHover,
           classNames,
         ]}
       >
@@ -217,13 +224,50 @@ const TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProp
   );
 };
 
+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],
+  );
+
+  return (
+    <TabsPrimitive.Trigger value={value} asChild>
+      <IconButton
+        density='fine'
+        variant={
+          orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'
+        }
+        {...props}
+        onClick={handleClick}
+        classNames={[
+          orientation === 'vertical' && 'justify-start text-start is-full',
+          orientation === 'vertical' && ghostSelectedContainerMd,
+          classNames,
+        ]}
+      />
+    </TabsPrimitive.Trigger>
+  );
+};
+
 type TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;
 
 const TabsTabpanel = ({ classNames, children, ...props }: TabsTabpanelProps) => {
+  const { value: contextValue } = useTabsContext('TabsTab');
   return (
-    <TabsPrimitive.Content {...props} className={mx('dx-focus-ring-inset-over-all', classNames)}>
-      {children}
-    </TabsPrimitive.Content>
+    <Activity mode={contextValue === props.value ? 'visible' : 'hidden'}>
+      <TabsPrimitive.Content {...props} className={mx('dx-focus-ring-inset-over-all', classNames)}>
+        {children}
+      </TabsPrimitive.Content>
+    </Activity>
   );
 };
 
@@ -233,6 +277,7 @@ export const Tabs = {
   Root: TabsRoot,
   Tablist: TabsTablist,
   Tab: TabsTab,
+  IconTab: TabsIconTab,
   TabPrimitive: TabsPrimitive.Trigger,
   TabGroupHeading: TabsTabGroupHeading,
   Tabpanel: TabsTabpanel,