@moneyforward/mfui-components 2.48.1

package/dist/esm/src/HelpMessage/HelpMessage.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { Error } from '@moneyforward/mfui-icons-react';
+import { cx } from '../../styled-system/css';
+import { helpMessageRecipe } from '../../styled-system/recipes';
+import { Typography } from '../Typography';
+/**
+ * The HelpMessage component
+ * This component switches the variants of looks depends on the props: messageType.
+ *
+ * Also extends the props of the `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export const HelpMessage = forwardRef(({ messageType = 'neutral', messageAlign = 'left', children, className, ...props }, ref) => {
+    const classes = helpMessageRecipe({ messageType, messageAlign });
+    const id = useId();
+    const ariaLabelledByContentId = `help-message-content-${id}`;
+    return (_jsxs("div", { ref: ref, role: messageType === 'error' ? 'alert' : undefined, "aria-labelledby": ariaLabelledByContentId, ...props, className: cx(classes.root, 'mfui-HelpMessage__root', className), children: [messageType === 'error' ? _jsx(Error, { "aria-hidden": true, className: cx(classes.icon, 'mfui-HelpMessage__icon') }) : null, _jsx(Typography, { id: ariaLabelledByContentId, variant: "helpMessage", className: cx(classes.message, 'mfui-HelpMessage__message'), children: children })] }));
+});

package/dist/esm/src/HelpMessage/HelpMessage.types.d.ts

@@ -0,0 +1,28 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type HelpMessageRecipeVariant } from '../../styled-system/recipes';
+import { type TypographyProps } from '../Typography';
+/**
+ * Props for the HelpMessage component
+ */
+export type HelpMessageProps = {
+    /**
+     * The type of message to display.
+     * The color of the message will change based on this value.
+     * The error icon will be displayed next to the message if this value is 'error'.
+     *
+     * @default 'neutral'
+     */
+    messageType?: HelpMessageRecipeVariant['messageType'];
+    /**
+     * The alignment of the message.
+     *
+     * @default 'left'
+     */
+    messageAlign?: 'left' | 'center';
+    /**
+     * The content of the message.
+     *
+     * @default null
+     */
+    children?: TypographyProps['children'];
+} & ComponentPropsWithoutRef<'div'>;

package/dist/esm/src/HelpMessage/HelpMessage.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/HelpMessage/index.d.ts

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

package/dist/esm/src/HelpMessage/index.js

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

package/dist/esm/src/IconButton/IconButton.d.ts

