@moneyforward/mfui-components 2.48.2 → 3.0.0

package/dist/cjs/src/Pagination/PagePicker/PagePicker.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PagePicker = PagePicker;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const recipes_1 = require("../../../styled-system/recipes");
-const IconButton_1 = require("../../IconButton");
-const Typography_1 = require("../../Typography");
-const SelectBox_1 = require("../../SelectBox");
-const css_1 = require("../../../styled-system/css");
-/**
- * The PagePicker for displaying the current page number and the total number of pages.
- */
-function PagePicker({ currentPageNumber, totalPages, prevButtonProps, pageSelectBoxProps, pageSuffixLabel, nextButtonProps, onPageChange, }) {
-    const classes = (0, recipes_1.pagePickerSlotRecipe)();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.root, 'mfui-PagePicker__root'), children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { className: (0, css_1.cx)(classes.prevButton, 'mfui-PagePicker__prevButton'), disabled: currentPageNumber === 1, "aria-label": prevButtonProps?.['aria-label'] ?? '前のページへ戻る', onClick: () => {
-                    onPageChange?.(currentPageNumber - 1);
-                }, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PickerBefore, {}) }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.pageSelect, 'mfui-PagePicker__pageSelect'), children: (0, jsx_runtime_1.jsx)(SelectBox_1.SelectBox, { size: "small", triggerProps: {
-                        'aria-label': pageSelectBoxProps?.['aria-label'] ?? 'ページを選択する',
-                    }, value: currentPageNumber.toString(), options: Array.from({ length: totalPages }).map((_, index) => ({
-                        value: (index + 1).toString(),
-                        label: (index + 1).toString(),
-                    })), popoverContentProps: { className: classes.optionPanel }, onChange: (value) => {
-                        onPageChange?.(Number(value));
-                    } }) }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: (0, css_1.cx)(classes.separator, 'mfui-PagePicker__separator'), children: "/" }), (0, jsx_runtime_1.jsxs)(Typography_1.Typography, { className: (0, css_1.cx)(classes.totalPages, 'mfui-PagePicker__totalPages'), children: [totalPages, pageSuffixLabel] }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { className: (0, css_1.cx)(classes.nextButton, 'mfui-PagePicker__nextButton'), "aria-label": nextButtonProps?.['aria-label'] ?? '次のページへ進む', disabled: currentPageNumber === totalPages, onClick: () => {
-                    onPageChange?.(currentPageNumber + 1);
-                }, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PickerAfter, {}) })] }));
-}

package/dist/cjs/src/Pagination/PagePicker/PagePicker.types.js

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

package/dist/cjs/src/Pagination/PagePicker/index.js

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

package/dist/cjs/src/Pagination/Pagination.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pagination = Pagination;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const recipes_1 = require("../../styled-system/recipes");
-const ItemsPerPage_1 = require("./ItemsPerPage");
-const ItemsCount_1 = require("./ItemsCount");
-const PagePicker_1 = require("./PagePicker");
-const css_1 = require("../../styled-system/css");
-/**
- * The general-purpose Pagination component.
- * This component switches the looks depends on the props: showItemsCount, showPagePicker and showItemsPerPage.
- */
-function Pagination({ 'aria-label': ariaLabel, currentPageNumber, totalItems, itemsPerPage, unitLabel = '件', prevButtonProps, pageSelectBoxProps, nextButtonProps, itemsPerPageProps = {}, itemsPerPageSelectBoxProps, showItemsCount = false, showPagePicker = false, showItemsPerPage = false, alignment = 'left', pageSuffixLabel = 'ページ', onPageChange, ...props }) {
-    const { label = '1ページの表示数', options, onChange } = itemsPerPageProps;
-    const totalPages = Math.ceil(totalItems / itemsPerPage);
-    const classes = (0, recipes_1.paginationSlotRecipe)({ alignment });
-    return ((0, jsx_runtime_1.jsxs)("nav", { className: (0, css_1.cx)(classes.root, 'mfui-Pagination__root'), ...props, "aria-label": ariaLabel, children: [showItemsCount ? ((0, jsx_runtime_1.jsx)(ItemsCount_1.ItemsCount, { totalPages: totalPages, currentPageNumber: currentPageNumber, totalItems: totalItems, itemsPerPage: itemsPerPage, unitLabel: unitLabel })) : null, showPagePicker && totalPages > 1 ? ((0, jsx_runtime_1.jsx)(PagePicker_1.PagePicker, { currentPageNumber: currentPageNumber, totalPages: totalPages, prevButtonProps: prevButtonProps, pageSelectBoxProps: pageSelectBoxProps, nextButtonProps: nextButtonProps, pageSuffixLabel: pageSuffixLabel, onPageChange: onPageChange })) : null, showItemsPerPage && options ? ((0, jsx_runtime_1.jsx)(ItemsPerPage_1.ItemsPerPage, { itemsPerPage: itemsPerPage, itemsPerPageLabel: label, itemsPerPageOptions: options, itemsPerPageSelectBoxProps: itemsPerPageSelectBoxProps, onItemsPerPageChange: onChange })) : null] }));
-}

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

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

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

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

