@moneyforward/mfui-components 3.15.0 → 3.16.0

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-export type FormFooterPosition = 'fixed' | 'stacking';
+export type FormFooterPosition = 'fixed' | 'stacking' | 'sticky';
 export type FormFooterSectionPosition = 'fill' | 'center';
 export type FormFooterProps = {
     /**
@@ -11,6 +11,7 @@ export type FormFooterProps = {
      *
      * - `"stacking"`: Displayed inline at the bottom of its container. Use for creation forms where preventing mid-session abandonment is important.
      * - `"fixed"`: Pinned to the bottom of the viewport at all times with a separator border. Use for edit screens where users return frequently.
+     * - `"sticky"`: Sits inline below the last form field, and pins to the bottom of the nearest scrolling ancestor (e.g. inside `SidePane`) when the form overflows. Use inside scrollable containers such as `SidePane`.
      *
      * @default "stacking"
      */

package/dist/src/MultipleSelectBox/MultipleSelectBox.js

@@ -59,7 +59,7 @@ placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, val
         onToggle: (nextValue) => {
             onOpenStateChanged?.(nextValue);
             if (nextValue && enableApplyControls) {
-                updateTemporaryValues([...localSelectedValuesSet]);
+                openWithSelectedOptions(localSelectedOptions);
             }
         },
         onClose: () => {
@@ -107,7 +107,7 @@ placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, val
     });
     // Disable infinite scroll when there's an error
     const enableInfiniteScroll = baseEnabledInfiniteScroll && !infiniteScrollError;
