@moneyforward/mfui-components 2.48.1

package/dist/cjs/src/Tabs/TabList/TabMenu/TabMenu.d.ts

@@ -0,0 +1,55 @@
+import { type ComponentPropsWithoutRef, type RefObject } from 'react';
+/**
+ * The props for the TabMenu component.
+ */
+export type TabMenuProps = {
+    /**
+     * The reference to the tab list element.
+     */
+    tabListRef: RefObject<HTMLDivElement | null>;
+    /**
+     * The properties for the scroll left button.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the scroll left button. Default is '左へスクロール'.
+     */
+    scrollLeftButtonProps?: {
+        /**
+         * The content of the tooltip for the scroll left button.
+         *
+         * @default '左へスクロール'
+         */
+        tooltipContent?: string;
+    } & Pick<ComponentPropsWithoutRef<'button'>, 'aria-label'>;
+    /**
+     * The properties for the scroll right button.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the scroll right button. Default is '右へスクロール'.
+     */
+    scrollRightButtonProps?: {
+        /**
+         * The content of the tooltip for the scroll right button.
+         *
+         * @default '右へスクロール'
+         */
+        tooltipContent?: string;
+    } & Pick<ComponentPropsWithoutRef<'button'>, 'aria-label'>;
+    /**
+     * The properties for the all tabs dropdown menu.
+     * If this prop is not passed, the default values for each property will be applied.
+     */
+    allTabsDropdownMenuProps?: {
+        /**
+         * The content of the tooltip for the all tabs dropdown menu.
+         *
+         * @default 'すべてのタブ'
+         */
+        tooltipContent?: string;
+    } & Pick<ComponentPropsWithoutRef<'button'>, 'aria-label'>;
+};
+/**
+ * The TabMenu component for the Tabs.
+ * This component will be rendered inside the TabList component.
+ */
+export declare function TabMenu({ tabListRef, scrollLeftButtonProps, scrollRightButtonProps, allTabsDropdownMenuProps, }: TabMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/Tabs/TabList/TabMenu/TabMenu.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabMenu = TabMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
+const react_1 = require("react");
+const IconButton_1 = require("../../../IconButton");
+const recipes_1 = require("../../../../styled-system/recipes");
+const useTabMenuButtonsController_1 = require("./hooks/useTabMenuButtonsController");
+const Tooltip_1 = require("../../../Tooltip");
+const TabContext_1 = require("../../TabContext");
+const DropdownMenu_1 = require("../../../DropdownMenu");
+const useDisabledButtons_1 = require("./hooks/useDisabledButtons");
+const css_1 = require("../../../../styled-system/css");
+/**
+ * The TabMenu component for the Tabs.
+ * This component will be rendered inside the TabList component.
+ */
+function TabMenu({ tabListRef, scrollLeftButtonProps, scrollRightButtonProps, allTabsDropdownMenuProps, }) {
+    const ref = (0, react_1.useRef)(null);
+    const classNames = (0, recipes_1.tabMenuSlotRecipe)({});
+    const { targetDOMNode, tabs, onSelectedTabIdChange } = (0, react_1.useContext)(TabContext_1.TabContext);
+    const { onClickPrev, onClickNext } = (0, useTabMenuButtonsController_1.useTabMenuButtonsController)({
+        tabListRef,
+    });
+    const disabledButtons = (0, useDisabledButtons_1.useDisabledButtons)({ tabListRef });
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, css_1.cx)(classNames.root, 'mfui-TabMenu__root'), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classNames.scrollButtons, 'mfui-TabMenu__scrollButtons'), children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { targetDOMNode: targetDOMNode, content: scrollLeftButtonProps?.tooltipContent ?? '左へスクロール', trigger: ['hover', 'focus'], disabled: disabledButtons.prev, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": scrollLeftButtonProps?.['aria-label'] ?? '左へスクロール', disabled: disabledButtons.prev, outlined: false, className: (0, css_1.cx)(classNames.scrollButton, 'mfui-TabMenu__scrollButton'), onClick: onClickPrev, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PickerBefore, {}) }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { targetDOMNode: targetDOMNode, content: scrollRightButtonProps?.tooltipContent ?? '右へスクロール', trigger: ['hover', 'focus'], disabled: disabledButtons.next, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": scrollRightButtonProps?.['aria-label'] ?? '右へスクロール', disabled: disabledButtons.next, outlined: false, className: (0, css_1.cx)(classNames.scrollButton, 'mfui-TabMenu__scrollButton'), onClick: onClickNext, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PickerAfter, {}) }) })] }), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { targetDOMNode: targetDOMNode, content: allTabsDropdownMenuProps?.tooltipContent ?? 'すべてのタブ', trigger: ['hover', 'focus'], children: (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu, { label: allTabsDropdownMenuProps?.['aria-label'] ?? 'すべてのタブ', icon: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Dropdown, {}), targetDOMNode: targetDOMNode, children: tabs.map((tab) => ((0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => {
+                            onSelectedTabIdChange?.(tab.id);
+                        }, children: tab.children }, tab.id))) }) })] }));
+}

