@moneyforward/mfui-components 3.33.0 → 3.34.0

package/dist/src/FileDropZone/FileDropZone.d.ts

@@ -33,7 +33,7 @@ export declare const FileDropZone: import("react").ForwardRefExoticComponent<{
     multiple?: import("react").ComponentPropsWithoutRef<'input'>['multiple'];
     accept?: import("react").ComponentPropsWithoutRef<'input'>['accept'];
     clearButtonProps?: Pick<import("..").IconButtonProps, 'aria-label'>;
-    errorMessage?: string;
+    errorMessage?: string | string[];
     helperMessage?: string;
     illustrationUrl?: string;
     extraElement?: React.ReactNode;

package/dist/src/FileDropZone/FileDropZone.js

@@ -70,6 +70,8 @@ fileSelectButtonLabel = 'ファイルを選択', instructionText, fileCountLabel
     const previousValueRef = useRef(value);
     const isUserInitiatedClearRef = useRef(false);
     const displayValues = isControlled ? value : internalValues;
+    const errorMessages = (Array.isArray(errorMessage) ? errorMessage : [errorMessage]).filter((message) => Boolean(message));
+    const fileBoxMaxWidthStyle = { maxWidth: fileBoxWidth };
     const isNarrowViewport = useIsNarrowViewport();
     const clearButtonWidth = isNarrowViewport ? 32 : 24;
     const truncatedSingleName = useMiddleTruncatedText(displayValues?.[0] ?? '', fileNameRef, clearButtonWidth);
@@ -206,9 +208,9 @@ fileSelectButtonLabel = 'ファイルを選択', instructionText, fileCountLabel
         }
         return '';
     }, [displayValues, truncatedSingleName, classes.span, getFileCountText]);