package/dist/cjs/src/Pagination/shared/commonStyles.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SELECT_BOX_MAX_HEIGHT = exports.SELECT_BOX_PADDING_X = exports.SELECT_BOX_ROW_HEIGHT = void 0;
-exports.SELECT_BOX_ROW_HEIGHT = 32;
-exports.SELECT_BOX_PADDING_X = 24;
-exports.SELECT_BOX_MAX_HEIGHT = exports.SELECT_BOX_ROW_HEIGHT * 5 + exports.SELECT_BOX_PADDING_X;

package/dist/cjs/src/Panel/Panel.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Panel = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const css_1 = require("../../styled-system/css");
-const recipes_1 = require("../../styled-system/recipes");
-/**
- * The Panel component.
- * This component is used for grouping content with a border.
- * Also extends the props of `<div>` element.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
- */
-exports.Panel = (0, react_1.forwardRef)(({ className, children, ...props }, ref) => {
-    const classes = (0, recipes_1.panelSlotRecipe)();
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, css_1.cx)(classes.root, 'mfui-Panel__root', className), ...props, children: children }));
-});

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

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

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

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

package/dist/cjs/src/Popover/Popover.js

@@ -1,232 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Popover = Popover;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const PopoverContext_1 = require("./PopoverContext");
-const usePopoverMenuPlacement_1 = require("../utilities/dom/usePopoverMenuPlacement");
-const useDisclosure_1 = require("../utilities/state/useDisclosure");
-const Portal_1 = require("../Portal");
-const useOnClickOutside_1 = require("../utilities/dom/useOnClickOutside");
-const getRootNode_1 = require("../utilities/dom/getRootNode");
-const getTargetDomNode_1 = require("../utilities/dom/getTargetDomNode");
-const recipes_1 = require("../../styled-system/recipes");
-const useUpdateEffect_1 = require("../utilities/effect/useUpdateEffect");
-const css_1 = require("../../styled-system/css");
-/**
- * The Popover component.
- * This component is a foundation component for other Popover components like SelectBox, MultipleSelectBox, DropdownMenu, DatePicker, etc
- *
- * You can control the open state of the Popover by passing the `open` and `onOpenStateChanged` props
- * Or just leave it as an uncontrolled popover, it will automatically handle by itself.
- */
-function Popover({ renderTrigger, renderContent, open, onOpenStateChanged, onOpen, onClose, enableAutoFocusOnTrigger = true, enableAutoFocusOnPopover = true, minWidth, maxHeight, enableConstrainedContentWidth = false, contentProps = {}, targetDOMNode, enableAutoUnmount = true, onBlur, allowedPlacements, enableViewportConstraint = true, enableAutomaticPortalTargetResolution = false, enableCenteredLayoutOnNarrowViewport = false, }) {
-    // Toggle event is the event triggered by open / close the Popover
-    const [toggleEvent, setToggleEvent] = (0, react_1.useState)();
-    const { isOpen: localIsOpen, toggle: localToggle, open: localOpen, close: localClose, } = (0, useDisclosure_1.useDisclosure)({
-        value: open,
-        onToggle: onOpenStateChanged,
-        onOpen: () => {
-            onOpenStateChanged?.(true);
-        },
-        onClose: () => {
-            onOpenStateChanged?.(false);
-        },
-    });
-    const { refs, floatingStyles, update } = (0, usePopoverMenuPlacement_1.usePopoverMenuPlacement)({
-        minWidth,
-        maxHeight,
-        allowedPlacements,
-        enableViewportConstraint,
-        constrainToTriggerWidth: enableConstrainedContentWidth,
-        enableCenteredLayoutOnNarrowViewport,
-    });
-    // Fire onOpen / onClose *only* when the open state actually changes.
-    // We keep a ref of the previous open state so a new toggleEvent while already
-    // open does not retrigger `onOpen`, which previously caused unexpected focus
-    // jumps (e.g. selecting an end-date rewrote focus back to start input).
-    const previousOpenRef = (0, react_1.useRef)(localIsOpen);
-    (0, useUpdateEffect_1.useUpdateEffect)(() => {
-        const wasOpen = previousOpenRef.current;
-        if (!wasOpen && localIsOpen) {
-            // Transition: closed -> open
-            onOpen?.(toggleEvent);
-            if (!toggleEvent?.defaultPrevented && enableAutoFocusOnPopover) {
-                refs.floating.current?.focus({ preventScroll: true });
-            }
-        }
-        else if (wasOpen && !localIsOpen) {
-            // Transition: open -> closed
-            onClose?.(toggleEvent);
-            if (!toggleEvent?.defaultPrevented && enableAutoFocusOnTrigger) {
-                refs.reference.current?.focus();
-            }
-        }
-        // Update tracker for next invocation
-        previousOpenRef.current = localIsOpen;
-    }, [localIsOpen, onOpen, onClose, enableAutoFocusOnPopover, enableAutoFocusOnTrigger]);
-    const handleKeyDownTrigger = (0, react_1.useCallback)((event) => {
-        switch (event.key) {
-            case 'ArrowDown':
-            case 'ArrowUp':
-                event.stopPropagation();
-                event.preventDefault();
-                setToggleEvent(event);
-                localOpen();
-                break;
-        }
-    }, [localOpen]);
-    const handleKeyDownPopover = (0, react_1.useCallback)((event) => {
-        switch (event.key) {
-            case 'Escape':
-                event.stopPropagation();
-                event.preventDefault();
-                setToggleEvent(event);
-                localClose();
-                break;
-        }
-    }, [localClose]);
-    // Smart blur detection: only trigger onBlur when focus leaves both trigger and popover
-    const handleTriggerBlur = (0, react_1.useCallback)((event) => {
-        // Always use setTimeout to check the next focused element after blur event completes
-        // This ensures we correctly handle cases where elements within the trigger area (like clear buttons)
-        // cause blur events but the user is still interacting with the component
-        setTimeout(() => {
-            const triggerElement = refs.reference.current;
-            const popoverElement = refs.floating.current;
-            // Get the appropriate root node for the trigger element
-            const rootNode = (0, getRootNode_1.getRootNode)(triggerElement);
-            // Helper function to check if an element is within the component
-            const isElementWithinComponent = (element) => {
-                if (!element)
-                    return false;
-                // Check if focus is within trigger
-                if (triggerElement && (element === triggerElement || triggerElement.contains(element))) {
-                    return true;
-                }
-                // Check if focus is within popover
-                if (popoverElement && (element === popoverElement || popoverElement.contains(element))) {
-                    return true;
-                }
-                return false;
-            };
-            // Get active elements from all potential sources
-            const shadowActiveElement = rootNode instanceof ShadowRoot ? rootNode.activeElement : null;
-            const documentActiveElement = document.activeElement;
-            // In Shadow DOM environments, we need to handle focus detection differently
-            const isInShadowDOM = rootNode instanceof ShadowRoot;
-            let isFocusStillWithinComponent = false;
-            if (isInShadowDOM) {
-                // In Shadow DOM: check both shadow and document active elements
-                isFocusStillWithinComponent =
-                    isElementWithinComponent(shadowActiveElement) ||
-                        isElementWithinComponent(documentActiveElement);
-                // Special case: If shadow activeElement is null, it means focus has left the shadow DOM.
-                // We should trigger onBlur unless the document activeElement is still within our component
-                // (which would be the case if focus moved to the shadow host or related elements)
-                if (!shadowActiveElement) {
-                    isFocusStillWithinComponent = isElementWithinComponent(documentActiveElement);
-                }
-            }
-            else {
-                // In regular DOM: just check document active element
-                isFocusStillWithinComponent = isElementWithinComponent(documentActiveElement);
-            }
-            // Only trigger onBlur if focus has completely left the component
-            if (!isFocusStillWithinComponent) {
-                onBlur?.(event);
-            }
-        }, 0);
-    }, [onBlur, refs.reference, refs.floating]);
-    // Close the menu when clicking outside the menu
-    (0, useOnClickOutside_1.useOnClickOutside)(refs.floating, (event) => {
-        setToggleEvent(undefined);
-        localClose();
-        // Also trigger onBlur when clicking outside, since this represents the user
-        // clicking away from the component entirely. We create a synthetic FocusEvent
-        // based on the click event for consistency with other blur scenarios.
-        onBlur?.({
-            type: 'blur',
-            target: refs.reference.current,
-            currentTarget: refs.reference.current,
-            relatedTarget: event.target,
-            bubbles: true,
-            cancelable: false,
-            timeStamp: event.timeStamp,
-            nativeEvent: event,
-        });
-    }, { ignoreRefs: [refs.reference] });
-    const options = (0, react_1.useMemo)(() => {
-        const toggle = (event) => {
-            setToggleEvent(event);
-            localToggle();
-        };
-        const open = (event) => {
-            setToggleEvent(event);
-            localOpen();
-        };
-        const close = (event) => {
-            setToggleEvent(event);
-            localClose();
-        };
-        return {
-            togglePopover: toggle,
-            openPopover: open,
-            closePopover: close,
-            isPopoverOpen: localIsOpen,
-            setTriggerRef: refs.setReference,
-            handleTriggerKeyDown: handleKeyDownTrigger,
-            handleTriggerBlur,
-        };
-    }, [localIsOpen, localOpen, localClose, localToggle, refs, handleKeyDownTrigger, handleTriggerBlur]);
-    const classes = (0, recipes_1.popoverSlotRecipe)();
-    /**
-     * useDisclosure delayed updating the value because it uses useEffect to update the value.
-     * To prevent the Popover delays 1 render phase to display, we can use both `open` and `localIsOpen` to check if the
-     * Popover is opening.
-     *
-     * When enableAutoUnmount is true, only render when open (returns null when closed).
-     * When enableAutoUnmount is false, always render but hide via CSS when closed.
-     */
-    const isPopoverOpen = open ?? localIsOpen;
-    const shouldRenderTheContent = enableAutoUnmount ? isPopoverOpen : true;
-    // Get the current nesting context for automatic portal target resolution and depth tracking
-    const { isNested, nestingDepth } = (0, PopoverContext_1.usePopoverContext)();
-    // Determine effective target DOM node based on nesting context and enableAutomaticPortalTargetResolution
-    const effectiveTargetDOMNode = (0, react_1.useMemo)(() => {
-        if (!enableAutomaticPortalTargetResolution || !isNested) {
-            return targetDOMNode;
-        }
-        try {
-            // For nested scenarios, use MFUI's ShadowDOM-compatible target resolution
-            // This will automatically create #mfui-shadow-dom-root in ShadowDOM or use document.body
-            const resolvedNode = (0, getTargetDomNode_1.getTargetDomNode)(undefined, refs.reference.current);
-            return resolvedNode;
-        }
-        catch (error) {
-            // Handle cases where:
-            // 1. Element is not connected to DOM tree (detached elements)
-            // 2. ShadowDOM operations fail
-            // 3. SSR edge cases
-            console.warn('Failed to resolve target DOM node for nested Popover, falling back to original target:', error);
-            return targetDOMNode;
-        }
-    }, [enableAutomaticPortalTargetResolution, isNested, targetDOMNode, refs.reference]);
-    const targetElement = (0, Portal_1.useAutomaticTargetDomNode)(effectiveTargetDOMNode, refs.reference.current);
-    /**
-     * The parent element can be animated, like SidePane.
-     * We need to listen to the animationend event to update the floating styles to make sure that the Popover
-     * is in the correct position.
-     */
-    (0, react_1.useEffect)(() => {
-        targetElement.addEventListener('animationend', update);
-        return () => {
-            targetElement.removeEventListener('animationend', update);
-        };
-    }, [targetElement, update]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderTrigger(options), shouldRenderTheContent ? ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { targetDOMNode: targetElement, children: (0, jsx_runtime_1.jsx)("div", { ref: refs.setFloating, tabIndex: contentProps.tabIndex ?? 0, "data-mfui-content": "popover-portal-content", "data-mfui-popover-depth": nestingDepth, className: (0, css_1.cx)(classes.root, 'mfui-Popover__root', contentProps.className), style: {
-                        ...floatingStyles,
-                        ...(!enableAutoUnmount && !isPopoverOpen && { display: 'none' }),
-                    }, onKeyDown: handleKeyDownPopover, children: (0, jsx_runtime_1.jsx)(Portal_1.TargetDomNodeProvider, { targetDomNode: refs.floating.current, children: (0, jsx_runtime_1.jsx)(PopoverContext_1.PopoverContextProvider, { children: renderContent(options) }) }) }) })) : null] }));
-}

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

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

