@dxos/react-ui-tabs 0.8.4-main.dedc0f3 → 0.8.4-main.e8ec1fe

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/lib/browser/index.mjs +6 -3
  2. package/dist/lib/browser/index.mjs.map +3 -3
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/lib/node-esm/index.mjs +6 -3
  5. package/dist/lib/node-esm/index.mjs.map +3 -3
  6. package/dist/lib/node-esm/meta.json +1 -1
  7. package/dist/types/src/Tabs.d.ts.map +1 -1
  8. package/dist/types/tsconfig.tsbuildinfo +1 -1
  9. package/package.json +16 -16
  10. package/src/Tabs.stories.tsx +1 -1
  11. package/src/Tabs.tsx +14 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-tabs",
3
- "version": "0.8.4-main.dedc0f3",
3
+ "version": "0.8.4-main.e8ec1fe",
4
4
  "description": "Components for facilitating a Tabs pattern.",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -33,25 +33,25 @@
33
33
  "@radix-ui/react-slot": "1.1.2",
34
34
  "@radix-ui/react-tabs": "1.1.3",
35
35
  "@radix-ui/react-use-controllable-state": "1.1.0",
36
- "@dxos/react-ui-attention": "0.8.4-main.dedc0f3",
37
- "@dxos/util": "0.8.4-main.dedc0f3"
36
+ "@dxos/react-ui-attention": "0.8.4-main.e8ec1fe",
37
+ "@dxos/util": "0.8.4-main.e8ec1fe"
38
38
  },
39
39
  "devDependencies": {
40
- "@types/react": "~18.2.0",
41
- "@types/react-dom": "~18.2.0",
42
- "react": "~18.2.0",
43
- "react-dom": "~18.2.0",
44
- "vite": "7.1.1",
45
- "@dxos/random": "0.8.4-main.dedc0f3",
46
- "@dxos/react-ui": "0.8.4-main.dedc0f3",
47
- "@dxos/storybook-utils": "0.8.4-main.dedc0f3",
48
- "@dxos/react-ui-theme": "0.8.4-main.dedc0f3"
40
+ "@types/react": "~19.2.2",
41
+ "@types/react-dom": "~19.2.2",
42
+ "react": "~19.2.0",
43
+ "react-dom": "~19.2.0",
44
+ "vite": "7.1.9",
45
+ "@dxos/random": "0.8.4-main.e8ec1fe",
46
+ "@dxos/react-ui": "0.8.4-main.e8ec1fe",
47
+ "@dxos/storybook-utils": "0.8.4-main.e8ec1fe",
48
+ "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe"
49
49
  },
50
50
  "peerDependencies": {
51
- "react": "~18.2.0",
52
- "react-dom": "~18.2.0",
53
- "@dxos/react-ui": "0.8.4-main.dedc0f3",
54
- "@dxos/react-ui-theme": "0.8.4-main.dedc0f3"
51
+ "react": "^19.0.0",
52
+ "react-dom": "^19.0.0",
53
+ "@dxos/react-ui": "0.8.4-main.e8ec1fe",
54
+ "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe"
55
55
  },
56
56
  "publishConfig": {
57
57
  "access": "public"
package/src/Tabs.stories.tsx CHANGED
@@ -7,7 +7,7 @@ import React from 'react';
7
7
 
8
8
  import { faker } from '@dxos/random';
9
9
  import { Dialog, Icon } from '@dxos/react-ui';
10
- import { withTheme } from '@dxos/storybook-utils';
10
+ import { withTheme } from '@dxos/react-ui/testing';
11
11
 
12
12
  import { Tabs as NaturalTabs } from './Tabs';
13
13
 
package/src/Tabs.tsx CHANGED
@@ -6,7 +6,14 @@ import { useArrowNavigationGroup, useFocusFinders, useFocusableGroup } from '@fl
6
6
  import { createContext } from '@radix-ui/react-context';
7
7
  import * as TabsPrimitive from '@radix-ui/react-tabs';
8
8
  import { useControllableState } from '@radix-ui/react-use-controllable-state';
9
- import React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, useLayoutEffect, useRef } from 'react';
9
+ import React, {
10
+ Activity,
11
+ type ComponentPropsWithoutRef,
12
+ type MouseEvent,
13
+ useCallback,
14
+ useLayoutEffect,
15
+ useRef,
16
+ } from 'react';
10
17
 
11
18
  import { Button, type ButtonProps, IconButton, type IconButtonProps, type ThemedClassName } from '@dxos/react-ui';
12
19
  import { useAttention } from '@dxos/react-ui-attention';
@@ -254,10 +261,13 @@ const TabsIconTab = ({ value, classNames, onClick, ...props }: TabsIconTabProps)
254
261
  type TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;
255
262
 
256
263
  const TabsTabpanel = ({ classNames, children, ...props }: TabsTabpanelProps) => {
264
+ const { value: contextValue } = useTabsContext('TabsTab');
257
265
  return (
258
- <TabsPrimitive.Content {...props} className={mx('dx-focus-ring-inset-over-all', classNames)}>
259
- {children}
260
- </TabsPrimitive.Content>
266
+ <Activity mode={contextValue === props.value ? 'visible' : 'hidden'}>
267
+ <TabsPrimitive.Content {...props} className={mx('dx-focus-ring-inset-over-all', classNames)}>
268
+ {children}
269
+ </TabsPrimitive.Content>
270
+ </Activity>
261
271
  );
262
272
  };
263
273