@moneyforward/mfui-components 2.48.2 → 3.0.0

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

@@ -1,16 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabContext = void 0;
-const react_1 = require("react");
-exports.TabContext = (0, react_1.createContext)({
-    selectedTabId: '',
-    onSelectedTabIdChange: undefined,
-    tabs: [],
-    shouldShowMenu: false,
-    setShouldShowMenu: undefined,
-    targetDOMNode: undefined,
-    registerTab: undefined,
-    unregisterTab: undefined,
-    enableAutoUnmount: true,
-});

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

@@ -1,61 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabItem = TabItem;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const recipes_1 = require("../../../styled-system/recipes");
-const Typography_1 = require("../../Typography");
-const TabContext_1 = require("../TabContext");
-const Tooltip_1 = require("../../Tooltip");
-const FocusIndicator_1 = require("../../FocusIndicator");
-const useArrowKeyHandler_1 = require("./hooks/useArrowKeyHandler");
-const Badge_1 = require("../../Badge");
-const css_1 = require("../../../styled-system/css");
-function TabItem({ id, badgeProps, children, className }) {
-    const { selectedTabId, onSelectedTabIdChange, tabs, shouldShowMenu, targetDOMNode, registerTab, unregisterTab } = (0, react_1.useContext)(TabContext_1.TabContext);
-    const { onKeyDown } = (0, useArrowKeyHandler_1.useArrowKeyHandler)();
-    const buttonRef = (0, react_1.useRef)(null);
-    const labelRef = (0, react_1.useRef)(null);
-    const [shouldShowTooltip, setShouldShowTooltip] = (0, react_1.useState)(false);
-    const { selected, position } = (0, react_1.useMemo)(() => {
-        const firstTabId = tabs[0]?.id;
-        const lastTabId = tabs.at(-1)?.id;
-        const selected = selectedTabId === id;
-        const isFirst = firstTabId === id;
-        // If the Menu is showing, the Menu is the last one, not this tab
-        const isLast = !shouldShowMenu && lastTabId === id;
-        const isMiddle = !isFirst && !isLast;
-        const position = (() => {
-            if (isFirst)
-                return 'start';
-            if (isLast)
-                return 'end';
-            if (isMiddle)
-                return 'middle';
-            return 'only';
-        })();
-        return {
-            selected,
-            position,
-        };
-    }, [selectedTabId, tabs, id, shouldShowMenu]);
-    const onClick = (0, react_1.useCallback)(() => {
-        onSelectedTabIdChange?.(id);
-    }, [id, onSelectedTabIdChange]);
-    (0, react_1.useLayoutEffect)(() => {
-        registerTab?.({ id, badgeProps, children });
-        return () => {
-            unregisterTab?.(id);
-        };
-    }, [id, badgeProps, children, registerTab, unregisterTab]);
-    (0, react_1.useLayoutEffect)(() => {
-        if (!labelRef.current) {
-            return;
-        }
-        setShouldShowTooltip(labelRef.current.clientWidth < labelRef.current.scrollWidth);
-    }, [children]);
-    const classNames = (0, recipes_1.tabItemSlotRecipe)({ selected, position });
-    const buttonElement = ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, role: "tab", id: id, type: "button", "aria-selected": selected, "aria-controls": `tabpanel-${id}`, className: (0, css_1.cx)(classNames.button, 'group', 'mfui-TabItem__button', className), tabIndex: selected ? undefined : -1, onClick: onClick, onKeyDown: onKeyDown, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classNames.selectedIndicator, 'mfui-TabItem__selectedIndicator') }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { ref: labelRef, variant: selected ? 'strongControlLabel' : 'controlLabel', className: (0, css_1.cx)(classNames.label, 'mfui-TabItem__label'), children: children }), badgeProps ? (0, jsx_runtime_1.jsx)(Badge_1.Badge, { ...badgeProps, className: classNames.badge }) : null] }) }));
-    return shouldShowTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { targetDOMNode: targetDOMNode, content: children, trigger: ['hover', 'focus'], className: (0, css_1.cx)(classNames.tooltip, 'mfui-TabItem__tooltip'), placement: "top", children: buttonElement })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classNames.tooltip, 'mfui-TabItem__tooltip'), children: buttonElement }));
-}

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

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