package/dist/cjs/src/Popover/PopoverContext.js

@@ -1,64 +0,0 @@
-"use strict";
-'use client';
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopoverContextProvider = void 0;
-exports.usePopoverContext = usePopoverContext;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const PopoverContext = (0, react_1.createContext)({
-    isNested: false,
-    nestingDepth: 0,
-});
-/**
- * Hook to access the popover nesting context
- *
- * @returns PopoverContextValue containing nesting information
- */
-function usePopoverContext() {
-    return (0, react_1.useContext)(PopoverContext);
-}
-/**
- * Provider component that tracks nesting depth for Popover components
- * This replaces the inefficient DOM traversal approach with React Context
- */
-exports.PopoverContextProvider = react_1.default.memo(({ children }) => {
-    const parentContext = (0, react_1.useContext)(PopoverContext);
-    const contextValue = (0, react_1.useMemo)(() => ({
-        isNested: true, // Any component inside PopoverContextProvider is nested
-        nestingDepth: parentContext.nestingDepth + 1,
-    }), [parentContext.nestingDepth]);
-    return (0, jsx_runtime_1.jsx)(PopoverContext.Provider, { value: contextValue, children: children });
-});

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

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopoverContextProvider = exports.usePopoverContext = exports.Popover = void 0;
-var Popover_1 = require("./Popover");
-Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return Popover_1.Popover; } });
-var PopoverContext_1 = require("./PopoverContext");
-Object.defineProperty(exports, "usePopoverContext", { enumerable: true, get: function () { return PopoverContext_1.usePopoverContext; } });
-Object.defineProperty(exports, "PopoverContextProvider", { enumerable: true, get: function () { return PopoverContext_1.PopoverContextProvider; } });

