@moneyforward/mfui-components 4.1.2 → 4.3.0

package/dist/src/DropdownMenu/DropdownMenu.js

@@ -1,15 +1,14 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useRef, useState, } from 'react';
 import { DropdownMenuButtonTrigger } from './DropdownMenuButtonTrigger';
-import { DropdownMenuContainer } from './DropdownMenuContainer';
 import { DropdownMenuDivider } from './DropdownMenuDivider';
 import { DropdownMenuItem } from './DropdownMenuItem';
 import { IconButton } from '../IconButton';
 import { Popover } from '../Popover';
-import { DropdownMenuProvider } from './DropdownMenuContext';
+import { MenuContainer, MenuCloseProvider, useMenuTriggerActivation } from '../shared/Menu';
 import { cx } from '../../styled-system/css';
 import { dropdownMenuSlotRecipe } from '../../styled-system/recipes/dropdown-menu-slot-recipe';
+import { dropdownMenuContainerSlotRecipe } from '../../styled-system/recipes';
 import { DropdownMenuHeading } from './DropdownMenuHeading';
 /**
  * The dropdown menu component.
@@ -28,57 +27,24 @@ import { DropdownMenuHeading } from './DropdownMenuHeading';
  * ```
  */
 export function DropdownMenu({ icon, label, children, triggerProps, tooltipLabel, tooltipPlacement, triggerMiddleTruncate, triggerTypographyVariant, menuPopoverProps, disabled, targetDOMNode, enableAutoUnmount, onOpenStateChanged, onBlur, }) {
-    const [menuDefaultFocusPosition, setMenuDefaultFocusPosition] = useState('first');
-    // Tracks keyboard activation (Enter / Space) of the trigger. The resulting click event usually
-    // has `detail === 0`, but Safari reports keyboard-triggered clicks with `detail === 1`, so the
-    // keydown itself is recorded as the reliable signal.
-    const isTriggerActivatedByKeyboardRef = useRef(false);
-    const handleTriggerKeyDownLocal = useCallback((event) => {
-        // The flag only survives from an Enter / Space keydown to its follow-up click; any other key
-        // invalidates the pending keyboard activation so the flag cannot linger when the click never
-        // fires.
-        isTriggerActivatedByKeyboardRef.current = event.key === 'Enter' || event.key === ' ';
-        switch (event.key) {
-            case 'ArrowDown':
-                event.stopPropagation();
-                event.preventDefault();
-                setMenuDefaultFocusPosition('first');
-                break;
-            case 'ArrowUp':
-                event.stopPropagation();
-                event.preventDefault();
-                setMenuDefaultFocusPosition('last');
-                break;
-        }
-    }, []);
+    const { menuDefaultFocusPosition, handleTriggerKeyDown, handleTriggerBlur, handleTriggerClick } = useMenuTriggerActivation();
     const classes = dropdownMenuSlotRecipe();
-    return (_jsx(Popover, { targetDOMNode: targetDOMNode, minWidth: menuPopoverProps?.minWidth, allowedPlacements: menuPopoverProps?.allowedPlacements, renderTrigger: ({ togglePopover, isPopoverOpen, setTriggerRef, handleTriggerKeyDown, handleTriggerBlur }) => {
+    const containerClasses = dropdownMenuContainerSlotRecipe();
+    return (_jsx(Popover, { targetDOMNode: targetDOMNode, minWidth: menuPopoverProps?.minWidth, allowedPlacements: menuPopoverProps?.allowedPlacements, renderTrigger: ({ togglePopover, isPopoverOpen, setTriggerRef, handleTriggerKeyDown: popoverHandleTriggerKeyDown, handleTriggerBlur: popoverHandleTriggerBlur, }) => {
             const handleKeyDownCommon = (event) => {
-                handleTriggerKeyDownLocal(event);
-                handleTriggerKeyDown(event);
+                handleTriggerKeyDown(event, popoverHandleTriggerKeyDown);
             };
             const handleBlurCommon = (event) => {
-                // Focus leaving the trigger invalidates any pending keyboard activation (e.g. a Space
-                // keydown whose follow-up click never fired), so a later mouse click cannot be
-                // misclassified as keyboard activation.
-                isTriggerActivatedByKeyboardRef.current = false;
-                handleTriggerBlur(event);
+                handleTriggerBlur(event, popoverHandleTriggerBlur);
             };
-            const handleTriggerClick = (event) => {
-                // Opening with the keyboard (Enter / Space) focuses the first item, following the
-                // WAI-ARIA menu button pattern. Opening with the mouse focuses no item; the menu
-                // container receives focus instead so that arrow keys still work.
-                const isKeyboardActivation = isTriggerActivatedByKeyboardRef.current || event.detail === 0;
-                isTriggerActivatedByKeyboardRef.current = false;
-                setMenuDefaultFocusPosition(isKeyboardActivation ? 'first' : 'none');
-                togglePopover(event);
+            const handleClickCommon = (event) => {
+                handleTriggerClick(event, togglePopover);
             };
-            return icon ? (_jsx(IconButton, { ref: setTriggerRef, "aria-expanded": isPopoverOpen, "aria-haspopup": "menu", disabled: disabled, onKeyDown: handleKeyDownCommon, onBlur: handleBlurCommon, onClick: handleTriggerClick, ...triggerProps, "aria-label": label, children: icon })) : (_jsx(DropdownMenuButtonTrigger, { label: label, tooltipLabel: tooltipLabel, tooltipPlacement: tooltipPlacement, triggerMiddleTruncate: triggerMiddleTruncate, triggerTypographyVariant: triggerTypographyVariant, triggerProps: triggerProps, disabled: disabled, isPopoverOpen: isPopoverOpen, setTriggerRef: setTriggerRef, togglePopover: handleTriggerClick, handleTriggerKeyDown: handleKeyDownCommon, handleTriggerBlur: handleBlurCommon }));
-        }, renderContent: ({ closePopover }) => (_jsx(DropdownMenuProvider, { value: { closeMenuPopover: closePopover }, children: _jsx(DropdownMenuContainer, { defaultFocusItem: menuDefaultFocusPosition, onClose: closePopover, children: children }) })), enableAutoFocusOnPopover: false, enableAutoUnmount: enableAutoUnmount, contentProps: {
+            return icon ? (_jsx(IconButton, { ref: setTriggerRef, "aria-expanded": isPopoverOpen, "aria-haspopup": "menu", disabled: disabled, onKeyDown: handleKeyDownCommon, onBlur: handleBlurCommon, onClick: handleClickCommon, ...triggerProps, "aria-label": label, children: icon })) : (_jsx(DropdownMenuButtonTrigger, { label: label, tooltipLabel: tooltipLabel, tooltipPlacement: tooltipPlacement, triggerMiddleTruncate: triggerMiddleTruncate, triggerTypographyVariant: triggerTypographyVariant, triggerProps: triggerProps, disabled: disabled, isPopoverOpen: isPopoverOpen, setTriggerRef: setTriggerRef, togglePopover: handleClickCommon, handleTriggerKeyDown: handleKeyDownCommon, handleTriggerBlur: handleBlurCommon }));
+        }, renderContent: ({ closePopover }) => (_jsx(MenuCloseProvider, { value: { closeMenuPopover: closePopover }, children: _jsx(MenuContainer, { className: cx(containerClasses.root, 'mfui-DropdownMenuContainer__root'), defaultFocusItem: menuDefaultFocusPosition, onClose: closePopover, children: children }) })), enableAutoFocusOnPopover: false, enableAutoUnmount: enableAutoUnmount, contentProps: {
             className: cx(classes.popover, menuPopoverProps?.className),
         }, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }));
 }
-// Do not provide DropdownMenuContainer component since it is already defined inside the DropdownMenu component.
 DropdownMenu.Divider = DropdownMenuDivider;
 DropdownMenu.Item = DropdownMenuItem;
 DropdownMenu.Heading = DropdownMenuHeading;

package/dist/src/DropdownMenu/DropdownMenuItem/DropdownMenuItem.js

@@ -6,7 +6,7 @@ import { cx } from '../../../styled-system/css';
 import { FocusIndicator } from '../../FocusIndicator';
 import { dropdownMenuItemSlotRecipe } from '../../../styled-system/recipes';
 import { Typography } from '../../Typography';
-import { useDropdownMenuContext } from '../DropdownMenuContext';
+import { useMenuCloseContext } from '../../shared/Menu';
 /**
  * The DropdownMenuItem component.
  * It is used inside the DropdownMenu component.
@@ -22,7 +22,7 @@ import { useDropdownMenuContext } from '../DropdownMenuContext';
  */
 export function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, disabled, disabledMessage, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, ...rest }) {
     const classes = dropdownMenuItemSlotRecipe();
-    const { closeMenuPopover } = useDropdownMenuContext();
+    const { closeMenuPopover } = useMenuCloseContext();
     const id = useId();
     const itemRef = useRef(null);
     const handleKeyDown = useCallback((event) => {

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenu.d.ts

@@ -0,0 +1,34 @@
+import { type ApplicationMenuProps } from './ApplicationMenu.types';
+import { ApplicationMenuDivider } from './ApplicationMenuDivider';
+import { ApplicationMenuItem } from './ApplicationMenuItem';
+import { ApplicationMenuGroup } from './ApplicationMenuGroup';
+import { DropdownMenuHeading } from '../../DropdownMenu/DropdownMenuHeading';
+/**
+ * The application menu component.
+ * This component provides the applications dropdown menu of the GlobalHeader with its trigger
+ * icon button. It is provided as the `GlobalHeader.ApplicationMenu` sub-component.
+ * Pass it to the `applicationsMenuSlot` prop of the GlobalHeader component.
+ *
+ * The Item, Divider, Heading and Group components are provided as sub-components of
+ * GlobalHeader.ApplicationMenu. You can use them as follows:
+ *
+ * @example
+ * ```jsx
+ * <GlobalHeader.ApplicationMenu label="マネーフォワード クラウドのサービス">
+ *   <GlobalHeader.ApplicationMenu.Item href="https://example.com">マイページ</GlobalHeader.ApplicationMenu.Item>
+ *   <GlobalHeader.ApplicationMenu.Divider />
+ *   <GlobalHeader.ApplicationMenu.Group label="経理">
+ *     <GlobalHeader.ApplicationMenu.Item href="https://example.com">クラウド会計</GlobalHeader.ApplicationMenu.Item>
+ *   </GlobalHeader.ApplicationMenu.Group>
+ *   <GlobalHeader.ApplicationMenu.Divider />
+ *   <GlobalHeader.ApplicationMenu.Item href="https://example.com">サービストップへ</GlobalHeader.ApplicationMenu.Item>
+ * </GlobalHeader.ApplicationMenu>
+ * ```
+ */
+export declare function ApplicationMenu({ children, label, tooltipPlacement, triggerProps, triggerIcon, menuPopoverProps, disabled, targetDOMNode, enableAutoUnmount, onOpenStateChanged, onBlur, }: ApplicationMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ApplicationMenu {
+    export { ApplicationMenuDivider as Divider };
+    export { ApplicationMenuItem as Item };
+    export { DropdownMenuHeading as Heading };
+    export { ApplicationMenuGroup as Group };
+}

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenu.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Applications } from '@moneyforward/mfui-icons-react';
+import { ApplicationMenuDivider } from './ApplicationMenuDivider';
+import { ApplicationMenuItem } from './ApplicationMenuItem';
+import { ApplicationMenuGroup } from './ApplicationMenuGroup';
+import { IconButton } from '../../IconButton';
+import { Popover } from '../../Popover';
+import { Tooltip } from '../../Tooltip';
+import { DropdownMenuHeading } from '../../DropdownMenu/DropdownMenuHeading';
+import { MenuContainer, MenuCloseProvider, useMenuTriggerActivation } from '../../shared/Menu';
+import { cx } from '../../../styled-system/css';
+import { applicationMenuSlotRecipe } from '../../../styled-system/recipes';
+/**
+ * The application menu component.
+ * This component provides the applications dropdown menu of the GlobalHeader with its trigger
+ * icon button. It is provided as the `GlobalHeader.ApplicationMenu` sub-component.
+ * Pass it to the `applicationsMenuSlot` prop of the GlobalHeader component.
+ *
+ * The Item, Divider, Heading and Group components are provided as sub-components of
+ * GlobalHeader.ApplicationMenu. You can use them as follows:
+ *
+ * @example
+ * ```jsx
+ * <GlobalHeader.ApplicationMenu label="マネーフォワード クラウドのサービス">
+ *   <GlobalHeader.ApplicationMenu.Item href="https://example.com">マイページ</GlobalHeader.ApplicationMenu.Item>
+ *   <GlobalHeader.ApplicationMenu.Divider />
+ *   <GlobalHeader.ApplicationMenu.Group label="経理">
+ *     <GlobalHeader.ApplicationMenu.Item href="https://example.com">クラウド会計</GlobalHeader.ApplicationMenu.Item>
+ *   </GlobalHeader.ApplicationMenu.Group>
+ *   <GlobalHeader.ApplicationMenu.Divider />
+ *   <GlobalHeader.ApplicationMenu.Item href="https://example.com">サービストップへ</GlobalHeader.ApplicationMenu.Item>
+ * </GlobalHeader.ApplicationMenu>
+ * ```
+ */
+export function ApplicationMenu({ children, label, tooltipPlacement = 'bottomStart', triggerProps, triggerIcon, menuPopoverProps, disabled, targetDOMNode, enableAutoUnmount, onOpenStateChanged, onBlur, }) {
+    const { menuDefaultFocusPosition, handleTriggerKeyDown, handleTriggerBlur, handleTriggerClick } = useMenuTriggerActivation();
+    const classes = applicationMenuSlotRecipe();
+    return (_jsx(Popover, { targetDOMNode: targetDOMNode, minWidth: menuPopoverProps?.minWidth, allowedPlacements: menuPopoverProps?.allowedPlacements, renderTrigger: ({ togglePopover, isPopoverOpen, setTriggerRef, handleTriggerKeyDown: popoverHandleTriggerKeyDown, handleTriggerBlur: popoverHandleTriggerBlur, }) => {
+            const handleKeyDownCommon = (event) => {
+                handleTriggerKeyDown(event, popoverHandleTriggerKeyDown);
+            };
+            const handleBlurCommon = (event) => {
+                handleTriggerBlur(event, popoverHandleTriggerBlur);
+            };
+            const handleClickCommon = (event) => {
+                handleTriggerClick(event, togglePopover);
+            };
+            return (_jsx(Tooltip, { content: label, placement: tooltipPlacement, hideFromScreenReader: true, children: _jsx(IconButton, { ref: setTriggerRef, "aria-expanded": isPopoverOpen, "aria-haspopup": "menu", disabled: disabled, onKeyDown: handleKeyDownCommon, onBlur: handleBlurCommon, onClick: handleClickCommon, ...triggerProps, "aria-label": label, children: triggerIcon ?? _jsx(Applications, { "aria-hidden": true }) }) }));
+        }, renderContent: ({ closePopover }) => (_jsx(MenuCloseProvider, { value: { closeMenuPopover: closePopover }, children: _jsx(MenuContainer, { className: cx(classes.menuContainer, 'mfui-ApplicationMenu__menuContainer'), defaultFocusItem: menuDefaultFocusPosition, onClose: closePopover, children: children }) })), enableAutoFocusOnPopover: false, enableAutoUnmount: enableAutoUnmount, contentProps: {
+            className: cx(classes.popover, 'mfui-ApplicationMenu__popover', menuPopoverProps?.className),
+        }, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }));
+}
+ApplicationMenu.Divider = ApplicationMenuDivider;
+ApplicationMenu.Item = ApplicationMenuItem;
+ApplicationMenu.Heading = DropdownMenuHeading;
+ApplicationMenu.Group = ApplicationMenuGroup;

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenu.types.d.ts

@@ -0,0 +1,79 @@
+import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode } from 'react';
+import { type IconButtonProps } from '../../IconButton';
+import { type PopoverProps } from '../../Popover';
+import { type TooltipProps } from '../../Tooltip';
+export type ApplicationMenuProps = {
+    /**
+     * The content of the application menu.
+     *
+     * Compose it with the `GlobalHeader.ApplicationMenu.Item` and `GlobalHeader.ApplicationMenu.Divider`
+     * components.
+     * Layout elements (e.g. columns grouping the application links) can be used freely
+     * around the items.
+     *
+     * @example
+     * ```jsx
+     * <GlobalHeader.ApplicationMenu label="マネーフォワード クラウドのサービス">
+     *   <GlobalHeader.ApplicationMenu.Item href="https://example.com">マイページ</GlobalHeader.ApplicationMenu.Item>
+     *   <GlobalHeader.ApplicationMenu.Divider />
+     *   <GlobalHeader.ApplicationMenu.Item href="https://example.com">サービストップへ</GlobalHeader.ApplicationMenu.Item>
+     * </GlobalHeader.ApplicationMenu>
+     * ```
+     */
+    children: ReactNode;
+    /**
+     * The accessible label of the trigger icon button of the application menu.
+     * It is also shown as the tooltip content of the trigger.
+     */
+    label: string;
+    /**
+     * The placement of the trigger tooltip.
+     *
+     * Accepts a single placement (e.g. `"top"`) for fixed positioning, or an array
+     * (e.g. `["top", "bottom"]`) for priority-based positioning with fallbacks.
+     *
+     * @default 'bottomStart'
+     */
+    tooltipPlacement?: TooltipProps['placement'];
+    /**
+     * The props of the trigger icon button.
+     * Use this prop if you need to customize the style of the trigger icon button.
+     */
+    triggerProps?: Pick<IconButtonProps, 'outlined' | 'className'>;
+    /**
+     * The icon of the trigger icon button.
+     *
+     * @default The Applications icon
+     */
+    triggerIcon?: ReactElement;
+    /**
+     * The properties for the popover content panel.
+     *
+     * @property className - The class name of the popover content panel.
+     *
+     * @property minWidth - The minimum width of the popover content panel.
+     *
+     * @property allowedPlacements - Allowed placements for the popover relative to the trigger element.
+     */
+    menuPopoverProps?: Pick<ComponentPropsWithoutRef<'div'>, 'className'> & {
+        minWidth?: PopoverProps['minWidth'];
+        allowedPlacements?: PopoverProps['allowedPlacements'];
+    };
+    /**
+     * The disabled state of the trigger element.
+     */
+    disabled?: boolean;
+    /**
+     * Callback fired when the open state of the ApplicationMenu changes.
+     *
+     * @param open - The new open state of the ApplicationMenu.
+     */
+    onOpenStateChanged?: (open: boolean) => void;
+    /**
+     * The callback function that is called when the ApplicationMenu loses focus.
+     * This will only fire when the user truly leaves the component (not when the popover opens).
+     *
+     * @param event - The blur event from the trigger element
+     */
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+} & Pick<PopoverProps, 'targetDOMNode' | 'enableAutoUnmount'>;

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuDivider/ApplicationMenuDivider.d.ts

@@ -0,0 +1,7 @@
+import { type ApplicationMenuDividerProps } from './ApplicationMenuDivider.types';
+/**
+ * The divider component for the menu of the application menu.
+ * It separates the menu sections (e.g. the top links, the applications list and the bottom links).
+ * This component should be used inside the `ApplicationMenu` component.
+ */
+export declare const ApplicationMenuDivider: import("react").ForwardRefExoticComponent<ApplicationMenuDividerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuDivider/ApplicationMenuDivider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../../../../styled-system/css';
+import { applicationMenuDividerSlotRecipe } from '../../../../styled-system/recipes';
+/**
+ * The divider component for the menu of the application menu.
+ * It separates the menu sections (e.g. the top links, the applications list and the bottom links).
+ * This component should be used inside the `ApplicationMenu` component.
+ */
+export const ApplicationMenuDivider = forwardRef(({ className }, ref) => {
+    const classes = applicationMenuDividerSlotRecipe();
+    return (_jsx("div", { ref: ref, role: "separator", className: cx(classes.root, 'mfui-ApplicationMenuDivider__root', className), children: _jsx("div", { className: cx(classes.line, 'mfui-ApplicationMenuDivider__line') }) }));
+});

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuDivider/ApplicationMenuDivider.types.d.ts

@@ -0,0 +1,6 @@
+export type ApplicationMenuDividerProps = {
+    /**
+     * The class name to apply to the component.
+     */
+    className?: string;
+};

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuDivider/ApplicationMenuDivider.types.js

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

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuDivider/index.d.ts

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

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuDivider/index.js

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

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuGroup/ApplicationMenuGroup.d.ts

@@ -0,0 +1,11 @@
+import { type ApplicationMenuGroupProps } from './ApplicationMenuGroup.types';
+/**
+ * The ApplicationMenuGroup component.
+ * It is used inside the ApplicationMenu component to group related `ApplicationMenu.Item`s under
+ * a heading (e.g. the guideline's labelled application groups).
+ *
+ * It renders the heading (via `ApplicationMenu.Heading`) and wires up the group's
+ * `aria-labelledby` automatically, so screen readers announce the group's label together with
+ * each item inside it.
+ */
+export declare function ApplicationMenuGroup({ label, children, className }: ApplicationMenuGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuGroup/ApplicationMenuGroup.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cx } from '../../../../styled-system/css';
+import { applicationMenuGroupSlotRecipe } from '../../../../styled-system/recipes';
+import { DropdownMenuHeading } from '../../../DropdownMenu/DropdownMenuHeading';
+/**
+ * The ApplicationMenuGroup component.
+ * It is used inside the ApplicationMenu component to group related `ApplicationMenu.Item`s under
+ * a heading (e.g. the guideline's labelled application groups).
+ *
+ * It renders the heading (via `ApplicationMenu.Heading`) and wires up the group's
+ * `aria-labelledby` automatically, so screen readers announce the group's label together with
+ * each item inside it.
+ */
+export function ApplicationMenuGroup({ label, children, className }) {
+    const classes = applicationMenuGroupSlotRecipe();
+    const headingId = useId();
+    return (_jsxs("div", { role: "group", "aria-labelledby": headingId, className: cx(classes.root, 'mfui-ApplicationMenuGroup__root', className), children: [_jsx(DropdownMenuHeading, { id: headingId, children: label }), children] }));
+}

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuGroup/ApplicationMenuGroup.types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The props for the ApplicationMenuGroup component.
+ */
+export type ApplicationMenuGroupProps = {
+    /**
+     * The heading label of the group, rendered via `ApplicationMenu.Heading` and wired to the
+     * group's `aria-labelledby` automatically.
+     */
+    label: string;
+    /**
+     * The content of the group. Compose it with `ApplicationMenu.Item`.
+     */
+    children: React.ReactNode;
+    /**
+     * The class name to apply to the component.
+     */
+    className?: string;
+};

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuGroup/ApplicationMenuGroup.types.js

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

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuGroup/index.d.ts

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

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuGroup/index.js

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

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuItem/ApplicationMenuItem.d.ts

@@ -0,0 +1,14 @@
+import { type ApplicationMenuItemProps } from './ApplicationMenuItem.types';
+/**
+ * The ApplicationMenuItem component.
+ * It is used inside the ApplicationMenu component.
+ *
+ * It renders a `DropdownMenu.Item` with its own width/layout styling, so it inherits the same
+ * focus/keyboard navigation, `disabled`, `disabledMessage` and `aria-labelledby` behavior. See
+ * `DropdownMenu.Item` for the full behavior documentation.
+ *
+ * The item width is 168px by default as defined in the guideline. It can be adjusted through the
+ * `--mfui-application-menu-item-width` custom property (e.g. `100%` for the full-width rows above
+ * and below the divider).
+ */
+export declare function ApplicationMenuItem({ className, ...rest }: ApplicationMenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuItem/ApplicationMenuItem.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../../../../styled-system/css';
+import { applicationMenuItemSlotRecipe } from '../../../../styled-system/recipes';
+import { DropdownMenuItem } from '../../../DropdownMenu/DropdownMenuItem';
+/**
+ * The ApplicationMenuItem component.
+ * It is used inside the ApplicationMenu component.
+ *
+ * It renders a `DropdownMenu.Item` with its own width/layout styling, so it inherits the same
+ * focus/keyboard navigation, `disabled`, `disabledMessage` and `aria-labelledby` behavior. See
+ * `DropdownMenu.Item` for the full behavior documentation.
+ *
+ * The item width is 168px by default as defined in the guideline. It can be adjusted through the
+ * `--mfui-application-menu-item-width` custom property (e.g. `100%` for the full-width rows above
+ * and below the divider).
+ */
+export function ApplicationMenuItem({ className, ...rest }) {
+    const classes = applicationMenuItemSlotRecipe();
+    return _jsx(DropdownMenuItem, { ...rest, className: cx(classes.root, 'mfui-ApplicationMenuItem__root', className) });
+}

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuItem/ApplicationMenuItem.types.d.ts

@@ -0,0 +1,9 @@
+import { type DropdownMenuItemProps } from '../../../DropdownMenu/DropdownMenuItem';
+/**
+ * The props for the ApplicationMenuItem component.
+ *
+ * Identical to `DropdownMenuItemProps` — `ApplicationMenuItem` renders a `DropdownMenu.Item`
+ * under the hood with its own width/layout styling, so it supports the same `disabled`,
+ * `disabledMessage` and `aria-labelledby` / `aria-describedby` props.
+ */
+export type ApplicationMenuItemProps = DropdownMenuItemProps;

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuItem/ApplicationMenuItem.types.js

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

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuItem/index.d.ts

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

package/dist/src/GlobalHeader/ApplicationMenu/ApplicationMenuItem/index.js

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

package/dist/src/GlobalHeader/ApplicationMenu/index.d.ts

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

package/dist/src/GlobalHeader/ApplicationMenu/index.js

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

package/dist/src/GlobalHeader/GlobalHeader.d.ts

@@ -1,4 +1,5 @@
 import { type GlobalHeaderProps } from './GlobalHeader.types';
+import { ApplicationMenu } from './ApplicationMenu';
 /**
  * The global header component.
  * The global header component is a top-level navigation component that is used to display the application's logo and navigation elements.
@@ -7,3 +8,6 @@ import { type GlobalHeaderProps } from './GlobalHeader.types';
  * If you need a self-contained layout that already includes both header and navigation features, use `Sidebar` instead.
  */
 export declare function GlobalHeader({ className, mainNavigationButtonProps, applicationsMenuSlot, experimentalApplicationsMenuButtonProps, logoSlot, rightPaneSlot, disableResponsive, }: GlobalHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace GlobalHeader {
+    export { ApplicationMenu };
+}

package/dist/src/GlobalHeader/GlobalHeader.js

@@ -4,6 +4,7 @@ import { cx } from '../../styled-system/css';
 import { globalHeaderSlotRecipe } from '../../styled-system/recipes';
 import { IconButton } from '../IconButton';
 import { Tooltip } from '../Tooltip';
+import { ApplicationMenu } from './ApplicationMenu';
 import { ApplicationsExperimentalIcon } from './ApplicationsExperimentalIcon';
 /**
  * The global header component.
@@ -22,5 +23,10 @@ export function GlobalHeader({ className, mainNavigationButtonProps, application
     const handleClickExperimentalApplicationsMenuButton = (event) => {
         experimentalApplicationsMenuButtonProps?.onClick?.(event);
     };
-    return (_jsxs("header", { className: cx(classes.root, 'mfui-GlobalHeader__root', className), children: [_jsxs("div", { className: cx(classes.leftPane, 'mfui-GlobalHeader__leftPane'), children: [responsive && mainNavigationButtonProps ? (_jsx(Tooltip, { className: cx(classes.mainNavigationButton, 'mfui-GlobalHeader__mainNavigationButton'), content: mainNavigationButtonProps['aria-label'], placement: "bottomStart", children: _jsx(IconButton, { "aria-label": mainNavigationButtonProps['aria-label'], onClick: handleClickMainNavigationButton, children: _jsx(Menu, { "aria-hidden": true }) }) })) : null, experimentalApplicationsMenuButtonProps ? (_jsx("div", { className: cx(classes.applicationsMenuSlot, 'mfui-GlobalHeader__applicationsMenuSlot'), children: _jsx(Tooltip, { content: experimentalApplicationsMenuButtonProps['aria-label'], placement: "bottomStart", children: _jsx(IconButton, { className: cx(classes.experimentalApplicationsMenuButton, 'mfui-GlobalHeader__experimentalApplicationsMenuButton'), "aria-label": experimentalApplicationsMenuButtonProps['aria-label'], onClick: handleClickExperimentalApplicationsMenuButton, children: _jsx(ApplicationsExperimentalIcon, { "aria-hidden": true }) }) }) })) : applicationsMenuSlot ? (_jsx("div", { className: cx(classes.applicationsMenuSlot, 'mfui-GlobalHeader__applicationsMenuSlot'), children: applicationsMenuSlot })) : null, _jsx("div", { className: cx(classes.logo, 'mfui-GlobalHeader__logo'), children: logoSlot.base }), _jsx("div", { className: cx(classes.logoNarrowViewport, 'mfui-GlobalHeader__logoNarrowViewport'), children: logoSlot.narrowViewport ?? logoSlot.base })] }), _jsxs("div", { className: cx(classes.rightPane, 'mfui-GlobalHeader__rightPane'), children: [_jsx("div", { className: cx(classes.rightPaneSlot, 'mfui-GlobalHeader__rightPaneSlot'), children: rightPaneSlot.base }), responsive && rightPaneSlot.narrowViewport ? (_jsx("div", { className: cx(classes.rightPaneSlotNarrowViewport, 'mfui-GlobalHeader__rightPaneSlotNarrowViewport'), children: rightPaneSlot.narrowViewport })) : null] })] }));
+    return (_jsxs("header", { className: cx(classes.root, 'mfui-GlobalHeader__root', className), children: [_jsxs("div", { className: cx(classes.leftPane, 'mfui-GlobalHeader__leftPane'), children: [responsive && mainNavigationButtonProps ? (_jsx(Tooltip, { className: cx(classes.mainNavigationButton, 'mfui-GlobalHeader__mainNavigationButton'), content: mainNavigationButtonProps['aria-label'], placement: "bottomStart", children: _jsx(IconButton, { "aria-label": mainNavigationButtonProps['aria-label'], onClick: handleClickMainNavigationButton, children: _jsx(Menu, { "aria-hidden": true }) }) })) : null, experimentalApplicationsMenuButtonProps ? (_jsx("div", { className: cx(classes.applicationsMenuSlot, 'mfui-GlobalHeader__applicationsMenuSlot'), children: experimentalApplicationsMenuButtonProps.children != null ? (_jsx(ApplicationMenu, { label: experimentalApplicationsMenuButtonProps['aria-label'], triggerIcon: _jsx(ApplicationsExperimentalIcon, { "aria-hidden": true }), triggerProps: {
+                                className: cx(classes.experimentalApplicationsMenuButton, 'mfui-GlobalHeader__experimentalApplicationsMenuButton'),
+                            }, menuPopoverProps: { allowedPlacements: ['bottom-start'] }, children: experimentalApplicationsMenuButtonProps.children })) : (_jsx(Tooltip, { content: experimentalApplicationsMenuButtonProps['aria-label'], placement: "bottomStart", children: _jsx(IconButton, { className: cx(classes.experimentalApplicationsMenuButton, 'mfui-GlobalHeader__experimentalApplicationsMenuButton'), "aria-label": experimentalApplicationsMenuButtonProps['aria-label'], onClick: handleClickExperimentalApplicationsMenuButton, children: _jsx(ApplicationsExperimentalIcon, { "aria-hidden": true }) }) })) })) : applicationsMenuSlot ? (_jsx("div", { className: cx(classes.applicationsMenuSlot, 'mfui-GlobalHeader__applicationsMenuSlot'), children: applicationsMenuSlot })) : null, _jsx("div", { className: cx(classes.logo, 'mfui-GlobalHeader__logo'), children: logoSlot.base }), _jsx("div", { className: cx(classes.logoNarrowViewport, 'mfui-GlobalHeader__logoNarrowViewport'), children: logoSlot.narrowViewport ?? logoSlot.base })] }), _jsxs("div", { className: cx(classes.rightPane, 'mfui-GlobalHeader__rightPane'), children: [_jsx("div", { className: cx(classes.rightPaneSlot, 'mfui-GlobalHeader__rightPaneSlot'), children: rightPaneSlot.base }), responsive && rightPaneSlot.narrowViewport ? (_jsx("div", { className: cx(classes.rightPaneSlotNarrowViewport, 'mfui-GlobalHeader__rightPaneSlotNarrowViewport'), children: rightPaneSlot.narrowViewport })) : null] })] }));
 }
+// The applications dropdown menu designed for the GlobalHeader.
+// Pass it to the `applicationsMenuSlot` prop of the GlobalHeader component.
+GlobalHeader.ApplicationMenu = ApplicationMenu;

package/dist/src/GlobalHeader/GlobalHeader.types.d.ts

@@ -27,10 +27,6 @@ type MainNavigationButtonProps = {
  * **EXPERIMENTAL**: This feature is experimental and may be changed or removed in the future.
  */
 type ExperimentalApplicationsMenuButtonProps = {
-    /**
-     * The handler to be called when the applications menu button is clicked.
-     */
-    onClick: IconButtonProps['onClick'];
     /**
      * The accessible label to specify how you want the applications menu button to be recognized and read by screen readers.
      * This prop is required.
@@ -42,15 +38,58 @@ type ExperimentalApplicationsMenuButtonProps = {
      * <GlobalHeader
      *   experimentalApplicationsMenuButtonProps={{
      *     onClick,
-     *     'aria-label': 'アプリケーションメニュー',
+     *     'aria-label': 'マネーフォワード クラウドのサービス',
      *   }}
      * />
      *
-     * // The button will be described as "アプリケーションメニュー" by screen readers.
+     * // The button will be described as "マネーフォワード クラウドのサービス" by screen readers.
      * ```
      */
     'aria-label': IconButtonProps['aria-label'];
-};
+} & ({
+    /**
+     * The handler to be called when the applications menu button is clicked.
+     */
+    onClick: IconButtonProps['onClick'];
+    /**
+     * This property is ignored if the onClick property is provided.
+     */
+    children?: undefined;
+} | {
+    /**
+     * The accessible label of the applications menu button.
+     * It is also shown as the tooltip content of the button.
+     */
+    'aria-label': string;
+    /**
+     * This property is ignored if the children property is provided.
+     */
+    onClick?: undefined;
+    /**
+     * The content of the applications menu opened by the button.
+     *
+     * When provided, clicking the button opens the applications dropdown menu.
+     * Compose it with the `GlobalHeader.ApplicationMenu.Item` and
+     * `GlobalHeader.ApplicationMenu.Divider` components.
+     *
+     * @example
+     * ```jsx
+     * <GlobalHeader
+     *   experimentalApplicationsMenuButtonProps={{
+     *     'aria-label': 'マネーフォワード クラウドのサービス',
+     *     children: (
+     *       <>
+     *         <GlobalHeader.ApplicationMenu.Item href="https://example.com">マイページ</GlobalHeader.ApplicationMenu.Item>
+     *         <GlobalHeader.ApplicationMenu.Divider />
+     *         <GlobalHeader.ApplicationMenu.Item href="https://example.com">サービストップへ</GlobalHeader.ApplicationMenu.Item>
+     *       </>
+     *     ),
+     *   }}
+     * />
+     * ```
+     */
+    children: ReactNode;
+});
 export type GlobalHeaderProps = {
     /**
      * The class name of the global header.
@@ -67,6 +106,7 @@ export type GlobalHeaderProps = {
      * This slot is displayed when the viewport width is the breakpoint or larger.
      *
      * This element must be an applications dropdown menu as defined in Figma.
+     * Use the `GlobalHeader.ApplicationMenu` component for this slot.
      */
     applicationsMenuSlot?: ReactNode;
     /**

package/dist/src/GlobalHeader/index.d.ts

@@ -1,2 +1,3 @@
 export { GlobalHeader } from './GlobalHeader';
 export type { GlobalHeaderProps } from './GlobalHeader.types';
+export type { ApplicationMenuProps } from './ApplicationMenu';

package/dist/src/MultipleSelectBox/MultipleSelectBoxTrigger/MultipleSelectBoxTrigger.js

@@ -48,6 +48,6 @@ placeholder, renderDisplayValue, updateSelectedValues, clearButtonProps, disable
         .map((option) => option.value)
         .filter((v) => v != null)
         .map(String);
-    return (_jsx(FocusIndicator, { children: _jsxs("div", { ref: wrapperRef, className: cx(classes.wrapper, 'mfui-MultipleSelectBoxTrigger__wrapper', triggerWrapperProps?.className), children: [_jsx("button", { ref: mergeRefs(ref, triggerRef), type: "button", role: "combobox", "aria-controls": listBoxId, "aria-expanded": isOptionPanelOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, "aria-required": required || undefined, "data-mfui-caution": caution && !invalid ? true : undefined, value: selectedValues, disabled: disabled, onKeyDown: onKeyDown, onBlur: onBlur, ...rest, ...triggerProps, className: cx(classes.trigger, 'mfui-MultipleSelectBoxTrigger__trigger', triggerProps?.className) }), _jsx("input", { type: "hidden", name: name, value: selectedValues }), _jsx("div", { className: cx(classes.displayValues, 'mfui-MultipleSelectBoxTrigger__displayValues'), "data-mfui-content": "multiple-select-box-trigger-display-values", children: renderer() }), selectedOptions.length > 0 && !disabled && !disableClearButton ? (_jsx("div", { className: cx(classes.clearButtonContainer, 'mfui-MultipleSelectBoxTrigger__clearButtonContainer'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', className: cx(classes.clearButton, 'mfui-MultipleSelectBoxTrigger__clearButton'), "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "multiple-select-box-clear-button", onClick: handleClearValue }) })) : null, _jsx("div", { className: cx(classes.dropdownIconContainer, 'mfui-MultipleSelectBoxTrigger__dropdownIconContainer'), children: _jsx(DropdownIcon, { "aria-hidden": "true", className: cx(classes.dropdownIcon, 'mfui-MultipleSelectBoxTrigger__dropdownIcon') }) })] }) }));
+    return (_jsx(FocusIndicator, { children: _jsxs("div", { ref: wrapperRef, className: cx(classes.wrapper, 'mfui-MultipleSelectBoxTrigger__wrapper', triggerWrapperProps?.className), children: [_jsx("button", { ref: mergeRefs(ref, triggerRef), type: "button", role: "combobox", "aria-controls": isOptionPanelOpen ? listBoxId : undefined, "aria-expanded": isOptionPanelOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, "aria-required": required || undefined, "data-mfui-caution": caution && !invalid ? true : undefined, value: selectedValues, disabled: disabled, onKeyDown: onKeyDown, onBlur: onBlur, ...rest, ...triggerProps, className: cx(classes.trigger, 'mfui-MultipleSelectBoxTrigger__trigger', triggerProps?.className) }), _jsx("input", { type: "hidden", name: name, value: selectedValues }), _jsx("div", { className: cx(classes.displayValues, 'mfui-MultipleSelectBoxTrigger__displayValues'), "data-mfui-content": "multiple-select-box-trigger-display-values", children: renderer() }), selectedOptions.length > 0 && !disabled && !disableClearButton ? (_jsx("div", { className: cx(classes.clearButtonContainer, 'mfui-MultipleSelectBoxTrigger__clearButtonContainer'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', className: cx(classes.clearButton, 'mfui-MultipleSelectBoxTrigger__clearButton'), "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "multiple-select-box-clear-button", onClick: handleClearValue }) })) : null, _jsx("div", { className: cx(classes.dropdownIconContainer, 'mfui-MultipleSelectBoxTrigger__dropdownIconContainer'), children: _jsx(DropdownIcon, { "aria-hidden": "true", className: cx(classes.dropdownIcon, 'mfui-MultipleSelectBoxTrigger__dropdownIcon') }) })] }) }));
 }
 export const MultipleSelectBoxTrigger = forwardRef(MultipleSelectBoxTriggerInner);

package/dist/src/SelectBox/SelectBox.js

@@ -377,7 +377,7 @@ export const SelectBox = forwardRef((props, ref) => {
     const hasSelectedValue = value !== undefined || localSelectedOption !== null;
     const showClearButton = enableClearButton && hasSelectedValue;
     // Use Popover's centralized blur handling instead of custom logic
-    return (_jsx(Popover, { open: isOptionPanelOpen, targetDOMNode: targetDOMNode, minWidth: popoverContentProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: popoverContentProps?.allowedPlacements, enableConstrainedContentWidth: enableConstrainedPopoverWidth, renderContent: () => (_jsx("div", { ref: optionPanelRef, id: listBoxId, className: cx(classes.optionPanel, 'mfui-SelectBox__optionPanel', popoverContentProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: renderPopoverContent ? (renderPopoverContent({ searchNode, optionsNode })) : (_jsxs(_Fragment, { children: [searchNode, optionsNode] })) })), renderTrigger: ({ setTriggerRef, togglePopover, isPopoverOpen, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, ...triggerWrapperProps, className: cx(classes.triggerWrapper, 'mfui-SelectBox__triggerWrapper', triggerWrapperProps?.className), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", disabled: disabled, "aria-label": triggerProps?.['aria-label'], "aria-controls": listBoxId, "aria-describedby": triggerProps?.['aria-describedby'], "aria-expanded": isPopoverOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, "aria-required": required, className: cx(classes.trigger, 'mfui-SelectBox__trigger', triggerProps?.className), "data-placeholder": !!placeholder && !localSelectedOption, "data-selected": !!localSelectedOption, "data-mfui-has-clear-button": showClearButton, "data-mfui-caution": caution && !invalid ? true : undefined, onClick: togglePopover, onKeyDown: (event) => {
+    return (_jsx(Popover, { open: isOptionPanelOpen, targetDOMNode: targetDOMNode, minWidth: popoverContentProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: popoverContentProps?.allowedPlacements, enableConstrainedContentWidth: enableConstrainedPopoverWidth, renderContent: () => (_jsx("div", { ref: optionPanelRef, className: cx(classes.optionPanel, 'mfui-SelectBox__optionPanel', popoverContentProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: renderPopoverContent ? (renderPopoverContent({ searchNode, optionsNode })) : (_jsxs(_Fragment, { children: [searchNode, optionsNode] })) })), renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, ...triggerWrapperProps, className: cx(classes.triggerWrapper, 'mfui-SelectBox__triggerWrapper', triggerWrapperProps?.className), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", disabled: disabled, "aria-label": triggerProps?.['aria-label'], "aria-controls": isOptionPanelOpen ? listBoxId : undefined, "aria-describedby": triggerProps?.['aria-describedby'], "aria-expanded": isOptionPanelOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, "aria-required": required, className: cx(classes.trigger, 'mfui-SelectBox__trigger', triggerProps?.className), "data-placeholder": !!placeholder && !localSelectedOption, "data-selected": !!localSelectedOption, "data-mfui-has-clear-button": showClearButton, "data-mfui-caution": caution && !invalid ? true : undefined, onClick: togglePopover, onKeyDown: (event) => {
                             handleTypeAhead(event.nativeEvent);
                             handleTriggerKeyDown(event);
                         }, onBlur: handleTriggerBlur, children: [_jsx("span", { "data-mfui-content": "select-box-trigger-display-value", children: renderTriggerLabel() }), _jsx(DropdownIcon, { "aria-hidden": "true", focusable: false }), _jsx("input", { ref: ref, type: "hidden", value: localSelectedOption?.value ?? '', name: name, disabled: disabled })] }) }), showClearButton ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-SelectBox__clearButtonWrapper'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : size === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "select-box-clear-button", onClick: (event) => {