@moneyforward/mfui-components 3.34.0 → 3.35.0

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

@@ -1,5 +1,6 @@
 export declare const InternalIconButton: import("react").ForwardRefExoticComponent<{
     outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['outlined'];
+    destructive?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['destructive'];
     children: React.ReactNode;
     disabled?: boolean;
     href?: string;
@@ -9,6 +10,7 @@ export declare const InternalIconButton: import("react").ForwardRefExoticCompone
 } & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export declare const IconButton: import("react").ForwardRefExoticComponent<{
     outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['outlined'];
+    destructive?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['destructive'];
     children: React.ReactNode;
     disabled?: boolean;
     href?: string;

package/dist/src/IconButton/IconButton.js

@@ -20,8 +20,8 @@ import { FocusIndicator } from '../FocusIndicator';
  *
  * @param ref - Forwarded ref for the rendered button or anchor element.
  */
-function IconButtonBase({ children, outlined, size = 'default', className, href, customLinkComponent, disabled = false, type = 'button', ...rest }, ref) {
-    const classes = iconButtonSlotRecipe({ outlined, size });
+function IconButtonBase({ children, outlined, destructive, size = 'default', className, href, customLinkComponent, disabled = false, type = 'button', ...rest }, ref) {
+    const classes = iconButtonSlotRecipe({ outlined, size, destructive });
     const isButton = disabled || href === undefined;
     const Tag = useMemo(() => {
         // If disabled, always render as a button since the link component doesn't support disabled prop

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

@@ -7,6 +7,13 @@ type IconButtonCommonProps = {
      * @default false
      */
     outlined?: IconButtonSlotRecipeVariant['outlined'];
+    /**
+     * Whether the button is destructive.
+     * The style of the button will be changed to indicate that the action is destructive.
+     *
+     * @default false
+     */
+    destructive?: IconButtonSlotRecipeVariant['destructive'];
     /**
      * Icon element to be rendered inside the button.
      * Only one element (typically an SVG icon) is expected.

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

@@ -446,6 +446,10 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
      * Handler executed when text is entered in the search box.
      * The handler is debounced by 300ms.
      *
+     * If the handler is provided after the user has already typed (e.g.
+     * `onSearchOptions={isReady ? handleSearch : undefined}`), it is called
+     * once with the current search text so that pending input is not lost.
+     *
      * When this prop is provided, client-side filtering is disabled as it's
      * assumed that filtering will be handled by the prop.
      */

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

@@ -1,5 +1,6 @@
 'use client';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { useLatest } from '../../utilities/state/useLatest';
 import { normalizeFullWidth } from '../../utilities/string/normalizeFullWidth';
 /**
  * Custom hook to handle search functionality within a SelectBox component.
@@ -18,6 +19,10 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
     const [searchText, setSearchText] = useState('');
     const debounceRef = useRef(null);
     const previousSearchTextRef = useRef('');
+    // Keep the latest handler in a ref so that a new handler identity (e.g. an
+    // inline function re-created on parent re-render) does not re-run the
+    // debounce effect and cancel a pending call.
+    const onSearchOptionsRef = useLatest(onSearchOptions);
     const filteredOptions = useMemo(() => {
         if (!enableSearchOptions || onSearchOptions) {
             return options;
@@ -29,8 +34,14 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
     const onSearchTextChange = (event) => {
         setSearchText(event.target.value);
     };
+    // Track only the presence of the handler (not its identity) so that an
+    // undefined → defined transition re-runs the effect and dispatches the
+    // pending search text, while identity changes do not cancel pending calls.
+    // This preserves the behavior of the previous implementation, where the
+    // handler itself was an effect dependency and the transition dispatched.
+    const hasSearchHandler = Boolean(onSearchOptions);
     useEffect(() => {
-        if (!enableSearchOptions || !onSearchOptions)
+        if (!enableSearchOptions || !hasSearchHandler)
             return;
         // Skip if searchText hasn't changed (prevents initial mount and unnecessary calls)
         if (searchText === previousSearchTextRef.current) {
@@ -41,14 +52,14 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
             clearTimeout(debounceRef.current);
         }
         debounceRef.current = setTimeout(() => {
-            onSearchOptions(searchText);
+            onSearchOptionsRef.current?.(searchText);
         }, 300);
         return () => {
             if (debounceRef.current) {
                 clearTimeout(debounceRef.current);
             }
         };
-    }, [searchText, onSearchOptions, enableSearchOptions]);
+    }, [searchText, enableSearchOptions, hasSearchHandler, onSearchOptionsRef]);
     return {
         onSearchTextChange,
         filteredOptions,

package/dist/src/SelectBox/SelectBox.js

@@ -53,7 +53,14 @@ export const SelectBox = forwardRef((props, ref) => {
             triggerRef.current?.focus();
         },
     });
-    const { searchText, onSearchTextChange, filteredOptions } = useSearchBox(options, enableSearchOptions, onSearchOptions);
+    const { searchText, onSearchTextChange, filteredOptions, resetSearchText } = useSearchBox(options, enableSearchOptions, onSearchOptions);
+    // Clear the search text whenever the option panel closes so that
+    // reopening always starts from an unfiltered option list.
+    useUpdateEffect(() => {
+        if (!isOptionPanelOpen) {
+            resetSearchText();
+        }
+    }, [isOptionPanelOpen, resetSearchText]);
     const selectedOption = useMemo(() => {
         if (value === undefined)
             return null;

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

@@ -361,6 +361,13 @@ export type SelectBoxProps<T extends AllowedValueTypes = string, AdditionalProps
      * Handler executed when text is entered in the search box.
      * The handler is debounced by 300ms.
      *
+     * Also called with an empty string when the option panel closes, because the
+     * search text is reset on close so that reopening shows the full option list.
+     *
+     * If the handler is provided after the user has already typed (e.g.
+     * `onSearchOptions={isReady ? handleSearch : undefined}`), it is called
+     * once with the current search text so that pending input is not lost.
+     *
      * When this prop is provided, client-side filtering is disabled as it's
      * assumed that filtering will be handled by the prop.
      */

package/dist/src/SelectBox/hooks/useSearchBox.d.ts

@@ -10,7 +10,8 @@ import { type BasedAdditionalProps, type SelectBoxOption } from '../SelectBox.ty
  * provided, client-side filtering is disabled as it's assumed that the caller
  * will handle the filtering.
  *
- * @returns Object containing the filtered options, search text, and handler to update search text.
+ * @returns Object containing the filtered options, search text, handler to update search text,
+ * and a callback to reset the search text.
  */
 export declare const useSearchBox: <T extends string | number | undefined = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps>(options: (SelectBoxOption<T, AdditionalProps> | null | undefined)[], enableSearchOptions: boolean, onSearchOptions?: (text: string) => void) => {
     /**
@@ -25,4 +26,8 @@ export declare const useSearchBox: <T extends string | number | undefined = stri
      * Current search text value.
      */
     searchText: string;
+    /**
+     * Resets the search text to an empty string.
+     */
+    resetSearchText: () => void;
 };

package/dist/src/SelectBox/hooks/useSearchBox.js

@@ -1,5 +1,6 @@
 'use client';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLatest } from '../../utilities/state/useLatest';
 import { normalizeFullWidth } from '../../utilities/string/normalizeFullWidth';
 /**
  * Custom hook to handle search functionality within a SelectBox component.
@@ -12,12 +13,17 @@ import { normalizeFullWidth } from '../../utilities/string/normalizeFullWidth';
  * provided, client-side filtering is disabled as it's assumed that the caller
  * will handle the filtering.
  *
- * @returns Object containing the filtered options, search text, and handler to update search text.
+ * @returns Object containing the filtered options, search text, handler to update search text,
+ * and a callback to reset the search text.
  */
 export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
     const [searchText, setSearchText] = useState('');
     const debounceRef = useRef(null);
     const previousSearchTextRef = useRef('');
+    // Keep the latest handler in a ref so that a new handler identity (e.g. an
+    // inline function re-created on parent re-render) does not re-run the
+    // debounce effect and cancel a pending call.
+    const onSearchOptionsRef = useLatest(onSearchOptions);
     const filteredOptions = useMemo(() => {
         // If not searchable or if onSearchOptions is provided, return all options without filtering
         if (!enableSearchOptions || onSearchOptions) {
@@ -49,8 +55,17 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
     const handleSearchTextChange = useCallback((event) => {
         setSearchText(event.target.value);
     }, []);
+    const resetSearchText = useCallback(() => {
+        setSearchText('');
+    }, []);
+    // Track only the presence of the handler (not its identity) so that an
+    // undefined → defined transition re-runs the effect and dispatches the
+    // pending search text, while identity changes do not cancel pending calls.
+    // This preserves the behavior of the previous implementation, where the
+    // handler itself was an effect dependency and the transition dispatched.
+    const hasSearchHandler = Boolean(onSearchOptions);
     useEffect(() => {
-        if (!enableSearchOptions || !onSearchOptions)
+        if (!enableSearchOptions || !hasSearchHandler)
             return;
         // Skip if searchText hasn't changed (prevents initial mount and unnecessary calls)
         if (searchText === previousSearchTextRef.current) {
@@ -61,14 +76,14 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
             clearTimeout(debounceRef.current);
         }
         debounceRef.current = setTimeout(() => {
-            onSearchOptions(searchText);
+            onSearchOptionsRef.current?.(searchText);
         }, 300);
         return () => {
             if (debounceRef.current) {
                 clearTimeout(debounceRef.current);
             }
         };
-    }, [searchText, onSearchOptions, enableSearchOptions]);
+    }, [searchText, enableSearchOptions, hasSearchHandler, onSearchOptionsRef]);
     return {
         /**
          * Handler for search input change events.
@@ -82,5 +97,9 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
          * Current search text value.
          */
         searchText,
+        /**
+         * Resets the search text to an empty string.
+         */
+        resetSearchText,
     };
 };

package/dist/src/SplitView/SplitView.js

@@ -195,6 +195,20 @@ export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot,
         isDragging,
         dividerPropsStyle: dividerProps?.style,
     });
+    // `dividerProps` is spread after the built-in attributes so that consumers can override ARIA
+    // attributes (e.g. aria-label, aria-valuenow). These four entries must be excluded from that
+    // spread and re-applied afterwards, otherwise they would silently replace internal wiring:
+    // the styling classes/styles and the resize event handlers.
+    const { className: dividerClassName, style: _dividerPropsStyle, onPointerDown: dividerOnPointerDown, onKeyDown: dividerOnKeyDown, ...restDividerProps } = dividerProps ?? {};
+    // Run the internal resize handler first, then forward the event to the consumer's handler.
+    const handleDividerPointerDown = (event) => {
+        handleMouseDown(event);
+        dividerOnPointerDown?.(event);
+    };
+    const handleDividerKeyDown = (event) => {
+        handleKeyDown(event);
+        dividerOnKeyDown?.(event);
+    };
     // Apply controlled panel style to the correct panel based on targetPanel.
     // When a panel is the main panel (not controlled), flex: 1 ensures it fills remaining space.
     const computedLeftPanelStyle = resolvedTargetPanel === 'left' ? controlledPanelOuterStyle : leftPanelProps?.style;
@@ -209,7 +223,7 @@ export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot,
                 ref.current = node;
             }
             containerRef.current = node;
-        }, className: cx(classes.root, 'mfui-SplitView__root', className), ...props, children: [resolvedTargetPanel === 'left' ? (shouldRenderControlledPanel || isSlideOutAnimating ? (_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), style: computedLeftPanelStyle, children: _jsx("div", { style: controlledPanelInnerStyle, children: enableAutoUnmount ? (leftPanelSlot ?? lastRightPanelRef.current) : leftPanelSlot }) })) : null) : (_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), style: computedLeftPanelStyle, children: leftPanelSlot })), isRightPanelVisible || isSlideOutAnimating ? (_jsx("div", { className: cx(classes.divider, 'mfui-SplitView__divider', dividerProps?.className), role: "separator", "aria-orientation": "vertical", "aria-label": dividerProps?.['aria-label'] ?? '左右のパネルを調整', "aria-valuenow": currentControlledPanelSize ?? initialPanelSizeNumber, "aria-valuemin": minPanelSizeNumber, "aria-valuemax": maxPanelSizeNumber, 
+        }, className: cx(classes.root, 'mfui-SplitView__root', className), ...props, children: [resolvedTargetPanel === 'left' ? (shouldRenderControlledPanel || isSlideOutAnimating ? (_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), style: computedLeftPanelStyle, children: _jsx("div", { style: controlledPanelInnerStyle, children: enableAutoUnmount ? (leftPanelSlot ?? lastRightPanelRef.current) : leftPanelSlot }) })) : null) : (_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), style: computedLeftPanelStyle, children: leftPanelSlot })), isRightPanelVisible || isSlideOutAnimating ? (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": dividerProps?.['aria-label'] ?? '左右のパネルを調整', "aria-valuenow": currentControlledPanelSize ?? initialPanelSizeNumber, "aria-valuemin": minPanelSizeNumber, "aria-valuemax": maxPanelSizeNumber, 
                 // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                tabIndex: 0, style: dividerStyle, onPointerDown: handleMouseDown, onKeyDown: handleKeyDown, ...dividerProps })) : null, resolvedTargetPanel === 'right' ? (shouldRenderControlledPanel || isSlideOutAnimating ? (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: computedRightPanelStyle, children: _jsx("div", { style: controlledPanelInnerStyle, children: enableAutoUnmount ? (rightPanelSlot ?? lastRightPanelRef.current) : rightPanelSlot }) })) : null) : (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: computedRightPanelStyle, children: rightPanelSlot }))] }));
+                tabIndex: 0, ...restDividerProps, className: cx(classes.divider, 'mfui-SplitView__divider', dividerClassName), style: dividerStyle, onPointerDown: handleDividerPointerDown, onKeyDown: handleDividerKeyDown })) : null, resolvedTargetPanel === 'right' ? (shouldRenderControlledPanel || isSlideOutAnimating ? (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: computedRightPanelStyle, children: _jsx("div", { style: controlledPanelInnerStyle, children: enableAutoUnmount ? (rightPanelSlot ?? lastRightPanelRef.current) : rightPanelSlot }) })) : null) : (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: computedRightPanelStyle, children: rightPanelSlot }))] }));
 });