package/dist/cjs/src/Portal/Portal.js

@@ -1,22 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Portal = Portal;
-const react_dom_1 = require("react-dom");
-const TargetDomNodeContext_1 = require("./TargetDomNodeContext");
-const useIsServer_1 = require("./utils/useIsServer");
-/**
- * A component that renders its children into a new "subtree" outside of the parent component.
- * It is useful for rendering modals, dropdowns, tooltips, and other floating UI elements.
- *
- * This behaves the same as `ReactDOM.createPortal`, but adds support for SSR-aware rendering and
- * automatic resolution of the target DOM node when used with MFUI's portal context utilities.
- */
-function Portal({ children, targetDOMNode }) {
-    const isServer = (0, useIsServer_1.useIsServer)();
-    const closestTargetDomNode = (0, TargetDomNodeContext_1.useClosestTargetDomNode)();
-    if (isServer)
-        return null;
-    const targetElement = targetDOMNode ?? closestTargetDomNode ?? document.body;
-    return (0, react_dom_1.createPortal)(children, targetElement);
-}

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

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

package/dist/cjs/src/Portal/TargetDomNodeContext.js

@@ -1,34 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAutomaticTargetDomNode = exports.useClosestTargetDomNode = void 0;
-exports.TargetDomNodeProvider = TargetDomNodeProvider;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const getTargetDomNode_1 = require("../utilities/dom/getTargetDomNode");
-const TargetDomNodeContext = (0, react_1.createContext)(null);
-const useClosestTargetDomNode = () => (0, react_1.useContext)(TargetDomNodeContext);
-exports.useClosestTargetDomNode = useClosestTargetDomNode;
-/**
- * This is a wrapper of TargetDomNodeContext.Provider, it provides the targetDomNode to the children.
- *
- * When children components use the useClosestTargetDomNode hook, it will return the targetDomNode provided by this component.
- */
-function TargetDomNodeProvider({ targetDomNode, children }) {
-    // Need to use the old <Context.Provider> way instead of the new <Context> way to support React 18
-    // TODO: It should be migrated to the new way when React officially deprecate the old way in the future.
-    return (0, jsx_runtime_1.jsx)(TargetDomNodeContext.Provider, { value: targetDomNode, children: children });
-}
-/**
- * This hook provides the targetDomNode for the Portal component.
- * It will return the user provided targetDomNode if it is not null, otherwise it will return the closest targetDomNode from the TargetDomNodeContext.
- *
- * @param providedTargetDomNode - The targetDomNode provided by the user.
- *
- * @param hangingElement - The element to detect the rootNode, if not provided, it will return the body element of the ownerDocument, or automatically create & choose the custom element under ShadowDOM.
- */
-const useAutomaticTargetDomNode = (providedTargetDomNode, hangingElement) => {
-    const closestTargetDomNode = (0, exports.useClosestTargetDomNode)();
-    return (0, getTargetDomNode_1.getTargetDomNode)(providedTargetDomNode ?? closestTargetDomNode, hangingElement);
-};
-exports.useAutomaticTargetDomNode = useAutomaticTargetDomNode;

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

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TargetDomNodeProvider = exports.useAutomaticTargetDomNode = exports.useClosestTargetDomNode = exports.Portal = void 0;
-var Portal_1 = require("./Portal");
-Object.defineProperty(exports, "Portal", { enumerable: true, get: function () { return Portal_1.Portal; } });
-var TargetDomNodeContext_1 = require("./TargetDomNodeContext");
-Object.defineProperty(exports, "useClosestTargetDomNode", { enumerable: true, get: function () { return TargetDomNodeContext_1.useClosestTargetDomNode; } });
-Object.defineProperty(exports, "useAutomaticTargetDomNode", { enumerable: true, get: function () { return TargetDomNodeContext_1.useAutomaticTargetDomNode; } });
-Object.defineProperty(exports, "TargetDomNodeProvider", { enumerable: true, get: function () { return TargetDomNodeContext_1.TargetDomNodeProvider; } });

