@moneyforward/mfui-components 3.14.1 → 3.16.0

package/dist/src/DateTimeSelection/DatePicker/DatePicker.js

@@ -3,6 +3,8 @@ import { useMemo } from 'react';
 import { BasePicker } from '../shared/BasePicker';
 import { DatePickerPanel } from './DatePickerPanel';
 import { CalendarLocaleProvider } from '../shared/CalendarLocale/CalendarLocaleContext';
+import { DisplayJapaneseCalendarProvider } from '../shared/CalendarLocale/DisplayJapaneseCalendarContext';
+import { dateToEnglishEraShort } from '../shared/utilities/japaneseCalendar';
 /**
  * DatePicker component
  *
@@ -13,6 +15,9 @@ export function DatePicker({ format = 'YYYY/MM/DD', checkDisabledDate, minDate,
     const customFormatValue = useMemo(() => {
         if (!displayJapaneseCalendar)
             return;
+        if (calendarLocale === 'en') {
+            return (date) => dateToEnglishEraShort(date);
+        }
         const formatter = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
             era: 'long',
             year: 'numeric',
@@ -20,6 +25,6 @@ export function DatePicker({ format = 'YYYY/MM/DD', checkDisabledDate, minDate,
             day: 'numeric',
         });
         return (date) => formatter.format(date);
-    }, [displayJapaneseCalendar]);
-    return (_jsx(BasePicker, { ...props, format: format, baseFormat: "YYYY-MM-DD", calendarLocale: calendarLocale, customFormatValue: customFormatValue, renderPopoverContent: ({ value, onChange }) => (_jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(DatePickerPanel, { value: value, checkDisabledDate: checkDisabledDate, minDate: minDate, maxDate: maxDate, prevMonthIconButtonProps: prevMonthIconButtonProps, nextMonthIconButtonProps: nextMonthIconButtonProps, todayButtonProps: todayButtonProps, onChange: onChange }) })) }));
+    }, [displayJapaneseCalendar, calendarLocale]);
+    return (_jsx(BasePicker, { ...props, format: format, baseFormat: "YYYY-MM-DD", calendarLocale: calendarLocale, customFormatValue: customFormatValue, renderPopoverContent: ({ value, onChange }) => (_jsx(DisplayJapaneseCalendarProvider, { value: displayJapaneseCalendar, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(DatePickerPanel, { value: value, checkDisabledDate: checkDisabledDate, minDate: minDate, maxDate: maxDate, prevMonthIconButtonProps: prevMonthIconButtonProps, nextMonthIconButtonProps: nextMonthIconButtonProps, todayButtonProps: todayButtonProps, onChange: onChange }) }) })) }));
 }

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

@@ -4,13 +4,27 @@ import { SelectBox } from '../../../../SelectBox';
 import { yearSelectorSlotRecipe } from '../../../../../styled-system/recipes';
 import { MAXIMUM_VIEWABLE_YEAR, MINIMUM_VIEWABLE_YEAR } from '../constants';
 import { cx } from '../../../../../styled-system/css';
+import { useCalendarLocale } from '../../CalendarLocale/CalendarLocaleContext';
+import { useDisplayJapaneseCalendar } from '../../CalendarLocale/DisplayJapaneseCalendarContext';
+import { yearToEraLabel } from '../../utilities/japaneseCalendar';
 export function YearSelector({ value, onChange, targetDOMNode }) {
+    const calendarLocale = useCalendarLocale();
+    const displayJapaneseCalendar = useDisplayJapaneseCalendar();
     const internalYearString = useMemo(() => (value ?? new Date()).getFullYear().toString(), [value]);
-    const options = useMemo(() => Array.from({ length: MAXIMUM_VIEWABLE_YEAR - MINIMUM_VIEWABLE_YEAR + 1 }).map((_, i) => ({
-        value: String(MINIMUM_VIEWABLE_YEAR + i),
-        // TODO: Localize
-        label: `${String(MINIMUM_VIEWABLE_YEAR + i)}年`,
-    })), []);
+    const options = useMemo(() => Array.from({ length: MAXIMUM_VIEWABLE_YEAR - MINIMUM_VIEWABLE_YEAR + 1 }).map((_, i) => {
+        const year = MINIMUM_VIEWABLE_YEAR + i;
+        let label;
+        if (displayJapaneseCalendar) {
+            label = yearToEraLabel(year, calendarLocale ?? 'ja');
+        }
+        else if (calendarLocale === 'ja') {
+            label = `${String(year)}年`;
+        }
+        else {
+            label = String(year);
+        }
+        return { value: String(year), label };
+    }), [calendarLocale, displayJapaneseCalendar]);
     const selectedOption = useMemo(() => options.find((o) => o.value === internalYearString), [options, internalYearString]);
     const handleChange = useCallback((option) => {
         if (option) {

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare function DisplayJapaneseCalendarProvider({ value, children }: {
+    value: boolean;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useDisplayJapaneseCalendar(): boolean;

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

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const DisplayJapaneseCalendarContext = createContext(false);
+export function DisplayJapaneseCalendarProvider({ value, children }) {
+    return _jsx(DisplayJapaneseCalendarContext.Provider, { value: value, children: children });
+}
+export function useDisplayJapaneseCalendar() {
+    return useContext(DisplayJapaneseCalendarContext);
+}

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

@@ -5,13 +5,26 @@ import { yearSelectorSlotRecipe } from '../../../../styled-system/recipes';
 import { MAXIMUM_VIEWABLE_YEAR, MINIMUM_VIEWABLE_YEAR } from './constants';
 import { cx } from '../../../../styled-system/css';
 import { useCalendarLocale } from '../CalendarLocale/CalendarLocaleContext';
+import { useDisplayJapaneseCalendar } from '../CalendarLocale/DisplayJapaneseCalendarContext';
+import { yearToEraLabel } from '../utilities/japaneseCalendar';
 export function YearSelector({ value, onChange, triggerProps, triggerWrapperProps, targetDOMNode }) {
     const calendarLocale = useCalendarLocale();
+    const displayJapaneseCalendar = useDisplayJapaneseCalendar();
     const internalYearString = useMemo(() => (value ?? new Date()).getFullYear().toString(), [value]);
-    const options = useMemo(() => Array.from({ length: MAXIMUM_VIEWABLE_YEAR - MINIMUM_VIEWABLE_YEAR + 1 }).map((_, i) => ({
-        value: String(MINIMUM_VIEWABLE_YEAR + i),
-        label: calendarLocale === 'ja' ? `${String(MINIMUM_VIEWABLE_YEAR + i)}年` : String(MINIMUM_VIEWABLE_YEAR + i),
-    })), [calendarLocale]);
+    const options = useMemo(() => Array.from({ length: MAXIMUM_VIEWABLE_YEAR - MINIMUM_VIEWABLE_YEAR + 1 }).map((_, i) => {
+        const year = MINIMUM_VIEWABLE_YEAR + i;
+        let label;
+        if (displayJapaneseCalendar) {
+            label = yearToEraLabel(year, calendarLocale ?? 'ja');
+        }
+        else if (calendarLocale === 'ja') {
+            label = `${String(year)}年`;
+        }
+        else {
+            label = String(year);
+        }
+        return { value: String(year), label };
+    }), [calendarLocale, displayJapaneseCalendar]);
     const selectedOption = useMemo(() => options.find((o) => o.value === internalYearString), [options, internalYearString]);
     const handleChange = useCallback((option) => {
         if (option) {

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

@@ -44,5 +44,33 @@ export declare function warekiToDate(wareki: string): WarekiResult<Date>;
  * @returns true if the string appears to be a Japanese era format
  */
 export declare function isJapaneseEraFormat(inputString: string): boolean;
