@moneyforward/mfui-components 2.48.2 → 3.1.0

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

@@ -1,190 +0,0 @@
-import { type ComponentPropsWithoutRef, type ElementType, type ReactElement, type ReactNode } from 'react';
-import { type BaseMainNavigationSlotRecipeVariant } from '../../styled-system/recipes';
-/**
- * The basic menu item type.
- * This is used for the menu item with no children, or the children of the nested menu item.
- */
-type BasicNavigationItem = {
-    /**
-     * The label of the navigation item.
-     */
-    label: string;
-    /**
-     * The URL of the navigation item.
-     */
-    href: string;
-    /**
-     * The icon of the navigation item.
-     */
-    icon?: ReactElement;
-    /**
-     * Whether the navigation item is the current page.
-     *
-     * If this property is set to true, the navigation item is highlighted as the current page.
-     * When the navigation item is the nested navigation item, the parent navigation is opened by default.
-     */
-    isCurrent?: boolean;
-    /**
-     * Nested navigation items.
-     *
-     * This property is not allowed for the non-nested navigation items.
-     */
-    children?: undefined;
-    /**
-     * Whether the navigation item is an external link.
-     */
-    isExternal?: boolean;
-    /**
-     * For a status icon or badge that is displayed on the right side when navigation is expanded.
-     * This slot is only visible in the expanded state, not when collapsed.
-     * If `locked` prop is true, any indicators in this slot will be ignored.
-     *
-     * **EXPERIMENTAL**: This property is experimental and may be changed or removed in the future.
-     */
-    statusSlot?: ReactNode;
-    /**
-     * Display a lock icon on the right side to indicate the navigation item is locked by permission.
-     * This option does not actually disable the link.
-     * This option is allowed only for the basic navigation items, not for the parent navigation items or children navigation items.
-     *
-     * @default false
-     */
-    locked?: boolean;
-    /**
-     * The properties for the lock icon.
-     *
-     * @property aria-label - The alternative text for the lock icon. It's set "ロックされています" by default.
-     */
-    lockIconProps?: Pick<ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
-};
-/**
- * The nested navigation parent item type.
- */
-type ParentNavigationItem = {
-    /**
-     * The label of the navigation item.
-     */
-    label: string;
-    /**
-     * The URL of the navigation item.
-     *
-     * This property is not allowed for the parent navigation items.
-     */
-    href?: undefined;
-    /**
-     * The icon of the navigation item.
-     */
-    icon?: ReactElement;
-    /**
-     * Whether the navigation item is the current page.
-     *
-     * This property is not allowed for the parent navigation items.
-     */
-    isCurrent?: undefined;
-    /**
-     * Nested navigation items.
-     *
-     * If this property is set, the navigation item is displayed as a summary element and the nested navigation items are displayed when the summary element is clicked.
-     * The nested depth is limited to one level and the icon is only allowed for the first level navigation item.
-     */
-    children: Omit<BasicNavigationItem, 'icon' | 'children'>[];
-};
-type NavigationItem = BasicNavigationItem | ParentNavigationItem;
-type FeatureShortcut = {
-    /**
-     * The label of the feature shortcut link button.
-     */
-    label: string;
-    /**
-     * The URL of the feature shortcut link button.
-     */
-    href: string;
-    /**
-     * Whether the feature shortcut link button is an external link.
-     */
-    isExternal?: boolean;
-};
-export type MainNavigationProps = {
-    /**
-     * Additional class names to apply to the component.
-     */
-    className?: string;
-    /**
-     * The properties for the feature shortcut link button.
-     *
-     * If this property is set, the feature shortcut link button is displayed at the top of the navigation.
-     */
-    featureShortcut?: FeatureShortcut;
-    /**
-     * The navigation items.
-     */
-    navigationItems: NavigationItem[];
-    /**
-     * Whether the navigation is collapsible.
-     *
-     * If this property is set to `true`, the toggle button is displayed at the bottom of the navigation.
-     * Cannot be used with feature shortcut or nested navigation.
-     *
-     * @default false
-     */
-    enableCollapsible?: boolean;
-    /**
-     * The width of the navigation.
-     *
-     * If this property is set to 'normal', the navigation width will be the width of the navigation item to fit the icon and 8 full-width characters.
-     * When this property is set to 'narrow', the navigation width will be the width of the navigation item to fit the icon and 11 full-width characters.
-     *
-     * @default 'normal'
-     */
-    width?: BaseMainNavigationSlotRecipeVariant['width'];
-    /**
-     * The component to use as the navigation link instead of the general anchor element `<a>`.
-     * The custom component must extend the HTMLAnchorElement interface.
-     *
-     * If this property is not set, the navigation link is rendered as an general anchor element `<a>`.
-     *
-     * If this property is set, it depends on the `isExternal` property of each navigation item.
-     * If the `isExternal` property is set to true, the navigation link is rendered as an general anchor element `<a>` with `target="_blank"`.
-     * If the `isExternal` property is set to false, the navigation link is rendered as the custom component.
-     *
-     * Use this property if you want to use a custom component as the navigation link.
-     * e.g. next/link
-     */
-    customLinkComponent?: ElementType;
-    /**
-     * Whether to disable the responsive behavior.
-     *
-     * If this property is set to `true`, the navigation will not be collapsible on narrow viewports.
-     *
-     * @default false
-     */
-    disableResponsive?: BaseMainNavigationSlotRecipeVariant['disableResponsive'];
-    /**
-     * The collapsed state of the navigation (controlled).
-     * When this prop is provided, the component behaves as a controlled component.
-     * This prop is only effective when `enableCollapsible` is `true`.
-     *
-     * **EXPERIMENTAL**: This property is experimental and may be changed or removed in the future.
-     */
-    isCollapsed?: boolean;
-    /**
-     * Callback function called when the collapsed state changes.
-     * This is triggered when the toggle button is clicked.
-     * This callback is only called when `enableCollapsible` is `true`.
-     *
-     * **EXPERIMENTAL**: This property is experimental and may be changed or removed in the future.
-     */
-    onCollapsedChange?: (isCollapsed: boolean) => void;
-};
-/**
- * The ref object for the main navigation.
- *
- * This object has a method to open/close the main navigation.
- * It is used for the narrow viewport main navigation.
- */
-export type MainNavigationRef = {
-    openMainNavigation: () => void;
-    closeMainNavigation: () => void;
-};
-export type NarrowViewportMainNavigationProps = Omit<MainNavigationProps, 'enableCollapsible'>;
-export {};

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

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