package/dist/cjs/src/Tabs/TabList/TabMenu/hooks/useArrowKeysHandler.d.ts

@@ -0,0 +1,14 @@
+import { type KeyboardEventHandler } from 'react';
+/**
+ * A hook to handle the arrow keys for the TabMenu component.
+ *
+ * @returns The event handlers for the arrow keys.
+ */
+export declare function useArrowKeysHandler(): {
+    prevButtonRef: import("react").RefObject<HTMLButtonElement | null>;
+    nextButtonRef: import("react").RefObject<HTMLButtonElement | null>;
+    menuButtonRef: import("react").RefObject<HTMLButtonElement | null>;
+    onPrevButtonKeyDown: KeyboardEventHandler<HTMLButtonElement>;
+    onNextButtonKeyDown: KeyboardEventHandler<HTMLButtonElement>;
+    onMenuButtonKeyDown: KeyboardEventHandler<HTMLButtonElement>;
+};

package/dist/cjs/src/Tabs/TabList/TabMenu/hooks/useArrowKeysHandler.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useArrowKeysHandler = useArrowKeysHandler;
+const react_1 = require("react");
+/**
+ * Check if the element is disabled or not.
+ *
+ * @param element - The element to check.
+ *
+ * @returns True if the element is disabled, otherwise false.
+ */
+const isElementDisabled = (element) => element?.disabled;
+/**
+ * A hook to handle the arrow keys for the TabMenu component.
+ *
+ * @returns The event handlers for the arrow keys.
+ */
+function useArrowKeysHandler() {
+    const previousButtonRef = (0, react_1.useRef)(null);
+    const nextButtonRef = (0, react_1.useRef)(null);
+    // TODO: Currently, DropdownMenu doesn't support tabindex and ref forwarding, so it's is hard to implement keyboard navigation for the menu button; Need to discuss.
+    const menuButtonRef = (0, react_1.useRef)(null);
+    const onPreviousButtonKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'ArrowRight') {
+            if (!isElementDisabled(nextButtonRef.current)) {
+                nextButtonRef.current?.focus();
+                return;
+            }
+            menuButtonRef.current?.focus();
+        }
+        if (event.key === 'ArrowLeft') {
+            menuButtonRef.current?.focus();
+        }
+    }, []);
+    const onNextButtonKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'ArrowLeft') {
+            if (!isElementDisabled(previousButtonRef.current)) {
+                previousButtonRef.current?.focus();
+                return;
+            }
+            menuButtonRef.current?.focus();
+        }
+        if (event.key === 'ArrowRight') {
+            menuButtonRef.current?.focus();
+        }
+    }, []);
+    const onMenuButtonKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'ArrowRight') {
+            if (!isElementDisabled(previousButtonRef.current)) {
+                previousButtonRef.current?.focus();
+                return;
+            }
+            nextButtonRef.current?.focus();
+        }
+        if (event.key === 'ArrowLeft') {
+            nextButtonRef.current?.focus();
+        }
+    }, []);
+    return {
+        prevButtonRef: previousButtonRef,
+        nextButtonRef,
+        menuButtonRef,
+        onPrevButtonKeyDown: onPreviousButtonKeyDown,
+        onNextButtonKeyDown,
+        onMenuButtonKeyDown,
+    };
+}

package/dist/cjs/src/Tabs/TabList/TabMenu/hooks/useDisabledButtons.d.ts

@@ -0,0 +1,22 @@
+import { type RefObject } from 'react';
+/**
+ * The options for the useDisabledButtons hook.
+ */
+type UseDisabledButtonsOptions = {
+    /**
+     * The reference to the tab list element.
+     */
+    tabListRef: RefObject<HTMLDivElement | null>;
+};
+/**
+ * Custom hook for managing disabled state of tab menu buttons.
+ *
+ * @param tabListRef - The reference to the tab list element.
+ *
+ * @returns The disabled state of the tab menu buttons.
+ */
+export declare function useDisabledButtons({ tabListRef }: UseDisabledButtonsOptions): {
+    prev: boolean;
+    next: boolean;
+};
+export {};