package/dist/cjs/src/Tabs/TabItem/hooks/useArrowKeyHandler.js

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useArrowKeyHandler = useArrowKeyHandler;
-const react_1 = require("react");
-/**
- * A hook to handle the arrow keys for the TabItem component.
- *
- * @returns The event handlers for the arrow keys.
- */
-function useArrowKeyHandler() {
-    const onKeyDown = (0, react_1.useCallback)((event) => {
-        // Check if the key is allowed
-        const isAllowedArrowKeys = ['ArrowLeft', 'ArrowRight'].includes(event.key);
-        if (!isAllowedArrowKeys)
-            return;
-        // Get the tablist element
-        const element = event.currentTarget;
-        const tabList = element.closest('[role="tablist"]');
-        // This case won't happen because the element is child of this tablist
-        if (!tabList)
-            return;
-        // Find the current focused tab index
-        const tabs = tabList.querySelectorAll('[role="tab"]');
-        const currentIndex = [...tabs].indexOf(element);
-        // If the current index is not found, return
-        // This case nearly impossible to happen, because we are focusing on the tab element
-        if (currentIndex === -1)
-            return;
-        // Get the next index
-        const nextIndex = event.key === 'ArrowRight' ? currentIndex + 1 : currentIndex - 1;
-        const nextTab = tabs[nextIndex];
-        // Focus on the next tab
-        nextTab?.focus();
-    }, []);
-    return { onKeyDown };
-}

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

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

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

@@ -1,17 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabList = TabList;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const recipes_1 = require("../../../styled-system/recipes");
-const TabMenu_1 = require("./TabMenu");
-const useShouldShowMenuController_1 = require("./hooks/useShouldShowMenuController");
-const css_1 = require("../../../styled-system/css");
-function TabList({ children, scrollLeftButtonProps, scrollRightButtonProps, allTabsDropdownMenuProps, }) {
-    const classNames = (0, recipes_1.tabListSlotRecipe)({});
-    const containerRef = (0, react_1.useRef)(null);
-    const tabListRef = (0, react_1.useRef)(null);
-    const isOverflowed = (0, useShouldShowMenuController_1.useShouldShowMenuController)(tabListRef, containerRef);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, css_1.cx)(classNames.root, 'mfui-TabList__root'), children: [(0, jsx_runtime_1.jsx)("div", { ref: tabListRef, role: "tablist", className: (0, css_1.cx)(classNames.tabList, isOverflowed && classNames.isOverflowed, 'mfui-TabList__tabList'), children: children }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classNames.blankSpace, 'mfui-TabList__blankSpace') }), isOverflowed ? ((0, jsx_runtime_1.jsx)(TabMenu_1.TabMenu, { tabListRef: tabListRef, scrollLeftButtonProps: scrollLeftButtonProps, scrollRightButtonProps: scrollRightButtonProps, allTabsDropdownMenuProps: allTabsDropdownMenuProps })) : null] }));
-}

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

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

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

@@ -1,30 +0,0 @@
-"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.js

@@ -1,67 +0,0 @@
-"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.js

@@ -1,33 +0,0 @@
-"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.js

@@ -1,31 +0,0 @@
-"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.js

@@ -1,5 +0,0 @@
-"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.js

@@ -1,53 +0,0 @@
-"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.js

@@ -1,5 +0,0 @@
-"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.js

@@ -1,22 +0,0 @@
-"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.js

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

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

@@ -1,5 +0,0 @@
-"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.js