package/dist/cjs/src/Portal/utils/useIsServer.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsServer = useIsServer;
-const react_1 = require("react");
-/**
- * This hook is used to determine if the code is running on the server.
- * This is inspired in this ChakraUI Portal code
- *
- * @see https://github.com/chakra-ui/ark/blob/main/packages/react/src/components/portal/portal.tsx
- */
-function useIsServer() {
-    return (0, react_1.useSyncExternalStore)(subscribe, () => false, () => true);
-}
-// We don't need to subscribe, because the real data comes from 2 second parameters of useSyncExternalStore are enough
-const subscribe = () => () => {
-    // DO NOTHING
-};

package/dist/cjs/src/ProgressIndicator/ProgressIndicator.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressIndicator = ProgressIndicator;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const css_1 = require("../../styled-system/css");
-const recipes_1 = require("../../styled-system/recipes");
-/**
- * SVG animation for loading state.
- */
-function ProgressIndicator({ className, ...props }) {
-    const classes = (0, recipes_1.progressIndicatorSlotRecipe)();
-    return ((0, jsx_runtime_1.jsxs)("svg", { className: (0, css_1.cx)(classes.root, 'mfui-ProgressIndicator__root', className), viewBox: "0 0 18 18", ...props, children: [(0, jsx_runtime_1.jsx)("title", { children: "Loading" }), (0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "9", r: "8" })] }));
-}

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

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

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

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

