@moneyforward/mfui-components 3.20.0 → 3.22.0

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": [

package/dist/styled-system/recipes/index.d.ts

@@ -70,6 +70,7 @@ export * from './status-label-slot-recipe';
 export * from './month-cell-slot-recipe';
 export * from './month-grid-slot-recipe';
 export * from './month-picker-panel-slot-recipe';
+export * from './time-picker-slot-recipe';
 export * from './skeleton-slot-recipe';
 export * from './checkbox-group-slot-recipe';
 export * from './multiple-filter-select-box-slot-recipe';

package/dist/styled-system/recipes/index.js

@@ -69,6 +69,7 @@ export * from './status-label-slot-recipe.js';
 export * from './month-cell-slot-recipe.js';
 export * from './month-grid-slot-recipe.js';
 export * from './month-picker-panel-slot-recipe.js';
+export * from './time-picker-slot-recipe.js';
 export * from './skeleton-slot-recipe.js';
 export * from './checkbox-group-slot-recipe.js';
 export * from './multiple-filter-select-box-slot-recipe.js';

package/dist/styled-system/recipes/time-picker-slot-recipe.d.ts

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface TimePickerSlotRecipeVariant {
+  /**
+ * @default "medium"
+ */
+size: "small" | "medium" | "large"
+/**
+ * @default false
+ */
+disabled: boolean
+/**
+ * @default false
+ */
+invalid: boolean
+}
+
+type TimePickerSlotRecipeVariantMap = {
+  [key in keyof TimePickerSlotRecipeVariant]: Array<TimePickerSlotRecipeVariant[key]>
+}
+
+type TimePickerSlotRecipeSlot = "root" | "input" | "clearButton" | "pickerButton"
+
+export type TimePickerSlotRecipeVariantProps = {
+  [key in keyof TimePickerSlotRecipeVariant]?: ConditionalValue<TimePickerSlotRecipeVariant[key]> | undefined
+}
+
+export interface TimePickerSlotRecipeRecipe {
+  __slot: TimePickerSlotRecipeSlot
+  __type: TimePickerSlotRecipeVariantProps
+  (props?: TimePickerSlotRecipeVariantProps): Pretty<Record<TimePickerSlotRecipeSlot, string>>
+  raw: (props?: TimePickerSlotRecipeVariantProps) => TimePickerSlotRecipeVariantProps
+  variantMap: TimePickerSlotRecipeVariantMap
+  variantKeys: Array<keyof TimePickerSlotRecipeVariant>
+  splitVariantProps<Props extends TimePickerSlotRecipeVariantProps>(props: Props): [TimePickerSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof TimePickerSlotRecipeVariantProps>>]
+  getVariantProps: (props?: TimePickerSlotRecipeVariantProps) => TimePickerSlotRecipeVariantProps
+}
+
+/**
+ * Slot class for the TimePicker component (native <input type="time"> + custom panel).
+ */
+export declare const timePickerSlotRecipe: TimePickerSlotRecipeRecipe

package/dist/styled-system/recipes/time-picker-slot-recipe.js

@@ -0,0 +1,62 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const timePickerSlotRecipeDefaultVariants = {
+    "size": "medium",
+    "disabled": false,
+    "invalid": false
+};
+const timePickerSlotRecipeCompoundVariants = [];
+const timePickerSlotRecipeSlotNames = [
+    [
+        "root",
+        "TimePicker__root"
+    ],
+    [
+        "input",
+        "TimePicker__input"
+    ],
+    [
+        "clearButton",
+        "TimePicker__clearButton"
+    ],
+    [
+        "pickerButton",
+        "TimePicker__pickerButton"
+    ]
+];
+const timePickerSlotRecipeSlotFns = /* @__PURE__ */ timePickerSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, timePickerSlotRecipeDefaultVariants, getSlotCompoundVariant(timePickerSlotRecipeCompoundVariants, slotName))]);
+const timePickerSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(timePickerSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const timePickerSlotRecipeVariantKeys = [
+    "size",
+    "disabled",
+    "invalid"
+];
+const getVariantProps = (variants) => ({ ...timePickerSlotRecipeDefaultVariants, ...compact(variants) });
+export const timePickerSlotRecipe = /* @__PURE__ */ Object.assign(timePickerSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'timePickerSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: timePickerSlotRecipeVariantKeys,
+    variantMap: {
+        "size": [
+            "small",
+            "medium",
+            "large"
+        ],
+        "disabled": [
+            "true",
+            "false"
+        ],
+        "invalid": [
+            "true",
+            "false"
+        ]
+    },
+    splitVariantProps(props) {
+        return splitProps(props, timePickerSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});