package/dist/cjs/src/Tabs/TabList/TabMenu/hooks/useDisabledButtons.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDisabledButtons = useDisabledButtons;
+const react_1 = require("react");
+/**
+ * Custom hook for managing disabled state of tab menu buttons.
+ *
+ * @param tabListRef - The reference to the tab list element.
+ *
+ * @returns The disabled state of the tab menu buttons.
+ */
+function useDisabledButtons({ tabListRef }) {
+    const [disabledButtons, setDisabledButtons] = (0, react_1.useState)({ prev: true, next: false });
+    (0, react_1.useEffect)(() => {
+        const tabList = tabListRef.current;
+        if (!tabList)
+            return;
+        const handler = () => {
+            // We must round up the scrollLeft, because it can be a float number and when you scroll to the end,
+            // the scrollLeft can be a little bit less than the scrollWidth - clientWidth.
+            const scrollLeft = Math.ceil(tabList.scrollLeft);
+            setDisabledButtons({
+                prev: scrollLeft === 0,
+                next: scrollLeft === tabList.scrollWidth - tabList.clientWidth,
+            });
+        };
+        tabList.addEventListener('scroll', handler);
+        return () => {
+            tabList.removeEventListener('scroll', handler);
+        };
+    }, [tabListRef]);
+    return disabledButtons;
+}

package/dist/cjs/src/Tabs/TabList/TabMenu/hooks/useTabMenuButtonsController.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+type UseTabMenuButtonsControllerOptions = {
+    tabListRef: RefObject<HTMLDivElement | null>;
+};
+/**
+ * Custom hook for managing tab menu buttons behavior.
+ * Handles onClick events for scrolling the tab list.
+ *
+ * @returns The event handlers for the tab menu buttons.
+ */
+export declare function useTabMenuButtonsController({ tabListRef }: UseTabMenuButtonsControllerOptions): {
+    onClickPrev: () => void;
+    onClickNext: () => void;
+};
+export {};

package/dist/cjs/src/Tabs/TabList/TabMenu/hooks/useTabMenuButtonsController.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabMenuButtonsController = useTabMenuButtonsController;
+const react_1 = require("react");
+/**
+ * Custom hook for managing tab menu buttons behavior.
+ * Handles onClick events for scrolling the tab list.
+ *
+ * @returns The event handlers for the tab menu buttons.
+ */
+function useTabMenuButtonsController({ tabListRef }) {
+    const { onClickPrev, onClickNext } = (0, react_1.useMemo)(() => {
+        // same as sizes.mfui.size.offset.tabs-scroll.horizontal.comfort, but can't use `token()` function directly here because it will make bundle size very big
+        const scrollOffset = 10;
+        const getScrollSize = () => (tabListRef.current?.clientWidth ?? 0) - scrollOffset;
+        const onClickPrevious = () => {
+            tabListRef.current?.scrollBy(-getScrollSize(), 0);
+        };
+        const onClickNext = () => {
+            tabListRef.current?.scrollBy(getScrollSize(), 0);
+        };
+        return {
+            onClickPrev: onClickPrevious,
+            onClickNext,
+        };
+    }, [tabListRef]);
+    return {
+        onClickPrev,
+        onClickNext,
+    };
+}

package/dist/cjs/src/Tabs/TabList/TabMenu/index.d.ts

@@ -0,0 +1 @@
+export { TabMenu } from './TabMenu';

package/dist/cjs/src/Tabs/TabList/TabMenu/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabMenu = void 0;
+var TabMenu_1 = require("./TabMenu");
+Object.defineProperty(exports, "TabMenu", { enumerable: true, get: function () { return TabMenu_1.TabMenu; } });

package/dist/cjs/src/Tabs/TabList/hooks/useShouldShowMenuController.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+/**
+ * Hook that checks if the tab items are overflowed and updates the context.
+ *
+ * @param tabListRef - The ref of the tab list
+ *
+ * @param containerRef - The ref of the container
+ *
+ * @returns Whether the tab items are overflowed
+ */
+export declare function useShouldShowMenuController(tabListRef: RefObject<HTMLDivElement | null>, containerRef: RefObject<HTMLDivElement | null>): boolean;