+/**
+ * Converts a Western calendar year to an era label string for display in YearSelector.
+ *
+ * Uses December 31 to resolve era transition years to the later era:
+ *   2019 → 令和元年 (ja) / Reiwa 1 (en)
+ *   1989 → 平成元年 (ja) / Heisei 1 (en)
+ *   1926 → 昭和元年 (ja) / Showa 1 (en)
+ *   1912 → 大正元年 (ja) / Taisho 1 (en)
+ * Years before MEIJI_START_YEAR (< 1868): "1867年" (ja) / "1867" (en)
+ * First year of each era: "元年" suffix in Japanese (e.g., 令和元年, not 令和1年)
+ *
+ * @param year - Western calendar year (e.g., 2025)
+ *
+ * @param locale - 'ja' for Japanese labels, 'en' for romanized labels
+ *
+ * @returns Era label string (e.g., "令和7年", "令和元年", "Reiwa 7", "1867年", "1867")
+ */
+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").
+ *
+ * @param date - The date to format
+ *
+ * @returns Short English era string (e.g., "Reiwa 7/12/25")
+ */
+export declare function dateToEnglishEraShort(date: Date): string;
 export { warekiReg, dateToWareki, fullWidthToHalfWidth, selectGengo, WAREKI_START_YEARS };
 export type { WarekiResult };

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

