@dxos/react-ui-tabs 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@dxos/react-ui-tabs",
-  "version": "0.8.4-main.ae835ea",
+  "version": "0.8.4-main.bc674ce",
   "description": "Components for facilitating a Tabs pattern.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
@@ -25,33 +29,32 @@
     "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.ae835ea",
-    "@dxos/util": "0.8.4-main.ae835ea"
+    "@dxos/react-ui-attention": "0.8.4-main.bc674ce",
+    "@dxos/util": "0.8.4-main.bc674ce"
   },
   "devDependencies": {
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.ae835ea",
-    "@dxos/react-ui-theme": "0.8.4-main.ae835ea",
-    "@dxos/react-ui": "0.8.4-main.ae835ea",
-    "@dxos/storybook-utils": "0.8.4-main.ae835ea"
+    "@dxos/react-ui": "0.8.4-main.bc674ce",
+    "@dxos/storybook-utils": "0.8.4-main.bc674ce",
+    "@dxos/random": "0.8.4-main.bc674ce",
+    "@dxos/ui-theme": "0.8.4-main.bc674ce"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.ae835ea",
-    "@dxos/react-ui-theme": "0.8.4-main.ae835ea"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.bc674ce",
+    "@dxos/ui-theme": "0.8.4-main.bc674ce"
   },
   "publishConfig": {
     "access": "public"

package/src/Tabs.stories.tsx

@@ -17,7 +17,7 @@ export const DefaultStory = () => {
   return (
     <Dialog.Root open>
       <Dialog.Overlay blockAlign='start'>
-        <Dialog.Content classNames='is-[calc(100dvw-4rem)] !max-is-full'>
+        <Dialog.Content size='xl'>
           <NaturalTabs.Root orientation='vertical' defaultValue={Object.keys(content)[3]} defaultActivePart='list'>
             <NaturalTabs.Viewport>
               <NaturalTabs.Tablist>

package/src/Tabs.tsx

@@ -6,11 +6,25 @@ 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 { Button, type ButtonProps, IconButton, type IconButtonProps, type ThemedClassName } from '@dxos/react-ui';
+import React, {
+  Activity,
+  type ComponentPropsWithoutRef,
+  type MouseEvent,
+  forwardRef,
+  useCallback,
+  useLayoutEffect,
+} from 'react';
+
+import {
+  Button,
+  type ButtonProps,
+  IconButton,
+  type IconButtonProps,
+  type ThemedClassName,
+  useForwardedRef,
+} from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';
+import { ghostSelectedContainerMd, mx } from '@dxos/ui-theme';
 
 type TabsActivePart = 'list' | 'panel';
 
@@ -36,83 +50,90 @@ type TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &
     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);
+const TabsRoot = forwardRef<HTMLDivElement, TabsRootProps>(
+  (
+    {
+      children,
+      classNames,
+      activePart: propsActivePart,
+      onActivePartChange,
+      defaultActivePart,
+      value: propsValue,
+      onValueChange,
+      defaultValue,
+      orientation = 'vertical',
+      activationMode = 'manual',
+      verticalVariant = 'stateful',
+      attendableId,
+      ...props
     },
-    [value],
-  );
-
-  const { findFirstFocusable } = useFocusFinders();
-  const tabsRoot = useRef<HTMLDivElement | null>(null);
-
-  useLayoutEffect(() => {
-    if (tabsRoot.current) {
-      findFirstFocusable(tabsRoot.current)?.focus();
-    }
-  }, [activePart]);
-
-  return (
-    <TabsContextProvider
-      orientation={orientation}
-      activePart={activePart}
-      setActivePart={setActivePart}
-      value={value}
-      attendableId={attendableId}
-      verticalVariant={verticalVariant}
-    >
-      <TabsPrimitive.Root
-        activationMode={activationMode}
-        data-active={activePart}
+    forwardedRef,
+  ) => {
+    // const tabsRoot = useRef<HTMLDivElement | null>(null);
+    const tabsRoot = useForwardedRef(forwardedRef);
+
+    // 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);
+      },
+      [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}
+        verticalVariant={verticalVariant}
       >
-        {children}
-      </TabsPrimitive.Root>
-    </TabsContextProvider>
-  );
-};
+        <TabsPrimitive.Root
+          activationMode={activationMode}
+          data-active={activePart}
+          orientation={orientation}
+          {...props}
+          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}
+        >
+          {children}
+        </TabsPrimitive.Root>
+      </TabsContextProvider>
+    );
+  },
+);
 
 type TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
 
@@ -254,10 +275,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>
   );
 };