@moneyforward/mfui-components 3.21.0 → 3.22.0

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-export type FormFooterPosition = 'fixed' | 'stacking' | 'sticky';
+export type FormFooterPosition = 'stacking' | 'sticky';
 export type FormFooterSectionPosition = 'fill' | 'center';
 export type FormFooterProps = {
     /**
@@ -10,8 +10,7 @@ export type FormFooterProps = {
      * It's for controlling the position of the component.
      *
      * - `"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`.
+     * - `"sticky"`: Sits inline below the last form field, and pins to the bottom of the nearest scrolling ancestor when the form overflows. Use inside scrollable containers such as `SidePane`.
      *
      * @default "stacking"
      */

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

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

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

@@ -116,12 +116,10 @@ export type SidePaneProps = {
      * - `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'>;
+        position?: FormFooterProps['position'];
     };
     /**
      * Additional props to apply to the inside container element of the SidePane.

package/dist/src/Tooltip/Tooltip.js

@@ -1,11 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useId, useRef, isValidElement, cloneElement, useEffect } from 'react';
+import { forwardRef, useId, useRef, isValidElement, cloneElement, useEffect, useMemo } from 'react';
 import { getOverflowAncestors } from '@floating-ui/react-dom';
 import { cx } from '../../styled-system/css';
 import { tooltipSlotRecipe } from '../../styled-system/recipes';
 import { Typography } from '../Typography';
 import { mergeRefs } from '../utilities/dom/mergeRefs';
+import { useOnClickOutside } from '../utilities/dom/useOnClickOutside';
 import { useTooltipDisplayController } from './hooks/useTooltipDisplayController';
 import { ArrowIcon } from './icons/ArrowIcon';
 import { usePopoverController } from './hooks/usePopoverController';
@@ -46,11 +47,12 @@ export const DEFAULT_MAX_WIDTH = '268px';
 export const Tooltip = forwardRef(({ children, open, onOpenStateChanged, content, targetDOMNode, placement, trigger = ['hover', 'focus'], disabled = false, hideFromScreenReader = false, maxWidth = DEFAULT_MAX_WIDTH, className, contentProps, ...wrapperProps }, ref) => {
     const rootRef = useRef(null);
     const arrowRef = useRef(null);
+    const tooltipRef = useRef(null);
     const tooltipId = useId();
     // Use automatic target resolution matching Portal.tsx pattern
     // Resolution order: explicit prop → parent context → document.body fallback
     const targetElement = useAutomaticTargetDomNode(targetDOMNode, rootRef.current);
-    const { open: calculatedOpen, rootAttributes, tooltipAttributes, closeImmediate, } = useTooltipDisplayController({
+    const { open: calculatedOpen, rootAttributes, tooltipAttributes, closeImmediate, closeWithManager, } = useTooltipDisplayController({
         trigger,
         wrapperProps,
         tooltipOpen: open,
@@ -77,6 +79,13 @@ export const Tooltip = forwardRef(({ children, open, onOpenStateChanged, content
             });
         };
     }, [calculatedOpen, closeImmediate]);
+    const hasClickTrigger = useMemo(() => (Array.isArray(trigger) ? trigger : [trigger]).includes('click'), [trigger]);
+    // Skip the trigger (rootRef) so the existing onClick toggle handles re-clicks —
+    // closing here would race with onClick and immediately reopen the tooltip.
+    useOnClickOutside(rootRef, closeWithManager, {
+        ignoreRefs: [tooltipRef],
+        disabled: !calculatedOpen || !hasClickTrigger || open !== undefined,
+    });
     const triggerRef = mergeRefs(setTriggerReference, rootRef, ref);
     const classes = tooltipSlotRecipe();
     const ariaDescribedBy = !hideFromScreenReader && content != null ? tooltipId : undefined;
@@ -90,5 +99,5 @@ export const Tooltip = forwardRef(({ children, open, onOpenStateChanged, content
                         clip: 'rect(0, 0, 0, 0)',
                         whiteSpace: 'nowrap',
                         borderWidth: 0,
-                    }, children: content }) })), calculatedOpen ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setTooltipReference, className: cx(classes.tooltip, 'mfui-Tooltip__tooltip', contentProps?.className), role: "tooltip", id: tooltipId, "aria-hidden": hideFromScreenReader ? true : undefined, style: { maxWidth, ...tooltipStyles }, ...tooltipAttributes, children: [typeof content === 'string' ? _jsx(Typography, { variant: "helpMessage", children: content }) : content, _jsx(ArrowIcon, { ref: arrowRef, "aria-hidden": true, placement: calculatedPlacement, className: cx(classes.arrow, 'mfui-Tooltip__arrow'), style: arrowStyles })] }) })) : null] }));
+                    }, children: content }) })), calculatedOpen ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: mergeRefs(setTooltipReference, tooltipRef), className: cx(classes.tooltip, 'mfui-Tooltip__tooltip', contentProps?.className), role: "tooltip", id: tooltipId, "aria-hidden": hideFromScreenReader ? true : undefined, style: { maxWidth, ...tooltipStyles }, ...tooltipAttributes, children: [typeof content === 'string' ? _jsx(Typography, { variant: "helpMessage", children: content }) : content, _jsx(ArrowIcon, { ref: arrowRef, "aria-hidden": true, placement: calculatedPlacement, className: cx(classes.arrow, 'mfui-Tooltip__arrow'), style: arrowStyles })] }) })) : null] }));
 });

package/dist/src/Tooltip/hooks/useTooltipDisplayController.d.ts

@@ -34,4 +34,5 @@ export declare function useTooltipDisplayController({ trigger, wrapperProps, too
         onMouseLeave: () => void;
     };
     closeImmediate: () => void;
+    closeWithManager: () => void;
 };

package/dist/src/Tooltip/hooks/useTooltipDisplayController.js

@@ -220,5 +220,6 @@ export function useTooltipDisplayController({ trigger, wrapperProps, tooltipOpen
         rootAttributes,
         tooltipAttributes,
         closeImmediate,
+        closeWithManager,
     };
 }

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" | "sticky"
+  position: "stacking" | "sticky"
 sectionPosition: "center" | "fill"
 }
 

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

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