package/dist/cjs/src/Tabs/TabList/hooks/useShouldShowMenuController.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useShouldShowMenuController = useShouldShowMenuController;
+const react_1 = require("react");
+const TabContext_1 = require("../../TabContext");
+/**
+ * Hook that uses ResizeObserver to observe the size of an element.
+ *
+ * @param ref - The ref of the element to observe
+ *
+ * @param callback - The callback function to call when the size changes
+ */
+const useResizeObserver = (ref, callback) => {
+    (0, react_1.useEffect)(() => {
+        if (!ref.current)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            if (entries[0]) {
+                callback(entries[0].contentRect);
+            }
+        });
+        observer.observe(ref.current);
+        // Cleanup observer on component unmount
+        return () => {
+            observer.disconnect();
+        };
+    }, [ref, callback]);
+};
+function checkIfElementIsOverflowed(tabListRef, containerRef) {
+    return Number(tabListRef.current?.scrollWidth) > Number(containerRef.current?.clientWidth);
+}
+/**
+ * Hook that checks if the tab items are overflowed and updates the context.
+ *
+ * @param tabListRef - The ref of the tab list
+ *
+ * @param containerRef - The ref of the container
+ *
+ * @returns Whether the tab items are overflowed
+ */
+function useShouldShowMenuController(tabListRef, containerRef) {
+    const { shouldShowMenu, setShouldShowMenu } = (0, react_1.useContext)(TabContext_1.TabContext);
+    (0, react_1.useEffect)(() => {
+        setShouldShowMenu?.(checkIfElementIsOverflowed(tabListRef, containerRef));
+    }, [setShouldShowMenu, tabListRef, containerRef]);
+    useResizeObserver(tabListRef, (0, react_1.useCallback)(() => {
+        setShouldShowMenu?.(checkIfElementIsOverflowed(tabListRef, containerRef));
+    }, [setShouldShowMenu, tabListRef, containerRef]));
+    useResizeObserver(containerRef, (0, react_1.useCallback)(() => {
+        setShouldShowMenu?.(checkIfElementIsOverflowed(tabListRef, containerRef));
+    }, [setShouldShowMenu, tabListRef, containerRef]));
+    return shouldShowMenu;
+}

package/dist/cjs/src/Tabs/TabList/index.d.ts

@@ -0,0 +1,2 @@
+export { TabList } from './TabList';
+export { type TabListProps } from './TabList.types';

package/dist/cjs/src/Tabs/TabList/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabList = void 0;
+var TabList_1 = require("./TabList");
+Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return TabList_1.TabList; } });

package/dist/cjs/src/Tabs/TabPanel/TabPanel.d.ts

@@ -0,0 +1,2 @@
+import { type TabPanelProps } from './TabPanel.types';
+export declare function TabPanel({ forTabId, enableAutoUnmount, children, style, ...props }: TabPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/src/Tabs/TabPanel/TabPanel.js

@@ -0,0 +1,22 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabPanel = TabPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const recipes_1 = require("../../../styled-system/recipes");
+const TabContext_1 = require("../TabContext");
+const css_1 = require("../../../styled-system/css");
+function TabPanel({ forTabId, enableAutoUnmount, children, style, ...props }) {
+    const { selectedTabId, enableAutoUnmount: contextEnableAutoUnmount } = (0, react_1.useContext)(TabContext_1.TabContext);
+    // Use prop value if provided, otherwise fall back to context value
+    const shouldAutoUnmount = enableAutoUnmount ?? contextEnableAutoUnmount;
+    const isSelected = selectedTabId === forTabId;
+    if (shouldAutoUnmount && !isSelected)
+        return null;
+    const classNames = (0, recipes_1.tabPanelSlotRecipe)();
+    return ((0, jsx_runtime_1.jsx)("div", { role: "tabpanel", id: `tabpanel-${forTabId}`, className: (0, css_1.cx)(classNames.root, 'mfui-TabPanel__root'), "aria-labelledby": forTabId, style: {
+            ...style,
+            display: !shouldAutoUnmount && !isSelected ? 'none' : undefined,
+        }, ...props, children: children }));
+}

package/dist/cjs/src/Tabs/TabPanel/TabPanel.types.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * Props for the TabPanel component.
+ */
+export type TabPanelProps = {
+    /**
+     * The ID of the tab that this panel is associated with.
+     */
+    forTabId: string;
+    /**
+     * Enable auto unmounting of the panel content when it's not displayed.
+     * When true, the panel content will return null instead of hiding via CSS.
+     *
+     * @default true
+     */
+    enableAutoUnmount?: boolean;
+} & Pick<ComponentPropsWithoutRef<'div'>, 'className' | 'style' | 'children'>;

package/dist/cjs/src/Tabs/TabPanel/TabPanel.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/Tabs/TabPanel/index.d.ts

@@ -0,0 +1,2 @@
+export { TabPanel } from './TabPanel';
+export { type TabPanelProps } from './TabPanel.types';

package/dist/cjs/src/Tabs/TabPanel/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabPanel = void 0;
+var TabPanel_1 = require("./TabPanel");
+Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return TabPanel_1.TabPanel; } });

