@radix-ui/react-tabs 1.1.19 → 1.1.20
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.
- package/dist/index.d.mts +6 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.js +7 -2
- package/dist/index.js.map +2 -2
- package/dist/index.mjs +7 -2
- package/dist/index.mjs.map +2 -2
- package/package.json +5 -5
package/dist/index.d.mts
CHANGED
|
@@ -3,6 +3,11 @@ import * as React from 'react';
|
|
|
3
3
|
import { Primitive } from '@radix-ui/react-primitive';
|
|
4
4
|
import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
|
|
5
5
|
|
|
6
|
+
declare const ActivationMode: {
|
|
7
|
+
readonly Automatic: "automatic";
|
|
8
|
+
readonly Manual: "manual";
|
|
9
|
+
};
|
|
10
|
+
type ActivationMode = (typeof ActivationMode)[keyof typeof ActivationMode];
|
|
6
11
|
declare const createTabsScope: _radix_ui_react_context.CreateScope;
|
|
7
12
|
type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;
|
|
8
13
|
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
|
|
@@ -27,7 +32,7 @@ interface TabsProps extends PrimitiveDivProps {
|
|
|
27
32
|
* Whether a tab is activated automatically or manually.
|
|
28
33
|
* @defaultValue automatic
|
|
29
34
|
* */
|
|
30
|
-
activationMode?:
|
|
35
|
+
activationMode?: ActivationMode;
|
|
31
36
|
}
|
|
32
37
|
declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
|
|
33
38
|
interface TabsListProps extends PrimitiveDivProps {
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,11 @@ import * as React from 'react';
|
|
|
3
3
|
import { Primitive } from '@radix-ui/react-primitive';
|
|
4
4
|
import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
|
|
5
5
|
|
|
6
|
+
declare const ActivationMode: {
|
|
7
|
+
readonly Automatic: "automatic";
|
|
8
|
+
readonly Manual: "manual";
|
|
9
|
+
};
|
|
10
|
+
type ActivationMode = (typeof ActivationMode)[keyof typeof ActivationMode];
|
|
6
11
|
declare const createTabsScope: _radix_ui_react_context.CreateScope;
|
|
7
12
|
type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;
|
|
8
13
|
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
|
|
@@ -27,7 +32,7 @@ interface TabsProps extends PrimitiveDivProps {
|
|
|
27
32
|
* Whether a tab is activated automatically or manually.
|
|
28
33
|
* @defaultValue automatic
|
|
29
34
|
* */
|
|
30
|
-
activationMode?:
|
|
35
|
+
activationMode?: ActivationMode;
|
|
31
36
|
}
|
|
32
37
|
declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
|
|
33
38
|
interface TabsListProps extends PrimitiveDivProps {
|
package/dist/index.js
CHANGED
|
@@ -56,6 +56,10 @@ var import_react_direction = require("@radix-ui/react-direction");
|
|
|
56
56
|
var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
|
|
57
57
|
var import_react_id = require("@radix-ui/react-id");
|
|
58
58
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
59
|
+
var ActivationMode = {
|
|
60
|
+
Automatic: "automatic",
|
|
61
|
+
Manual: "manual"
|
|
62
|
+
};
|
|
59
63
|
var TABS_NAME = "Tabs";
|
|
60
64
|
var [createTabsContext, createTabsScope] = (0, import_react_context.createContextScope)(TABS_NAME, [
|
|
61
65
|
import_react_roving_focus.createRovingFocusGroupScope
|
|
@@ -72,7 +76,7 @@ var Tabs = /* @__PURE__ */ React.forwardRef(
|
|
|
72
76
|
defaultValue,
|
|
73
77
|
orientation = "horizontal",
|
|
74
78
|
dir,
|
|
75
|
-
activationMode =
|
|
79
|
+
activationMode = ActivationMode.Automatic,
|
|
76
80
|
...tabsProps
|
|
77
81
|
} = props;
|
|
78
82
|
const direction = (0, import_react_direction.useDirection)(dir);
|
|
@@ -164,6 +168,7 @@ var TabsTrigger = /* @__PURE__ */ React.forwardRef(
|
|
|
164
168
|
ref: forwardedRef,
|
|
165
169
|
onMouseDown: (0, import_primitive.composeEventHandlers)(props.onMouseDown, (event) => {
|
|
166
170
|
if (!disabled && event.button === 0 && event.ctrlKey === false) {
|
|
171
|
+
event.currentTarget.focus();
|
|
167
172
|
context.onValueChange(value);
|
|
168
173
|
} else {
|
|
169
174
|
event.preventDefault();
|
|
@@ -178,7 +183,7 @@ var TabsTrigger = /* @__PURE__ */ React.forwardRef(
|
|
|
178
183
|
}
|
|
179
184
|
}),
|
|
180
185
|
onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, () => {
|
|
181
|
-
const isAutomaticActivation = context.activationMode !==
|
|
186
|
+
const isAutomaticActivation = context.activationMode !== ActivationMode.Manual;
|
|
182
187
|
if (!isSelected && !disabled && isAutomaticActivation) {
|
|
183
188
|
context.onValueChange(value);
|
|
184
189
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts", "../src/tabs.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\nexport {\n createTabsScope,\n //\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n //\n Root,\n List,\n Trigger,\n Content,\n} from './tabs';\nexport type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './tabs';\n", "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useId } from '@radix-ui/react-id';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs';\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope };\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype TabsContextValue = {\n baseId: string;\n value: string;\n onValueChange: (value: string) => void;\n orientation?: TabsProps['orientation'];\n dir?: TabsProps['dir'];\n activationMode?: TabsProps['activationMode'];\n};\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME);\n\ntype TabsElement = React.ComponentRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface TabsProps extends PrimitiveDivProps {\n /** The value for the selected tab, if controlled */\n value?: string;\n /** The value of the tab to select by default, if uncontrolled */\n defaultValue?: string;\n /** A function called when a new tab is selected */\n onValueChange?: (value: string) => void;\n /**\n * The orientation the tabs are layed out.\n * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n * @defaultValue horizontal\n */\n orientation?: RovingFocusGroupProps['orientation'];\n /**\n * The direction of navigation between toolbar items.\n */\n dir?: RovingFocusGroupProps['dir'];\n /**\n * Whether a tab is activated automatically or manually.\n * @defaultValue automatic\n * */\n activationMode?: 'automatic' | 'manual';\n}\n\nconst Tabs = /* @__PURE__ */ React.forwardRef<TabsElement, TabsProps>(\n // blank line to reduce diff noise\n function Tabs(props: ScopedProps<TabsProps>, forwardedRef) {\n const {\n __scopeTabs,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir,\n activationMode = 'automatic',\n ...tabsProps\n } = props;\n const direction = useDirection(dir);\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue ?? '',\n caller: TABS_NAME,\n });\n\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onValueChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n >\n <Primitive.div\n dir={direction}\n data-orientation={orientation}\n {...tabsProps}\n ref={forwardedRef}\n />\n </TabsProvider>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList';\n\ntype TabsListElement = React.ComponentRef<typeof Primitive.div>;\ninterface TabsListProps extends PrimitiveDivProps {\n loop?: RovingFocusGroupProps['loop'];\n}\n\nconst TabsList = /* @__PURE__ */ React.forwardRef<TabsListElement, TabsListProps>(\n // blank line to reduce diff noise\n function TabsList(props: ScopedProps<TabsListProps>, forwardedRef) {\n const { __scopeTabs, loop = true, ...listProps } = props;\n const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n return (\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={context.orientation}\n dir={context.dir}\n loop={loop}\n >\n <Primitive.div\n role=\"tablist\"\n aria-orientation={context.orientation}\n {...listProps}\n ref={forwardedRef}\n />\n </RovingFocusGroup.Root>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger';\n\ntype TabsTriggerElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface TabsTriggerProps extends PrimitiveButtonProps {\n value: string;\n}\n\nconst TabsTrigger = /* @__PURE__ */ React.forwardRef<TabsTriggerElement, TabsTriggerProps>(\n function TabsTrigger(props: ScopedProps<TabsTriggerProps>, forwardedRef) {\n const { __scopeTabs, value, disabled = false, ...triggerProps } = props;\n const context = useTabsContext(TRIGGER_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n return (\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <Primitive.button\n type=\"button\"\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n {...triggerProps}\n ref={forwardedRef}\n onMouseDown={composeEventHandlers(props.onMouseDown, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n if (!disabled && event.button === 0 && event.ctrlKey === false) {\n context.onValueChange(value);\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault();\n }\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n // Only react to keys originating from the trigger itself. Focusable\n // descendants (eg. content portaled out of the trigger's DOM\n // subtree) bubble their key events here through React's event\n // system.\n // See: https://github.com/radix-ui/primitives/issues/3232\n if (disabled || event.target !== event.currentTarget) {\n return;\n }\n\n if ([' ', 'Enter'].includes(event.key)) {\n context.onValueChange(value);\n }\n })}\n onFocus={composeEventHandlers(props.onFocus, () => {\n // handle \"automatic\" activation if necessary\n // ie. activate tab following focus\n const isAutomaticActivation = context.activationMode !== 'manual';\n if (!isSelected && !disabled && isAutomaticActivation) {\n context.onValueChange(value);\n }\n })}\n />\n </RovingFocusGroup.Item>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent';\n\ntype TabsContentElement = React.ComponentRef<typeof Primitive.div>;\ninterface TabsContentProps extends PrimitiveDivProps {\n value: string;\n\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst TabsContent = /* @__PURE__ */ React.forwardRef<TabsContentElement, TabsContentProps>(\n function TabsContent(props: ScopedProps<TabsContentProps>, forwardedRef) {\n const { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n const context = useTabsContext(CONTENT_NAME, __scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n const isMountAnimationPreventedRef = React.useRef(isSelected);\n\n React.useEffect(() => {\n const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));\n return () => cancelAnimationFrame(rAF);\n }, []);\n\n return (\n <Presence present={forceMount || isSelected}>\n {({ present }) => (\n <Primitive.div\n data-state={isSelected ? 'active' : 'inactive'}\n data-orientation={context.orientation}\n role=\"tabpanel\"\n aria-labelledby={triggerId}\n hidden={!present}\n id={contentId}\n tabIndex={0}\n {...contentProps}\n ref={forwardedRef}\n style={{\n ...props.style,\n animationDuration: isMountAnimationPreventedRef.current ? '0s' : undefined,\n }}\n >\n {present && children}\n </Primitive.div>\n )}\n </Presence>\n );\n },\n);\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n return `${baseId}-trigger-${value}`;\n}\n\nfunction makeContentId(baseId: string, value: string) {\n return `${baseId}-content-${value}`;\n}\n\nexport {\n createTabsScope,\n //\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n //\n Tabs as Root,\n TabsList as List,\n TabsTrigger as Trigger,\n TabsContent as Content,\n};\nexport type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,uBAAqC;AACrC,2BAAmC;AACnC,gCAA4C;AAC5C,4BAAyB;AACzB,6BAA0B;AAC1B,uBAAkC;AAClC,6BAA6B;AAC7B,0CAAqC;AACrC,sBAAsB;
|
|
4
|
+
"sourcesContent": ["'use client';\nexport {\n createTabsScope,\n //\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n //\n Root,\n List,\n Trigger,\n Content,\n} from './tabs';\nexport type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './tabs';\n", "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useId } from '@radix-ui/react-id';\n\nimport type { Scope } from '@radix-ui/react-context';\n\nconst ActivationMode = {\n Automatic: 'automatic',\n Manual: 'manual',\n} as const;\n\ntype ActivationMode = (typeof ActivationMode)[keyof typeof ActivationMode];\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs';\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope };\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype TabsContextValue = {\n baseId: string;\n value: string;\n onValueChange: (value: string) => void;\n orientation?: TabsProps['orientation'];\n dir?: TabsProps['dir'];\n activationMode?: TabsProps['activationMode'];\n};\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME);\n\ntype TabsElement = React.ComponentRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface TabsProps extends PrimitiveDivProps {\n /** The value for the selected tab, if controlled */\n value?: string;\n /** The value of the tab to select by default, if uncontrolled */\n defaultValue?: string;\n /** A function called when a new tab is selected */\n onValueChange?: (value: string) => void;\n /**\n * The orientation the tabs are layed out.\n * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n * @defaultValue horizontal\n */\n orientation?: RovingFocusGroupProps['orientation'];\n /**\n * The direction of navigation between toolbar items.\n */\n dir?: RovingFocusGroupProps['dir'];\n /**\n * Whether a tab is activated automatically or manually.\n * @defaultValue automatic\n * */\n activationMode?: ActivationMode;\n}\n\nconst Tabs = /* @__PURE__ */ React.forwardRef<TabsElement, TabsProps>(\n // blank line to reduce diff noise\n function Tabs(props: ScopedProps<TabsProps>, forwardedRef) {\n const {\n __scopeTabs,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir,\n activationMode = ActivationMode.Automatic,\n ...tabsProps\n } = props;\n const direction = useDirection(dir);\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue ?? '',\n caller: TABS_NAME,\n });\n\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onValueChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n >\n <Primitive.div\n dir={direction}\n data-orientation={orientation}\n {...tabsProps}\n ref={forwardedRef}\n />\n </TabsProvider>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList';\n\ntype TabsListElement = React.ComponentRef<typeof Primitive.div>;\ninterface TabsListProps extends PrimitiveDivProps {\n loop?: RovingFocusGroupProps['loop'];\n}\n\nconst TabsList = /* @__PURE__ */ React.forwardRef<TabsListElement, TabsListProps>(\n // blank line to reduce diff noise\n function TabsList(props: ScopedProps<TabsListProps>, forwardedRef) {\n const { __scopeTabs, loop = true, ...listProps } = props;\n const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n return (\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={context.orientation}\n dir={context.dir}\n loop={loop}\n >\n <Primitive.div\n role=\"tablist\"\n aria-orientation={context.orientation}\n {...listProps}\n ref={forwardedRef}\n />\n </RovingFocusGroup.Root>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger';\n\ntype TabsTriggerElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface TabsTriggerProps extends PrimitiveButtonProps {\n value: string;\n}\n\nconst TabsTrigger = /* @__PURE__ */ React.forwardRef<TabsTriggerElement, TabsTriggerProps>(\n function TabsTrigger(props: ScopedProps<TabsTriggerProps>, forwardedRef) {\n const { __scopeTabs, value, disabled = false, ...triggerProps } = props;\n const context = useTabsContext(TRIGGER_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n return (\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <Primitive.button\n type=\"button\"\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n {...triggerProps}\n ref={forwardedRef}\n onMouseDown={composeEventHandlers(props.onMouseDown, (event) => {\n // only call handler if it's the left button (mousedown gets\n // triggered by all mouse buttons) but not when the control key is\n // pressed (avoiding MacOS right click)\n if (!disabled && event.button === 0 && event.ctrlKey === false) {\n // Move focus to the trigger before changing the value. If focus\n // is currently in the active tab, the element will be removed\n // from the DOM before its blur event fires, and focus gets lost\n // to the document until click is completed.\n // See https://github.com/radix-ui/primitives/issues/3600\n event.currentTarget.focus();\n context.onValueChange(value);\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault();\n }\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n // Only react to keys originating from the trigger itself. Focusable\n // descendants (eg. content portaled out of the trigger's DOM\n // subtree) bubble their key events here through React's event\n // system.\n // See: https://github.com/radix-ui/primitives/issues/3232\n if (disabled || event.target !== event.currentTarget) {\n return;\n }\n\n if ([' ', 'Enter'].includes(event.key)) {\n context.onValueChange(value);\n }\n })}\n onFocus={composeEventHandlers(props.onFocus, () => {\n // handle \"automatic\" activation if necessary\n // ie. activate tab following focus\n const isAutomaticActivation = context.activationMode !== ActivationMode.Manual;\n if (!isSelected && !disabled && isAutomaticActivation) {\n context.onValueChange(value);\n }\n })}\n />\n </RovingFocusGroup.Item>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent';\n\ntype TabsContentElement = React.ComponentRef<typeof Primitive.div>;\ninterface TabsContentProps extends PrimitiveDivProps {\n value: string;\n\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst TabsContent = /* @__PURE__ */ React.forwardRef<TabsContentElement, TabsContentProps>(\n function TabsContent(props: ScopedProps<TabsContentProps>, forwardedRef) {\n const { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n const context = useTabsContext(CONTENT_NAME, __scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n const isMountAnimationPreventedRef = React.useRef(isSelected);\n\n React.useEffect(() => {\n const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));\n return () => cancelAnimationFrame(rAF);\n }, []);\n\n return (\n <Presence present={forceMount || isSelected}>\n {({ present }) => (\n <Primitive.div\n data-state={isSelected ? 'active' : 'inactive'}\n data-orientation={context.orientation}\n role=\"tabpanel\"\n aria-labelledby={triggerId}\n hidden={!present}\n id={contentId}\n tabIndex={0}\n {...contentProps}\n ref={forwardedRef}\n style={{\n ...props.style,\n animationDuration: isMountAnimationPreventedRef.current ? '0s' : undefined,\n }}\n >\n {present && children}\n </Primitive.div>\n )}\n </Presence>\n );\n },\n);\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n return `${baseId}-trigger-${value}`;\n}\n\nfunction makeContentId(baseId: string, value: string) {\n return `${baseId}-content-${value}`;\n}\n\nexport {\n createTabsScope,\n //\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n //\n Tabs as Root,\n TabsList as List,\n TabsTrigger as Trigger,\n TabsContent as Content,\n};\nexport type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Tabs", "TabsList", "TabsTrigger", "TabsContent"]
|
|
7
7
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -14,6 +14,10 @@ import { useDirection } from "@radix-ui/react-direction";
|
|
|
14
14
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
15
15
|
import { useId } from "@radix-ui/react-id";
|
|
16
16
|
import { jsx } from "react/jsx-runtime";
|
|
17
|
+
var ActivationMode = {
|
|
18
|
+
Automatic: "automatic",
|
|
19
|
+
Manual: "manual"
|
|
20
|
+
};
|
|
17
21
|
var TABS_NAME = "Tabs";
|
|
18
22
|
var [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [
|
|
19
23
|
createRovingFocusGroupScope
|
|
@@ -30,7 +34,7 @@ var Tabs = /* @__PURE__ */ React.forwardRef(
|
|
|
30
34
|
defaultValue,
|
|
31
35
|
orientation = "horizontal",
|
|
32
36
|
dir,
|
|
33
|
-
activationMode =
|
|
37
|
+
activationMode = ActivationMode.Automatic,
|
|
34
38
|
...tabsProps
|
|
35
39
|
} = props;
|
|
36
40
|
const direction = useDirection(dir);
|
|
@@ -122,6 +126,7 @@ var TabsTrigger = /* @__PURE__ */ React.forwardRef(
|
|
|
122
126
|
ref: forwardedRef,
|
|
123
127
|
onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
|
|
124
128
|
if (!disabled && event.button === 0 && event.ctrlKey === false) {
|
|
129
|
+
event.currentTarget.focus();
|
|
125
130
|
context.onValueChange(value);
|
|
126
131
|
} else {
|
|
127
132
|
event.preventDefault();
|
|
@@ -136,7 +141,7 @@ var TabsTrigger = /* @__PURE__ */ React.forwardRef(
|
|
|
136
141
|
}
|
|
137
142
|
}),
|
|
138
143
|
onFocus: composeEventHandlers(props.onFocus, () => {
|
|
139
|
-
const isAutomaticActivation = context.activationMode !==
|
|
144
|
+
const isAutomaticActivation = context.activationMode !== ActivationMode.Manual;
|
|
140
145
|
if (!isSelected && !disabled && isAutomaticActivation) {
|
|
141
146
|
context.onValueChange(value);
|
|
142
147
|
}
|
package/dist/index.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/tabs.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useId } from '@radix-ui/react-id';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs';\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope };\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype TabsContextValue = {\n baseId: string;\n value: string;\n onValueChange: (value: string) => void;\n orientation?: TabsProps['orientation'];\n dir?: TabsProps['dir'];\n activationMode?: TabsProps['activationMode'];\n};\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME);\n\ntype TabsElement = React.ComponentRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface TabsProps extends PrimitiveDivProps {\n /** The value for the selected tab, if controlled */\n value?: string;\n /** The value of the tab to select by default, if uncontrolled */\n defaultValue?: string;\n /** A function called when a new tab is selected */\n onValueChange?: (value: string) => void;\n /**\n * The orientation the tabs are layed out.\n * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n * @defaultValue horizontal\n */\n orientation?: RovingFocusGroupProps['orientation'];\n /**\n * The direction of navigation between toolbar items.\n */\n dir?: RovingFocusGroupProps['dir'];\n /**\n * Whether a tab is activated automatically or manually.\n * @defaultValue automatic\n * */\n activationMode?: 'automatic' | 'manual';\n}\n\nconst Tabs = /* @__PURE__ */ React.forwardRef<TabsElement, TabsProps>(\n // blank line to reduce diff noise\n function Tabs(props: ScopedProps<TabsProps>, forwardedRef) {\n const {\n __scopeTabs,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir,\n activationMode = 'automatic',\n ...tabsProps\n } = props;\n const direction = useDirection(dir);\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue ?? '',\n caller: TABS_NAME,\n });\n\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onValueChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n >\n <Primitive.div\n dir={direction}\n data-orientation={orientation}\n {...tabsProps}\n ref={forwardedRef}\n />\n </TabsProvider>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList';\n\ntype TabsListElement = React.ComponentRef<typeof Primitive.div>;\ninterface TabsListProps extends PrimitiveDivProps {\n loop?: RovingFocusGroupProps['loop'];\n}\n\nconst TabsList = /* @__PURE__ */ React.forwardRef<TabsListElement, TabsListProps>(\n // blank line to reduce diff noise\n function TabsList(props: ScopedProps<TabsListProps>, forwardedRef) {\n const { __scopeTabs, loop = true, ...listProps } = props;\n const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n return (\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={context.orientation}\n dir={context.dir}\n loop={loop}\n >\n <Primitive.div\n role=\"tablist\"\n aria-orientation={context.orientation}\n {...listProps}\n ref={forwardedRef}\n />\n </RovingFocusGroup.Root>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger';\n\ntype TabsTriggerElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface TabsTriggerProps extends PrimitiveButtonProps {\n value: string;\n}\n\nconst TabsTrigger = /* @__PURE__ */ React.forwardRef<TabsTriggerElement, TabsTriggerProps>(\n function TabsTrigger(props: ScopedProps<TabsTriggerProps>, forwardedRef) {\n const { __scopeTabs, value, disabled = false, ...triggerProps } = props;\n const context = useTabsContext(TRIGGER_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n return (\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <Primitive.button\n type=\"button\"\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n {...triggerProps}\n ref={forwardedRef}\n onMouseDown={composeEventHandlers(props.onMouseDown, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n if (!disabled && event.button === 0 && event.ctrlKey === false) {\n context.onValueChange(value);\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault();\n }\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n // Only react to keys originating from the trigger itself. Focusable\n // descendants (eg. content portaled out of the trigger's DOM\n // subtree) bubble their key events here through React's event\n // system.\n // See: https://github.com/radix-ui/primitives/issues/3232\n if (disabled || event.target !== event.currentTarget) {\n return;\n }\n\n if ([' ', 'Enter'].includes(event.key)) {\n context.onValueChange(value);\n }\n })}\n onFocus={composeEventHandlers(props.onFocus, () => {\n // handle \"automatic\" activation if necessary\n // ie. activate tab following focus\n const isAutomaticActivation = context.activationMode !== 'manual';\n if (!isSelected && !disabled && isAutomaticActivation) {\n context.onValueChange(value);\n }\n })}\n />\n </RovingFocusGroup.Item>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent';\n\ntype TabsContentElement = React.ComponentRef<typeof Primitive.div>;\ninterface TabsContentProps extends PrimitiveDivProps {\n value: string;\n\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst TabsContent = /* @__PURE__ */ React.forwardRef<TabsContentElement, TabsContentProps>(\n function TabsContent(props: ScopedProps<TabsContentProps>, forwardedRef) {\n const { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n const context = useTabsContext(CONTENT_NAME, __scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n const isMountAnimationPreventedRef = React.useRef(isSelected);\n\n React.useEffect(() => {\n const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));\n return () => cancelAnimationFrame(rAF);\n }, []);\n\n return (\n <Presence present={forceMount || isSelected}>\n {({ present }) => (\n <Primitive.div\n data-state={isSelected ? 'active' : 'inactive'}\n data-orientation={context.orientation}\n role=\"tabpanel\"\n aria-labelledby={triggerId}\n hidden={!present}\n id={contentId}\n tabIndex={0}\n {...contentProps}\n ref={forwardedRef}\n style={{\n ...props.style,\n animationDuration: isMountAnimationPreventedRef.current ? '0s' : undefined,\n }}\n >\n {present && children}\n </Primitive.div>\n )}\n </Presence>\n );\n },\n);\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n return `${baseId}-trigger-${value}`;\n}\n\nfunction makeContentId(baseId: string, value: string) {\n return `${baseId}-content-${value}`;\n}\n\nexport {\n createTabsScope,\n //\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n //\n Tabs as Root,\n TabsList as List,\n TabsTrigger as Trigger,\n TabsContent as Content,\n};\nexport type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };\n"],
|
|
5
|
-
"mappings": ";;;;;AAAA,YAAY,WAAW;AACvB,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AACnC,SAAS,mCAAmC;AAC5C,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,YAAY,sBAAsB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,aAAa;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useId } from '@radix-ui/react-id';\n\nimport type { Scope } from '@radix-ui/react-context';\n\nconst ActivationMode = {\n Automatic: 'automatic',\n Manual: 'manual',\n} as const;\n\ntype ActivationMode = (typeof ActivationMode)[keyof typeof ActivationMode];\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs';\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope };\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype TabsContextValue = {\n baseId: string;\n value: string;\n onValueChange: (value: string) => void;\n orientation?: TabsProps['orientation'];\n dir?: TabsProps['dir'];\n activationMode?: TabsProps['activationMode'];\n};\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME);\n\ntype TabsElement = React.ComponentRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface TabsProps extends PrimitiveDivProps {\n /** The value for the selected tab, if controlled */\n value?: string;\n /** The value of the tab to select by default, if uncontrolled */\n defaultValue?: string;\n /** A function called when a new tab is selected */\n onValueChange?: (value: string) => void;\n /**\n * The orientation the tabs are layed out.\n * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n * @defaultValue horizontal\n */\n orientation?: RovingFocusGroupProps['orientation'];\n /**\n * The direction of navigation between toolbar items.\n */\n dir?: RovingFocusGroupProps['dir'];\n /**\n * Whether a tab is activated automatically or manually.\n * @defaultValue automatic\n * */\n activationMode?: ActivationMode;\n}\n\nconst Tabs = /* @__PURE__ */ React.forwardRef<TabsElement, TabsProps>(\n // blank line to reduce diff noise\n function Tabs(props: ScopedProps<TabsProps>, forwardedRef) {\n const {\n __scopeTabs,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir,\n activationMode = ActivationMode.Automatic,\n ...tabsProps\n } = props;\n const direction = useDirection(dir);\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue ?? '',\n caller: TABS_NAME,\n });\n\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onValueChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n >\n <Primitive.div\n dir={direction}\n data-orientation={orientation}\n {...tabsProps}\n ref={forwardedRef}\n />\n </TabsProvider>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList';\n\ntype TabsListElement = React.ComponentRef<typeof Primitive.div>;\ninterface TabsListProps extends PrimitiveDivProps {\n loop?: RovingFocusGroupProps['loop'];\n}\n\nconst TabsList = /* @__PURE__ */ React.forwardRef<TabsListElement, TabsListProps>(\n // blank line to reduce diff noise\n function TabsList(props: ScopedProps<TabsListProps>, forwardedRef) {\n const { __scopeTabs, loop = true, ...listProps } = props;\n const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n return (\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={context.orientation}\n dir={context.dir}\n loop={loop}\n >\n <Primitive.div\n role=\"tablist\"\n aria-orientation={context.orientation}\n {...listProps}\n ref={forwardedRef}\n />\n </RovingFocusGroup.Root>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger';\n\ntype TabsTriggerElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface TabsTriggerProps extends PrimitiveButtonProps {\n value: string;\n}\n\nconst TabsTrigger = /* @__PURE__ */ React.forwardRef<TabsTriggerElement, TabsTriggerProps>(\n function TabsTrigger(props: ScopedProps<TabsTriggerProps>, forwardedRef) {\n const { __scopeTabs, value, disabled = false, ...triggerProps } = props;\n const context = useTabsContext(TRIGGER_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n return (\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <Primitive.button\n type=\"button\"\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n {...triggerProps}\n ref={forwardedRef}\n onMouseDown={composeEventHandlers(props.onMouseDown, (event) => {\n // only call handler if it's the left button (mousedown gets\n // triggered by all mouse buttons) but not when the control key is\n // pressed (avoiding MacOS right click)\n if (!disabled && event.button === 0 && event.ctrlKey === false) {\n // Move focus to the trigger before changing the value. If focus\n // is currently in the active tab, the element will be removed\n // from the DOM before its blur event fires, and focus gets lost\n // to the document until click is completed.\n // See https://github.com/radix-ui/primitives/issues/3600\n event.currentTarget.focus();\n context.onValueChange(value);\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault();\n }\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n // Only react to keys originating from the trigger itself. Focusable\n // descendants (eg. content portaled out of the trigger's DOM\n // subtree) bubble their key events here through React's event\n // system.\n // See: https://github.com/radix-ui/primitives/issues/3232\n if (disabled || event.target !== event.currentTarget) {\n return;\n }\n\n if ([' ', 'Enter'].includes(event.key)) {\n context.onValueChange(value);\n }\n })}\n onFocus={composeEventHandlers(props.onFocus, () => {\n // handle \"automatic\" activation if necessary\n // ie. activate tab following focus\n const isAutomaticActivation = context.activationMode !== ActivationMode.Manual;\n if (!isSelected && !disabled && isAutomaticActivation) {\n context.onValueChange(value);\n }\n })}\n />\n </RovingFocusGroup.Item>\n );\n },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent';\n\ntype TabsContentElement = React.ComponentRef<typeof Primitive.div>;\ninterface TabsContentProps extends PrimitiveDivProps {\n value: string;\n\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst TabsContent = /* @__PURE__ */ React.forwardRef<TabsContentElement, TabsContentProps>(\n function TabsContent(props: ScopedProps<TabsContentProps>, forwardedRef) {\n const { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n const context = useTabsContext(CONTENT_NAME, __scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n const isMountAnimationPreventedRef = React.useRef(isSelected);\n\n React.useEffect(() => {\n const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));\n return () => cancelAnimationFrame(rAF);\n }, []);\n\n return (\n <Presence present={forceMount || isSelected}>\n {({ present }) => (\n <Primitive.div\n data-state={isSelected ? 'active' : 'inactive'}\n data-orientation={context.orientation}\n role=\"tabpanel\"\n aria-labelledby={triggerId}\n hidden={!present}\n id={contentId}\n tabIndex={0}\n {...contentProps}\n ref={forwardedRef}\n style={{\n ...props.style,\n animationDuration: isMountAnimationPreventedRef.current ? '0s' : undefined,\n }}\n >\n {present && children}\n </Primitive.div>\n )}\n </Presence>\n );\n },\n);\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n return `${baseId}-trigger-${value}`;\n}\n\nfunction makeContentId(baseId: string, value: string) {\n return `${baseId}-content-${value}`;\n}\n\nexport {\n createTabsScope,\n //\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n //\n Tabs as Root,\n TabsList as List,\n TabsTrigger as Trigger,\n TabsContent as Content,\n};\nexport type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };\n"],
|
|
5
|
+
"mappings": ";;;;;AAAA,YAAY,WAAW;AACvB,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AACnC,SAAS,mCAAmC;AAC5C,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,YAAY,sBAAsB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,aAAa;AA4Fd;AAxFR,IAAM,iBAAiB;AAAA,EACrB,WAAW;AAAA,EACX,QAAQ;AACV;AAQA,IAAM,YAAY;AAGlB,IAAM,CAAC,mBAAmB,eAAe,IAAI,mBAAmB,WAAW;AAAA,EACzE;AACF,CAAC;AACD,IAAM,2BAA2B,4BAA4B;AAW7D,IAAM,CAAC,cAAc,cAAc,IAAI,kBAAoC,SAAS;AA6BpF,IAAM,OAAuB,gBAAM;AAAA;AAAA,EAEjC,gCAASA,MAAK,OAA+B,cAAc;AACzD,UAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA,iBAAiB,eAAe;AAAA,MAChC,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,YAAY,aAAa,GAAG;AAClC,UAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,MAC7C,MAAM;AAAA,MACN,UAAU;AAAA,MACV,aAAa,gBAAgB;AAAA,MAC7B,QAAQ;AAAA,IACV,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ,MAAM;AAAA,QACd;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QAEA;AAAA,UAAC,UAAU;AAAA,UAAV;AAAA,YACC,KAAK;AAAA,YACL,oBAAkB;AAAA,YACjB,GAAG;AAAA,YACJ,KAAK;AAAA;AAAA,QACP;AAAA;AAAA,IACF;AAAA,EAEJ,GArCA;AAsCF;AAMA,IAAM,gBAAgB;AAOtB,IAAM,WAA2B,gBAAM;AAAA;AAAA,EAErC,gCAASC,UAAS,OAAmC,cAAc;AACjE,UAAM,EAAE,aAAa,OAAO,MAAM,GAAG,UAAU,IAAI;AACnD,UAAM,UAAU,eAAe,eAAe,WAAW;AACzD,UAAM,wBAAwB,yBAAyB,WAAW;AAClE,WACE;AAAA,MAAkB;AAAA,MAAjB;AAAA,QACC,SAAO;AAAA,QACN,GAAG;AAAA,QACJ,aAAa,QAAQ;AAAA,QACrB,KAAK,QAAQ;AAAA,QACb;AAAA,QAEA;AAAA,UAAC,UAAU;AAAA,UAAV;AAAA,YACC,MAAK;AAAA,YACL,oBAAkB,QAAQ;AAAA,YACzB,GAAG;AAAA,YACJ,KAAK;AAAA;AAAA,QACP;AAAA;AAAA,IACF;AAAA,EAEJ,GApBA;AAqBF;AAMA,IAAM,eAAe;AAQrB,IAAM,cAA8B,gBAAM;AAAA,EACxC,gCAASC,aAAY,OAAsC,cAAc;AACvE,UAAM,EAAE,aAAa,OAAO,WAAW,OAAO,GAAG,aAAa,IAAI;AAClE,UAAM,UAAU,eAAe,cAAc,WAAW;AACxD,UAAM,wBAAwB,yBAAyB,WAAW;AAClE,UAAM,YAAY,cAAc,QAAQ,QAAQ,KAAK;AACrD,UAAM,YAAY,cAAc,QAAQ,QAAQ,KAAK;AACrD,UAAM,aAAa,UAAU,QAAQ;AACrC,WACE;AAAA,MAAkB;AAAA,MAAjB;AAAA,QACC,SAAO;AAAA,QACN,GAAG;AAAA,QACJ,WAAW,CAAC;AAAA,QACZ,QAAQ;AAAA,QAER;AAAA,UAAC,UAAU;AAAA,UAAV;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,cAAY,aAAa,WAAW;AAAA,YACpC,iBAAe,WAAW,KAAK;AAAA,YAC/B;AAAA,YACA,IAAI;AAAA,YACH,GAAG;AAAA,YACJ,KAAK;AAAA,YACL,aAAa,qBAAqB,MAAM,aAAa,CAAC,UAAU;AAI9D,kBAAI,CAAC,YAAY,MAAM,WAAW,KAAK,MAAM,YAAY,OAAO;AAM9D,sBAAM,cAAc,MAAM;AAC1B,wBAAQ,cAAc,KAAK;AAAA,cAC7B,OAAO;AAEL,sBAAM,eAAe;AAAA,cACvB;AAAA,YACF,CAAC;AAAA,YACD,WAAW,qBAAqB,MAAM,WAAW,CAAC,UAAU;AAM1D,kBAAI,YAAY,MAAM,WAAW,MAAM,eAAe;AACpD;AAAA,cACF;AAEA,kBAAI,CAAC,KAAK,OAAO,EAAE,SAAS,MAAM,GAAG,GAAG;AACtC,wBAAQ,cAAc,KAAK;AAAA,cAC7B;AAAA,YACF,CAAC;AAAA,YACD,SAAS,qBAAqB,MAAM,SAAS,MAAM;AAGjD,oBAAM,wBAAwB,QAAQ,mBAAmB,eAAe;AACxE,kBAAI,CAAC,cAAc,CAAC,YAAY,uBAAuB;AACrD,wBAAQ,cAAc,KAAK;AAAA,cAC7B;AAAA,YACF,CAAC;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ,GAnEA;AAoEF;AAMA,IAAM,eAAe;AAarB,IAAM,cAA8B,gBAAM;AAAA,EACxC,gCAASC,aAAY,OAAsC,cAAc;AACvE,UAAM,EAAE,aAAa,OAAO,YAAY,UAAU,GAAG,aAAa,IAAI;AACtE,UAAM,UAAU,eAAe,cAAc,WAAW;AACxD,UAAM,YAAY,cAAc,QAAQ,QAAQ,KAAK;AACrD,UAAM,YAAY,cAAc,QAAQ,QAAQ,KAAK;AACrD,UAAM,aAAa,UAAU,QAAQ;AACrC,UAAM,+BAAqC,aAAO,UAAU;AAE5D,IAAM,gBAAU,MAAM;AACpB,YAAM,MAAM,sBAAsB,MAAO,6BAA6B,UAAU,KAAM;AACtF,aAAO,MAAM,qBAAqB,GAAG;AAAA,IACvC,GAAG,CAAC,CAAC;AAEL,WACE,oBAAC,YAAS,SAAS,cAAc,YAC9B,WAAC,EAAE,QAAQ,MACV;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACC,cAAY,aAAa,WAAW;AAAA,QACpC,oBAAkB,QAAQ;AAAA,QAC1B,MAAK;AAAA,QACL,mBAAiB;AAAA,QACjB,QAAQ,CAAC;AAAA,QACT,IAAI;AAAA,QACJ,UAAU;AAAA,QACT,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,OAAO;AAAA,UACL,GAAG,MAAM;AAAA,UACT,mBAAmB,6BAA6B,UAAU,OAAO;AAAA,QACnE;AAAA,QAEC,qBAAW;AAAA;AAAA,IACd,GAEJ;AAAA,EAEJ,GApCA;AAqCF;AAIA,SAAS,cAAc,QAAgB,OAAe;AACpD,SAAO,GAAG,MAAM,YAAY,KAAK;AACnC;AAFS;AAIT,SAAS,cAAc,QAAgB,OAAe;AACpD,SAAO,GAAG,MAAM,YAAY,KAAK;AACnC;AAFS;",
|
|
6
6
|
"names": ["Tabs", "TabsList", "TabsTrigger", "TabsContent"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@radix-ui/react-tabs",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.20",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"source": "./src/index.ts",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -11,13 +11,13 @@
|
|
|
11
11
|
],
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@radix-ui/react-direction": "1.1.3",
|
|
15
|
-
"@radix-ui/react-id": "1.1.3",
|
|
16
14
|
"@radix-ui/primitive": "1.1.7",
|
|
17
15
|
"@radix-ui/react-context": "1.2.1",
|
|
16
|
+
"@radix-ui/react-direction": "1.1.3",
|
|
17
|
+
"@radix-ui/react-id": "1.1.3",
|
|
18
18
|
"@radix-ui/react-presence": "1.1.9",
|
|
19
|
-
"@radix-ui/react-
|
|
20
|
-
"@radix-ui/react-
|
|
19
|
+
"@radix-ui/react-roving-focus": "1.1.18",
|
|
20
|
+
"@radix-ui/react-primitive": "2.1.9",
|
|
21
21
|
"@radix-ui/react-use-controllable-state": "1.2.5"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|