package/dist/styled-system/recipes/icon-button-slot-recipe.d.ts

@@ -8,6 +8,7 @@ interface IconButtonSlotRecipeVariant {
  */
 size: "small" | "default"
 outlined: boolean
+destructive: boolean
 }
 
 type IconButtonSlotRecipeVariantMap = {
@@ -17,7 +18,7 @@ type IconButtonSlotRecipeVariantMap = {
 type IconButtonSlotRecipeSlot = "root"
 
 export type IconButtonSlotRecipeVariantProps = {
-  [key in keyof IconButtonSlotRecipeVariant]?: ConditionalValue<IconButtonSlotRecipeVariant[key]> | undefined
+  [key in keyof IconButtonSlotRecipeVariant]?: IconButtonSlotRecipeVariant[key] | undefined
 }
 
 export interface IconButtonSlotRecipeRecipe {

package/dist/styled-system/recipes/icon-button-slot-recipe.js

@@ -3,7 +3,33 @@ import { createRecipe } from './create-recipe.js';
 const iconButtonSlotRecipeDefaultVariants = {
     "size": "default"
 };
-const iconButtonSlotRecipeCompoundVariants = [];
+const iconButtonSlotRecipeCompoundVariants = [
+    {
+        "destructive": true,
+        "outlined": true,
+        "css": {
+            "root": {
+                "borderColor": "mfui.color.signal-red.border.none",
+                "_hover": {
+                    "_notDisabled": {
+                        "borderColor": "mfui.color.signal-red.border.hovered"
+                    }
+                },
+                "_focusVisible": {
+                    "borderColor": "mfui.color.signal-red.border.hovered"
+                },
+                "_active": {
+                    "_notDisabled": {
+                        "borderColor": "mfui.color.signal-red.border.pressed"
+                    }
+                },
+                "_disabled": {
+                    "borderColor": "mfui.color.disabled.border"
+                }
+            }
+        }
+    }
+];
 const iconButtonSlotRecipeSlotNames = [
     [
         "root",
@@ -16,7 +42,8 @@ const iconButtonSlotRecipeFn = memo((props = {}) => {
 });
 const iconButtonSlotRecipeVariantKeys = [
     "size",
-    "outlined"
+    "outlined",
+    "destructive"
 ];
 const getVariantProps = (variants) => ({ ...iconButtonSlotRecipeDefaultVariants, ...compact(variants) });
 export const iconButtonSlotRecipe = /* @__PURE__ */ Object.assign(iconButtonSlotRecipeFn, {
@@ -32,6 +59,10 @@ export const iconButtonSlotRecipe = /* @__PURE__ */ Object.assign(iconButtonSlot
         ],
         "outlined": [
             "true"
+        ],
+        "destructive": [
+            "true",
+            "false"
         ]
     },
     splitVariantProps(props) {

package/dist/styles.css

@@ -6466,6 +6466,26 @@ li:last-child > .mfui-cXGJls {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
 }
 
+.mfui-cpUpeB {
+  color: var(--mfui-colors-mfui\.color\.signal-red\.content\.none);
+}
+
+.mfui-cpUpeB:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) {
+  color: var(--mfui-colors-mfui\.color\.signal-red\.content\.pressed);
+}
+
+.mfui-cpUpeB:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+  color: var(--mfui-colors-mfui\.color\.disabled\.content);
+}
+
+.mfui-cpUpeB:is(:focus-visible, [data-focus-visible]),.mfui-cpUpeB:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]) {
+  color: var(--mfui-colors-mfui\.color\.signal-red\.content\.hovered);
+}
+
+.mfui-cpUpeB:is(:active, [data-active]):not(:disabled, [disabled], [data-disabled]) {
+  color: var(--mfui-colors-mfui\.color\.signal-red\.content\.pressed);
+}
+
 .mfui-bWjutw .mfui-FocusIndicator__root:is(:focus-visible, [data-focus-visible]),.mfui-bWjutw .mfui-FocusIndicator__root:has(input:focus-visible, input[data-focus-visible=true], textarea:focus-visible, textarea[data-focus-visible=true]) {
   box-shadow: none;
 }
@@ -8711,6 +8731,10 @@ li:last-child > .mfui-cXGJls {
   border: none;
 }
 
+.mfui-gpYLkO:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+  border-color: var(--mfui-colors-mfui\.color\.disabled\.border);
+}
+
 .mfui-kGMVVf:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
   background-color: var(--mfui-colors-mfui\.color\.disabled\.background);
 }
@@ -8727,14 +8751,14 @@ tr:last-child > .mfui-gtOHny::before {
   height: 100%;
 }
 
-.mfui-kSeSQV:is(:focus-visible, [data-focus-visible]),.mfui-dqyxbp:has(input:focus-visible, input[data-focus-visible=true], textarea:focus-visible, textarea[data-focus-visible=true]) {
-  outline: 2px solid var(--mfui-colors-mfui\.color\.primary\.border\.none);
-}
-
 .mfui-iHQAZp:is(:focus-visible, [data-focus-visible]) {
   border-color: var(--mfui-colors-mfui\.color\.signal-red\.border\.hovered);
 }
 
+.mfui-kSeSQV:is(:focus-visible, [data-focus-visible]),.mfui-dqyxbp:has(input:focus-visible, input[data-focus-visible=true], textarea:focus-visible, textarea[data-focus-visible=true]) {
+  outline: 2px solid var(--mfui-colors-mfui\.color\.primary\.border\.none);
+}
+
 .group:is(:focus-visible, [data-focus-visible]) .mfui-iYLcWF {
   border-color: var(--mfui-colors-mfui\.color\.base\.inverted-border\.hovered);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.34.0",
+  "version": "3.35.0",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",
@@ -63,8 +63,8 @@
     "@floating-ui/react-dom": "^2.1.2",
     "@tanstack/react-virtual": "^3.13.18",
     "dayjs": "^1.11.13",
-    "@moneyforward/mfui-design-tokens": "^3.3.1",
-    "@moneyforward/mfui-icons-react": "^3.6.0"
+    "@moneyforward/mfui-icons-react": "^3.6.0",
+    "@moneyforward/mfui-design-tokens": "^3.3.1"
   },
   "scripts": {
     "prepare:panda": "panda codegen",