@yamada-ui/react/dist/esm/components/tabs/tabs.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { useValue } from "../../hooks/use-value/index.js";
import { useLazyMount } from "../../hooks/use-lazy-mount/index.js";
import { tabsStyle } from "./tabs.style.js";
import { TabDescendantsContext, TabPanelDescendantsContext, TabsContext, useTab, useTabPanel, useTabs, useTabsContext } from "./use-tabs.js";
import { useMemo } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/tabs/tabs.tsx
const { ComponentContext, PropsContext: TabsPropsContext, useComponentContext, usePropsContext: useTabsPropsContext, withContext, withProvider } = createSlotComponent("tabs", tabsStyle);
/**
* `Tabs` is a component for switching between different display areas.
*
* @see https://yamada-ui.com/docs/components/tabs
*/
const TabsRoot = withProvider(({ children, items, lazy, lazyBehavior, orientation: orientationProp,...rest }) => {
	const { id, focusedIndex, index, manual, orientation, setFocusedIndex, setIndex, tabDescendants, tabPanelDescendants, getListProps, getRootProps } = useTabs({
		orientation: useValue(orientationProp),
		...rest
	});
	const componentContext = useMemo(() => ({
		items,
		lazy,
		lazyBehavior
	}), [
		items,
		lazy,
		lazyBehavior
	]);
	return /* @__PURE__ */ jsx(TabDescendantsContext, {
		value: tabDescendants,
		children: /* @__PURE__ */ jsx(TabPanelDescendantsContext, {
			value: tabPanelDescendants,
			children: /* @__PURE__ */ jsx(TabsContext, {
				value: useMemo(() => ({
					id,
					focusedIndex,
					index,
					manual,
					orientation,
					setFocusedIndex,
					setIndex,
					getListProps
				}), [
					id,
					manual,
					focusedIndex,
					index,
					orientation,
					setFocusedIndex,
					setIndex,
					getListProps
				]),
				children: /* @__PURE__ */ jsx(ComponentContext, {
					value: componentContext,
					children: /* @__PURE__ */ jsx(styled.div, {
						...getRootProps(),
						children
					})
				})
			})
		})
	});
}, "root", { transferProps: ["orientation"] })();
const TabsList = withContext(({ children,...rest }) => {
	const { items } = useComponentContext();
	const { getListProps } = useTabsContext();
	const computedChildren = useMemo(() => {
		if (children) return children;
		else return items?.map(({ id, panel: _panel, tab, panelProps: _panelProps,...rest$1 }, index) => (0, utils_exports.isUndefined)(tab) || (0, utils_exports.isNull)(tab) ? null : /* @__PURE__ */ jsx(TabsTab, {
			id,
			index,
			...rest$1,
			children: tab
		}, id ?? index));
	}, [children, items]);
	return /* @__PURE__ */ jsx(styled.div, {
		...getListProps(rest),
		children: computedChildren
	});
}, "list")();
const TabsTab = withContext("button", "tab")(void 0, (props) => {
	const { getRootProps } = useTab(props);
	return getRootProps();
});
const TabsPanels = ({ children }) => {
	const { items } = useComponentContext();
	return useMemo(() => {
		if (children) return children;
		else return items?.map(({ id, panel, panelProps }, index) => (0, utils_exports.isUndefined)(panel) || (0, utils_exports.isNull)(panel) ? null : /* @__PURE__ */ jsx(TabsPanel, {
			index,
			...panelProps,
			children: panel
		}, id ?? index));
	}, [children, items]);
};
const TabsPanel = withContext("div", "panel")(void 0, (props) => {
	const { lazy, lazyBehavior } = useComponentContext();
	const { selected: mounted, getRootProps } = useTabPanel(props);
	const children = useLazyMount({
		lazy,
		lazyBehavior,
		mounted,
		...props
	});
	return {
		...getRootProps(),
		children
	};
});

//#endregion
export { TabsList, TabsPanel, TabsPanels, TabsPropsContext, TabsRoot, TabsTab, useTabsPropsContext };
//# sourceMappingURL=tabs.js.map