@@ -204,5 +204,60 @@ export function warekiToDate(wareki) {
 export function isJapaneseEraFormat(inputString) {
     return warekiReg.eraDetection.test(inputString);
 }
+const ERA_NAMES_EN = {
+    令和: 'Reiwa',
+    平成: 'Heisei',
+    昭和: 'Showa',
+    大正: 'Taisho',
+    明治: 'Meiji',
+};
+/**
+ * Converts a Western calendar year to an era label string for display in YearSelector.
+ *
+ * Uses December 31 to resolve era transition years to the later era:
+ *   2019 → 令和元年 (ja) / Reiwa 1 (en)
+ *   1989 → 平成元年 (ja) / Heisei 1 (en)
+ *   1926 → 昭和元年 (ja) / Showa 1 (en)
+ *   1912 → 大正元年 (ja) / Taisho 1 (en)
+ * Years before MEIJI_START_YEAR (< 1868): "1867年" (ja) / "1867" (en)
+ * First year of each era: "元年" suffix in Japanese (e.g., 令和元年, not 令和1年)
+ *
+ * @param year - Western calendar year (e.g., 2025)
+ *
+ * @param locale - 'ja' for Japanese labels, 'en' for romanized labels
+ *
+ * @returns Era label string (e.g., "令和7年", "令和元年", "Reiwa 7", "1867年", "1867")
+ */
+export function yearToEraLabel(year, locale) {
+    if (year < MEIJI_START_YEAR) {
+        return locale === 'ja' ? `${String(year)}年` : String(year);
+    }
+    const gengo = selectGengo(year, 12, 31);
+    const eraYear = year - WAREKI_START_YEARS[gengo] + 1;
+    if (locale === 'en') {
+        return `${ERA_NAMES_EN[gengo]} ${String(eraYear)}`;
+    }
+    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").
+ *
+ * @param date - The date to format
+ *
+ * @returns Short English era string (e.g., "Reiwa 7/12/25")
+ */
+export function dateToEnglishEraShort(date) {
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    if (year < MEIJI_START_YEAR) {
+        return `${String(year)}/${String(month)}/${String(day)}`;
+    }
+    const gengo = selectGengo(year, month, day);
+    const eraYear = year - WAREKI_START_YEARS[gengo] + 1;
+    return `${ERA_NAMES_EN[gengo]} ${String(eraYear)}/${String(month)}/${String(day)}`;
+}
 // Export the utility functions and constants
 export { warekiReg, dateToWareki, fullWidthToHalfWidth, selectGengo, WAREKI_START_YEARS };

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-export type FormFooterPosition = 'fixed' | 'stacking';
+export type FormFooterPosition = 'fixed' | 'stacking' | 'sticky';
 export type FormFooterSectionPosition = 'fill' | 'center';
 export type FormFooterProps = {
     /**
@@ -11,6 +11,7 @@ export type FormFooterProps = {
      *
      * - `"stacking"`: Displayed inline at the bottom of its container. Use for creation forms where preventing mid-session abandonment is important.
      * - `"fixed"`: Pinned to the bottom of the viewport at all times with a separator border. Use for edit screens where users return frequently.
+     * - `"sticky"`: Sits inline below the last form field, and pins to the bottom of the nearest scrolling ancestor (e.g. inside `SidePane`) when the form overflows. Use inside scrollable containers such as `SidePane`.
      *
      * @default "stacking"
      */

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

@@ -4,4 +4,4 @@ import { type MultipleSelectBoxProps, type AllowedValueTypes } from './MultipleS
  * This component is separated from the SelectBox component because it has a different behavior.
  * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
  */
-export declare function MultipleSelectBox<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>({ id, triggerProps, triggerWrapperProps, size, options, defaultValue, placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, value, showDisplayValueAsTag, renderDisplayValue, enableSearchOptions, notFoundMessage, searchBoxProps, loading, onSearchOptions, clearButtonProps, disableClearButton, optionPanelProps, popoverWrapperProps, enableAllOptionsControls, enableApplyControls, showSelectedCount, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, renderPopoverHeader, renderOptionList, renderPopoverFooter, onOpenStateChanged, enableAutoUnmount, onBlur, showGroupOptionDivider, enableVirtualization, virtualizationOptions, infiniteScroll, }: MultipleSelectBoxProps<T, AdditionalProps>): import("react/jsx-runtime").JSX.Element;
+export declare function MultipleSelectBox<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>({ id, triggerProps, triggerWrapperProps, size, options, defaultValue, placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, value, showDisplayValueAsTag, renderDisplayValue, enableSearchOptions, notFoundMessage, searchBoxProps, loading, onSearchOptions, clearButtonProps, disableClearButton, optionPanelProps, popoverWrapperProps, enableAllOptionsControls, enableApplyControls, showSelectedCount, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, renderPopoverHeader, renderOptionList, renderPopoverFooter, onOpenStateChanged, enableAutoUnmount, onBlur, showGroupOptionDivider, enableVirtualization, virtualizationOptions, infiniteScroll, enableCreateOption, onCreateOption, createOptionProps, }: MultipleSelectBoxProps<T, AdditionalProps>): import("react/jsx-runtime").JSX.Element;

package/dist/src/MultipleSelectBox/MultipleSelectBox.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef } from 'react';
-import { CheckboxChecked, CheckboxUnchecked, Error } from '@moneyforward/mfui-icons-react';
+import { Add, CheckboxChecked, CheckboxUnchecked, Error } from '@moneyforward/mfui-icons-react';
 import { FocusIndicator } from '../FocusIndicator';
 import { Typography } from '../Typography';
 import { useFocusTrap } from '../utilities/dom/useFocusTrap';
@@ -18,8 +18,10 @@ import { useInitialFocusOnOptionPanelOpen } from './hooks/useInitialFocusOnOptio
 import { useSelectedValues } from './hooks/useSelectedValues';
 import { useOptionKeyboardNavigation } from './hooks/useOptionKeyboardNavigation';
 import { useOptionSelectionManagement } from './hooks/useOptionSelectionManagement';
+import { HelpMessage } from '../HelpMessage';
 import { Popover } from '../Popover';
 import { useApplyControls } from './hooks/useApplyControls';
+import { useCreateOption } from './hooks/useCreateOption';
 import { cx } from '../../styled-system/css';
 import { flattenOptions } from './utils/flattenOptions';
 import { isSelectableOption, isOptionDisabled, isOptionSelected } from './utils/isSelectableOption';
@@ -34,7 +36,7 @@ const SKELETON_ITEM_COUNT = 4;
  */
 export function MultipleSelectBox({ id, triggerProps, triggerWrapperProps, size, options = [], defaultValue, 
 // eslint-disable-next-line @typescript-eslint/no-deprecated
-placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, value, showDisplayValueAsTag, renderDisplayValue, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, clearButtonProps, disableClearButton = false, optionPanelProps, popoverWrapperProps, enableAllOptionsControls = false, enableApplyControls = false, showSelectedCount = false, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, renderPopoverHeader, renderOptionList, renderPopoverFooter, onOpenStateChanged, enableAutoUnmount = true, onBlur, showGroupOptionDivider, enableVirtualization = false, virtualizationOptions, infiniteScroll, }) {
+placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, value, showDisplayValueAsTag, renderDisplayValue, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, clearButtonProps, disableClearButton = false, optionPanelProps, popoverWrapperProps, enableAllOptionsControls = false, enableApplyControls = false, showSelectedCount = false, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, renderPopoverHeader, renderOptionList, renderPopoverFooter, onOpenStateChanged, enableAutoUnmount = true, onBlur, showGroupOptionDivider, enableVirtualization = false, virtualizationOptions, infiniteScroll, enableCreateOption = false, onCreateOption, createOptionProps, }) {
     const classes = multipleSelectBoxSlotRecipe({ showGroupOptionDivider });
     const triggerRef = useRef(null);
     const listBoxId = useId();
@@ -57,7 +59,7 @@ placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, val
         onToggle: (nextValue) => {
             onOpenStateChanged?.(nextValue);
             if (nextValue && enableApplyControls) {
-                updateTemporaryValues([...localSelectedValuesSet]);
+                openWithSelectedOptions(localSelectedOptions);
             }
         },
         onClose: () => {
@@ -69,6 +71,13 @@ placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, val
         },
     });
     const { searchText, filteredOptions, onSearchTextChange } = useSearchBox(flattenedOptions, enableSearchOptions, onSearchOptions);