package/dist/cjs/src/MainNavigation/NarrowViewportMainNavigation.js

@@ -1,54 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NarrowViewportMainNavigation = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const react_1 = require("react");
-const css_1 = require("../../styled-system/css");
-const FocusIndicator_1 = require("../FocusIndicator");
-const Typography_1 = require("../Typography");
-const recipes_1 = require("../../styled-system/recipes");
-const NavigationLink_1 = require("./NavigationLink");
-const useFocusTrap_1 = require("../utilities/dom/useFocusTrap");
-const Portal_1 = require("../Portal");
-/**
- * The component for the main navigation on the narrow viewport.
- * This component must only be used in MainNavigation.tsx, do not export it.
- */
-exports.NarrowViewportMainNavigation = (0, react_1.forwardRef)(({ className, featureShortcut, navigationItems, width = 'normal', customLinkComponent }, ref) => {
-    const classes = (0, recipes_1.narrowViewportMainNavigationSlotRecipe)({ width });
-    const InternalLinkTag = customLinkComponent ?? 'a';
-    const hasCurrentNavigationInChildren = (children) => children?.some((child) => child.isCurrent);
-    const dialogRef = (0, react_1.useRef)(null);
-    const [openState, setOpenState] = (0, react_1.useState)(false);
-    const handleCloseMainNavigation = () => {
-        setOpenState(false);
-    };
-    // Set a method on the passed ref so that the parent component can open the main menu
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        openMainNavigation: () => {
-            setOpenState(true);
-        },
-        closeMainNavigation: handleCloseMainNavigation,
-    }));
-    (0, react_1.useEffect)(() => {
-        if (openState) {
-            dialogRef.current?.focus();
-        }
-    }, [openState]);
-    const handleKeyDown = (event) => {
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            event.stopPropagation();
-            handleCloseMainNavigation();
-        }
-    };
-    const { handleOnKeyDown } = (0, useFocusTrap_1.useFocusTrap)({ onKeyDown: handleKeyDown });
-    if (!openState) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { ref: dialogRef, role: "dialog", className: (0, css_1.cx)(classes.root, 'mfui-NarrowViewportMainNavigation__root', className), tabIndex: -1, onKeyDown: handleOnKeyDown, children: [(0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "backdrop", className: (0, css_1.cx)(classes.backdrop, 'mfui-NarrowViewportMainNavigation__backdrop'), onClick: handleCloseMainNavigation }), (0, jsx_runtime_1.jsxs)("div", { "data-mfui-content": "inside", className: (0, css_1.cx)(classes.container, 'mfui-NarrowViewportMainNavigation__container'), onClick: (event) => {
-                        event.stopPropagation();
-                    }, children: [featureShortcut ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.featureShortcut, 'mfui-NarrowViewportMainNavigation__featureShortcut'), children: (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsx)(NavigationLink_1.NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: (0, css_1.cx)(classes.featureShortcutAnchor, 'mfui-NarrowViewportMainNavigation__featureShortcutAnchor'), onClick: handleCloseMainNavigation, children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, (0, jsx_runtime_1.jsx)("nav", { className: (0, css_1.cx)(classes.nav, 'mfui-NarrowViewportMainNavigation__nav'), children: (0, jsx_runtime_1.jsx)("ul", { className: (0, css_1.cx)(classes.list, 'mfui-NarrowViewportMainNavigation__list'), children: navigationItems.map((navigation, index) => ((0, jsx_runtime_1.jsx)("li", { className: (0, css_1.cx)(classes.listItem, 'mfui-NarrowViewportMainNavigation__listItem'), children: navigation.children ? ((0, jsx_runtime_1.jsxs)("details", { open: hasCurrentNavigationInChildren(navigation.children), className: (0, css_1.cx)(classes.parentDetails, 'mfui-NarrowViewportMainNavigation__parentDetails'), children: [(0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsxs)("summary", { className: (0, css_1.cx)(classes.parentSummary, 'mfui-NarrowViewportMainNavigation__parentSummary'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.parentSummaryIcon, 'mfui-NarrowViewportMainNavigation__parentSummaryIcon'), children: navigation.icon }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: navigation.label }), (0, jsx_runtime_1.jsx)(mfui_icons_react_1.DisclosureBasicCollapsed, { className: "mfui-NarrowViewportMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), (0, jsx_runtime_1.jsx)(mfui_icons_react_1.DisclosureBasicExpanded, { className: "mfui-NarrowViewportMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), (0, jsx_runtime_1.jsx)("ul", { className: (0, css_1.cx)(classes.childrenList, 'mfui-NarrowViewportMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => ((0, jsx_runtime_1.jsx)("li", { className: (0, css_1.cx)(classes.childrenListItem, 'mfui-NarrowViewportMainNavigation__childrenListItem'), children: (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)(NavigationLink_1.NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: (0, css_1.cx)(classes.childrenListItemAnchor, 'mfui-NarrowViewportMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] })) : ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)(NavigationLink_1.NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: (0, css_1.cx)(classes.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": navigation.isCurrent ? 'page' : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: navigation.icon }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? ((0, jsx_runtime_1.jsx)(mfui_icons_react_1.Lock, { className: (0, css_1.cx)(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null] }) }) })) }, index))) }) })] })] }) }));
-});

package/dist/cjs/src/MainNavigation/NavigationLink.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationLink = NavigationLink;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/**
- * The component for the navigation link.
- * This component should be used only in the MainNavigation component.
- *
- * If the `isExternal` property is set to true, return an general anchor element `<a>` with `target="_blank"`.
- * If the `isExternal` property is set to false, return a component using tag property.
- */
-function NavigationLink({ tag, isExternal, children, ...rest }) {
-    const InternalLinkTag = tag;
-    if (isExternal) {
-        return ((0, jsx_runtime_1.jsx)("a", { target: "_blank", rel: "noreferrer", ...rest, children: children }));
-    }
-    return (0, jsx_runtime_1.jsx)(InternalLinkTag, { ...rest, children: children });
-}

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

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

package/dist/cjs/src/MultilineTextBox/MultilineTextBox.js

@@ -1,54 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultilineTextBox = 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");
-const FocusIndicator_1 = require("../FocusIndicator");
-const mergeRefs_1 = require("../utilities/dom/mergeRefs");
-/**
- * The general-purpose TextBox component.
- * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
- *
- * Also extends the props of `<textarea>` element
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
- */
-exports.MultilineTextBox = (0, react_1.forwardRef)(({ invalid = false, size = 'medium', disabled = false, rows = 1, enableAutoResize = false, resize = 'both', onChange, ...props }, ref) => {
-    const localRef = (0, react_1.useRef)(null);
-    // When enableAutoResize is true, force resize to 'none' to prevent conflicts
-    const effectiveResize = enableAutoResize ? 'none' : resize;
-    const classes = (0, recipes_1.multilineTextBoxSlotRecipe)({ size, disabled, invalid, enableAutoResize, resize: effectiveResize });
-    const adjustHeight = (0, react_1.useCallback)(() => {
-        if (!enableAutoResize || !localRef.current)
-            return;
-        const textarea = localRef.current;
-        textarea.style.height = 'auto'; // Reset height
-        // Calculate minimum height based on rows when scrollHeight is 0
-        if (textarea.scrollHeight === 0) {
-            // - Line height: 24px (from typography.line-height.body)
-            const LINE_HEIGHT = 24;
-            // - Padding block: calc(4px - 1px) = 3px (top and bottom, so 6px total)
-            const PADDING_BLOCK = 6;
-            // Minimum height based on rows
-            const minHeight = rows * LINE_HEIGHT + PADDING_BLOCK;
-            textarea.style.height = `${minHeight.toString()}px`;
-        }
-        else {
-            textarea.style.height = `${textarea.scrollHeight.toString()}px`; // Set to content height
-        }
-    }, [enableAutoResize, rows]);
-    const handleChange = (event) => {
-        if (enableAutoResize) {
-            adjustHeight();
-        }
-        onChange?.(event);
-    };
-    (0, react_1.useEffect)(() => {
-        if (enableAutoResize) {
-            adjustHeight();
-        }
-    }, [enableAutoResize, adjustHeight]);
-    return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsx)("textarea", { ref: (0, mergeRefs_1.mergeRefs)(ref, localRef), ...props, rows: rows, className: (0, css_1.cx)(classes.root, 'mfui-MultilineTextBox__root', props.className), disabled: disabled, onChange: handleChange }) }));
-});

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

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

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

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

package/dist/cjs/src/MultipleFilterSelectBox/MultipleFilterSelectBox.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultipleFilterSelectBox = MultipleFilterSelectBox;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const recipes_1 = require("../../styled-system/recipes");
-const MultipleSelectBox_1 = require("../MultipleSelectBox");
-const Typography_1 = require("../Typography");
-const css_1 = require("../../styled-system/css");
-/**
- * The MultipleFilterSelectBox component.
- * This component extends MultipleSelectBox with custom styling and display value formatting.
- * This component switches the variants of looks and behaviors depends on the props: size, disabled.
- */
-function MultipleFilterSelectBox({ label, className, ...props }) {
-    const classes = (0, recipes_1.multipleFilterSelectBoxSlotRecipe)();
-    return ((0, jsx_runtime_1.jsx)(MultipleSelectBox_1.MultipleSelectBox, { ...props, triggerWrapperProps: {
-            className: (0, css_1.cx)(classes.triggerWrapper, 'mfui-MultipleFilterSelectBox__triggerWrapper', className),
-        }, renderDisplayValue: (selectedOptions) => selectedOptions.length > 0 ? ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, { variant: "strongControlLabel", children: [(0, jsx_runtime_1.jsx)("span", { "data-mfui-content": "multiple-filter-select-box-label", children: `${label}：` }), (0, jsx_runtime_1.jsx)("span", { "data-mfui-content": "multiple-filter-select-display-values", children: selectedOptions.map((opt) => opt.label).join('、') })] })) : ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: (0, jsx_runtime_1.jsx)("span", { "data-mfui-content": "multiple-filter-select-box-label", children: label }) })) }));
-}

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

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

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

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