@@ -1,102 +0,0 @@
-"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.js

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

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

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCalculatedSelectedTabId = useCalculatedSelectedTabId;
-const react_1 = require("react");
-/**
- * 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.
- */
-function useCalculatedSelectedTabId({ selectedTabId, onSelectedTabChange, tabs, }) {
-    // implement
-    const [calculatedSelectedTabId, setCalculatedSelectedTabId] = (0, react_1.useState)(selectedTabId);
-    // TODO use useUpdateEffect later, after the PR has this hook is merged
-    // Automatically update the selected tabId if the selectedTabId prop changes
-    (0, react_1.useEffect)(() => {
-        setCalculatedSelectedTabId(selectedTabId);
-    }, [selectedTabId]);
-    return {
-        // If still nothing, we pick the first tabId from the tab list
-        calculatedSelectedTabId: calculatedSelectedTabId ?? tabs[0]?.id,
-        // If the user provides the `onSelectedTabChange` prop, it's a controlled component, we just need to use it
-        setCalculatedSelectedTab: onSelectedTabChange ?? setCalculatedSelectedTabId,
-    };
-}

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

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDataFromChildren = useDataFromChildren;
-const react_1 = require("react");
-const TabList_1 = require("../TabList");
-const TabItem_1 = require("../TabItem");
-const TabPanel_1 = require("../TabPanel");
-/**
- * Extracts the data from the children of the Tabs component.
- *
- * @param children - The children of the Tabs component.
- *
- * @returns The extracted data from the children.
- */
-function useDataFromChildren(children) {
-    return (0, react_1.useMemo)(() => {
-        const tabList = [];
-        const tabPanels = [];
-        const tabs = [];
-        react_1.Children.forEach(children, (child) => {
-            if (!(0, react_1.isValidElement)(child))
-                return;
-            if (child.type === TabList_1.TabList) {
-                const tabListElement = child;
-                tabList.push(tabListElement);
-                react_1.Children.forEach(tabListElement.props.children, (tab) => {
-                    if (!(0, react_1.isValidElement)(tab))
-                        return;
-                    if (tab.type === TabItem_1.TabItem) {
-                        tabs.push(tab);
-                    }
-                });
-            }
-            else if (child.type === TabPanel_1.TabPanel) {
-                tabPanels.push(child);
-            }
-        });
-        const tabsProps = tabs.map((tab) => tab.props);
-        return { tabList, tabPanels, tabs, tabsProps };
-    }, [children]);
-}

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

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

package/dist/cjs/src/Tag/Tag.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = Tag;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const react_1 = require("react");
-const recipes_1 = require("../../styled-system/recipes");
-const IconButton_1 = require("../IconButton");
-const FocusIndicator_1 = require("../FocusIndicator");
-const Typography_1 = require("../Typography");
-const css_1 = require("../../styled-system/css");
-/**
- * The general-purpose Tag component.
- * This component switches the variants of looks depends on the props: href, onClick, disabled, showCloseButton.
- *  - If `href` is provided, the tag will be displayed as `<a>` tag.
- *  - If `onClick` is `provided, the tag will be displayed as `<button>` tag.
- *  - If `disabled` is `true` and `onClick` is provided, the tag will be displayed as disabled button.
- *  - If `showCloseButton` is `true`, the tag will be displayed with a close button.
- */
-function Tag({ label, onClick, href, customLinkComponent, disabled = false, onClose, target, rel, className, }) {
-    const isClickable = !!onClick || !!href;
-    const classes = (0, recipes_1.tagSlotRecipe)({ interactable: isClickable, showCloseButton: !!onClose });
-    const closeButton = ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { disabled: disabled, className: (0, css_1.cx)(classes.closeButton, 'mfui-Tag__closeButton'), "aria-label": `${label}を削除する`, onClick: onClose, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Close, {}) }));
-    if (!isClickable) {
-        return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsxs)("span", { className: (0, css_1.cx)(classes.root, 'mfui-Tag__root', className), children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "condensedInput", children: label }), onClose ? closeButton : null] }) }));
-    }
-    const InternalTag = href ? (customLinkComponent ?? 'a') : 'button';
-    const tagProps = href ? { href, target, rel } : { disabled, onClick };
-    const WrapperTag = onClose ? 'div' : react_1.Fragment;
-    const wrapperProps = onClose ? { className: (0, css_1.cx)(classes.wrapper, 'mfui-Tag__wrapper', className) } : undefined;
-    return ((0, jsx_runtime_1.jsxs)(WrapperTag, { ...wrapperProps, children: [(0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsx)(InternalTag, { className: (0, css_1.cx)(classes.root, 'mfui-Tag__root'), ...tagProps, children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "condensedInput", children: label }) }) }), onClose ? closeButton : null] }));
-}

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

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

package/dist/cjs/src/Tag/index.js

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