+    const { isCreateOptionVisible, isCreating, createError, handleCreateOption } = useCreateOption({
+        enableCreateOption,
+        enableSearchOptions,
+        searchText,
+        filteredOptions,
+        onCreateOption,
+    });
     // Determine if virtualization should be enabled
     const shouldVirtualize = enableVirtualization && !loading && flattenedOptions.length > 0;
     // Initialize virtualization
@@ -98,7 +107,7 @@ placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, val
     });
     // Disable infinite scroll when there's an error
     const enableInfiniteScroll = baseEnabledInfiniteScroll && !infiniteScrollError;
-    const { temporaryValues, updateTemporaryValues, initializeTemporaryValues, handleCancelButtonClick, handleApplyButtonClick, } = useApplyControls({
+    const { temporaryValues, updateTemporaryValues, openWithSelectedOptions, initializeTemporaryValues, handleCancelButtonClick, handleApplyButtonClick, } = useApplyControls({
         options: flattenedOptions,
         onValuesChange: updateSelectedOptions,
         closeOptionPanel,
@@ -328,7 +337,9 @@ placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, val
                                             : emptyMessage }) }, "empty"),
                             renderInfiniteScrollError(),
                         ].filter(Boolean) }) }));
+    const createOptionAreaNode = isCreateOptionVisible ? (_jsxs("div", { className: cx(classes.createOptionArea, 'mfui-MultipleSelectBox__createOptionArea'), children: [_jsxs("button", { "data-mfui-content": "create-new-option", type: "button", className: cx(classes.createOptionButton, 'mfui-MultipleSelectBox__createOptionButton'), disabled: isCreating, onClick: handleCreateOption, children: [_jsx(Add, { "aria-hidden": true }), createOptionProps?.renderLabel?.(searchText.trim()) ?? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "strongBody", children: searchText.trim() }), _jsx(Typography, { variant: "body", children: "\u3092\u8FFD\u52A0" })] }))] }), createError ? (_jsx("div", { className: cx(classes.createOptionErrorMessage, 'mfui-MultipleSelectBox__createOptionErrorMessage'), children: _jsx(HelpMessage, { messageType: "error", children: createOptionProps?.renderErrorMessage?.(searchText.trim()) ??
+                        `${searchText.trim()}を追加できませんでした。` }) })) : null] })) : null;
     return (_jsx(Popover, { renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsx(MultipleSelectBoxTrigger, { ref: triggerRef, wrapperRef: setTriggerRef, selectedOptions: localSelectedOptions, id: id, disabled: disabled, triggerProps: triggerProps, triggerWrapperProps: triggerWrapperProps, name: name, 
             // eslint-disable-next-line @typescript-eslint/no-deprecated
-            placeholder: placeholder, size: size, listBoxId: listBoxId, isOptionPanelOpen: isOptionPanelOpen, invalid: invalid, showDisplayValueAsTag: showDisplayValueAsTag, renderDisplayValue: renderDisplayValue, clearButtonProps: clearButtonProps, disableClearButton: disableClearButton, updateSelectedValues: updateSelectedValues, onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur })), contentProps: { className: classes.popover }, minWidth: optionPanelProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: optionPanelProps?.allowedPlacements, renderContent: () => (_jsxs("div", { ref: optionPanelRef, className: cx(classes.optionPanel, 'mfui-MultipleSelectBox__optionPanel', optionPanelProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: [enableSearchOptions || enableAllOptionsControls ? (_jsx(VStack, { className: cx(classes.menuHeader, 'mfui-MultipleSelectBox__menuHeader'), gap: "8px", children: renderPopoverHeader ? (renderPopoverHeader({ searchNode, allOptionsControlsNode })) : (_jsxs(_Fragment, { children: [searchNode, allOptionsControlsNode] })) })) : null, renderOptionList ? renderOptionList({ optionsNode }) : optionsNode, enableApplyControls || showSelectedCount ? (_jsx(HStack, { className: cx(classes.menuFooter, 'mfui-MultipleSelectBox__menuFooter'), justifyContent: "space-between", alignItems: "center", children: renderPopoverFooter ? (renderPopoverFooter({ selectedCountNode, applyControlsNode })) : (_jsxs(_Fragment, { children: [selectedCountNode, applyControlsNode] })) })) : null] })), open: isOptionPanelOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: toggleOptionPanel, onBlur: onBlur }));
+            placeholder: placeholder, size: size, listBoxId: listBoxId, isOptionPanelOpen: isOptionPanelOpen, invalid: invalid, showDisplayValueAsTag: showDisplayValueAsTag, renderDisplayValue: renderDisplayValue, clearButtonProps: clearButtonProps, disableClearButton: disableClearButton, updateSelectedValues: updateSelectedValues, onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur })), contentProps: { className: classes.popover }, minWidth: optionPanelProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: optionPanelProps?.allowedPlacements, renderContent: () => (_jsxs("div", { ref: optionPanelRef, className: cx(classes.optionPanel, 'mfui-MultipleSelectBox__optionPanel', optionPanelProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: [enableSearchOptions || enableAllOptionsControls ? (_jsx(VStack, { className: cx(classes.menuHeader, 'mfui-MultipleSelectBox__menuHeader'), gap: "8px", children: renderPopoverHeader ? (renderPopoverHeader({ searchNode, allOptionsControlsNode })) : (_jsxs(_Fragment, { children: [searchNode, allOptionsControlsNode] })) })) : null, renderOptionList ? (renderOptionList({ optionsNode, createOptionAreaNode })) : (_jsxs(_Fragment, { children: [optionsNode, createOptionAreaNode] })), enableApplyControls || showSelectedCount ? (_jsx(HStack, { className: cx(classes.menuFooter, 'mfui-MultipleSelectBox__menuFooter'), justifyContent: "space-between", alignItems: "center", children: renderPopoverFooter ? (renderPopoverFooter({ selectedCountNode, applyControlsNode })) : (_jsxs(_Fragment, { children: [selectedCountNode, applyControlsNode] })) })) : null] })), open: isOptionPanelOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: toggleOptionPanel, onBlur: onBlur }));
 }

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

