@moneyforward/mfui-components 3.4.0 → 3.5.0

package/dist/src/HelpMessage/HelpMessage.d.ts

@@ -1,6 +1,10 @@
 /**
- * The HelpMessage component
- * This component switches the variants of looks depends on the props: messageType.
+ * The HelpMessage component displays contextual messages with an icon and color
+ * that reflect the message's intent. Supports four variants via `messageType`:
+ * - `neutral` (default): informational, uses IconInfo. Icon is hidden by default; opt in with `showIcon`. No ARIA role.
+ * - `error`: validation or system error, uses IconError. Sets `role="alert"` — announces immediately to screen readers.
+ * - `caution`: warning or advisory, uses IconCaution. No ARIA role by default — add `role="status"` or `aria-live="polite"` when rendered dynamically.
+ * - `success`: confirmation or positive feedback, uses IconApproval. Sets `role="status"` — announces politely when the user is idle.
  *
  * Also extends the props of the `<div>` element.
  *
@@ -8,6 +12,7 @@
  */
 export declare const HelpMessage: import("react").ForwardRefExoticComponent<{
     messageType?: import("../../styled-system/recipes").HelpMessageRecipeVariant["messageType"];
+    showIcon?: boolean;
     messageAlign?: "left" | "center";
     children?: import("..").TypographyProps["children"];
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/HelpMessage/HelpMessage.js

@@ -1,20 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from 'react';
-import { Error } from '@moneyforward/mfui-icons-react';
+import { Approval, Caution, Error, Info } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { helpMessageRecipe } from '../../styled-system/recipes';
 import { Typography } from '../Typography';
+const messageTypeRoleMap = {
+    neutral: undefined,
+    error: 'alert',
+    caution: undefined,
+    success: 'status',
+};
+const messageTypeIconMap = {
+    neutral: Info,
+    error: Error,
+    caution: Caution,
+    success: Approval,
+};
 /**
- * The HelpMessage component
- * This component switches the variants of looks depends on the props: messageType.
+ * The HelpMessage component displays contextual messages with an icon and color
+ * that reflect the message's intent. Supports four variants via `messageType`:
+ * - `neutral` (default): informational, uses IconInfo. Icon is hidden by default; opt in with `showIcon`. No ARIA role.
+ * - `error`: validation or system error, uses IconError. Sets `role="alert"` — announces immediately to screen readers.
+ * - `caution`: warning or advisory, uses IconCaution. No ARIA role by default — add `role="status"` or `aria-live="polite"` when rendered dynamically.
+ * - `success`: confirmation or positive feedback, uses IconApproval. Sets `role="status"` — announces politely when the user is idle.
  *
  * Also extends the props of the `<div>` element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
  */
-export const HelpMessage = forwardRef(({ messageType = 'neutral', messageAlign = 'left', children, className, ...props }, ref) => {
+export const HelpMessage = forwardRef(({ messageType = 'neutral', messageAlign = 'left', showIcon, children, className, ...props }, ref) => {
     const classes = helpMessageRecipe({ messageType, messageAlign });
     const id = useId();
     const ariaLabelledByContentId = `help-message-content-${id}`;
-    return (_jsxs("div", { ref: ref, role: messageType === 'error' ? 'alert' : undefined, "aria-labelledby": ariaLabelledByContentId, ...props, className: cx(classes.root, 'mfui-HelpMessage__root', className), children: [messageType === 'error' ? _jsx(Error, { "aria-hidden": true, className: cx(classes.icon, 'mfui-HelpMessage__icon') }) : null, _jsx(Typography, { id: ariaLabelledByContentId, variant: "helpMessage", className: cx(classes.message, 'mfui-HelpMessage__message'), children: children })] }));
+    const shouldShowIcon = showIcon ?? messageType !== 'neutral';
+    const Icon = messageTypeIconMap[messageType];
+    return (_jsxs("div", { ref: ref, role: messageTypeRoleMap[messageType], "aria-labelledby": ariaLabelledByContentId, ...props, className: cx(classes.root, 'mfui-HelpMessage__root', className), children: [shouldShowIcon ? _jsx(Icon, { "aria-hidden": true, className: cx(classes.icon, 'mfui-HelpMessage__icon') }) : null, _jsx(Typography, { id: ariaLabelledByContentId, variant: "helpMessage", className: cx(classes.message, 'mfui-HelpMessage__message'), children: children })] }));
 });

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

@@ -6,13 +6,20 @@ import { type TypographyProps } from '../Typography';
  */
 export type HelpMessageProps = {
     /**
-     * The type of message to display.
-     * The color of the message will change based on this value.
-     * The error icon will be displayed next to the message if this value is 'error'.
+     * The intent of the message. Controls the icon and color.
+     * - `neutral`: informational (IconInfo)
+     * - `error`: validation or system error (IconError). Sets `role="alert"` for screen readers.
+     * - `caution`: warning or advisory (IconCaution). No ARIA role is set by default — add `role="status"` or `aria-live="polite"` when rendering dynamically.
+     * - `success`: confirmation or positive feedback (IconApproval)
      *
      * @default 'neutral'
      */
     messageType?: HelpMessageRecipeVariant['messageType'];
+    /**
+     * Whether to display the icon next to the message.
+     * Defaults to `false` for `neutral` (for backward compatibility) and `true` for all other types.
+     */
+    showIcon?: boolean;
     /**
      * The alignment of the message.
      *

package/dist/src/SubNavigation/SubNavigation.js

@@ -65,6 +65,12 @@ function NavigationLabelGroup({ label, labelIcon, locked, lockIconProps, statusS
  */
 function NavigationLink({ navigationItem, customLinkComponent, classes, }) {
     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 }) }) }));
