@dxos/react-ui-tabs 0.8.4-main.5ea62a8 → 0.8.4-main.66e292d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-tabs",
-  "version": "0.8.4-main.5ea62a8",
+  "version": "0.8.4-main.66e292d",
   "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.5ea62a8",
-    "@dxos/util": "0.8.4-main.5ea62a8"
+    "@dxos/react-ui-attention": "0.8.4-main.66e292d",
+    "@dxos/util": "0.8.4-main.66e292d"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "7.1.1",
-    "@dxos/random": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8",
-    "@dxos/storybook-utils": "0.8.4-main.5ea62a8"
+    "@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.66e292d",
+    "@dxos/react-ui-theme": "0.8.4-main.66e292d",
+    "@dxos/react-ui": "0.8.4-main.66e292d",
+    "@dxos/storybook-utils": "0.8.4-main.66e292d"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui": "0.8.4-main.5ea62a8"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.66e292d",
+    "@dxos/react-ui-theme": "0.8.4-main.66e292d"
   },
   "publishConfig": {
     "access": "public"

package/src/Tabs.stories.tsx

@@ -7,7 +7,7 @@ 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';
 

package/src/Tabs.tsx

@@ -6,7 +6,14 @@ 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, IconButton, type IconButtonProps, type ThemedClassName } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
@@ -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.
@@ -253,10 +261,13 @@ const TabsIconTab = ({ value, classNames, onClick, ...props }: TabsIconTabProps)
 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>
   );
 };