-    return (_jsxs("div", { className: cx(classes.root, 'mfui-FileDropZone__root'), children: [_jsx("input", { ref: mergeRefs(ref, inputRef), id: id, type: "file", disabled: disabled, multiple: multiple, accept: accept, className: cx(classes.input, 'mfui-FileDropZone__input'), tabIndex: -1, "aria-hidden": "true", onChange: handleChange, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop, ...props }, key), _jsxs("div", { "data-mfui-content": "file-drop-zone-container", className: cx(classes.container, 'mfui-FileDropZone__container', className), style: style, onClick: handleContainerClick, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [illustrationUrl ? (_jsx("div", { "data-mfui-content": "file-drop-zone-illustration", className: cx(classes.illustration, 'mfui-FileDropZone__illustration'), children: _jsx("img", { src: illustrationUrl, alt: "illustration" }) })) : null, _jsxs("div", { "data-mfui-content": "file-drop-zone-main-container", className: cx(classes.mainContainer, 'mfui-FileDropZone__mainContainer'), style: { maxWidth: fileBoxWidth }, children: [_jsx("div", { "data-mfui-content": "file-drop-zone-instruction", className: cx(classes.instruction, 'mfui-FileDropZone__instruction'), children: _jsx("p", { className: cx(classes.phrase, 'mfui-FileDropZone__phrase'), children: normalizedInstructionText }) }), _jsxs("div", { "data-mfui-content": "file-drop-zone-button-container", className: cx(classes.buttonContainer, 'mfui-FileDropZone__buttonContainer'), children: [_jsx(Button, { ref: buttonRef, className: cx(classes.button, 'mfui-FileDropZone__button'), disabled: disabled, "aria-describedby": errorMessage || helperMessage || (displayValues && displayValues.length > 0)
+    return (_jsxs("div", { className: cx(classes.root, 'mfui-FileDropZone__root'), children: [_jsx("input", { ref: mergeRefs(ref, inputRef), id: id, type: "file", disabled: disabled, multiple: multiple, accept: accept, className: cx(classes.input, 'mfui-FileDropZone__input'), tabIndex: -1, "aria-hidden": "true", onChange: handleChange, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop, ...props }, key), _jsxs("div", { "data-mfui-content": "file-drop-zone-container", className: cx(classes.container, 'mfui-FileDropZone__container', className), style: style, onClick: handleContainerClick, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [illustrationUrl ? (_jsx("div", { "data-mfui-content": "file-drop-zone-illustration", className: cx(classes.illustration, 'mfui-FileDropZone__illustration'), children: _jsx("img", { src: illustrationUrl, alt: "illustration" }) })) : null, _jsxs("div", { "data-mfui-content": "file-drop-zone-main-container", className: cx(classes.mainContainer, 'mfui-FileDropZone__mainContainer'), children: [_jsx("div", { "data-mfui-content": "file-drop-zone-instruction", className: cx(classes.instruction, 'mfui-FileDropZone__instruction'), style: fileBoxMaxWidthStyle, children: _jsx("p", { className: cx(classes.phrase, 'mfui-FileDropZone__phrase'), children: normalizedInstructionText }) }), _jsxs("div", { "data-mfui-content": "file-drop-zone-button-container", className: cx(classes.buttonContainer, 'mfui-FileDropZone__buttonContainer'), style: fileBoxMaxWidthStyle, children: [_jsx(Button, { ref: buttonRef, className: cx(classes.button, 'mfui-FileDropZone__button'), disabled: disabled, "aria-describedby": errorMessages.length > 0 || helperMessage || (displayValues && displayValues.length > 0)
                                             ? `${id ? `${id}-` : ''}file-drop-zone-messages`
-                                            : undefined, onClick: handleFileInputTrigger, children: fileSelectButtonLabel }), displayValues !== undefined && displayValues.length > 0 && (_jsxs("div", { "data-mfui-content": "file-drop-zone-file-info", className: cx(classes.fileInfo, 'mfui-FileDropZone__fileInfo'), style: { maxWidth: `${(fileInfoWidth || 147).toString()}px` }, children: [renderDisplayValues, _jsx(ClearButton, { ...clearButtonProps, "aria-label": clearButtonProps?.['aria-label'] ?? 'ファイルをクリアする', className: cx(classes.clearButton, 'mfui-FileDropZone__clearButton'), disabled: disabled, onClick: handleClear })] }))] }), _jsxs("div", { id: id ? `${id}-file-drop-zone-messages` : 'file-drop-zone-messages', "data-mfui-content": "file-drop-zone-help-message", className: cx(classes.helpMessage, 'mfui-FileDropZone__helpMessage'), children: [errorMessage ? (_jsx(HelpMessage, { messageType: "error", messageAlign: "center", children: errorMessage })) : null, helperMessage ? _jsx(HelpMessage, { messageAlign: "center", children: helperMessage }) : null, displayValues && displayValues.length > 0 ? (_jsx("div", { className: "sr-only", children: displayValues.length === 1
+                                            : undefined, onClick: handleFileInputTrigger, children: fileSelectButtonLabel }), displayValues !== undefined && displayValues.length > 0 && (_jsxs("div", { "data-mfui-content": "file-drop-zone-file-info", className: cx(classes.fileInfo, 'mfui-FileDropZone__fileInfo'), style: { maxWidth: `${(fileInfoWidth || 147).toString()}px` }, children: [renderDisplayValues, _jsx(ClearButton, { ...clearButtonProps, "aria-label": clearButtonProps?.['aria-label'] ?? 'ファイルをクリアする', className: cx(classes.clearButton, 'mfui-FileDropZone__clearButton'), disabled: disabled, onClick: handleClear })] }))] }), _jsxs("div", { id: id ? `${id}-file-drop-zone-messages` : 'file-drop-zone-messages', "data-mfui-content": "file-drop-zone-help-message", className: cx(classes.helpMessage, 'mfui-FileDropZone__helpMessage'), children: [errorMessages.length > 0 ? (_jsx("div", { role: "alert", "data-mfui-content": "file-drop-zone-error-messages", className: cx(classes.errorMessages, 'mfui-FileDropZone__errorMessages'), children: errorMessages.map((message, index) => (_jsx(HelpMessage, { role: undefined, messageType: "error", messageAlign: "center", children: message }, index))) })) : null, helperMessage ? _jsx(HelpMessage, { messageAlign: "center", children: helperMessage }) : null, displayValues && displayValues.length > 0 ? (_jsx("div", { className: "sr-only", children: displayValues.length === 1
                                             ? getScreenReaderText('single', displayValues[0] || '')
                                             : getScreenReaderText('multiple', displayValues.length) })) : null] })] }), extraElement ? (_jsx("div", { "data-mfui-content": "file-drop-zone-extra", className: cx(classes.extra, 'mfui-FileDropZone__extra'), children: extraElement })) : null] })] }));
 });

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

@@ -41,11 +41,12 @@ export type FileDropZoneProps = {
      */
     clearButtonProps?: Pick<IconButtonProps, 'aria-label'>;
     /**
-     * The error message for the file drop zone.
+     * The error message or messages for the file drop zone.
+     * Empty strings are not rendered.
      *
      * @default undefined
      */
-    errorMessage?: string;
+    errorMessage?: string | string[];
     /**
      * The helper message for the file drop zone.
      *
@@ -117,7 +118,8 @@ export type FileDropZoneProps = {
      */
     onValueCleared?: () => void;
     /**
-     * The width of the filebox element.
+     * The maximum width of the instruction text and button row.
+     * Error and helper messages are intentionally not constrained by this value.
      *
      * @default 280
      */

package/dist/src/SectionMessage/SectionMessage.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Error, Approval, Caution, Close, Pending } from '@moneyforward/mfui-icons-react';
+import { Error, Approval, Caution, Close, Info, Pending } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { sectionMessageSlotRecipe } from '../../styled-system/recipes';
 import { IconButton } from '../IconButton';
@@ -28,6 +28,7 @@ export const SectionMessage = forwardRef(({ messageType = 'neutral', region = 'i
     const statusIconA11yProps = statusIconLabel === undefined ? { 'aria-hidden': true } : { 'aria-label': statusIconLabel };
     const StatusIcon = {
         neutral: null,
+        info: _jsx(Info, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') }),
         success: (_jsx(Approval, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
         error: _jsx(Error, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') }),
         caution: (_jsx(Caution, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),

package/dist/src/Tabs/TabList/TabList.d.ts

@@ -1,2 +1,2 @@
 import { type TabListProps } from './TabList.types';
-export declare function TabList({ children, scrollLeftButtonProps, scrollRightButtonProps, allTabsDropdownMenuProps, }: TabListProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabList({ children, scrollLeftButtonProps, scrollRightButtonProps, allTabsDropdownMenuProps, className, style, }: TabListProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Tabs/TabList/TabList.js

@@ -5,10 +5,10 @@ import { tabListSlotRecipe } from '../../../styled-system/recipes';
 import { TabMenu } from './TabMenu';
 import { useShouldShowMenuController } from './hooks/useShouldShowMenuController';
 import { cx } from '../../../styled-system/css';
-export function TabList({ children, scrollLeftButtonProps, scrollRightButtonProps, allTabsDropdownMenuProps, }) {
+export function TabList({ children, scrollLeftButtonProps, scrollRightButtonProps, allTabsDropdownMenuProps, className, style, }) {
     const classNames = tabListSlotRecipe({});
     const containerRef = useRef(null);
     const tabListRef = useRef(null);
     const isOverflowed = useShouldShowMenuController(tabListRef, containerRef);
-    return (_jsxs("div", { ref: containerRef, className: cx(classNames.root, 'mfui-TabList__root'), children: [_jsx("div", { ref: tabListRef, role: "tablist", className: cx(classNames.tabList, isOverflowed && classNames.isOverflowed, 'mfui-TabList__tabList'), children: children }), _jsx("div", { className: cx(classNames.blankSpace, 'mfui-TabList__blankSpace') }), isOverflowed ? (_jsx(TabMenu, { tabListRef: tabListRef, scrollLeftButtonProps: scrollLeftButtonProps, scrollRightButtonProps: scrollRightButtonProps, allTabsDropdownMenuProps: allTabsDropdownMenuProps })) : null] }));
+    return (_jsxs("div", { ref: containerRef, className: cx(classNames.root, 'mfui-TabList__root', className), style: style, children: [_jsx("div", { ref: tabListRef, role: "tablist", className: cx(classNames.tabList, isOverflowed && classNames.isOverflowed, 'mfui-TabList__tabList'), children: children }), _jsx("div", { className: cx(classNames.blankSpace, 'mfui-TabList__blankSpace') }), isOverflowed ? (_jsx(TabMenu, { tabListRef: tabListRef, scrollLeftButtonProps: scrollLeftButtonProps, scrollRightButtonProps: scrollRightButtonProps, allTabsDropdownMenuProps: allTabsDropdownMenuProps })) : null] }));
 }

package/dist/src/Tabs/TabPanel/TabPanel.d.ts

@@ -1,2 +1,2 @@
 import { type TabPanelProps } from './TabPanel.types';
-export declare function TabPanel({ forTabId, enableAutoUnmount, children, style, ...props }: TabPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function TabPanel({ forTabId, enableAutoUnmount, children, className, style, ...props }: TabPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/Tabs/TabPanel/TabPanel.js

@@ -4,7 +4,7 @@ import { useContext } from 'react';
 import { tabPanelSlotRecipe } from '../../../styled-system/recipes';
 import { TabContext } from '../TabContext';
 import { cx } from '../../../styled-system/css';
-export function TabPanel({ forTabId, enableAutoUnmount, children, style, ...props }) {
+export function TabPanel({ forTabId, enableAutoUnmount, children, className, style, ...props }) {
     const { selectedTabId, enableAutoUnmount: contextEnableAutoUnmount } = useContext(TabContext);
     // Use prop value if provided, otherwise fall back to context value
     const shouldAutoUnmount = enableAutoUnmount ?? contextEnableAutoUnmount;
@@ -12,7 +12,7 @@ export function TabPanel({ forTabId, enableAutoUnmount, children, style, ...prop
     if (shouldAutoUnmount && !isSelected)
         return null;
     const classNames = tabPanelSlotRecipe();
-    return (_jsx("div", { role: "tabpanel", id: `tabpanel-${forTabId}`, className: cx(classNames.root, 'mfui-TabPanel__root'), "aria-labelledby": forTabId, style: {
+    return (_jsx("div", { role: "tabpanel", id: `tabpanel-${forTabId}`, className: cx(classNames.root, 'mfui-TabPanel__root', className), "aria-labelledby": forTabId, style: {
             ...style,
             display: !shouldAutoUnmount && !isSelected ? 'none' : undefined,
         }, ...props, children: children }));

package/dist/src/Tabs/Tabs.d.ts

@@ -2,7 +2,7 @@ import { type TabsProps } from './Tabs.types';
 import { TabItem } from './TabItem';
 import { TabList } from './TabList';
 import { TabPanel } from './TabPanel';
-declare function Base({ selectedTabId, onSelectedTabChange, targetDOMNode, enableAutoUnmount, children }: TabsProps): import("react/jsx-runtime").JSX.Element;
+declare function Base({ selectedTabId, onSelectedTabChange, targetDOMNode, enableAutoUnmount, children, className, style, }: TabsProps): import("react/jsx-runtime").JSX.Element;
 /**
  * The Tabs component manages the tabs, tab lists, and tab panels within a tab section.
  * It provides the necessary context for handling tab selection and rendering the appropriate content.

package/dist/src/Tabs/Tabs.js

@@ -9,7 +9,7 @@ import { TabPanel } from './TabPanel';
 import { TabContext } from './TabContext';
 import { getTargetDomNode } from '../utilities/dom/getTargetDomNode';
 import { cx } from '../../styled-system/css';
-function Base({ selectedTabId, onSelectedTabChange, targetDOMNode, enableAutoUnmount = true, children }) {
+function Base({ selectedTabId, onSelectedTabChange, targetDOMNode, enableAutoUnmount = true, children, className, style, }) {
     const classNames = tabsSlotRecipe();
     const [shouldShowMenu, setShouldShowMenu] = useState(false);
     const wrapperRef = useRef(null);
@@ -59,7 +59,7 @@ function Base({ selectedTabId, onSelectedTabChange, targetDOMNode, enableAutoUnm
         unregisterTab,
         enableAutoUnmount,
     ]);
-    return (_jsx(TabContext.Provider, { value: contextValue, children: _jsx("div", { ref: wrapperRef, className: cx(classNames.root, 'mfui-Tabs__root'), children: children }) }));
+    return (_jsx(TabContext.Provider, { value: contextValue, children: _jsx("div", { ref: wrapperRef, className: cx(classNames.root, 'mfui-Tabs__root', className), style: style, children: children }) }));
 }
 /**
  * The Tabs component manages the tabs, tab lists, and tab panels within a tab section.

package/dist/styled-system/recipes/file-drop-zone-slot-recipe.d.ts

@@ -17,7 +17,7 @@ type FileDropZoneSlotRecipeVariantMap = {
   [key in keyof FileDropZoneSlotRecipeVariant]: Array<FileDropZoneSlotRecipeVariant[key]>
 }
 
-type FileDropZoneSlotRecipeSlot = "root" | "input" | "container" | "illustration" | "mainContainer" | "instruction" | "buttonContainer" | "button" | "fileInfo" | "span" | "clearButton" | "helpMessage" | "extra" | "phrase"
+type FileDropZoneSlotRecipeSlot = "root" | "input" | "container" | "illustration" | "mainContainer" | "instruction" | "buttonContainer" | "button" | "fileInfo" | "span" | "clearButton" | "helpMessage" | "errorMessages" | "extra" | "phrase"
 
 export type FileDropZoneSlotRecipeVariantProps = {
   [key in keyof FileDropZoneSlotRecipeVariant]?: FileDropZoneSlotRecipeVariant[key] | undefined

package/dist/styled-system/recipes/file-drop-zone-slot-recipe.js

@@ -64,6 +64,10 @@ const fileDropZoneSlotRecipeSlotNames = [
         "helpMessage",
         "file-drop-zone__helpMessage"
     ],
+    [
+        "errorMessages",
+        "file-drop-zone__errorMessages"
+    ],
     [
         "extra",
         "file-drop-zone__extra"

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

@@ -3,7 +3,7 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface SectionMessageSlotRecipeVariant {
-  messageType: "neutral" | "success" | "error" | "caution" | "busy" | "progress"
+  messageType: "neutral" | "info" | "success" | "error" | "caution" | "busy" | "progress"
 region: "inline" | "page"
 disableResponsive: boolean
 }

package/dist/styled-system/recipes/section-message-slot-recipe.js

@@ -59,6 +59,7 @@ export const sectionMessageSlotRecipe = /* @__PURE__ */ Object.assign(sectionMes
     variantMap: {
         "messageType": [
             "neutral",
+            "info",
             "success",
             "error",
             "caution",

package/dist/styles.css

@@ -4685,8 +4685,6 @@
   background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.none);
   font-family: var(--mfui-fonts-mfui\.typography\.font-family\.label);
   font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.control-label);
-  width: 100%;
-  min-width: max-content;
   height: 100%;
 }
 
@@ -4695,6 +4693,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  width: 100%;
 }
 
 .mfui-fqNMeO {
@@ -4715,6 +4714,7 @@
   align-items: center;
   justify-content: center;
   width: 100%;
+  min-width: max-content;
 }
 
 .mfui-juYDJw {
@@ -4767,6 +4767,12 @@
   height: 1px;
 }
 
+.mfui-VkDTa {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .mfui-kakNKU {
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.main-content\.horizontal\.comfort);
   padding-block: var(--mfui-spacing-mfui\.size\.padding\.content\.vertical\.comfort);
@@ -6858,6 +6864,10 @@ li:last-child > .mfui-cXGJls {
   resize: horizontal;
 }
 
+.mfui-dpIccs {
+  color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
+}
+
 .mfui-cFyzwg {
   background-color: var(--mfui-colors-mfui\.color\.signal-green\.sub-background\.none);
 }

package/package.json

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