@@ -164,6 +164,29 @@ export type ApplyButtonProps = {
      */
     label?: string;
 };
+/**
+ * Properties for the "Create Option" feature
+ */
+export type CreateOptionProps = {
+    /**
+     * Custom render function for the create button label.
+     * Receives the current search text and should return a React node.
+     *
+     * @param searchText - The current trimmed search text
+     *
+     * @default (searchText) => <><strong>{searchText}</strong>を追加</>
+     */
+    renderLabel?: (searchText: string) => React.ReactNode;
+    /**
+     * Custom render function for the error message when creation fails.
+     * Receives the search text that was being created.
+     *
+     * @param searchText - The trimmed search text that failed to be created
+     *
+     * @default (searchText) => `${searchText}を追加できませんでした。`
+     */
+    renderErrorMessage?: (searchText: string) => React.ReactNode;
+};
 export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>> = {
     /**
      * The selectable options for the list
@@ -327,9 +350,10 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
      * @example
      * ```tsx
      * <MultipleSelectBox
-     *   renderOptionList={({ optionsNode }) => (
+     *   renderOptionList={({ optionsNode, createOptionAreaNode }) => (
      *     <>
      *       {optionsNode}
+     *       {createOptionAreaNode}
      *       <div>Custom content below the list</div>
      *     </>
      *   )}
@@ -338,6 +362,7 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
      */
     renderOptionList?: (nodes: {
         optionsNode: React.ReactNode;
+        createOptionAreaNode: React.ReactNode;
     }) => React.ReactNode;
     /**
      * Customize the popover footer content.
@@ -505,5 +530,39 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
      * ```
      */
     infiniteScroll?: InfiniteScrollConfig;
+    /**
+     * Whether to enable the "Create New Option" feature.
+     * When enabled, a create button appears below the option list when the search text
+     * does not exactly match any existing option.
+     *
+     * Requires `enableSearchOptions` to be `true` to function.
+     *
+     * @default false
+     */
+    enableCreateOption?: boolean;
+    /**
+     * Callback invoked when the user clicks the create button.
+     * The parent is responsible for adding the new option to the `options` list.
+     * If this callback throws or returns a rejected promise, an error message is displayed.
+     *
+     * @param text - The trimmed search text to create as a new option
+     *
+     * @example
+     * ```tsx
+     * <MultipleSelectBox
+     *   enableSearchOptions
+     *   enableCreateOption
+     *   onCreateOption={async (text) => {
+     *     await api.createOption(text);
+     *     setOptions(prev => [...prev, { label: text, value: text }]);
+     *   }}
+     * />
+     * ```
+     */
+    onCreateOption?: (text: string) => Promise<void> | void;
+    /**
+     * Properties for customizing the "Create Option" button and error message.
+     */
+    createOptionProps?: CreateOptionProps;
 } & Pick<MultipleSelectBoxTriggerProps<T, AdditionalProps>, keyof PassedProps<T, AdditionalProps>>;
 export { type InfiniteScrollDirection } from '../utilities/dom/useInfiniteScroll';

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

