226 lines
6.5 KiB
JavaScript
Executable file
226 lines
6.5 KiB
JavaScript
Executable file
"use client";
|
|
import {
|
|
Item,
|
|
Root,
|
|
createRovingFocusGroupScope
|
|
} from "./chunk-5ZUJRVG4.js";
|
|
import "./chunk-6SPNF6KQ.js";
|
|
import {
|
|
useDirection
|
|
} from "./chunk-O2UA4OQB.js";
|
|
import {
|
|
useId
|
|
} from "./chunk-ZZUMGTHG.js";
|
|
import {
|
|
Presence
|
|
} from "./chunk-MZLEVI2I.js";
|
|
import {
|
|
useControllableState
|
|
} from "./chunk-I6MWER2B.js";
|
|
import {
|
|
composeEventHandlers,
|
|
createContextScope
|
|
} from "./chunk-ILYE3ZA7.js";
|
|
import {
|
|
Primitive
|
|
} from "./chunk-H55D7VYG.js";
|
|
import "./chunk-R6S4VRB5.js";
|
|
import "./chunk-4WIT4MX7.js";
|
|
import {
|
|
require_jsx_runtime
|
|
} from "./chunk-S77I6LSE.js";
|
|
import {
|
|
require_react
|
|
} from "./chunk-3TFVT2CW.js";
|
|
import {
|
|
__toESM
|
|
} from "./chunk-4MBMRILA.js";
|
|
|
|
// node_modules/@radix-ui/react-tabs/dist/index.mjs
|
|
var React = __toESM(require_react(), 1);
|
|
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
|
|
var TABS_NAME = "Tabs";
|
|
var [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [
|
|
createRovingFocusGroupScope
|
|
]);
|
|
var useRovingFocusGroupScope = createRovingFocusGroupScope();
|
|
var [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME);
|
|
var Tabs = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeTabs,
|
|
value: valueProp,
|
|
onValueChange,
|
|
defaultValue,
|
|
orientation = "horizontal",
|
|
dir,
|
|
activationMode = "automatic",
|
|
...tabsProps
|
|
} = props;
|
|
const direction = useDirection(dir);
|
|
const [value, setValue] = useControllableState({
|
|
prop: valueProp,
|
|
onChange: onValueChange,
|
|
defaultProp: defaultValue
|
|
});
|
|
return (0, import_jsx_runtime.jsx)(
|
|
TabsProvider,
|
|
{
|
|
scope: __scopeTabs,
|
|
baseId: useId(),
|
|
value,
|
|
onValueChange: setValue,
|
|
orientation,
|
|
dir: direction,
|
|
activationMode,
|
|
children: (0, import_jsx_runtime.jsx)(
|
|
Primitive.div,
|
|
{
|
|
dir: direction,
|
|
"data-orientation": orientation,
|
|
...tabsProps,
|
|
ref: forwardedRef
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
Tabs.displayName = TABS_NAME;
|
|
var TAB_LIST_NAME = "TabsList";
|
|
var TabsList = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeTabs, loop = true, ...listProps } = props;
|
|
const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
|
|
return (0, import_jsx_runtime.jsx)(
|
|
Root,
|
|
{
|
|
asChild: true,
|
|
...rovingFocusGroupScope,
|
|
orientation: context.orientation,
|
|
dir: context.dir,
|
|
loop,
|
|
children: (0, import_jsx_runtime.jsx)(
|
|
Primitive.div,
|
|
{
|
|
role: "tablist",
|
|
"aria-orientation": context.orientation,
|
|
...listProps,
|
|
ref: forwardedRef
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
TabsList.displayName = TAB_LIST_NAME;
|
|
var TRIGGER_NAME = "TabsTrigger";
|
|
var TabsTrigger = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeTabs, value, disabled = false, ...triggerProps } = props;
|
|
const context = useTabsContext(TRIGGER_NAME, __scopeTabs);
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
|
|
const triggerId = makeTriggerId(context.baseId, value);
|
|
const contentId = makeContentId(context.baseId, value);
|
|
const isSelected = value === context.value;
|
|
return (0, import_jsx_runtime.jsx)(
|
|
Item,
|
|
{
|
|
asChild: true,
|
|
...rovingFocusGroupScope,
|
|
focusable: !disabled,
|
|
active: isSelected,
|
|
children: (0, import_jsx_runtime.jsx)(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
role: "tab",
|
|
"aria-selected": isSelected,
|
|
"aria-controls": contentId,
|
|
"data-state": isSelected ? "active" : "inactive",
|
|
"data-disabled": disabled ? "" : void 0,
|
|
disabled,
|
|
id: triggerId,
|
|
...triggerProps,
|
|
ref: forwardedRef,
|
|
onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
|
|
if (!disabled && event.button === 0 && event.ctrlKey === false) {
|
|
context.onValueChange(value);
|
|
} else {
|
|
event.preventDefault();
|
|
}
|
|
}),
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
if ([" ", "Enter"].includes(event.key)) context.onValueChange(value);
|
|
}),
|
|
onFocus: composeEventHandlers(props.onFocus, () => {
|
|
const isAutomaticActivation = context.activationMode !== "manual";
|
|
if (!isSelected && !disabled && isAutomaticActivation) {
|
|
context.onValueChange(value);
|
|
}
|
|
})
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
TabsTrigger.displayName = TRIGGER_NAME;
|
|
var CONTENT_NAME = "TabsContent";
|
|
var TabsContent = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeTabs, value, forceMount, children, ...contentProps } = props;
|
|
const context = useTabsContext(CONTENT_NAME, __scopeTabs);
|
|
const triggerId = makeTriggerId(context.baseId, value);
|
|
const contentId = makeContentId(context.baseId, value);
|
|
const isSelected = value === context.value;
|
|
const isMountAnimationPreventedRef = React.useRef(isSelected);
|
|
React.useEffect(() => {
|
|
const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
|
|
return () => cancelAnimationFrame(rAF);
|
|
}, []);
|
|
return (0, import_jsx_runtime.jsx)(Presence, { present: forceMount || isSelected, children: ({ present }) => (0, import_jsx_runtime.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"data-state": isSelected ? "active" : "inactive",
|
|
"data-orientation": context.orientation,
|
|
role: "tabpanel",
|
|
"aria-labelledby": triggerId,
|
|
hidden: !present,
|
|
id: contentId,
|
|
tabIndex: 0,
|
|
...contentProps,
|
|
ref: forwardedRef,
|
|
style: {
|
|
...props.style,
|
|
animationDuration: isMountAnimationPreventedRef.current ? "0s" : void 0
|
|
},
|
|
children: present && children
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
TabsContent.displayName = CONTENT_NAME;
|
|
function makeTriggerId(baseId, value) {
|
|
return `${baseId}-trigger-${value}`;
|
|
}
|
|
function makeContentId(baseId, value) {
|
|
return `${baseId}-content-${value}`;
|
|
}
|
|
var Root2 = Tabs;
|
|
var List = TabsList;
|
|
var Trigger = TabsTrigger;
|
|
var Content = TabsContent;
|
|
export {
|
|
Content,
|
|
List,
|
|
Root2 as Root,
|
|
Tabs,
|
|
TabsContent,
|
|
TabsList,
|
|
TabsTrigger,
|
|
Trigger,
|
|
createTabsScope
|
|
};
|
|
//# sourceMappingURL=@radix-ui_react-tabs.js.map
|