package/dist/cjs/src/RadioButton/RadioButton.js

@@ -1,47 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const css_1 = require("../../styled-system/css");
-const FocusIndicator_1 = require("../FocusIndicator");
-const recipes_1 = require("../../styled-system/recipes");
-const Typography_1 = require("../Typography");
-const mergeRefs_1 = require("../utilities/dom/mergeRefs");
-const RadioGroupContext_1 = require("../RadioGroup/RadioGroupContext");
-/**
- * The general-purpose RadioButton component.
- * This component turns on/off the label depends on the prop: label.
- *
- * Also extends the props of `<input type="radio">` element.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
- */
-exports.RadioButton = (0, react_1.forwardRef)(({ className, label, checked, disabled, onChange, name, defaultChecked, ...props }, ref) => {
-    const radioInputRef = (0, react_1.useRef)(null);
-    const radioGroupContext = (0, react_1.useContext)(RadioGroupContext_1.RadioGroupContext);
-    const [localChecked, setLocalChecked] = (0, react_1.useState)(!!defaultChecked);
-    const classes = (0, recipes_1.radioButtonSlotRecipe)();
-    const isChecked = radioGroupContext.value !== undefined ? radioGroupContext.value === props.value : (checked ?? localChecked);
-    const icon = isChecked ? (0, jsx_runtime_1.jsx)(mfui_icons_react_1.RadioButtonChecked, {}) : (0, jsx_runtime_1.jsx)(mfui_icons_react_1.RadioButtonUnchecked, {});
-    const WrapperTag = label ? 'label' : 'span';
-    const wrapperProps = {
-        className: (0, css_1.cx)(classes.root, 'mfui-RadioButton__root', className),
-        htmlFor: label ? props.id : undefined,
-    };
-    return ((0, jsx_runtime_1.jsxs)(WrapperTag, { ...wrapperProps, children: [(0, jsx_runtime_1.jsx)("span", { className: (0, css_1.cx)(classes.icon, 'mfui-RadioButton__icon'), "aria-hidden": "true", "data-mfui-content": "radio-button-icon", children: icon }), (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { hideWhiteBorder: true, children: (0, jsx_runtime_1.jsx)("input", { ref: (0, mergeRefs_1.mergeRefs)(ref, radioInputRef), type: "radio", checked: isChecked, name: radioGroupContext.name ?? name, disabled: radioGroupContext.disabled ?? disabled, "data-mfui-content": "radio-button-input", className: (0, css_1.cx)(classes.input, 'mfui-RadioButton__input'), onChange: (event) => {
-                        if (typeof radioGroupContext.onChange === 'function') {
-                            radioGroupContext.onChange(event);
-                            return;
-                        }
-                        onChange?.(event);
-                        // If the event is defaultPrevented in "onChange" prop via "e.preventDefault()", do not update the local
-                        // state.
-                        if (event.defaultPrevented) {
-                            return;
-                        }
-                        setLocalChecked(event.target.checked);
-                    }, ...props }) }), label ? ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", className: (0, css_1.cx)(classes.label, 'mfui-RadioButton__label'), "data-mfui-content": "radio-button-label", children: label })) : null] }));
-});

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

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

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

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