@@ -33,7 +33,7 @@ placeholder, renderDisplayValue, updateSelectedValues, clearButtonProps, disable
             return (_jsx(Typography, { variant: textVariant, className: cx(classes.placeholder, 'mfui-MultipleSelectBoxTrigger__placeholder'), "data-mfui-content": "multiple-select-box-trigger-placeholder", children: placeholder }));
         }
         if (showDisplayValueAsTag) {
-            return (_jsx("div", { className: cx(classes.tagList, 'mfui-MultipleSelectBoxTrigger__tagList'), "data-mfui-content": "multiple-select-box-trigger-selected-options", children: selectedOptions.map((option, index) => (_jsx(Tag, { className: cx(classes.tagItem, 'mfui-MultipleSelectBoxTrigger__tagItem'), label: option.label, onClose: (event) => {
+            return (_jsx("div", { className: cx(classes.tagList, 'mfui-MultipleSelectBoxTrigger__tagList'), "data-mfui-content": "multiple-select-box-trigger-selected-options", children: selectedOptions.map((option, index) => (_jsx(Tag, { className: cx(classes.tagItem, 'mfui-MultipleSelectBoxTrigger__tagItem'), label: option.label, disabled: disabled, onClose: (event) => {
                         event.stopPropagation();
                         onDeselectTag(option.value);
                     } }, option.value ?? `tag-${option.label}-${String(index)}`))) }));

package/dist/src/MultipleSelectBox/hooks/useApplyControls.d.ts

@@ -23,6 +23,7 @@ type UseApplyControlsProps<T extends AllowedValueTypes = string, AdditionalProps
 export declare function useApplyControls<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>({ options, onValuesChange, closeOptionPanel }: UseApplyControlsProps<T, AdditionalProps>): {
     temporaryValues: Set<MultipleSelectBoxOption<T, AdditionalProps>["value"]>;
     updateTemporaryValues: (values: MultipleSelectBoxOption<T, AdditionalProps>["value"][]) => void;
+    openWithSelectedOptions: (selectedOptions: MultipleSelectBoxOption<T, AdditionalProps>[]) => void;
     initializeTemporaryValues: () => void;
     handleCancelButtonClick: () => void;
     handleApplyButtonClick: () => void;

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

@@ -33,6 +33,21 @@ export function useApplyControls({ options, onValuesChange, closeOptionPanel })
             return newMap;
         });
     }, [options]);
+    // Initialize temporary state from full option objects when the panel opens.
+    // This must receive full option objects (not just value keys) so that previously-applied
+    // options are preserved even when they are not in the currently-visible filtered list.
+    const openWithSelectedOptions = useCallback((selectedOptions) => {
+        const newMap = new Map();
+        const newValues = new Set();
+        for (const option of selectedOptions) {
+            if (option.value != null) {
+                newMap.set(option.value, option);
+                newValues.add(option.value);
+            }
+        }
+        setTemporaryValues(newValues);
+        setTemporaryOptionsMap(newMap);
+    }, []);
     // Initialize temporary selection state (called when the panel closes without applying)
     const initializeTemporaryValues = useCallback(() => {
         setTemporaryValues(new Set());
@@ -52,6 +67,7 @@ export function useApplyControls({ options, onValuesChange, closeOptionPanel })
     return {
         temporaryValues,
         updateTemporaryValues,
+        openWithSelectedOptions,
         initializeTemporaryValues,
         handleCancelButtonClick,
         handleApplyButtonClick,

package/dist/src/MultipleSelectBox/hooks/useCreateOption.d.ts

@@ -0,0 +1,23 @@
+import { type MultipleSelectBoxOption, type AllowedValueTypes } from '../MultipleSelectBox.types';
+type UseCreateOptionProps<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>> = {
+    enableCreateOption: boolean;
+    enableSearchOptions: boolean;
+    searchText: string;
+    filteredOptions: MultipleSelectBoxOption<T, AdditionalProps>[];
+    onCreateOption?: (text: string) => Promise<void> | void;
+};
+type UseCreateOptionReturn = {
+    isCreateOptionVisible: boolean;
+    isCreating: boolean;
+    createError: boolean;
+    handleCreateOption: () => void;
+};
+/**
+ * Custom hook to manage the "Create New Option" feature for MultipleSelectBox.
+ *
+ * Handles visibility logic (shown only when search text has no exact match),
+ * loading state while the async callback is in flight, and error state when
+ * the callback rejects.
+ */
+export declare const useCreateOption: <T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>({ enableCreateOption, enableSearchOptions, searchText, filteredOptions, onCreateOption, }: UseCreateOptionProps<T, AdditionalProps>) => UseCreateOptionReturn;
+export {};

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

@@ -0,0 +1,53 @@
+'use client';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { isSelectableOption } from '../utils/isSelectableOption';
+/**
+ * Custom hook to manage the "Create New Option" feature for MultipleSelectBox.
+ *
+ * Handles visibility logic (shown only when search text has no exact match),
+ * loading state while the async callback is in flight, and error state when
+ * the callback rejects.
+ */
+export const useCreateOption = ({ enableCreateOption, enableSearchOptions, searchText, filteredOptions, onCreateOption, }) => {
+    const [isCreating, setIsCreating] = useState(false);
+    const [createError, setCreateError] = useState(false);
+    const trimmedSearchText = searchText.trim();
+    const isCreateOptionVisible = useMemo(() => {
+        if (!enableCreateOption || !enableSearchOptions)
+            return false;
+        if (!trimmedSearchText)
+            return false;
+        const exactMatchExists = filteredOptions.some((option) => isSelectableOption(option) && option.label === trimmedSearchText);
+        return !exactMatchExists;
+    }, [enableCreateOption, enableSearchOptions, trimmedSearchText, filteredOptions]);
+    // Clear error state when search text changes
+    useEffect(() => {
+        setCreateError(false);
+    }, [searchText]);
+    const doCreate = useCallback(async () => {
+        try {
+            await onCreateOption?.(trimmedSearchText);
+        }
+        catch {
+            setCreateError(true);
+        }
+        finally {
+            setIsCreating(false);
+        }
+    }, [onCreateOption, trimmedSearchText]);
+    const handleCreateOption = useCallback(() => {
+        if (!onCreateOption || isCreating)
+            return;
+        setCreateError(false);
+        setIsCreating(true);
+        doCreate().catch(() => {
+            // Error handling is done within doCreate
+        });
+    }, [onCreateOption, isCreating, doCreate]);
+    return {
+        isCreateOptionVisible,
+        isCreating,
+        createError,
+        handleCreateOption,
+    };
+};

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

@@ -1,2 +1,2 @@
 export { MultipleSelectBox } from './MultipleSelectBox';
-export type { MultipleSelectBoxProps, MultipleSelectBoxOption, InfiniteScrollDirection, } from './MultipleSelectBox.types';
+export type { MultipleSelectBoxProps, MultipleSelectBoxOption, CreateOptionProps, InfiniteScrollDirection, } from './MultipleSelectBox.types';

package/dist/src/SidePane/SidePane.d.ts

@@ -17,6 +17,9 @@ export declare const SidePane: import("react").ForwardRefExoticComponent<{
     enableModal?: boolean;
     disableBackdropClose?: boolean;
     enableAutoUnmount?: boolean;
+    formFooterProps?: Pick<import("..").FormFooterProps, "optionsSlot" | "actionsSlot"> & {
+        position?: Exclude<import("..").FormFooterProps["position"], "fixed">;
+    };
     insideProps?: {
         className?: string;
     };

package/dist/src/SidePane/SidePane.js

@@ -10,13 +10,14 @@ import { useSidePaneStateController } from './hooks/useSidePaneStateController';
 import { useFocusTrap } from '../utilities/dom/useFocusTrap';
 import { compatibleForwardRef } from '../utilities/react/compatibleForwardRef';
 import { Portal, TargetDomNodeProvider, useAutomaticTargetDomNode } from '../Portal';
+import { FormFooter } from '../FormFooter';
 /**
  * The general purpose SidePane component.
  * This component extends the props of `<div>` element with `role="dialog"`.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
  */
-export const SidePane = compatibleForwardRef(({ open, title, renderHeading, onClose, className, children, actionSlot, position = 'right', enableModal = false, enableAutoUnmount = true, disableBackdropClose = false, closeButtonProps, targetDOMNode, insideProps, ...props }, ref) => {
+export const SidePane = compatibleForwardRef(({ open, title, renderHeading, onClose, className, children, actionSlot, formFooterProps, position = 'right', enableModal = false, enableAutoUnmount = true, disableBackdropClose = false, closeButtonProps, targetDOMNode, insideProps, ...props }, ref) => {
     const classes = sidePaneSlotRecipe({ position, nonModal: !enableModal });
     const { localOpen, handleCloseSidePane, handleStopCloseSidePane, sidePaneElement, setSidePaneElement } = useSidePaneStateController({
         open,
@@ -53,9 +54,10 @@ export const SidePane = compatibleForwardRef(({ open, title, renderHeading, onCl
     }, [closeButtonProps?.isCollapseIcon, position]);
     const targetElement = useAutomaticTargetDomNode(targetDOMNode, sidePaneElement);
     const shouldRenderContent = enableAutoUnmount ? localOpen : true;
+    const resolvedFormFooterPosition = formFooterProps?.position ?? 'sticky';
     const headingNode = title ? (_jsx(Heading, { variant: "pageHeading2", tag: "h2", children: title })) : null;
     return (_jsx(TargetDomNodeProvider, { targetDomNode: sidePaneElement, children: shouldRenderContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setSidePaneElement, role: "dialog", ...props, className: cx(classes.root, 'mfui-SidePane__root', className), tabIndex: -1, style: {
                     ...props.style,
                     ...(!enableAutoUnmount && !localOpen && { display: 'none' }),
-                }, onKeyDown: handleOnKeyDown, children: [enableModal ? (_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-SidePane__backdrop'), onClick: handleBackdropClick })) : null, _jsxs("div", { "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [_jsxs("header", { className: cx(classes.header, 'mfui-SidePane__header'), children: [renderHeading ? (renderHeading({ headingNode })) : (_jsx("div", { className: cx(classes.title, 'mfui-SidePane__title'), children: headingNode })), _jsxs("div", { className: cx(classes.actionSlotWrapper, 'mfui-SidePane__actionSlotWrapper'), children: [!!actionSlot && (_jsx("div", { className: cx(classes.actionSlot, 'mfui-SidePane__actionSlot'), children: actionSlot })), _jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-SidePane__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: handleCloseSidePane, children: closeButtonIcon }) })] })] }), _jsx("main", { className: cx(classes.content, 'mfui-SidePane__content'), children: children })] })] }) })) : null }));
+                }, onKeyDown: handleOnKeyDown, children: [enableModal ? (_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-SidePane__backdrop'), onClick: handleBackdropClick })) : null, _jsxs("div", { "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [_jsxs("header", { className: cx(classes.header, 'mfui-SidePane__header'), children: [renderHeading ? (renderHeading({ headingNode })) : (_jsx("div", { className: cx(classes.title, 'mfui-SidePane__title'), children: headingNode })), _jsxs("div", { className: cx(classes.actionSlotWrapper, 'mfui-SidePane__actionSlotWrapper'), children: [!!actionSlot && (_jsx("div", { className: cx(classes.actionSlot, 'mfui-SidePane__actionSlot'), children: actionSlot })), _jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-SidePane__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: handleCloseSidePane, children: closeButtonIcon }) })] })] }), _jsxs("main", { className: cx(classes.content, 'mfui-SidePane__content'), children: [_jsx("div", { className: cx(classes.contentBody, 'mfui-SidePane__contentBody'), children: children }), resolvedFormFooterPosition === 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] }), formFooterProps && resolvedFormFooterPosition !== 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] })] }) })) : null }));
 });

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

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import { type SidePaneSlotRecipeVariant } from '../../styled-system/recipes';
+import { type FormFooterProps } from '../FormFooter';
 export type OnCloseFunction = () => void;
 export type SidePaneRenderOptions = {
     /**
@@ -109,6 +110,19 @@ export type SidePaneProps = {
      * @default true
      */
     enableAutoUnmount?: boolean;
+    /**
+     * Props to render a `FormFooter` inside the SidePane.
+     *
+     * - `position: 'sticky'` (default): the footer is always pinned to the pane bottom, outside the scrollable content area.
+     * - `position: 'stacking'`: the footer flows after the content inside the scroll area.
+     *
+     * `position: 'fixed'` is not supported here because it anchors to the viewport rather than the pane.
+     *
+     * @default undefined
+     */
+    formFooterProps?: Pick<FormFooterProps, 'optionsSlot' | 'actionsSlot'> & {
+        position?: Exclude<FormFooterProps['position'], 'fixed'>;
+    };
     /**
      * Additional props to apply to the inside container element of the SidePane.
      * This element wraps the header and content sections.

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

@@ -2,4 +2,4 @@ import { type SubNavigationProps } from './SubNavigation.types';
 /**
  * This component is for the navigation links under the main navigation.
  */
-export declare function SubNavigation({ orientation, navigationItems, customLinkComponent, className, }: SubNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubNavigation({ orientation, navigationItems, customLinkComponent, renderNavigationLabel, headerSlot, className, }: SubNavigationProps): import("react/jsx-runtime").JSX.Element;