package/dist/cjs/src/Tabs/Tabs.d.ts

@@ -0,0 +1,42 @@
+import { type TabsProps } from './Tabs.types';
+import { TabItem } from './TabItem';
+import { TabList } from './TabList';
+import { TabPanel } from './TabPanel';
+declare function Base({ selectedTabId, onSelectedTabChange, targetDOMNode, enableAutoUnmount, children }: TabsProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The Tabs component manages the tabs, tab lists, and tab panels within a tab section.
+ * It provides the necessary context for handling tab selection and rendering the appropriate content.
+ *
+ * The List, Item, and Panel components are provided as sub-components of Tabs.
+ * You can use them as follows:
+ *
+ * @example
+ * ```jsx
+ * <Tabs>
+ *   <Tabs.List>
+ *     <Tabs.Item>Item 1</Tabs.Item>
+ *   </Tabs.List>
+ *   <Tabs.Panel>Panel 1</Tabs.Panel>
+ * </Tabs>
+ * ```
+ * This component switches the variants of looks depends on the props: orientation, nested.
+ * Also extends the props of the `<div>` element.
+ */
+export declare const Tabs: typeof Base & {
+    /**
+     * The TabList component for the Tabs.
+     * This component will be rendered inside the Tabs component.
+     */
+    List: typeof TabList;
+    /**
+     * The TabItem item component for the Tabs.
+     * This component will be rendered inside the TabList component.
+     */
+    Item: typeof TabItem;
+    /**
+     * The TabPanel item component for the Tabs.
+     * This component will be rendered inside the Tabs component and same level as the TabList component.
+     */
+    Panel: typeof TabPanel;
+};
+export {};

package/dist/cjs/src/Tabs/Tabs.js

@@ -0,0 +1,102 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const recipes_1 = require("../../styled-system/recipes");
+const useCalculatedSelectedTabId_1 = require("./hooks/useCalculatedSelectedTabId");
+const TabItem_1 = require("./TabItem");
+const TabList_1 = require("./TabList");
+const TabPanel_1 = require("./TabPanel");
+const TabContext_1 = require("./TabContext");
+const getTargetDomNode_1 = require("../utilities/dom/getTargetDomNode");
+const css_1 = require("../../styled-system/css");
+function Base({ selectedTabId, onSelectedTabChange, targetDOMNode, enableAutoUnmount = true, children }) {
+    const classNames = (0, recipes_1.tabsSlotRecipe)();
+    const [shouldShowMenu, setShouldShowMenu] = (0, react_1.useState)(false);
+    const wrapperRef = (0, react_1.useRef)(null);
+    const [tabs, setTabs] = (0, react_1.useState)([]);
+    const { calculatedSelectedTabId, setCalculatedSelectedTab } = (0, useCalculatedSelectedTabId_1.useCalculatedSelectedTabId)({
+        selectedTabId,
+        onSelectedTabChange,
+        tabs,
+    });
+    const registeringTabs = (0, react_1.useRef)({});
+    const { registerTab, unregisterTab } = (0, react_1.useMemo)(() => {
+        const registerTab = (tab) => {
+            registeringTabs.current[tab.id] = tab;
+            setTabs(Object.values(registeringTabs.current));
+        };
+        const unregisterTab = (tabId) => {
+            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+            delete registeringTabs.current[tabId];
+            setTabs(Object.values(registeringTabs.current));
+        };
+        return {
+            registerTab,
+            unregisterTab,
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        setTabs(Object.values(registeringTabs.current));
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        selectedTabId: calculatedSelectedTabId,
+        onSelectedTabIdChange: setCalculatedSelectedTab,
+        tabs,
+        shouldShowMenu,
+        setShouldShowMenu,
+        targetDOMNode: (0, getTargetDomNode_1.getTargetDomNode)(targetDOMNode, wrapperRef.current),
+        registerTab,
+        unregisterTab,
+        enableAutoUnmount,
+    }), [
+        calculatedSelectedTabId,
+        setCalculatedSelectedTab,
+        tabs,
+        shouldShowMenu,
+        setShouldShowMenu,
+        targetDOMNode,
+        registerTab,
+        unregisterTab,
+        enableAutoUnmount,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(TabContext_1.TabContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)("div", { ref: wrapperRef, className: (0, css_1.cx)(classNames.root, 'mfui-Tabs__root'), children: children }) }));
+}
+/**
+ * The Tabs component manages the tabs, tab lists, and tab panels within a tab section.
+ * It provides the necessary context for handling tab selection and rendering the appropriate content.
+ *
+ * The List, Item, and Panel components are provided as sub-components of Tabs.
+ * You can use them as follows:
+ *
+ * @example
+ * ```jsx
+ * <Tabs>
+ *   <Tabs.List>
+ *     <Tabs.Item>Item 1</Tabs.Item>
+ *   </Tabs.List>
+ *   <Tabs.Panel>Panel 1</Tabs.Panel>
+ * </Tabs>
+ * ```
+ * This component switches the variants of looks depends on the props: orientation, nested.
+ * Also extends the props of the `<div>` element.
+ */
+exports.Tabs = Object.assign(Base, {
+    /**
+     * The TabList component for the Tabs.
+     * This component will be rendered inside the Tabs component.
+     */
+    List: TabList_1.TabList,
+    /**
+     * The TabItem item component for the Tabs.
+     * This component will be rendered inside the TabList component.
+     */
+    Item: TabItem_1.TabItem,
+    /**
+     * The TabPanel item component for the Tabs.
+     * This component will be rendered inside the Tabs component and same level as the TabList component.
+     */
+    Panel: TabPanel_1.TabPanel,
+});