+    }
     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 }) }) }));

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

@@ -68,6 +68,14 @@ type ChildlessNavigationItem = BaseNavigationItem & {
      * The path or URL to the linked page.
      */
     href: string;
+    /**
+     * If provided, the item is rendered as a button instead of a link.
+     * The handler is called with the item's `href` value as an argument.
+     *
+     * Use this for state-based navigation patterns where you want to update
+     * application state on click without performing browser navigation.
+     */
+    onClick?: (href: string) => void;
 };
 /**
  * The navigation item that has nested children.

package/dist/styled-system/recipes/help-message-recipe.d.ts

@@ -4,7 +4,7 @@ import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface HelpMessageRecipeVariant {
   messageAlign: "left" | "center"
-messageType: "neutral" | "error"
+messageType: "neutral" | "error" | "caution" | "success"
 }
 
 type HelpMessageRecipeVariantMap = {

package/dist/styled-system/recipes/help-message-recipe.js

@@ -38,7 +38,9 @@ export const helpMessageRecipe = /* @__PURE__ */ Object.assign(helpMessageRecipe
         ],
         "messageType": [
             "neutral",
-            "error"
+            "error",
+            "caution",
+            "success"
         ]
     },
     splitVariantProps(props) {

package/dist/styles.css

@@ -2947,13 +2947,18 @@
 }
 
 .mfui-ljuOJV {
+  border: none;
   text-decoration: none;
   padding-block: var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.vertical\.comfort);
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.horizontal\.comfort);
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
+  background-color: transparent;
+  cursor: pointer;
+  text-align: left;
   display: flex;
   align-items: flex-start;
   color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+  width: 100%;
 }
 
 .mfui-ljuOJV[aria-current=page] {
@@ -5596,6 +5601,14 @@
   color: var(--mfui-colors-mfui\.color\.signal-red\.content\.none);
 }
 
+.mfui-LuZio {
+  color: var(--mfui-colors-mfui\.color\.signal-yellow\.content\.none);
+}
+
+.mfui-foXPig {
+  color: var(--mfui-colors-mfui\.color\.signal-green\.content\.none);
+}
+
 .mfui-dTaPGi {
   display: inline-flex;
   align-items: center;

package/package.json

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