@@ -0,0 +1,16 @@
+export declare const InternalIconButton: import("react").ForwardRefExoticComponent<{
+    outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant["outlined"];
+    children: React.ReactNode;
+    disabled?: boolean;
+    href?: string;
+    customLinkComponent?: import("react").ElementType;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "type" | "rel" | "download" | "hrefLang" | "ping" | "target" | "referrerPolicy"> & {
+    size?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant["size"];
+} & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export declare const IconButton: import("react").ForwardRefExoticComponent<{
+    outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant["outlined"];
+    children: React.ReactNode;
+    disabled?: boolean;
+    href?: string;
+    customLinkComponent?: import("react").ElementType;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "type" | "rel" | "download" | "hrefLang" | "ping" | "target" | "referrerPolicy"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/dist/esm/src/IconButton/IconButton.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { cx } from '../../styled-system/css';
+import { iconButtonSlotRecipe } from '../../styled-system/recipes';
+import { FocusIndicator } from '../FocusIndicator';
+/**
+ * The general-purpose IconButton component.
+ * This component switches the variants of looks depends on the props are `outlined`.
+ *
+ * Also extends the props of `<button>` element or `<a>` element depending on whether the href prop is provided.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
+ */
+/**
+ * Base implementation for both public and internal IconButton exports.
+ *
+ * @param props - IconButton props including internal-only size variant.
+ *
+ * @param ref - Forwarded ref for the rendered button or anchor element.
+ */
+function IconButtonBase({ children, outlined, size = 'default', className, href, customLinkComponent, disabled = false, type = 'button', ...rest }, ref) {
+    const classes = iconButtonSlotRecipe({ outlined, size });
+    const isButton = disabled || href === undefined;
+    const Tag = useMemo(() => {
+        // If disabled, always render as a button since the link component doesn't support disabled prop
+        if (isButton) {
+            return 'button';
+        }
+        return customLinkComponent ?? 'a';
+    }, [isButton, customLinkComponent]);
+    const tagProps = useMemo(() => {
+        if (isButton) {
+            // props for button component
+            return {
+                ref,
+                className: cx(classes.root, 'mfui-IconButton__root', className),
+                disabled,
+                type,
+                ...rest,
+            };
+        }
+        // props for link component
+        return {
+            ref,
+            className: cx(classes.root, 'mfui-IconButton__root', className),
+            href,
+            ...rest,
+        };
+    }, [isButton, ref, classes.root, className, href, rest, disabled, type]);
+    return (_jsx(FocusIndicator, { children: _jsx(Tag, { ...tagProps, children: children }) }));
+}
+export const InternalIconButton = forwardRef(IconButtonBase);
+export const IconButton = forwardRef((props, ref) => (_jsx(InternalIconButton, { ...props, ref: ref })));

package/dist/esm/src/IconButton/IconButton.types.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentPropsWithoutRef, type ElementType } from 'react';
+import { type IconButtonSlotRecipeVariant } from '../../styled-system/recipes';
+type IconButtonCommonProps = {
+    /**
+     * Whether the button has an outline style
+     *
+     * @default false
+     */
+    outlined?: IconButtonSlotRecipeVariant['outlined'];
+    /**
+     * Icon element to be rendered inside the button
+     * Only one element allowed
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the button is disabled.
+     * If it's provided, the component will be rendered as a button element even if the href prop is provided.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The path or URL to the linked page.
+     * If it's provided, the component will be rendered as an anchor element.
+     */
+    href?: string;
+    /**
+     * The component to use as the navigation link instead of the general anchor element `<a>`.
+     * The custom component must extend the HTMLAnchorElement interface.
+     *
+     * Use this property if you want to use a custom component as the link tag.
+     * e.g. next/link
+     */
+    customLinkComponent?: ElementType;
+};
+export type IconButtonProps = IconButtonCommonProps & ComponentPropsWithoutRef<'button'> & Pick<ComponentPropsWithoutRef<'a'>, 'download' | 'hrefLang' | 'ping' | 'rel' | 'target' | 'type' | 'referrerPolicy'>;
+export type IconButtonInternalProps = IconButtonProps & {
+    /**
+     * Size of the icon button.
+     * This prop is internal-only and not exposed from the public IconButton API.
+     *
+     * @default 'default'
+     */
+    size?: IconButtonSlotRecipeVariant['size'];
+};
+export {};

package/dist/esm/src/IconButton/IconButton.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/IconButton/index.d.ts

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

package/dist/esm/src/IconButton/index.js

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

package/dist/esm/src/KeyValue/KeyValue.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A component for key-value pairs.
+ * Both the key and value areas accept any elements and are rendered with predefined layout styles.
+ */
+export declare const KeyValue: import("react").ForwardRefExoticComponent<{
+    size?: import("../../styled-system/recipes").KeyValueSlotRecipeVariant["size"];
+    keyItem: React.ReactNode;
+    valueItem: React.ReactNode;
+    gridTemplateColumns?: import("react").CSSProperties["gridTemplateColumns"];
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/src/KeyValue/KeyValue.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../../styled-system/css';
+import { keyValueSlotRecipe } from '../../styled-system/recipes';
+/**
+ * A component for key-value pairs.
+ * Both the key and value areas accept any elements and are rendered with predefined layout styles.
+ */
+export const KeyValue = forwardRef(({ size = 'medium', keyItem, valueItem, className, gridTemplateColumns = '1fr 1fr', ...props }, ref) => {
+    const classes = keyValueSlotRecipe({ size });
+    return (_jsxs("div", { ref: ref, className: cx(classes.root, 'mfui-KeyValue__root', className), ...props, style: { gridTemplateColumns }, children: [_jsx("div", { className: cx(classes.keyItem, 'mfui-KeyValue__keyItem'), children: keyItem }), _jsx("div", { className: cx(classes.valueItem, 'mfui-KeyValue__valueItem'), children: valueItem })] }));
+});
+KeyValue.displayName = 'KeyValue';

package/dist/esm/src/KeyValue/KeyValue.types.d.ts

@@ -0,0 +1,20 @@
+import { type CSSProperties, type ComponentPropsWithoutRef } from 'react';
+import { type KeyValueSlotRecipeVariant } from '../../styled-system/recipes';
+export type KeyValueProps = {
+    /**
+     * The size of the key-value pair.
+     */
+    size?: KeyValueSlotRecipeVariant['size'];
+    /**
+     * The key of the key-value pair.
+     */
+    keyItem: React.ReactNode;
+    /**
+     * The value of the key-value pair.
+     */
+    valueItem: React.ReactNode;
+    /**
+     * The grid template columns of the key-value pair.
+     */
+    gridTemplateColumns?: CSSProperties['gridTemplateColumns'];
+} & ComponentPropsWithoutRef<'div'>;

package/dist/esm/src/KeyValue/KeyValue.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/KeyValue/index.d.ts

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

package/dist/esm/src/KeyValue/index.js

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

package/dist/esm/src/MainNavigation/BaseMainNavigation.d.ts

@@ -0,0 +1,6 @@
+import { type MainNavigationProps } from './MainNavigation.types';
+/**
+ * The component for the main navigation on the normal viewport.
+ * This component must only be used in MainNavigation.tsx, do not export it.
+ */
+export declare function BaseMainNavigation({ className, featureShortcut, navigationItems, enableCollapsible, width, customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, }: MainNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/MainNavigation/BaseMainNavigation.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DisclosureBasicCollapsed, DisclosureBasicExpanded, Lock, PaneExpansionToLeft, PaneExpansionToRight, } from '@moneyforward/mfui-icons-react';
+import { useId, useState, useRef } from 'react';
+import { cx } from '../../styled-system/css';
+import { FocusIndicator } from '../FocusIndicator';
+import { Typography } from '../Typography';
+import { NavigationLink } from './NavigationLink';
+import { baseMainNavigationSlotRecipe } from '../../styled-system/recipes';
+import { Tooltip } from '../Tooltip';
+import { Popover } from '../Popover';
+/**
+ * The component for the main navigation on the normal viewport.
+ * This component must only be used in MainNavigation.tsx, do not export it.
+ */
+export function BaseMainNavigation({ className, featureShortcut, navigationItems, enableCollapsible = false, width = 'normal', customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, }) {
+    const [localIsCollapsed, setLocalIsCollapsed] = useState(controlledIsCollapsed ?? false);
+    const [openPopoverIndex, setOpenPopoverIndex] = useState(null);
+    const isControlled = controlledIsCollapsed !== undefined;
+    const isCollapsed = isControlled ? controlledIsCollapsed : localIsCollapsed;
+    const navId = useId();
+    const handleClickToggleButton = () => {
+        const newState = !isCollapsed;
+        if (!isControlled) {
+            setLocalIsCollapsed(newState);
+        }
+        onCollapsedChange?.(newState);
+    };
+    const classes = baseMainNavigationSlotRecipe({ width, disableResponsive });
+    const InternalLinkTag = customLinkComponent ?? 'a';
+    const hasCurrentNavigationInChildren = (children) => children?.some((child) => child.isCurrent);
+    const toggleButtonLabel = isCollapsed ? 'ナビゲーションを拡げる' : 'ナビゲーションを折りたたむ';
+    return (_jsxs("div", { "data-mfui-collapsed": isCollapsed, className: cx(classes.root, 'mfui-BaseMainNavigation__root', className), children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-BaseMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-BaseMainNavigation__featureShortcutAnchor'), children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsx("nav", { id: navId, className: cx(classes.nav, 'mfui-BaseMainNavigation__nav'), children: _jsx("ul", { className: cx(classes.list, 'mfui-BaseMainNavigation__list'), children: navigationItems.map((navigation, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-BaseMainNavigation__listItem'), "data-mfui-popover-portal-target-id": `nested-popover-portal-target-${String(index)}`, children: navigation.children ? (isCollapsed ? (_jsx(CollapsedNestedNavigationItem, { navigation: navigation, classes: classes, InternalLinkTag: InternalLinkTag, hasCurrentChildren: hasCurrentNavigationInChildren(navigation.children) || false, popoverPortalTargetId: `nested-popover-portal-target-${String(index)}`, isOpen: openPopoverIndex === index, onOpenChange: (isOpen) => {
+                                if (isOpen) {
+                                    setOpenPopoverIndex(index);
+                                }
+                                else {
+                                    setOpenPopoverIndex(null);
+                                }
+                            } })) : (_jsxs("details", { open: hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-BaseMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-BaseMainNavigation__parentSummary'), children: [_jsx("div", { className: cx(classes.parentSummaryIcon, 'mfui-BaseMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-BaseMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-BaseMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-BaseMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-BaseMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] }))) : (_jsx(Tooltip, { className: cx(classes.listItemTooltip, 'mfui-BaseMainNavigation__listItemTooltip'), content: navigation.label, disabled: !isCollapsed, placement: "right", children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "aria-label": isCollapsed ? navigation.label : undefined, "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: navigation.icon }), isCollapsed ? null : _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-BaseMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, !isCollapsed && navigation.statusSlot && navigation.locked !== true
+                                                ? navigation.statusSlot
+                                                : null] }) }) }) })) }, index))) }) }), enableCollapsible ? (_jsx("div", { className: cx(classes.footer, 'mfui-BaseMainNavigation__footer'), children: _jsx(Tooltip, { content: toggleButtonLabel, placement: "right", children: _jsx(ToggleButton, { className: cx(classes.toggleButton, 'mfui-BaseMainNavigation__toggleButton'), iconClassName: cx(classes.toggleButtonIcon, 'mfui-BaseMainNavigation__toggleButtonIcon'), isCollapsed: isCollapsed, "aria-label": toggleButtonLabel, targetId: navId, handleClickToggleButton: handleClickToggleButton }) }) })) : null] }));
+}
+/**
+ * The component for displaying nested navigation in collapsed state with popover.
+ * This component must only be used in BaseMainNavigation.tsx, do not export it.
+ */
+function CollapsedNestedNavigationItem({ navigation, classes, InternalLinkTag, hasCurrentChildren, popoverPortalTargetId, isOpen, onOpenChange, }) {
+    const popoverContentRef = useRef(null);
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            // Open popover when Enter or Space key is pressed
+            event.preventDefault();
+            event.stopPropagation();
+            onOpenChange(!isOpen);
+        }
+    };
+    const handleClick = () => {
+        onOpenChange(!isOpen);
+    };
+    return (_jsx(Popover, { enableAutoFocusOnPopover: false, enableAutoFocusOnTrigger: false, open: isOpen, targetDOMNode: document.querySelector(`[data-mfui-popover-portal-target-id="${popoverPortalTargetId}"]`), allowedPlacements: ['right-start', 'right', 'right-end'], contentProps: {
+            tabIndex: -1,
+        }, renderTrigger: ({ setTriggerRef }) => (_jsx(Tooltip, { className: cx(classes.listItemTooltip, 'mfui-BaseMainNavigation__listItemTooltip'), content: navigation.label, disabled: isOpen, placement: "right", children: _jsx(FocusIndicator, { position: "inside", children: _jsx("button", { ref: setTriggerRef, type: "button", className: cx(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "data-mfui-current": hasCurrentChildren ? 'page' : undefined, "aria-current": hasCurrentChildren ? true : undefined, "aria-label": navigation.label, onClick: handleClick, onKeyDown: handleKeyDown, children: _jsx("div", { className: cx(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: _jsx("div", { className: cx(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: _jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: navigation.icon }) }) }) }) }) })), renderContent: () => (_jsx("div", { ref: popoverContentRef, className: cx(classes.popoverChildrenList, 'mfui-BaseMainNavigation__popoverChildrenList'), tabIndex: -1, children: navigation.children.map((child, childIndex) => (_jsx("div", { className: cx(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-BaseMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: () => {
+                            onOpenChange(false);
+                        }, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })), onOpenStateChanged: onOpenChange }));
+}
+/**
+ * The component for the toggle button.
+ * This component must only be used in MainNavigation.tsx, do not export it.
+ */
+function ToggleButton({ className, iconClassName, isCollapsed, targetId, handleClickToggleButton, ...rest }) {
+    return (_jsx(FocusIndicator, { children: _jsx("button", { "aria-expanded": !isCollapsed, "aria-controls": targetId, type: "button", className: cx(className, 'mfui-BaseMainNavigation__toggleButton'), onClick: handleClickToggleButton, ...rest, children: isCollapsed ? (_jsx(PaneExpansionToRight, { "aria-hidden": true, className: cx(iconClassName, 'mfui-BaseMainNavigation__toggleButtonIcon') })) : (_jsx(PaneExpansionToLeft, { "aria-hidden": true, className: cx(iconClassName, 'mfui-BaseMainNavigation__toggleButtonIcon') })) }) }));
+}

package/dist/esm/src/MainNavigation/MainNavigation.d.ts

@@ -0,0 +1,11 @@
+import { type MainNavigationProps, type MainNavigationRef } from './MainNavigation.types';
+/**
+ * The item component for the navigation.
+ * This component should be used when the viewport is not narrow.
+ *
+ * When the viewport is narrow, the navigation will be displayed as a drawer.
+ * When the viewport is not narrow, the navigation will be displayed as a sidebar.
+ *
+ * **⚠️ EXPERIMENTAL FEATURE**: The functionality, *nested navigation items appear in a popover on click when collapsed*, is experimental and may be changed or removed in the future.
+ */
+export declare const MainNavigation: import("react").ForwardRefExoticComponent<MainNavigationProps & import("react").RefAttributes<MainNavigationRef>>;

package/dist/esm/src/MainNavigation/MainNavigation.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { BaseMainNavigation } from './BaseMainNavigation';
+import { NarrowViewportMainNavigation } from './NarrowViewportMainNavigation';
+/**
+ * The item component for the navigation.
+ * This component should be used when the viewport is not narrow.
+ *
+ * When the viewport is narrow, the navigation will be displayed as a drawer.
+ * When the viewport is not narrow, the navigation will be displayed as a sidebar.
+ *
+ * **⚠️ EXPERIMENTAL FEATURE**: The functionality, *nested navigation items appear in a popover on click when collapsed*, is experimental and may be changed or removed in the future.
+ */
+export const MainNavigation = forwardRef(({ className, featureShortcut, navigationItems, disableResponsive = false, width = 'normal', customLinkComponent, enableCollapsible, isCollapsed, onCollapsedChange, }, ref) => {
+    const commonProps = {
+        className,
+        featureShortcut,
+        navigationItems,
+        width,
+        customLinkComponent,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(BaseMainNavigation, { ...commonProps, enableCollapsible: enableCollapsible, disableResponsive: disableResponsive, isCollapsed: isCollapsed, onCollapsedChange: onCollapsedChange }), !disableResponsive && _jsx(NarrowViewportMainNavigation, { ...commonProps, ref: ref })] }));
+});

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

@@ -0,0 +1,190 @@
+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/esm/src/MainNavigation/MainNavigation.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/MainNavigation/NarrowViewportMainNavigation.d.ts

@@ -0,0 +1,6 @@
+import { type MainNavigationRef, type NarrowViewportMainNavigationProps } from './MainNavigation.types';
+/**
+ * The component for the main navigation on the narrow viewport.
+ * This component must only be used in MainNavigation.tsx, do not export it.
+ */
+export declare const NarrowViewportMainNavigation: import("react").ForwardRefExoticComponent<NarrowViewportMainNavigationProps & import("react").RefAttributes<MainNavigationRef>>;

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

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