-    const { temporaryValues, updateTemporaryValues, initializeTemporaryValues, handleCancelButtonClick, handleApplyButtonClick, } = useApplyControls({
+    const { temporaryValues, updateTemporaryValues, openWithSelectedOptions, initializeTemporaryValues, handleCancelButtonClick, handleApplyButtonClick, } = useApplyControls({
         options: flattenedOptions,
         onValuesChange: updateSelectedOptions,
         closeOptionPanel,

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

@@ -33,7 +33,7 @@ placeholder, renderDisplayValue, updateSelectedValues, clearButtonProps, disable
             return (_jsx(Typography, { variant: textVariant, className: cx(classes.placeholder, 'mfui-MultipleSelectBoxTrigger__placeholder'), "data-mfui-content": "multiple-select-box-trigger-placeholder", children: placeholder }));
         }
         if (showDisplayValueAsTag) {
-            return (_jsx("div", { className: cx(classes.tagList, 'mfui-MultipleSelectBoxTrigger__tagList'), "data-mfui-content": "multiple-select-box-trigger-selected-options", children: selectedOptions.map((option, index) => (_jsx(Tag, { className: cx(classes.tagItem, 'mfui-MultipleSelectBoxTrigger__tagItem'), label: option.label, onClose: (event) => {
+            return (_jsx("div", { className: cx(classes.tagList, 'mfui-MultipleSelectBoxTrigger__tagList'), "data-mfui-content": "multiple-select-box-trigger-selected-options", children: selectedOptions.map((option, index) => (_jsx(Tag, { className: cx(classes.tagItem, 'mfui-MultipleSelectBoxTrigger__tagItem'), label: option.label, disabled: disabled, onClose: (event) => {
                         event.stopPropagation();
                         onDeselectTag(option.value);
                     } }, option.value ?? `tag-${option.label}-${String(index)}`))) }));

package/dist/src/MultipleSelectBox/hooks/useApplyControls.d.ts

@@ -23,6 +23,7 @@ type UseApplyControlsProps<T extends AllowedValueTypes = string, AdditionalProps
 export declare function useApplyControls<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>({ options, onValuesChange, closeOptionPanel }: UseApplyControlsProps<T, AdditionalProps>): {
     temporaryValues: Set<MultipleSelectBoxOption<T, AdditionalProps>["value"]>;
     updateTemporaryValues: (values: MultipleSelectBoxOption<T, AdditionalProps>["value"][]) => void;
+    openWithSelectedOptions: (selectedOptions: MultipleSelectBoxOption<T, AdditionalProps>[]) => void;
     initializeTemporaryValues: () => void;
     handleCancelButtonClick: () => void;
     handleApplyButtonClick: () => void;

package/dist/src/MultipleSelectBox/hooks/useApplyControls.js

@@ -33,6 +33,21 @@ export function useApplyControls({ options, onValuesChange, closeOptionPanel })
             return newMap;
         });
     }, [options]);
+    // Initialize temporary state from full option objects when the panel opens.
+    // This must receive full option objects (not just value keys) so that previously-applied
+    // options are preserved even when they are not in the currently-visible filtered list.
+    const openWithSelectedOptions = useCallback((selectedOptions) => {
+        const newMap = new Map();
+        const newValues = new Set();
+        for (const option of selectedOptions) {
+            if (option.value != null) {
+                newMap.set(option.value, option);
+                newValues.add(option.value);
+            }
+        }
+        setTemporaryValues(newValues);
+        setTemporaryOptionsMap(newMap);
+    }, []);
     // Initialize temporary selection state (called when the panel closes without applying)
     const initializeTemporaryValues = useCallback(() => {
         setTemporaryValues(new Set());
@@ -52,6 +67,7 @@ export function useApplyControls({ options, onValuesChange, closeOptionPanel })
     return {
         temporaryValues,
         updateTemporaryValues,
+        openWithSelectedOptions,
         initializeTemporaryValues,
         handleCancelButtonClick,
         handleApplyButtonClick,

package/dist/src/SidePane/SidePane.d.ts

@@ -17,6 +17,9 @@ export declare const SidePane: import("react").ForwardRefExoticComponent<{
     enableModal?: boolean;
     disableBackdropClose?: boolean;
     enableAutoUnmount?: boolean;
+    formFooterProps?: Pick<import("..").FormFooterProps, "optionsSlot" | "actionsSlot"> & {
+        position?: Exclude<import("..").FormFooterProps["position"], "fixed">;
+    };
     insideProps?: {
         className?: string;
     };

package/dist/src/SidePane/SidePane.js

@@ -10,13 +10,14 @@ import { useSidePaneStateController } from './hooks/useSidePaneStateController';
 import { useFocusTrap } from '../utilities/dom/useFocusTrap';
 import { compatibleForwardRef } from '../utilities/react/compatibleForwardRef';
 import { Portal, TargetDomNodeProvider, useAutomaticTargetDomNode } from '../Portal';
+import { FormFooter } from '../FormFooter';
 /**
  * The general purpose SidePane component.
  * This component extends the props of `<div>` element with `role="dialog"`.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
  */
-export const SidePane = compatibleForwardRef(({ open, title, renderHeading, onClose, className, children, actionSlot, position = 'right', enableModal = false, enableAutoUnmount = true, disableBackdropClose = false, closeButtonProps, targetDOMNode, insideProps, ...props }, ref) => {
+export const SidePane = compatibleForwardRef(({ open, title, renderHeading, onClose, className, children, actionSlot, formFooterProps, position = 'right', enableModal = false, enableAutoUnmount = true, disableBackdropClose = false, closeButtonProps, targetDOMNode, insideProps, ...props }, ref) => {
     const classes = sidePaneSlotRecipe({ position, nonModal: !enableModal });
     const { localOpen, handleCloseSidePane, handleStopCloseSidePane, sidePaneElement, setSidePaneElement } = useSidePaneStateController({
         open,
@@ -53,9 +54,10 @@ export const SidePane = compatibleForwardRef(({ open, title, renderHeading, onCl
     }, [closeButtonProps?.isCollapseIcon, position]);
     const targetElement = useAutomaticTargetDomNode(targetDOMNode, sidePaneElement);
     const shouldRenderContent = enableAutoUnmount ? localOpen : true;
+    const resolvedFormFooterPosition = formFooterProps?.position ?? 'sticky';
     const headingNode = title ? (_jsx(Heading, { variant: "pageHeading2", tag: "h2", children: title })) : null;
     return (_jsx(TargetDomNodeProvider, { targetDomNode: sidePaneElement, children: shouldRenderContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setSidePaneElement, role: "dialog", ...props, className: cx(classes.root, 'mfui-SidePane__root', className), tabIndex: -1, style: {
                     ...props.style,
                     ...(!enableAutoUnmount && !localOpen && { display: 'none' }),
-                }, onKeyDown: handleOnKeyDown, children: [enableModal ? (_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-SidePane__backdrop'), onClick: handleBackdropClick })) : null, _jsxs("div", { "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [_jsxs("header", { className: cx(classes.header, 'mfui-SidePane__header'), children: [renderHeading ? (renderHeading({ headingNode })) : (_jsx("div", { className: cx(classes.title, 'mfui-SidePane__title'), children: headingNode })), _jsxs("div", { className: cx(classes.actionSlotWrapper, 'mfui-SidePane__actionSlotWrapper'), children: [!!actionSlot && (_jsx("div", { className: cx(classes.actionSlot, 'mfui-SidePane__actionSlot'), children: actionSlot })), _jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-SidePane__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: handleCloseSidePane, children: closeButtonIcon }) })] })] }), _jsx("main", { className: cx(classes.content, 'mfui-SidePane__content'), children: children })] })] }) })) : null }));
+                }, onKeyDown: handleOnKeyDown, children: [enableModal ? (_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-SidePane__backdrop'), onClick: handleBackdropClick })) : null, _jsxs("div", { "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [_jsxs("header", { className: cx(classes.header, 'mfui-SidePane__header'), children: [renderHeading ? (renderHeading({ headingNode })) : (_jsx("div", { className: cx(classes.title, 'mfui-SidePane__title'), children: headingNode })), _jsxs("div", { className: cx(classes.actionSlotWrapper, 'mfui-SidePane__actionSlotWrapper'), children: [!!actionSlot && (_jsx("div", { className: cx(classes.actionSlot, 'mfui-SidePane__actionSlot'), children: actionSlot })), _jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-SidePane__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: handleCloseSidePane, children: closeButtonIcon }) })] })] }), _jsxs("main", { className: cx(classes.content, 'mfui-SidePane__content'), children: [_jsx("div", { className: cx(classes.contentBody, 'mfui-SidePane__contentBody'), children: children }), resolvedFormFooterPosition === 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] }), formFooterProps && resolvedFormFooterPosition !== 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] })] }) })) : null }));
 });

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

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import { type SidePaneSlotRecipeVariant } from '../../styled-system/recipes';
+import { type FormFooterProps } from '../FormFooter';
 export type OnCloseFunction = () => void;
 export type SidePaneRenderOptions = {
     /**
@@ -109,6 +110,19 @@ export type SidePaneProps = {
      * @default true
      */
     enableAutoUnmount?: boolean;
+    /**
+     * Props to render a `FormFooter` inside the SidePane.
+     *
+     * - `position: 'sticky'` (default): the footer is always pinned to the pane bottom, outside the scrollable content area.
+     * - `position: 'stacking'`: the footer flows after the content inside the scroll area.
+     *
+     * `position: 'fixed'` is not supported here because it anchors to the viewport rather than the pane.
+     *
+     * @default undefined
+     */
+    formFooterProps?: Pick<FormFooterProps, 'optionsSlot' | 'actionsSlot'> & {
+        position?: Exclude<FormFooterProps['position'], 'fixed'>;
+    };
     /**
      * Additional props to apply to the inside container element of the SidePane.
      * This element wraps the header and content sections.

package/dist/src/SubNavigation/SubNavigation.d.ts

@@ -2,4 +2,4 @@ import { type SubNavigationProps } from './SubNavigation.types';
 /**
  * This component is for the navigation links under the main navigation.
  */
-export declare function SubNavigation({ orientation, navigationItems, customLinkComponent, className, }: SubNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubNavigation({ orientation, navigationItems, customLinkComponent, renderNavigationLabel, headerSlot, className, }: SubNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/SubNavigation/SubNavigation.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { DisclosureBasicCollapsed, Lock } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { subNavigationSlotRecipe } from '../../styled-system/recipes';
@@ -7,10 +7,10 @@ import { Typography } from '../Typography';
 /**
  * This component is for the navigation links under the main navigation.
  */
-export function SubNavigation({ orientation = 'vertical', navigationItems, customLinkComponent, className, }) {
+export function SubNavigation({ orientation = 'vertical', navigationItems, customLinkComponent, renderNavigationLabel, headerSlot, className, }) {
     const hasLabelIcon = navigationItems.some(({ labelIcon }) => !!labelIcon);
     const classes = subNavigationSlotRecipe({ orientation, hasLabelIcon });
-    return (_jsx("nav", { className: cx(classes.root, 'mfui-SubNavigation__root', className), children: _jsx("ul", { className: cx(classes.list, 'mfui-SubNavigation__list'), children: navigationItems.map((navigationItem, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-SubNavigation__listItem'), children: renderNavigationItem(navigationItem, customLinkComponent, classes, 0) }, index))) }) }));
+    return (_jsxs("nav", { className: cx(classes.root, 'mfui-SubNavigation__root', className), children: [headerSlot ? (_jsx("div", { className: cx(classes.subNavigationHeader, 'mfui-SubNavigation__subNavigationHeader'), children: headerSlot })) : null, _jsx("ul", { className: cx(classes.list, 'mfui-SubNavigation__list'), children: navigationItems.map((navigationItem, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-SubNavigation__listItem'), children: renderNavigationItem(navigationItem, customLinkComponent, classes, 0, renderNavigationLabel) }, index))) })] }));
 }
 /**
  * Render a navigation item based on the following conditions:
@@ -28,25 +28,27 @@ export function SubNavigation({ orientation = 'vertical', navigationItems, custo
  *
  * @param nestLevel - The nest level of the navigation item.
  *
+ * @param renderNavigationLabel - Custom render function for each navigation item's label.
+ *
  * @returns The rendered navigation item.
  */
-const renderNavigationItem = (navigationItem, customLinkComponent, classes, nestLevel) => {
+const renderNavigationItem = (navigationItem, customLinkComponent, classes, nestLevel, renderNavigationLabel) => {
     const { label, href, labelIcon, statusSlot, locked, lockIconProps, children } = navigationItem;
     if (children === undefined) {
-        return (_jsx(NavigationLink, { navigationItem: navigationItem, customLinkComponent: customLinkComponent, classes: classes }));
+        return (_jsx(NavigationLink, { navigationItem: navigationItem, customLinkComponent: customLinkComponent, classes: classes, renderNavigationLabel: renderNavigationLabel }));
     }
     if (href) {
         // The the parent item will be rendered as a link with separated disclosure icon button.
-        return (_jsxs(_Fragment, { children: [_jsx(NavigationLink, { navigationItem: navigationItem, customLinkComponent: customLinkComponent, classes: classes }), _jsx(NestedNavigationList, { summarySlot: _jsx("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: cx(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: _jsx(DisclosureBasicCollapsed, { "aria-label": label }) }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1 })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(NavigationLink, { navigationItem: navigationItem, customLinkComponent: customLinkComponent, classes: classes, renderNavigationLabel: renderNavigationLabel }), _jsx(NestedNavigationList, { summarySlot: _jsx("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: cx(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: _jsx(DisclosureBasicCollapsed, { "aria-label": label }) }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1, renderNavigationLabel: renderNavigationLabel })] }));
     }
     // The the parent item will be rendered as a disclosure button with an icon.
-    return (_jsx(NestedNavigationList, { summarySlot: _jsxs(_Fragment, { children: [_jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }), _jsx("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: cx(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: _jsx(DisclosureBasicCollapsed, { "aria-label": "" }) })] }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1 }));
+    return (_jsx(NestedNavigationList, { summarySlot: _jsxs(_Fragment, { children: [_jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes, renderNavigationLabel }), _jsx("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: cx(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: _jsx(DisclosureBasicCollapsed, { "aria-label": "" }) })] }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1, renderNavigationLabel: renderNavigationLabel }));
 };
 /**
  * This is a group of a text label, an optional icon, and a status.
  * This is used for all navigation links and parent items for disclosure buttons in SubNavigation.
  */
-function NavigationLabelGroup({ label, labelIcon, locked, lockIconProps, statusSlot, classes, }) {
+function NavigationLabelGroup({ label, labelIcon, locked, lockIconProps, statusSlot, classes, renderNavigationLabel, }) {
     // If locked=true, display <Lock /> icon in preference to any other status of the statusSlot option.
     const renderStatus = () => {
         if (locked) {
@@ -57,31 +59,31 @@ function NavigationLabelGroup({ label, labelIcon, locked, lockIconProps, statusS
         }
         return null;
     };
-    return (_jsxs(_Fragment, { children: [labelIcon ? _jsx("div", { className: cx(classes.labelIcon, 'mfui-SubNavigation__labelIcon'), children: labelIcon }) : null, _jsx(Typography, { variant: "strongControlLabel", className: cx(classes.label, 'mfui-SubNavigation__label'), children: label }), renderStatus()] }));
+    return (_jsxs(_Fragment, { children: [labelIcon ? _jsx("div", { className: cx(classes.labelIcon, 'mfui-SubNavigation__labelIcon'), children: labelIcon }) : null, renderNavigationLabel ? (renderNavigationLabel(label)) : (_jsx(Typography, { variant: "strongControlLabel", className: cx(classes.label, 'mfui-SubNavigation__label'), children: label })), renderStatus()] }));
 }
 /**
  * This is a link that has NavigationLabelGroup.
  * This is used for all navigation links in SubNavigation.
  */
-function NavigationLink({ navigationItem, customLinkComponent, classes, }) {
+function NavigationLink({ navigationItem, customLinkComponent, classes, renderNavigationLabel, }) {
     const { label, href, isCurrent, isExternal, labelIcon, statusSlot, locked, lockIconProps } = navigationItem;
     if (navigationItem.children === undefined && navigationItem.onClick) {
         const { onClick } = navigationItem;
         return (_jsx(FocusIndicator, { children: _jsx("button", { type: "button", className: cx(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, onClick: () => {
                     onClick(navigationItem.href);
-                }, children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }) }) }));
+                }, children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes, renderNavigationLabel }) }) }));
     }
     if (customLinkComponent && !isExternal) {
         const Tag = customLinkComponent;
-        return (_jsx(FocusIndicator, { children: _jsx(Tag, { href: href, className: cx(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }) }) }));
+        return (_jsx(FocusIndicator, { children: _jsx(Tag, { href: href, className: cx(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes, renderNavigationLabel }) }) }));
     }
-    return (_jsx(FocusIndicator, { children: _jsx("a", { href: href, target: isExternal ? '_blank' : undefined, className: cx(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, rel: "noreferrer", children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }) }) }));
+    return (_jsx(FocusIndicator, { children: _jsx("a", { href: href, target: isExternal ? '_blank' : undefined, className: cx(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, rel: "noreferrer", children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes, renderNavigationLabel }) }) }));
 }
 /**
  * This is a details element that contains a list of nested navigation links.
  */
-function NestedNavigationList({ summarySlot, nestedNavigationItems, customLinkComponent, classes, nestLevel, }) {
+function NestedNavigationList({ summarySlot, nestedNavigationItems, customLinkComponent, classes, nestLevel, renderNavigationLabel, }) {
     // Check whether all descendants have isCurrent=true by calling itself recursively.
     const isCurrentPathInChildren = (children) => children?.some(({ isCurrent, children }) => isCurrent || (children && isCurrentPathInChildren(children))) || false;
-    return (_jsxs("details", { open: isCurrentPathInChildren(nestedNavigationItems), className: cx(classes.details, 'mfui-SubNavigation__details'), children: [_jsx(FocusIndicator, { children: _jsx("summary", { className: cx(classes.summary, 'mfui-SubNavigation__summary'), children: summarySlot }) }), _jsx("ul", { className: cx(classes.list, 'mfui-SubNavigation__list'), children: nestedNavigationItems.map((nestedNavigationItem, index) => (_jsx("li", { className: cx(classes.nestedListItem, 'mfui-SubNavigation__nestedListItem'), "data-mfui-nest-level": nestLevel, children: nestedNavigationItem.children === undefined ? (_jsx(NavigationLink, { navigationItem: nestedNavigationItem, customLinkComponent: customLinkComponent, classes: classes })) : (renderNavigationItem(nestedNavigationItem, customLinkComponent, classes, nestLevel + 1)) }, index))) })] }));
+    return (_jsxs("details", { open: isCurrentPathInChildren(nestedNavigationItems), className: cx(classes.details, 'mfui-SubNavigation__details'), children: [_jsx(FocusIndicator, { children: _jsx("summary", { className: cx(classes.summary, 'mfui-SubNavigation__summary'), children: summarySlot }) }), _jsx("ul", { className: cx(classes.list, 'mfui-SubNavigation__list'), children: nestedNavigationItems.map((nestedNavigationItem, index) => (_jsx("li", { className: cx(classes.nestedListItem, 'mfui-SubNavigation__nestedListItem'), "data-mfui-nest-level": nestLevel, children: nestedNavigationItem.children === undefined ? (_jsx(NavigationLink, { navigationItem: nestedNavigationItem, customLinkComponent: customLinkComponent, classes: classes, renderNavigationLabel: renderNavigationLabel })) : (renderNavigationItem(nestedNavigationItem, customLinkComponent, classes, nestLevel + 1, renderNavigationLabel)) }, index))) })] }));
 }

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

@@ -1,4 +1,5 @@
 import { type ReactNode, type ElementType, type ComponentPropsWithoutRef } from 'react';
+export type SubNavigationRenderLabelFunction = (label: string) => ReactNode;
 export type SubNavigationProps = VerticalSubNavigationProps | HorizontalSubNavigationProps;
 type VerticalSubNavigationProps = BaseSubNavigationProps & {
     /**
@@ -47,6 +48,63 @@ type BaseSubNavigationProps = {
      * e.g. next/link
      */
     customLinkComponent?: ElementType;
+    /**
+     * Custom render function for each navigation item's label.
+     * Receives the item's raw `label` string and returns a ReactNode rendered inside
+     * the default `<Typography variant="strongControlLabel">` wrapper.
+     * When omitted, the label string is rendered directly (default behavior).
+     *
+     * Use this to truncate long labels or otherwise customize how labels are displayed
+     * without losing the built-in semantic markup.
+     *
+     * To show a tooltip on both hover and focus, wrap the entire link with a `Tooltip`
+     * via `customLinkComponent` instead — placing a `Tooltip` inside `renderNavigationLabel`
+     * only works for hover because the tooltip trigger ends up inside the focusable `<a>`,
+     * and focus events do not propagate inward to child elements.
+     *
+     * @param label - The label string of the navigation item.
+     *
+     * @returns ReactNode - Custom content rendered inside the label wrapper.
+     *
+     * @example
+     * ```tsx
+     * // Truncate labels that exceed 2 lines
+     * <SubNavigation
+     *   navigationItems={items}
+     *   renderNavigationLabel={(label) => (
+     *     <span
+     *       style={{
+     *         display: '-webkit-box',
+     *         WebkitLineClamp: 2,
+     *         WebkitBoxOrient: 'vertical',
+     *         overflow: 'hidden',
+     *       }}
+     *     >
+     *       {label}
+     *     </span>
+     *   )}
+     * />
+     * ```
+     */
+    renderNavigationLabel?: SubNavigationRenderLabelFunction;
+    /**
+     * Content displayed above the navigation list, rendered inside a padded wrapper.
+     * Use this to add a feature shortcut, promotional content, or other header-level
+     * UI at the top of the navigation.
+     *
+     * @example
+     * ```tsx
+     * <SubNavigation
+     *   navigationItems={items}
+     *   headerSlot={
+     *     <Button priority="primary" href="/upgrade">
+     *       Upgrade plan
+     *     </Button>
+     *   }
+     * />
+     * ```
+     */
+    headerSlot?: ReactNode;
     /**
      * For overriding styles if you need.
      */

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

@@ -1,2 +1,2 @@
 export { SubNavigation } from './SubNavigation';
-export type { SubNavigationProps } from './SubNavigation.types';
+export type { SubNavigationProps, SubNavigationRenderLabelFunction } from './SubNavigation.types';

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

@@ -54,7 +54,23 @@ export type TagProps = {
      */
     onClick?: undefined;
     /**
-     * This prop is not available when "onClick" is not provided.
+     * Optional flag to disable the close button. This option is only available when "onClose" is provided.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The handler to close the tag. When this prop is provided, the close button will be shown.
+     * Required in this variant to allow the disabled prop.
+     */
+    onClose: (event: MouseEvent<HTMLButtonElement>) => void;
+} | {
+    /**
+     * Optional click event handler. If provided, the Tag will be rendered as a button element.
+     */
+    onClick?: undefined;
+    /**
+     * This prop is not available when neither "onClick" nor "onClose" is provided.
      *
      * @default false
      */

package/dist/styled-system/recipes/form-footer-slot-recipe.d.ts

@@ -3,7 +3,7 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface FormFooterSlotRecipeVariant {
-  position: "stacking" | "fixed"
+  position: "stacking" | "fixed" | "sticky"
 sectionPosition: "center" | "fill"
 }
 

package/dist/styled-system/recipes/form-footer-slot-recipe.js

@@ -38,7 +38,8 @@ export const formFooterSlotRecipe = /* @__PURE__ */ Object.assign(formFooterSlot
     variantMap: {
         "position": [
             "stacking",
-            "fixed"
+            "fixed",
+            "sticky"
         ],
         "sectionPosition": [
             "center",

package/dist/styled-system/recipes/side-pane-slot-recipe.d.ts

@@ -11,7 +11,7 @@ type SidePaneSlotRecipeVariantMap = {
   [key in keyof SidePaneSlotRecipeVariant]: Array<SidePaneSlotRecipeVariant[key]>
 }
 
-type SidePaneSlotRecipeSlot = "root" | "backdrop" | "inside" | "header" | "title" | "actionSlotWrapper" | "actionSlot" | "closeButtonWrapper" | "content"
+type SidePaneSlotRecipeSlot = "root" | "backdrop" | "inside" | "header" | "title" | "actionSlotWrapper" | "actionSlot" | "closeButtonWrapper" | "content" | "contentBody" | "footer"
 
 export type SidePaneSlotRecipeVariantProps = {
   [key in keyof SidePaneSlotRecipeVariant]?: ConditionalValue<SidePaneSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/side-pane-slot-recipe.js

@@ -38,6 +38,14 @@ const sidePaneSlotRecipeSlotNames = [
     [
         "content",
         "SidePane__content"
+    ],
+    [
+        "contentBody",
+        "SidePane__contentBody"
+    ],
+    [
+        "footer",
+        "SidePane__footer"
     ]
 ];
 const sidePaneSlotRecipeSlotFns = /* @__PURE__ */ sidePaneSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, sidePaneSlotRecipeDefaultVariants, getSlotCompoundVariant(sidePaneSlotRecipeCompoundVariants, slotName))]);

package/dist/styled-system/recipes/sub-navigation-slot-recipe.d.ts

@@ -11,7 +11,7 @@ type SubNavigationSlotRecipeVariantMap = {
   [key in keyof SubNavigationSlotRecipeVariant]: Array<SubNavigationSlotRecipeVariant[key]>
 }
 
-type SubNavigationSlotRecipeSlot = "root" | "list" | "listItem" | "link" | "labelIcon" | "label" | "statusSlot" | "details" | "summary" | "disclosureIcon" | "nestedListItem"
+type SubNavigationSlotRecipeSlot = "root" | "subNavigationHeader" | "list" | "listItem" | "link" | "labelIcon" | "label" | "statusSlot" | "details" | "summary" | "disclosureIcon" | "nestedListItem"
 
 export type SubNavigationSlotRecipeVariantProps = {
   [key in keyof SubNavigationSlotRecipeVariant]?: ConditionalValue<SubNavigationSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/sub-navigation-slot-recipe.js

@@ -7,6 +7,10 @@ const subNavigationSlotRecipeSlotNames = [
         "root",
         "SubNavigation__root"
     ],
+    [
+        "subNavigationHeader",
+        "SubNavigation__subNavigationHeader"
+    ],
     [
         "list",
         "SubNavigation__list"

package/dist/styles.css

@@ -2366,16 +2366,25 @@
 .mfui-hERVbP {
   flex: 1 1 0%;
   overflow: auto;
-  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.main-content\.horizontal\.comfort);
   flex-shrink: 0;
-  padding-block-start: var(--mfui-spacing-mfui\.size\.padding\.main-content\.top\.comfort);
-  padding-block-end: var(--mfui-spacing-mfui\.size\.padding\.main-content\.bottom\.comfort);
+  display: flex;
+  flex-direction: column;
   font-family: var(--mfui-fonts-mfui\.typography\.font-family\.body);
   font-weight: var(--mfui-font-weights-mfui\.typography\.font-weight\.body);
   font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.body);
   line-height: var(--mfui-line-heights-mfui\.typography\.line-height\.body);
 }
 
+.mfui-jVWTKD {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.main-content\.horizontal\.comfort);
+  padding-block-start: var(--mfui-spacing-mfui\.size\.padding\.main-content\.top\.comfort);
+  padding-block-end: var(--mfui-spacing-mfui\.size\.padding\.main-content\.bottom\.comfort);
+}
+
+.mfui-iAowQz {
+  flex-shrink: 0;
+}
+
 .mfui-lbCmDn {
   border-style: solid;
   border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.none);
@@ -2964,6 +2973,13 @@
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
 }
 
+.mfui-XFuwI {
+  padding-block: var(--mfui-spacing-mfui\.size\.padding\.control-container\.vertical\.comfort);
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.horizontal\.comfort);
+  display: flex;
+  flex-direction: column;
+}
+
 .mfui-erQjxT {
   list-style: none;
 }
@@ -5147,8 +5163,10 @@ li:last-child > .mfui-cXGJls {
 .mfui-iEbmF {
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.main-content\.horizontal\.comfort);
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
   align-items: flex-start;
+  column-gap: var(--mfui-spacing-mfui\.size\.spacing\.paragraph\.horizontal\.comfort);
 }
 
 .mfui-fpqRil {
@@ -5157,10 +5175,9 @@ li:last-child > .mfui-cXGJls {
 }
 
 .mfui-fpqRil,.mfui-eTbFbc {
-  flex: none;
+  flex: 1 0 auto;
   display: flex;
   align-items: center;
-  width: 100%;
   height: var(--mfui-sizes-mfui\.size\.dimension\.control-container\.height\.comfort);
 }
 
@@ -5177,15 +5194,6 @@ li:last-child > .mfui-cXGJls {
 }
   .mfui-jDhUBB,.mfui-ggXIiJ,.mfui-clKroC {
     display: none;
-}
-  .mfui-iEbmF {
-    gap: var(--mfui-spacing-mfui\.size\.spacing\.paragraph\.horizontal\.comfort);
-    flex-direction: row;
-}
-  .mfui-fpqRil,.mfui-eTbFbc {
-    flex: 1 0 0;
-    width: auto;
-    min-width: 0;
 }
 }
 
@@ -7124,16 +7132,23 @@ li:last-child > .mfui-cXGJls {
 
 .mfui-jAKHYi {
   position: fixed;
+  left: 0;
+  right: 0;
+}
+
+.mfui-jAKHYi,.mfui-erGtCj {
   z-index: 1;
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
   bottom: 0;
-  left: 0;
-  right: 0;
   border-top-width: var(--mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort);
   border-top-style: solid;
   border-top-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
 }
 
+.mfui-erGtCj {
+  position: sticky;
+}
+
 .mfui-hhFgaB {
   max-width: var(--mfui-sizes-mfui\.layout\.area\.horizontal\.fixed);
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.15.0",
+  "version": "3.16.0",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",