@moneyforward/mfui-components 3.19.0 → 3.21.0

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/hooks/useDateRangeTriggerValueController.js

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { dayjs } from '../../../../../utilities/date/dayjs';
+import { parseInputDate } from '../../../utilities/dateParsing';
 import { useBaseRangePickerContext } from '../../BaseRangePickerProvider';
 const createInputProps = (baseProps, value, format, onStringChange, onDateChange, otherDate, isDateDisabled) => ({
     ...baseProps,
@@ -15,12 +16,12 @@ const createInputProps = (baseProps, value, format, onStringChange, onDateChange
         if (event.defaultPrevented)
             return;
         baseProps.onBlur?.(event);
-        const dateValue = dayjs(value, format, true);
-        if (!dateValue.isValid()) {
+        const parseResult = parseInputDate(value, format);
+        if (!parseResult.isValid || !parseResult.result) {
             onDateChange(undefined, otherDate);
             return;
         }
-        const currentDate = dateValue.startOf('day').toDate();
+        const currentDate = dayjs(parseResult.result).startOf('day').toDate();
         // Check if the date is disabled due to constraints
         if (isDateDisabled?.(currentDate)) {
             // Clear the input if the date violates constraints

package/dist/src/DateTimeSelection/shared/CalendarLocale/CalendarLocaleContext.d.ts

@@ -5,4 +5,4 @@ export declare function CalendarLocaleProvider({ value, children, }: {
     value: CalendarLocaleContextValue;
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function useCalendarLocale(): CalendarLocaleContextValue;
+export declare function useCalendarLocale(): NonNullable<CalendarLocaleContextValue>;

package/dist/src/DateTimeSelection/shared/CalendarLocale/CalendarLocaleContext.js

@@ -6,5 +6,5 @@ export function CalendarLocaleProvider({ value, children, }) {
     return _jsx(CalendarLocaleContext.Provider, { value: value, children: children });
 }
 export function useCalendarLocale() {
-    return useContext(CalendarLocaleContext);
+    return useContext(CalendarLocaleContext) ?? 'ja';
 }

package/dist/src/DateTimeSelection/shared/DayCell/DayCell.js

@@ -10,8 +10,7 @@ import { useCalendarLocale } from '../CalendarLocale/CalendarLocaleContext';
 export function DayCell({ day }) {
     const calendarLocale = useCalendarLocale();
     const classNames = dayCellSlotRecipe();
-    const safeLocale = calendarLocale ?? 'ja';
-    const abbreviation = DAY_ABBREVIATIONS[safeLocale][day];
-    const fullName = DAY_FULL_NAMES[safeLocale][day];
+    const abbreviation = DAY_ABBREVIATIONS[calendarLocale][day];
+    const fullName = DAY_FULL_NAMES[calendarLocale][day];
     return (_jsx("div", { className: cx(classNames.root, 'mfui-DayCell__root'), "aria-label": fullName, children: _jsx(Typography, { "aria-hidden": true, variant: "contentHeading", className: cx(classNames.label, 'mfui-DayCell__label'), children: abbreviation }) }));
 }

package/dist/src/DateTimeSelection/shared/MonthGrid/MonthGrid.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
+import React, { useLayoutEffect } from 'react';
 import { monthGridSlotRecipe } from '../../../../styled-system/recipes';
 import { cx } from '../../../../styled-system/css';
 /**
@@ -28,8 +28,8 @@ export function MonthGrid({ year, selectedMonth, minMonth, maxMonth, checkDisabl
         const firstTabbableIndex = monthStates.find(({ disabled }) => !disabled)?.month ?? -1;
         return { monthStates, firstTabbableIndex };
     }, [months, year, minMonth, maxMonth, checkDisabledMonth]);
-    // Handle pending focus
-    useEffect(() => {
+    // Handle pending focus before paint so the focused month cell matches keyboard / popover-open flows.
+    useLayoutEffect(() => {
         if (!pendingFocusMonth)
             return;
         const targetCell = document.querySelector(`[data-mfui-month="${pendingFocusMonth}"]`);

package/dist/src/DateTimeSelection/shared/YearSelector/YearSelector.js

@@ -16,7 +16,7 @@ export function YearSelector({ value, onChange, filterYear, triggerProps, trigge
         const year = MINIMUM_VIEWABLE_YEAR + i;
         let label;
         if (displayJapaneseCalendar) {
-            label = yearToEraLabel(year, calendarLocale ?? 'ja');
+            label = yearToEraLabel(year, calendarLocale);
         }
         else if (calendarLocale === 'ja') {
             label = `${String(year)}年`;

package/dist/src/DateTimeSelection/shared/utilities/dateParsing.js

@@ -20,16 +20,23 @@ export function parseInputDate(inputString, format) {
     // Use the refined Japanese era detection from japaneseCalendar utility
     const hasJapaneseEra = isJapaneseEraFormat(inputString);
     if (hasJapaneseEra) {
-        // Try Japanese calendar parsing for era formats
-        try {
-            const jpResult = warekiToDate(inputString);
-            if (jpResult.isValid) {
-                return { isValid: true, result: jpResult.result };
+        // Skip month-only wareki parsing when the format requires a day component.
+        // e.g. "令和7年1月" should not parse for YYYY/MM/DD — the user hasn't typed the day yet.
+        const isMonthOnlyEra = inputString.trimEnd().endsWith('月');
+        const formatRequiresDay = format.includes('D');
+        const shouldTryWareki = !(isMonthOnlyEra && formatRequiresDay);
+        if (shouldTryWareki) {
+            // Try Japanese calendar parsing for era formats
+            try {
+                const jpResult = warekiToDate(inputString);
+                if (jpResult.isValid) {
+                    return { isValid: true, result: jpResult.result };
+                }
+            }
+            catch (error) {
+                // If Japanese calendar parsing fails, fall back to dayjs
+                console.warn('Japanese calendar parsing failed:', error);
             }
-        }
-        catch (error) {
-            // If Japanese calendar parsing fails, fall back to dayjs
-            console.warn('Japanese calendar parsing failed:', error);
         }
     }
     // Try dayjs parsing for Western calendar format first
@@ -37,6 +44,17 @@ export function parseInputDate(inputString, format) {
     if (dayjsResult.isValid()) {
         return { isValid: true, result: dayjsResult.toDate() };
     }
+    // Fall back to single-digit month/day tokens when the format uses two-digit tokens (MM/DD).
+    // For example, "2026/6/6" fails with "YYYY/MM/DD" but succeeds with "YYYY/M/D".
+    // Strict mode is intentional here: it ensures YYYY matches exactly 4 digits, preventing
+    // format-mismatch inputs like "31/12/2023" from accidentally passing via native Date fallback.
+    const yyyymdFormat = format.replaceAll(/\bMM\b/g, 'M').replaceAll(/\bDD\b/g, 'D');
+    if (yyyymdFormat !== format) {
+        const yyyymdResult = dayjs(inputString, yyyymdFormat, true);
+        if (yyyymdResult.isValid()) {
+            return { isValid: true, result: yyyymdResult.toDate() };
+        }
+    }
     // Fall back to YYYYMMDD format (8-digit number without delimiters) if the specified format fails
     // This allows inputs like "20251215" to be parsed even when format is "YYYY-MM-DD"
     if (/^\d{8}$/.test(inputString)) {

package/dist/src/DateTimeSelection/shared/utilities/japaneseCalendar.d.ts

@@ -1,8 +1,8 @@
-declare const REIWA: "\u4EE4\u548C";
-declare const HEISEI: "\u5E73\u6210";
-declare const SHOWA: "\u662D\u548C";
-declare const TAISHO: "\u5927\u6B63";
-declare const MEIJI: "\u660E\u6CBB";
+declare const REIWA = "\u4EE4\u548C";
+declare const HEISEI = "\u5E73\u6210";
+declare const SHOWA = "\u662D\u548C";
+declare const TAISHO = "\u5927\u6B63";
+declare const MEIJI = "\u660E\u6CBB";
 type Geongo = typeof REIWA | typeof HEISEI | typeof SHOWA | typeof TAISHO | typeof MEIJI;
 declare const WAREKI_START_YEARS: {
     readonly r: 2019;
@@ -64,13 +64,41 @@ export declare function isJapaneseEraFormat(inputString: string): boolean;
 export declare function yearToEraLabel(year: number, locale: 'ja' | 'en'): string;
 /**
  * Formats a Date to a short English era string for display in the DatePicker trigger input.
- * Format: "{EraName} {eraYear}/{month}/{day}" (e.g., "Reiwa 7/12/25").
- * For pre-Meiji dates (year < 1868): falls back to the Gregorian year (e.g., "1867/12/25").
+ * Format: "{EraName} {eraYear}/{MM}/{DD}" (e.g., "Reiwa 7/03/06").
+ * For pre-Meiji dates (year < 1868): falls back to the Gregorian year (e.g., "1867/03/06").
  *
  * @param date - The date to format
  *
- * @returns Short English era string (e.g., "Reiwa 7/12/25")
+ * @returns Short English era string (e.g., "Reiwa 7/03/06")
  */
 export declare function dateToEnglishEraShort(date: Date): string;
+/**
+ * Formats a Date to a short English era string for display in the MonthPicker trigger input.
+ * Format: "{EraName} {eraYear}/{MM}" (e.g., "Reiwa 7/03").
+ * For pre-Meiji dates (year < 1868): falls back to the Gregorian year (e.g., "1867/03").
+ *
+ * @param date - The date to format
+ *
+ * @returns Short English era month string (e.g., "Reiwa 7/03")
+ */
+export declare function dateToEnglishEraMonthShort(date: Date): string;
+/**
+ * Formats a Date to a Japanese-era string with day precision (e.g., "令和7年3月6日").
+ * Uses the platform's built-in `ja-JP-u-ca-japanese` calendar.
+ *
+ * @param date - The date to format
+ *
+ * @returns Japanese era string with day (e.g., "令和7年3月6日")
+ */
+export declare function dateToJapaneseEra(date: Date): string;
+/**
+ * Formats a Date to a Japanese-era string with month precision (e.g., "令和7年3月").
+ * Uses the platform's built-in `ja-JP-u-ca-japanese` calendar.
+ *
+ * @param date - The date to format
+ *
+ * @returns Japanese era month string (e.g., "令和7年3月")
+ */
+export declare function dateToJapaneseEraMonth(date: Date): string;
 export { warekiReg, dateToWareki, fullWidthToHalfWidth, selectGengo, WAREKI_START_YEARS };
 export type { WarekiResult };

package/dist/src/DateTimeSelection/shared/utilities/japaneseCalendar.js

@@ -38,8 +38,8 @@ const WAREKI_START_YEARS = {
 const warekiReg = {
     // Western calendar: supports full-width numbers and flexible separators
     dateString: new RegExp(String.raw `^([0-9０-９]{4})${WESTERN_SEPARATOR}([0-9０-９]{1,2})${WESTERN_SEPARATOR}([0-9０-９]{1,2})(?:[\s．]([0-9０-９]{2}):([0-9０-９]{2}))?$`),
-    // Japanese era: supports both traditional (H12年2月12日) and Western-style (H12.2.12) formats
-    wareki: new RegExp(String.raw `^(${Object.keys(WAREKI_START_YEARS).join('|')})(元|[0-9０-９]{1,2})(?:年([0-9０-９]{1,2})月([0-9０-９]{1,2})日|[./-]([0-9０-９]{1,2})[./-]([0-9０-９]{1,2}))$`),
+    // Japanese era: supports traditional (H12年2月12日), Western-style (H12.2.12), and month-only (H12年2月) formats
+    wareki: new RegExp(String.raw `^(${Object.keys(WAREKI_START_YEARS).join('|')})(元|[0-9０-９]{1,2})(?:年([0-9０-９]{1,2})月([0-9０-９]{1,2})日|[./-]([0-9０-９]{1,2})[./-]([0-9０-９]{1,2})|年([0-9０-９]{1,2})月)$`),
     // Era detection for both traditional and Western-style formats
     eraDetection: /^(?:令和|平成|昭和|大正|明治|[rhstmRHSTM])(?:元|[0-9０-９]{1,2})(?:年|[./-])/,
 };
@@ -137,11 +137,12 @@ export function warekiToDate(wareki) {
         const baseYear = WAREKI_START_YEARS[matchedWareki[1]];
         // Handle "元" (first year) and regular years
         const eraYear = matchedWareki[2] === '元' ? 1 : Number(matchedWareki[2]);
-        // Handle both traditional (年月日) and Western-style (./- separators) formats
+        // Handle traditional (年月日), Western-style (./- separators), and month-only (年月) formats
         // Traditional format: groups 3,4 (month, day)
         // Western format: groups 5,6 (month, day)
-        const month = Number(matchedWareki[3] || matchedWareki[5]);
-        const day = Number(matchedWareki[4] || matchedWareki[6]);
+        // Month-only format: group 7 (month), day defaults to 1
+        const month = Number(matchedWareki[3] || matchedWareki[5] || matchedWareki[7]);
+        const day = matchedWareki[7] !== undefined ? 1 : Number(matchedWareki[4] || matchedWareki[6]);
         // Validation: ensure era year is reasonable (1-200 years per era)
         if (eraYear < 1 || eraYear > 200) {
             return {
@@ -240,24 +241,90 @@ export function yearToEraLabel(year, locale) {
     return `${gengo}${eraYear === 1 ? '元' : String(eraYear)}年`;
 }
 /**
- * Formats a Date to a short English era string for display in the DatePicker trigger input.
- * Format: "{EraName} {eraYear}/{month}/{day}" (e.g., "Reiwa 7/12/25").
- * For pre-Meiji dates (year < 1868): falls back to the Gregorian year (e.g., "1867/12/25").
+ * Internal helper used by `dateToEnglishEraShort` and `dateToEnglishEraMonthShort`.
+ * Pre-Meiji dates (year < 1868) fall back to the Gregorian year.
  *
  * @param date - The date to format
  *
- * @returns Short English era string (e.g., "Reiwa 7/12/25")
+ * @param options - Format options. `includeDay: true` produces "{Era} {Y}/{MM}/{DD}";
+ *   `includeDay: false` produces "{Era} {Y}/{MM}" and resolves the era using day 1.
+ *
+ * @returns Formatted English era string
  */
-export function dateToEnglishEraShort(date) {
+function dateToEnglishEra(date, { includeDay }) {
     const year = date.getFullYear();
-    const month = date.getMonth() + 1;
-    const day = date.getDate();
+    const monthNum = date.getMonth() + 1;
+    const dayNum = date.getDate();
+    const month = String(monthNum).padStart(2, '0');
+    const daySuffix = includeDay ? `/${String(dayNum).padStart(2, '0')}` : '';
     if (year < MEIJI_START_YEAR) {
-        return `${String(year)}/${String(month)}/${String(day)}`;
+        return `${String(year)}/${month}${daySuffix}`;
     }
-    const gengo = selectGengo(year, month, day);
+    // Month-only outputs resolve the era using day 1, which means the transition month
+    // keeps the older era label (e.g., Dec 1926 → Taisho 15/12, not Showa 1/12).
+    const gengo = selectGengo(year, monthNum, includeDay ? dayNum : 1);
     const eraYear = year - WAREKI_START_YEARS[gengo] + 1;
-    return `${ERA_NAMES_EN[gengo]} ${String(eraYear)}/${String(month)}/${String(day)}`;
+    return `${ERA_NAMES_EN[gengo]} ${String(eraYear)}/${month}${daySuffix}`;
+}
+/**
+ * Formats a Date to a short English era string for display in the DatePicker trigger input.
+ * Format: "{EraName} {eraYear}/{MM}/{DD}" (e.g., "Reiwa 7/03/06").
+ * For pre-Meiji dates (year < 1868): falls back to the Gregorian year (e.g., "1867/03/06").
+ *
+ * @param date - The date to format
+ *
+ * @returns Short English era string (e.g., "Reiwa 7/03/06")
+ */
+export function dateToEnglishEraShort(date) {
+    return dateToEnglishEra(date, { includeDay: true });
+}
+/**
+ * Formats a Date to a short English era string for display in the MonthPicker trigger input.
+ * Format: "{EraName} {eraYear}/{MM}" (e.g., "Reiwa 7/03").
+ * For pre-Meiji dates (year < 1868): falls back to the Gregorian year (e.g., "1867/03").
+ *
+ * @param date - The date to format
+ *
+ * @returns Short English era month string (e.g., "Reiwa 7/03")
+ */
+export function dateToEnglishEraMonthShort(date) {
+    return dateToEnglishEra(date, { includeDay: false });
+}
+// Cached Intl formatters for the Japanese era (wareki) — module-level so the
+// formatter instances are reused across components instead of being created
+// inside each `useMemo`.
+const japaneseEraDateFormatter = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
+    era: 'long',
+    year: 'numeric',
+    month: 'narrow',
+    day: 'numeric',
+});
+const japaneseEraMonthFormatter = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
+    era: 'long',
+    year: 'numeric',
+    month: 'narrow',
+});
+/**
+ * Formats a Date to a Japanese-era string with day precision (e.g., "令和7年3月6日").
+ * Uses the platform's built-in `ja-JP-u-ca-japanese` calendar.
+ *
+ * @param date - The date to format
+ *
+ * @returns Japanese era string with day (e.g., "令和7年3月6日")
+ */
+export function dateToJapaneseEra(date) {
+    return japaneseEraDateFormatter.format(date);
+}
+/**
+ * Formats a Date to a Japanese-era string with month precision (e.g., "令和7年3月").
+ * Uses the platform's built-in `ja-JP-u-ca-japanese` calendar.
+ *
+ * @param date - The date to format
+ *
+ * @returns Japanese era month string (e.g., "令和7年3月")
+ */
+export function dateToJapaneseEraMonth(date) {
+    return japaneseEraMonthFormatter.format(date);
 }
 // Export the utility functions and constants
 export { warekiReg, dateToWareki, fullWidthToHalfWidth, selectGengo, WAREKI_START_YEARS };

package/dist/src/DateTimeSelection/shared/utilities/monthCellMonthFormat.d.ts

@@ -0,0 +1,14 @@
+import { type BasePickerProps } from '../BasePicker/BasePicker.types';
+/**
+ * dayjs format string for the visible month label in {@link MonthCell} (`monthLabel`),
+ * based on calendar locale (Japanese `M月` vs English three-letter abbreviations).
+ *
+ * @param calendarLocale - The calendar locale (`'ja'` or `'en'`) — selects between
+ *   Japanese (`M月`) and English (`[Jan]`–`[Dec]`) abbreviations
+ *
+ * @param date - The date whose month index selects the English abbreviation.
+ *   Only consulted when `calendarLocale === 'en'`.
+ *
+ * @returns A dayjs-compatible format string for the month label
+ */
+export declare function getMonthCellMonthFormat(calendarLocale: BasePickerProps['calendarLocale'], date: Date): string;

package/dist/src/DateTimeSelection/shared/utilities/monthCellMonthFormat.js

@@ -0,0 +1,35 @@
+// English month abbreviations wrapped in square brackets to escape them in dayjs format strings
+const ENGLISH_MONTH_ABBREVIATIONS = [
+    '[Jan]',
+    '[Feb]',
+    '[Mar]',
+    '[Apr]',
+    '[May]',
+    '[Jun]',
+    '[Jul]',
+    '[Aug]',
+    '[Sep]',
+    '[Oct]',
+    '[Nov]',
+    '[Dec]',
+];
+/**
+ * dayjs format string for the visible month label in {@link MonthCell} (`monthLabel`),
+ * based on calendar locale (Japanese `M月` vs English three-letter abbreviations).
+ *
+ * @param calendarLocale - The calendar locale (`'ja'` or `'en'`) — selects between
+ *   Japanese (`M月`) and English (`[Jan]`–`[Dec]`) abbreviations
+ *
+ * @param date - The date whose month index selects the English abbreviation.
+ *   Only consulted when `calendarLocale === 'en'`.
+ *
+ * @returns A dayjs-compatible format string for the month label
+ */
+export function getMonthCellMonthFormat(calendarLocale, date) {
+    if (calendarLocale === 'en') {
+        // Date.getMonth() always returns 0–11, so the array access is safe.
+        const monthIndex = date.getMonth();
+        return ENGLISH_MONTH_ABBREVIATIONS[monthIndex];
+    }
+    return 'M月';
+}

package/dist/src/MultilineTextBox/index.d.ts

@@ -1,2 +1,10 @@
-export { MultilineTextBox } from './MultilineTextBox';
-export { MultilineTextBoxProps } from './MultilineTextBox.types';
+/**
+ * MultilineTextBox backward compatibility re-exports.
+ *
+ * MultilineTextBox has been renamed to Textarea.
+ * Please migrate to Textarea. MultilineTextBox will be removed in a future major version (v5.0.0).
+ *
+ * @see Textarea
+ */
+export { Textarea as MultilineTextBox } from '../Textarea';
+export type { TextareaProps as MultilineTextBoxProps } from '../Textarea';

package/dist/src/MultilineTextBox/index.js

@@ -1 +1,9 @@
-export { MultilineTextBox } from './MultilineTextBox';
+/**
+ * MultilineTextBox backward compatibility re-exports.
+ *
+ * MultilineTextBox has been renamed to Textarea.
+ * Please migrate to Textarea. MultilineTextBox will be removed in a future major version (v5.0.0).
+ *
+ * @see Textarea
+ */
+export { Textarea as MultilineTextBox } from '../Textarea';

package/dist/src/MultipleSelectBox/MultipleSelectBoxTrigger/MultipleSelectBoxTrigger.js

@@ -48,8 +48,6 @@ placeholder, renderDisplayValue, updateSelectedValues, clearButtonProps, disable
         .map((option) => option.value)
         .filter((v) => v != null)
         .map(String);
-    return (
-    // use div element instead of button element to prevent the nested button element when the selected options are rendered as tag list
-    _jsx(FocusIndicator, { children: _jsxs("div", { ref: wrapperRef, className: cx(classes.wrapper, 'mfui-MultipleSelectBoxTrigger__wrapper', triggerWrapperProps?.className), children: [_jsx("button", { ref: mergeRefs(ref, triggerRef), type: "button", role: "combobox", "aria-controls": listBoxId, "aria-expanded": isOptionPanelOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, value: selectedValues, disabled: disabled, onKeyDown: onKeyDown, onBlur: onBlur, ...rest, ...triggerProps, className: cx(classes.trigger, 'mfui-MultipleSelectBoxTrigger__trigger', triggerProps?.className) }), _jsx("input", { type: "hidden", name: name, value: selectedValues }), _jsx("div", { className: cx(classes.displayValues, 'mfui-MultipleSelectBoxTrigger__displayValues'), "data-mfui-content": "multiple-select-box-trigger-display-values", children: renderer() }), selectedOptions.length > 0 && !disabled && !disableClearButton ? (_jsx("div", { className: cx(classes.clearButtonContainer, 'mfui-MultipleSelectBoxTrigger__clearButtonContainer'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', className: cx(classes.clearButton, 'mfui-MultipleSelectBoxTrigger__clearButton'), "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "multiple-select-box-clear-button", onClick: handleClearValue }) })) : null, _jsx("div", { className: cx(classes.dropdownIconContainer, 'mfui-MultipleSelectBoxTrigger__dropdownIconContainer'), children: _jsx(DropdownIcon, { className: cx(classes.dropdownIcon, 'mfui-MultipleSelectBoxTrigger__dropdownIcon') }) })] }) }));
+    return (_jsx(FocusIndicator, { children: _jsxs("div", { ref: wrapperRef, className: cx(classes.wrapper, 'mfui-MultipleSelectBoxTrigger__wrapper', triggerWrapperProps?.className), children: [_jsx("button", { ref: mergeRefs(ref, triggerRef), type: "button", role: "combobox", "aria-controls": listBoxId, "aria-expanded": isOptionPanelOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, value: selectedValues, disabled: disabled, onKeyDown: onKeyDown, onBlur: onBlur, ...rest, ...triggerProps, className: cx(classes.trigger, 'mfui-MultipleSelectBoxTrigger__trigger', triggerProps?.className) }), _jsx("input", { type: "hidden", name: name, value: selectedValues }), _jsx("div", { className: cx(classes.displayValues, 'mfui-MultipleSelectBoxTrigger__displayValues'), "data-mfui-content": "multiple-select-box-trigger-display-values", children: renderer() }), selectedOptions.length > 0 && !disabled && !disableClearButton ? (_jsx("div", { className: cx(classes.clearButtonContainer, 'mfui-MultipleSelectBoxTrigger__clearButtonContainer'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', className: cx(classes.clearButton, 'mfui-MultipleSelectBoxTrigger__clearButton'), "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "multiple-select-box-clear-button", onClick: handleClearValue }) })) : null, _jsx("div", { className: cx(classes.dropdownIconContainer, 'mfui-MultipleSelectBoxTrigger__dropdownIconContainer'), children: _jsx(DropdownIcon, { className: cx(classes.dropdownIcon, 'mfui-MultipleSelectBoxTrigger__dropdownIcon') }) })] }) }));
 }
 export const MultipleSelectBoxTrigger = forwardRef(MultipleSelectBoxTriggerInner);

package/dist/src/RadioButtonCard/RadioButtonCard.js

@@ -28,11 +28,5 @@ export const RadioButtonCard = forwardRef(({ label, layout = 'vertical', renderD
         disableResponsive,
         isResponsive: Boolean(responsiveSlot.narrowViewport),
     });
-    return (_jsxs("div", { className: cx(classes.root, 'mfui-RadioButtonCard__root', className), children: [_jsx(FocusIndicator, { disableNestedFocus: true, children: _jsxs(Typography, { variant: "label", className: cx(classes.inputWrapper, 'mfui-RadioButtonCard__inputWrapper'), as: "label", htmlFor: props.id, children: [_jsx(RadioButton, { ref: ref, ...props, className: cx(classes.input, 'mfui-RadioButtonCard__input') }), _jsx("span", { className: cx(classes.label, 'mfui-RadioButtonCard__label'), children: label })] }) }), responsiveSlot.narrowViewport && disableResponsive ? (
-            /* When responsive is disabled, render single element but with both contents using CSS for switching */
-            _jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-RadioButtonCard__details'), children: responsiveSlot.narrowViewport(radioButtonState) })] })) : responsiveSlot.narrowViewport ? (
-            /* When responsive is enabled, render separate wide/narrow elements */
-            _jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-RadioButtonCard__details'), children: responsiveSlot.narrowViewport(radioButtonState) })] })) : responsiveSlot.base ? (
-            /* For function-based renderDetailsSlot or ResponsiveSlot with only base, use single details element */
-            _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) })) : null] }));
+    return (_jsxs("div", { className: cx(classes.root, 'mfui-RadioButtonCard__root', className), children: [_jsx(FocusIndicator, { disableNestedFocus: true, children: _jsxs(Typography, { variant: "label", className: cx(classes.inputWrapper, 'mfui-RadioButtonCard__inputWrapper'), as: "label", htmlFor: props.id, children: [_jsx(RadioButton, { ref: ref, ...props, className: cx(classes.input, 'mfui-RadioButtonCard__input') }), _jsx("span", { className: cx(classes.label, 'mfui-RadioButtonCard__label'), children: label })] }) }), responsiveSlot.narrowViewport && disableResponsive ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-RadioButtonCard__details'), children: responsiveSlot.narrowViewport(radioButtonState) })] })) : responsiveSlot.narrowViewport ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-RadioButtonCard__details'), children: responsiveSlot.narrowViewport(radioButtonState) })] })) : responsiveSlot.base ? (_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) })) : null] }));
 });

package/dist/src/TextBox/TextBox.js

@@ -41,11 +41,7 @@ export const TextBox = forwardRef(({ enableClearButton = false, onClear, invalid
     }, [onClear, shouldUseTouchDeviceMode]);
     // Get the display value for touch device mode
     const displayValue = (inputProps.value ?? inputProps.defaultValue ?? '');
-    return shouldUseTouchDeviceMode ? (
-    // Touch device: wrapper + hidden input + display div
-    _jsxs("div", { ...wrapperProps, className: cx(classes.root, 'mfui-TextBox__root', wrapperProps.className), children: [_jsx("input", { type: "hidden", value: displayValue, name: inputProps.name }), prefixSlot ? _jsx("div", { className: cx(classes.prefix, 'mfui-TextBox__prefix'), children: prefixSlot }) : null, _jsx("div", { className: cx(classes.input, 'mfui-TextBox__input'), children: displayValue || inputProps.placeholder }), shouldShowClearButton ? (_jsx(ClearButton, { size: textBoxSize === 'small' ? 'small' : textBoxSize === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', className: cx(classes.clearButton, 'mfui-TextBox__clearButton'), disabled: disabled, onClick: (event) => {
+    return shouldUseTouchDeviceMode ? (_jsxs("div", { ...wrapperProps, className: cx(classes.root, 'mfui-TextBox__root', wrapperProps.className), children: [_jsx("input", { type: "hidden", value: displayValue, name: inputProps.name }), prefixSlot ? _jsx("div", { className: cx(classes.prefix, 'mfui-TextBox__prefix'), children: prefixSlot }) : null, _jsx("div", { className: cx(classes.input, 'mfui-TextBox__input'), children: displayValue || inputProps.placeholder }), shouldShowClearButton ? (_jsx(ClearButton, { size: textBoxSize === 'small' ? 'small' : textBoxSize === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', className: cx(classes.clearButton, 'mfui-TextBox__clearButton'), disabled: disabled, onClick: (event) => {
                     onClear?.(event);
-                } })) : null, suffixSlot ? _jsx("div", { className: cx(classes.suffix, 'mfui-TextBox__suffix'), children: suffixSlot }) : null] })) : (
-    // Desktop: Standard input with FocusIndicator
-    _jsx(FocusIndicator, { children: _jsxs("div", { ...wrapperProps, className: cx(classes.root, 'mfui-TextBox__root', wrapperProps.className), children: [prefixSlot ? _jsx("div", { className: cx(classes.prefix, 'mfui-TextBox__prefix'), children: prefixSlot }) : null, _jsx("input", { ref: mergedInputRef, disabled: disabled, ...inputProps, className: cx(classes.input, 'mfui-TextBox__input', inputProps.className), onChange: handleChange, onInput: handleInput }), shouldShowClearButton ? (_jsx(ClearButton, { size: textBoxSize === 'small' ? 'small' : textBoxSize === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', className: cx(classes.clearButton, 'mfui-TextBox__clearButton'), disabled: disabled, onClick: onClickClear })) : null, suffixSlot ? _jsx("div", { className: cx(classes.suffix, 'mfui-TextBox__suffix'), children: suffixSlot }) : null] }) }));
+                } })) : null, suffixSlot ? _jsx("div", { className: cx(classes.suffix, 'mfui-TextBox__suffix'), children: suffixSlot }) : null] })) : (_jsx(FocusIndicator, { children: _jsxs("div", { ...wrapperProps, className: cx(classes.root, 'mfui-TextBox__root', wrapperProps.className), children: [prefixSlot ? _jsx("div", { className: cx(classes.prefix, 'mfui-TextBox__prefix'), children: prefixSlot }) : null, _jsx("input", { ref: mergedInputRef, disabled: disabled, ...inputProps, className: cx(classes.input, 'mfui-TextBox__input', inputProps.className), onChange: handleChange, onInput: handleInput }), shouldShowClearButton ? (_jsx(ClearButton, { size: textBoxSize === 'small' ? 'small' : textBoxSize === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', className: cx(classes.clearButton, 'mfui-TextBox__clearButton'), disabled: disabled, onClick: onClickClear })) : null, suffixSlot ? _jsx("div", { className: cx(classes.suffix, 'mfui-TextBox__suffix'), children: suffixSlot }) : null] }) }));
 });

package/dist/src/{MultilineTextBox/MultilineTextBox.d.ts → Textarea/Textarea.d.ts}

@@ -1,12 +1,15 @@
 /**
- * The general-purpose TextBox component.
+ * The general-purpose Textarea component.
  * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
  *
  * Also extends the props of `<textarea>` element
  *
+ * > **Migration note**: `MultilineTextBox` has been renamed to `Textarea`.
+ * > Please migrate to `Textarea`. `MultilineTextBox` will be removed in a future major version (v5.0.0).
+ *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
  */
-export declare const MultilineTextBox: import("react").ForwardRefExoticComponent<{
+export declare const Textarea: import("react").ForwardRefExoticComponent<{
     invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["invalid"];
     size?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["size"];
     disabled?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["disabled"];

package/dist/src/{MultilineTextBox/MultilineTextBox.js → Textarea/Textarea.js}

@@ -1,22 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useCallback, useEffect } from 'react';
 import { cx } from '../../styled-system/css';
-import { multilineTextBoxSlotRecipe } from '../../styled-system/recipes';
+import { textareaSlotRecipe } from '../../styled-system/recipes';
 import { FocusIndicator } from '../FocusIndicator';
 import { mergeRefs } from '../utilities/dom/mergeRefs';
 /**
- * The general-purpose TextBox component.
+ * The general-purpose Textarea component.
  * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
  *
  * Also extends the props of `<textarea>` element
  *
+ * > **Migration note**: `MultilineTextBox` has been renamed to `Textarea`.
+ * > Please migrate to `Textarea`. `MultilineTextBox` will be removed in a future major version (v5.0.0).
+ *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
  */
-export const MultilineTextBox = forwardRef(({ invalid = false, size = 'medium', disabled = false, rows = 1, enableAutoResize = false, resize = 'both', onChange, ...props }, ref) => {
+export const Textarea = forwardRef(({ invalid = false, size = 'medium', disabled = false, rows = 1, enableAutoResize = false, resize = 'both', onChange, ...props }, ref) => {
     const localRef = useRef(null);
     // When enableAutoResize is true, force resize to 'none' to prevent conflicts
     const effectiveResize = enableAutoResize ? 'none' : resize;
-    const classes = multilineTextBoxSlotRecipe({ size, disabled, invalid, enableAutoResize, resize: effectiveResize });
+    const classes = textareaSlotRecipe({ size, disabled, invalid, enableAutoResize, resize: effectiveResize });
     const adjustHeight = useCallback(() => {
         if (!enableAutoResize || !localRef.current)
             return;
@@ -47,5 +50,6 @@ export const MultilineTextBox = forwardRef(({ invalid = false, size = 'medium',
             adjustHeight();
         }
     }, [enableAutoResize, adjustHeight]);
-    return (_jsx(FocusIndicator, { children: _jsx("textarea", { ref: mergeRefs(ref, localRef), ...props, rows: rows, className: cx(classes.root, 'mfui-MultilineTextBox__root', props.className), disabled: disabled, onChange: handleChange }) }));
+    return (_jsx(FocusIndicator, { children: _jsx("textarea", { ref: mergeRefs(ref, localRef), ...props, rows: rows, className: cx(classes.root, 'mfui-Textarea__root', 
+            /* TODO: Remove in v5.0.0 */ 'mfui-MultilineTextBox__root', props.className), disabled: disabled, onChange: handleChange }) }));
 });

package/dist/src/{MultilineTextBox/MultilineTextBox.types.d.ts → Textarea/Textarea.types.d.ts}

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef } from 'react';
 import { type TextBoxSlotRecipeVariant } from '../../styled-system/recipes';
 /**
- * The props for the MultilineTextBox component.
+ * The props for the Textarea component.
  */
-export type MultilineTextBoxProps = {
+export type TextareaProps = {
     /**
      * Whether the textarea is invalid or not.
      * This will change the style of the text box.

package/dist/src/Textarea/Textarea.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/Textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea.types';

package/dist/src/Textarea/index.js

@@ -0,0 +1 @@
+export { Textarea } from './Textarea';

package/dist/src/Tooltip/Tooltip.js

@@ -79,7 +79,16 @@ export const Tooltip = forwardRef(({ children, open, onOpenStateChanged, content
     }, [calculatedOpen, closeImmediate]);
     const triggerRef = mergeRefs(setTriggerReference, rootRef, ref);
     const classes = tooltipSlotRecipe();
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, ...wrapperProps, className: cx(classes.root, 'mfui-Tooltip__root', className), ...rootAttributes, children: isValidElement(children) ? (cloneElement(children, calculatedOpen && !hideFromScreenReader
-                    ? { 'aria-describedby': tooltipId }
-                    : undefined)) : (_jsx("span", { ...(calculatedOpen && !hideFromScreenReader ? { 'aria-describedby': tooltipId } : undefined), children: children })) }), 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] }));
+    const ariaDescribedBy = !hideFromScreenReader && content != null ? tooltipId : undefined;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, ...wrapperProps, className: cx(classes.root, 'mfui-Tooltip__root', className), ...rootAttributes, children: isValidElement(children) ? (cloneElement(children, ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : undefined)) : (_jsx("span", { ...(ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : undefined), children: children })) }), !calculatedOpen && !hideFromScreenReader && content != null && (_jsx(Portal, { targetDOMNode: targetElement, children: _jsx("div", { "data-mfui-tooltip-hidden": true, id: tooltipId, style: {
+                        position: 'absolute',
+                        width: '1px',
+                        height: '1px',
+                        padding: 0,
+                        margin: '-1px',
+                        overflow: 'hidden',
+                        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] }));
 });

package/dist/src/Typography/Typography.js

@@ -21,9 +21,7 @@ function InternalTypography(props, ref) {
         return variant.startsWith('strong') ? 'strong' : 'span';
     }, [variant, tag, rest.href]);
     const classes = typographySlotRecipe({ variant });
-    return (
-    // @ts-expect-error Ignore the error for ref due to the complexion.
-    _jsx(Tag, { ref: ref, ...rest, className: cx(classes.root, 'mfui-Typography__root', className), children: children }));
+    return (_jsx(Tag, { ref: ref, ...rest, className: cx(classes.root, 'mfui-Typography__root', className), children: children }));
 }
 /**
  *

package/dist/src/index.d.ts

@@ -50,6 +50,7 @@ export * from './StatusLabel';
 export * from './SubNavigation';
 export * from './Tabs';
 export * from './Tag';
+export * from './Textarea';
 export * from './TextBox';
 export * from './TextLink';
 export * from './Toast';

package/dist/src/index.js

@@ -50,6 +50,7 @@ export * from './StatusLabel';
 export * from './SubNavigation';
 export * from './Tabs';
 export * from './Tag';
+export * from './Textarea';
 export * from './TextBox';
 export * from './TextLink';
 export * from './Toast';