package/dist/cjs/src/Tabs/Tabs.types.d.ts

@@ -0,0 +1,30 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * Props for the Tabs component.
+ */
+export type TabsProps = {
+    /**
+     * The ID of the currently selected tab.
+     * Can be a string value.
+     */
+    selectedTabId?: string;
+    /**
+     * Callback function that is called when the selected tab changes.
+     * Receives the new tab ID as an argument.
+     */
+    onSelectedTabChange?: (tabId: string) => void;
+    /**
+     * The DOM node where the tab container should be rendered.
+     *
+     * If provided, the container is rendered inside this node. Otherwise, a
+     * suitable DOM node is chosen automatically.
+     */
+    targetDOMNode?: HTMLElement | null;
+    /**
+     * Enable auto unmounting of the tab panel content when it's not displayed.
+     * When true, the tab panel content will return null instead of hiding via CSS.
+     *
+     * @default true
+     */
+    enableAutoUnmount?: boolean;
+} & Pick<ComponentPropsWithoutRef<'div'>, 'className' | 'style' | 'children'>;

package/dist/cjs/src/Tabs/Tabs.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/Tabs/hooks/useCalculatedSelectedTabId.d.ts

@@ -0,0 +1,33 @@
+import { type TabItemProps } from '../TabItem';
+/**
+ * Options for the useCalculatedSelectedTabId hook.
+ */
+type UseCalculatedSelectedTabIdOptions = {
+    /**
+     * The selected tab ID, get from Tabs props.
+     */
+    selectedTabId?: string;
+    /**
+     * Callback to be called when the selected tab ID changes, get from Tabs props.
+     */
+    onSelectedTabChange?: (tabId: string) => void;
+    /**
+     * The list of tab props, calculated from Tabs children.
+     */
+    tabs: TabItemProps[];
+};
+/**
+ * Custom hook to manage the selected tab ID based on provided options.
+ * Automatically updates the selected tab ID when the `selectedTabId` prop changes.
+ * If no tab is selected, defaults to the first tab ID from the list of tab IDs.
+ * If `onSelectedTabChange` is provided, the component is controlled and updates are handled externally.
+ *
+ * @param options - The options for the hook including selected tab ID, callback for tab changes, and list of tab IDs.
+ *
+ * @returns An object containing the calculated selected tab ID and a function to set the selected tab.
+ */
+export declare function useCalculatedSelectedTabId({ selectedTabId, onSelectedTabChange, tabs, }: UseCalculatedSelectedTabIdOptions): {
+    calculatedSelectedTabId: string | undefined;
+    setCalculatedSelectedTab: (tabId: string) => void;
+};
+export {};