@moneyforward/mfui-components 2.48.1 → 3.0.0

package/README.md

@@ -1,4 +1,4 @@
-# <img src="./logo_with_isolation.svg" alt="Money Forward UI"/>
+# <img src="https://unpkg.com/@moneyforward/mfui-components/logo_with_isolation.svg" alt="Money Forward UI"/>
 
 # MFUI Components
 
@@ -28,10 +28,6 @@ For detailed setup instructions with Tailwind CSS (v3 and v4), see the [Tailwind
 
 ## Installation
 
-### 0. Set Up Access Token
-
-Before installing this package, read [How to Set Up Access Token](https://github.com/moneyforward/mfui/blob/main/docs/usage/set-up-access-token.md) and set up the access token on your local and your CI/CD pipeline.
-
 ### 1. Install the Package
 
 Run the following command to install the package:
@@ -146,15 +142,6 @@ Experimental features can be identified through:
 - An "Experimental" tag in Storybook
 - "Experimental" annotations in JSDoc
 
-### Providing Feedback
-
-You can provide feedback on experimental features through:
-
-- [GitHub Issues](https://github.com/moneyforward/mfui/issues) for bug reports and feature requests
-- [GitHub Discussions](https://github.com/moneyforward/mfui/discussions) for questions and ideas
-
-Your feedback will be used to improve features before their official release.
-
 ---
 
 All company names, product and service names, and logos are trademarks or registered trademarks of their respective owners.

package/dist/{cjs/src → src}/Accordion/Accordion.d.ts

@@ -9,8 +9,6 @@ declare function AccordionItem({ children, id, enableAutoUnmount }: AccordionIte
  * This component should be used as a wrapper for all Accordion composition components.
  * The composition components are provided as sub-components of Accordion.
  *
- * **EXPERIMENTAL**: This component is experimental and may be changed or removed in the future.
- *
  * You can use them as follows:
  *
  * @example

package/dist/{esm/src → src}/Accordion/Accordion.js

@@ -85,8 +85,6 @@ const AccordionTarget = forwardRef(({ children, className, style, ...props }, re
  * This component should be used as a wrapper for all Accordion composition components.
  * The composition components are provided as sub-components of Accordion.
  *
- * **EXPERIMENTAL**: This component is experimental and may be changed or removed in the future.
- *
  * You can use them as follows:
  *
  * @example

package/dist/{esm/src → src}/CheckboxCard/CheckboxCard.d.ts

@@ -12,4 +12,4 @@ export declare const CheckboxCard: import("react").ForwardRefExoticComponent<{
     label: string;
     renderDetailsSlot?: CheckboxCardResponsiveSlot | import("./CheckboxCard.types").CheckboxCardRenderDetailsSlot;
     disableResponsive?: import("../../styled-system/recipes").CheckboxCardSlotRecipeVariant["disableResponsive"];
-} & Omit<import("../Checkbox").CheckboxProps, "label"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<import("..").CheckboxProps, "label"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/{esm/src → src}/DateTimeSelection/DateRangePicker/DateRangePickerTrigger/DateRangePickerTrigger.js

@@ -8,7 +8,7 @@ import { FocusIndicator } from '../../../FocusIndicator';
 import { InternalIconButton as IconButton } from '../../../IconButton/IconButton';
 import { Typography } from '../../../Typography';
 import { LOCALE, SEPARATOR_CONTENT } from './constants';
-import { dateRangePickerTriggerSlotRecipe } from '../../../../styled-system/recipes';
+import { baseRangePickerTriggerSlotRecipe } from '../../../../styled-system/recipes';
 import { useDateRangeTriggerValueController } from './hooks/useDateRangeTriggerValueController';
 import { useDateRangePickerContext } from '../DateRangePickerProvider';
 import { useDateRangeTriggerInputClick } from './hooks/useDateRangeTriggerInputClick';
@@ -35,7 +35,7 @@ export const DateRangePickerTrigger = forwardRef(({ enableClearValue = false, in
     const { placeholder: startPlaceholder = LOCALE.START_DATE_PLACEHOLDER } = startInputProps;
     const { placeholder: endPlaceholder = LOCALE.END_DATE_PLACEHOLDER } = endInputProps;
     const shouldShowClearButton = enableClearValue && (enhancedStartInputProps.value || enhancedEndInputProps.value);
-    const classes = dateRangePickerTriggerSlotRecipe({ invalid, disabled, size });
+    const classes = baseRangePickerTriggerSlotRecipe({ invalid, disabled, size });
     const handleClickClearButton = useCallback((event) => {
         handleClear();
         onClickClearButton?.(event);

package/dist/{cjs/src → src}/DateTimeSelection/shared/BasePicker/BasePicker.d.ts

@@ -4,4 +4,4 @@ import { type BasePickerProps } from './BasePicker.types';
  * This component uses the composition component of the TextBox component. Please refer to the TextBox documentation for their usage.
  * This component extends the props of TextBox component.
  */
-export declare function BasePicker({ targetDOMNode, enableAutoUnmount, open, onOpenChange, onOpenStateChanged, disableAutoOpen, format, baseFormat, customFormatValue, value, defaultValue, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, calendarLocale, disabled, ...textBoxProps }: BasePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function BasePicker({ targetDOMNode, enableAutoUnmount, open, onOpenStateChanged, disableAutoOpen, format, baseFormat, customFormatValue, value, defaultValue, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, calendarLocale, disabled, ...textBoxProps }: BasePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/{esm/src → src}/DateTimeSelection/shared/BasePicker/BasePicker.js

@@ -18,16 +18,13 @@ import { getBasePickerLabel } from './constants';
  * This component uses the composition component of the TextBox component. Please refer to the TextBox documentation for their usage.
  * This component extends the props of TextBox component.
  */
-export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = false, 
-// We keep deprecated until we release the next major version
-// eslint-disable-next-line @typescript-eslint/no-deprecated
-onOpenChange, onOpenStateChanged, disableAutoOpen = false, format = 'YYYY/MM/DD', baseFormat = 'YYYY-MM-DD', customFormatValue, value, defaultValue, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, calendarLocale = 'ja', disabled, ...textBoxProps }) {
+export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = false, onOpenStateChanged, disableAutoOpen = false, format = 'YYYY/MM/DD', baseFormat = 'YYYY-MM-DD', customFormatValue, value, defaultValue, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, calendarLocale = 'ja', disabled, ...textBoxProps }) {
     const textBoxRef = useRef(null);
     const basePickerPopoverWrapperRef = useRef(null);
     const triggerRef = useRef(null);
     const { isBasePickerOpen, onPickerPopoverChange, onPickerPopoverWrapperKeyDown, toggleBasePicker } = useBasePickerDisplayController({
         open,
-        onOpenStateChanged: onOpenStateChanged ?? onOpenChange,
+        onOpenStateChanged,
         textBoxRef,
     });
     const { inputProps: inputValueProps, pickerPopoverProps } = useBasePickerValueController({

package/dist/{cjs/src → src}/DateTimeSelection/shared/BasePicker/BasePicker.types.d.ts

@@ -23,16 +23,6 @@ export type BasePickerProps = {
      * @default false
      */
     open?: boolean;
-    /**
-     * Callback when the picker popover is open or closed.
-     *
-     * @param open - Whether the picker popover is open or not.
-     *
-     * @default undefined
-     *
-     * @deprecated Please use `onOpenStateChanged` instead.
-     */
-    onOpenChange?: (open: boolean) => void;
     /**
      * Callback when the picker popover is opened or closed.
      *

package/dist/{esm/src → src}/DateTimeSelection/shared/BasePicker/YearSelector/YearSelector.js

@@ -5,15 +5,18 @@ import { yearSelectorSlotRecipe } from '../../../../../styled-system/recipes';
 import { MAXIMUM_VIEWABLE_YEAR, MINIMUM_VIEWABLE_YEAR } from '../constants';
 import { cx } from '../../../../../styled-system/css';
 export function YearSelector({ value, onChange, targetDOMNode }) {
-    const internalValue = useMemo(() => (value ?? new Date()).getFullYear().toString(), [value]);
+    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 handleChange = useCallback((value) => {
-        onChange(Number(value));
+    const selectedOption = useMemo(() => options.find((o) => o.value === internalYearString), [options, internalYearString]);
+    const handleChange = useCallback((option) => {
+        if (option) {
+            onChange(Number(option.value));
+        }
     }, [onChange]);
     const classes = yearSelectorSlotRecipe();
-    return (_jsx(SelectBox, { value: internalValue, options: options, size: "small", targetDOMNode: targetDOMNode, enableAutoScrollToSelectedOption: { block: 'center', behavior: 'instant' }, popoverContentProps: { className: cx(classes.optionPanel, 'mfui-YearSelector__optionPanel') }, onChange: handleChange }));
+    return (_jsx(SelectBox, { value: selectedOption, options: options, size: "small", targetDOMNode: targetDOMNode, enableAutoScrollToSelectedOption: { block: 'center', behavior: 'instant' }, popoverContentProps: { className: cx(classes.optionPanel, 'mfui-YearSelector__optionPanel') }, onChange: handleChange }));
 }

package/dist/{esm/src → src}/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/BaseRangePickerTrigger.js

@@ -9,7 +9,7 @@ import { InternalIconButton as IconButton } from '../../../../IconButton/IconBut
 import { Typography } from '../../../../Typography';
 import { useIsTouchDevice } from '../../../../utilities/dom/useIsTouchDevice';
 import { getBaseRangePickerTriggerLabel, SEPARATOR_CONTENT } from './constants';
-import { dateRangePickerTriggerSlotRecipe } from '../../../../../styled-system/recipes';
+import { baseRangePickerTriggerSlotRecipe } from '../../../../../styled-system/recipes';
 import { useDateRangeTriggerValueController } from './hooks/useDateRangeTriggerValueController';
 import { useBaseRangePickerContext } from '../BaseRangePickerProvider';
 import { useDateRangeTriggerInputClick } from './hooks/useDateRangeTriggerInputClick';
@@ -40,7 +40,7 @@ export const BaseRangePickerTrigger = forwardRef(({ enableClearValue = false, in
     const finalStartPlaceholder = startInputPlaceholder ?? getBaseRangePickerTriggerLabel('START_DATE_PLACEHOLDER', calendarLocale);
     const finalEndPlaceholder = endInputPlaceholder ?? getBaseRangePickerTriggerLabel('END_DATE_PLACEHOLDER', calendarLocale);
     const shouldShowClearButton = enableClearValue && (enhancedStartInputProps.value || enhancedEndInputProps.value);
-    const classes = dateRangePickerTriggerSlotRecipe({ invalid, disabled, size });
+    const classes = baseRangePickerTriggerSlotRecipe({ invalid, disabled, size });
     const handleClickClearButton = useCallback((event) => {
         handleClear();
         onClickClearButton?.(event);

package/dist/{esm/src → src}/DateTimeSelection/shared/YearSelector/YearSelector.js

@@ -7,14 +7,17 @@ import { cx } from '../../../../styled-system/css';
 import { useCalendarLocale } from '../CalendarLocale/CalendarLocaleContext';
 export function YearSelector({ value, onChange, triggerProps, triggerWrapperProps, targetDOMNode }) {
     const calendarLocale = useCalendarLocale();
-    const internalValue = useMemo(() => (value ?? new Date()).getFullYear().toString(), [value]);
+    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 handleChange = useCallback((value) => {
-        onChange(Number(value));
+    const selectedOption = useMemo(() => options.find((o) => o.value === internalYearString), [options, internalYearString]);
+    const handleChange = useCallback((option) => {
+        if (option) {
+            onChange(Number(option.value));
+        }
     }, [onChange]);
     const classes = yearSelectorSlotRecipe();
-    return (_jsx(SelectBox, { value: internalValue, options: options, size: "small", targetDOMNode: targetDOMNode, enableAutoScrollToSelectedOption: { block: 'center', behavior: 'instant' }, popoverContentProps: { className: cx(classes.optionPanel, 'mfui-YearSelector__optionPanel') }, triggerProps: triggerProps, triggerWrapperProps: triggerWrapperProps, onChange: handleChange }));
+    return (_jsx(SelectBox, { value: selectedOption, options: options, size: "small", targetDOMNode: targetDOMNode, enableAutoScrollToSelectedOption: { block: 'center', behavior: 'instant' }, popoverContentProps: { className: cx(classes.optionPanel, 'mfui-YearSelector__optionPanel') }, triggerProps: triggerProps, triggerWrapperProps: triggerWrapperProps, onChange: handleChange }));
 }

package/dist/{cjs/src → src}/FileBox/FileBox.d.ts

@@ -13,5 +13,5 @@ export declare const FileBox: import("react").ForwardRefExoticComponent<{
     buttonLabel?: string;
     placeholder?: string;
     multipleFilesSuffixLabel?: string;
-    clearButtonProps?: Pick<import("../IconButton").IconButtonProps, "aria-label">;
+    clearButtonProps?: Pick<import("..").IconButtonProps, "aria-label">;
 } & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/{cjs/src → src}/FileDropZone/FileDropZone.d.ts

@@ -32,7 +32,7 @@ export declare const FileDropZone: import("react").ForwardRefExoticComponent<{
     disabled?: boolean;
     multiple?: import("react").ComponentPropsWithoutRef<"input">["multiple"];
     accept?: import("react").ComponentPropsWithoutRef<"input">["accept"];
-    clearButtonProps?: Pick<import("../IconButton").IconButtonProps, "aria-label">;
+    clearButtonProps?: Pick<import("..").IconButtonProps, "aria-label">;
     errorMessage?: string;
     helperMessage?: string;
     illustrationUrl?: string;

package/dist/{cjs/src → src}/HelpMessage/HelpMessage.d.ts

@@ -9,5 +9,5 @@
 export declare const HelpMessage: import("react").ForwardRefExoticComponent<{
     messageType?: import("../../styled-system/recipes").HelpMessageRecipeVariant["messageType"];
     messageAlign?: "left" | "center";
-    children?: import("../Typography").TypographyProps["children"];
+    children?: import("..").TypographyProps["children"];
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/{cjs/src → src}/MainNavigation/MainNavigation.d.ts

@@ -5,7 +5,5 @@ import { type MainNavigationProps, type MainNavigationRef } from './MainNavigati
  *
  * When the viewport is narrow, the navigation will be displayed as a drawer.
  * When the viewport is not narrow, the navigation will be displayed as a sidebar.
- *
- * **⚠️ EXPERIMENTAL FEATURE**: The functionality, *nested navigation items appear in a popover on click when collapsed*, is experimental and may be changed or removed in the future.
  */
 export declare const MainNavigation: import("react").ForwardRefExoticComponent<MainNavigationProps & import("react").RefAttributes<MainNavigationRef>>;

package/dist/{esm/src → src}/MainNavigation/MainNavigation.js

@@ -8,8 +8,6 @@ import { NarrowViewportMainNavigation } from './NarrowViewportMainNavigation';
  *
  * When the viewport is narrow, the navigation will be displayed as a drawer.
  * When the viewport is not narrow, the navigation will be displayed as a sidebar.
- *
- * **⚠️ EXPERIMENTAL FEATURE**: The functionality, *nested navigation items appear in a popover on click when collapsed*, is experimental and may be changed or removed in the future.
  */
 export const MainNavigation = forwardRef(({ className, featureShortcut, navigationItems, disableResponsive = false, width = 'normal', customLinkComponent, enableCollapsible, isCollapsed, onCollapsedChange, }, ref) => {
     const commonProps = {

package/dist/{esm/src → src}/MainNavigation/MainNavigation.types.d.ts

@@ -163,16 +163,12 @@ export type MainNavigationProps = {
      * The collapsed state of the navigation (controlled).
      * When this prop is provided, the component behaves as a controlled component.
      * This prop is only effective when `enableCollapsible` is `true`.
-     *
-     * **EXPERIMENTAL**: This property is experimental and may be changed or removed in the future.
      */
     isCollapsed?: boolean;
     /**
      * Callback function called when the collapsed state changes.
      * This is triggered when the toggle button is clicked.
      * This callback is only called when `enableCollapsible` is `true`.
-     *
-     * **EXPERIMENTAL**: This property is experimental and may be changed or removed in the future.
      */
     onCollapsedChange?: (isCollapsed: boolean) => void;
 };

package/dist/{esm/src → src}/MultipleSelectBox/MultipleSelectBox.js

@@ -30,7 +30,9 @@ const SKELETON_ITEM_COUNT = 4;
  * 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 function MultipleSelectBox({ id, triggerProps, triggerWrapperProps, size, options = [], defaultValue, placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, value, showDisplayValueAsTag, renderDisplayValue, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, clearButtonProps, disableClearButton = false, optionPanelProps, enableAllOptionsControls = false, enableApplyControls = false, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, onOpenStateChanged, enableAutoUnmount = true, onBlur, showGroupOptionDivider, enableVirtualization = false, virtualizationOptions, }) {
+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, enableAllOptionsControls = false, enableApplyControls = false, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, onOpenStateChanged, enableAutoUnmount = true, onBlur, showGroupOptionDivider, enableVirtualization = false, virtualizationOptions, }) {
     const classes = multipleSelectBoxSlotRecipe({ showGroupOptionDivider });
     const triggerRef = useRef(null);
     const listBoxId = useId();
@@ -260,7 +262,9 @@ export function MultipleSelectBox({ id, triggerProps, triggerWrapperProps, size,
         handleOptionFocus,
         tabbableOptionIndex,
     ]);
-    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, 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, allowedPlacements: optionPanelProps?.allowedPlacements, renderContent: () => (_jsxs("div", { ref: optionPanelRef, className: cx(classes.optionPanel, 'mfui-MultipleSelectBox__optionPanel', optionPanelProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: [enableSearchOptions || enableAllOptionsControls ? (_jsxs(VStack, { className: cx(classes.menuHeader, 'mfui-MultipleSelectBox__menuHeader'), gap: "8px", children: [enableSearchOptions ? (_jsx(SearchBox, { ref: searchInputRef, enableClearButton: true, value: searchText, textBoxSize: "small", autoComplete: "off", onChange: onSearchTextChange, ...searchBoxProps })) : null, enableAllOptionsControls ? (_jsxs(HStack, { justifyContent: "space-between", children: [_jsx(Button, { ref: selectAllButtonRef, size: "small", onClick: handleSelectAll, children: selectAllButtonProps?.label ?? 'すべて選択' }), _jsx(Button, { ref: clearAllButtonRef, size: "small", onClick: handleClearAll, children: clearAllButtonProps?.label ?? 'すべて解除' })] })) : null] })) : null, _jsx("ul", { ref: listBoxRef, role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-MultipleSelectBox__listBox'), tabIndex: -1, style: isVirtualized && totalSize > 0
+    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, allowedPlacements: optionPanelProps?.allowedPlacements, renderContent: () => (_jsxs("div", { ref: optionPanelRef, className: cx(classes.optionPanel, 'mfui-MultipleSelectBox__optionPanel', optionPanelProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: [enableSearchOptions || enableAllOptionsControls ? (_jsxs(VStack, { className: cx(classes.menuHeader, 'mfui-MultipleSelectBox__menuHeader'), gap: "8px", children: [enableSearchOptions ? (_jsx(SearchBox, { ref: searchInputRef, enableClearButton: true, value: searchText, textBoxSize: "small", autoComplete: "off", onChange: onSearchTextChange, ...searchBoxProps })) : null, enableAllOptionsControls ? (_jsxs(HStack, { justifyContent: "space-between", children: [_jsx(Button, { ref: selectAllButtonRef, size: "small", onClick: handleSelectAll, children: selectAllButtonProps?.label ?? 'すべて選択' }), _jsx(Button, { ref: clearAllButtonRef, size: "small", onClick: handleClearAll, children: clearAllButtonProps?.label ?? 'すべて解除' })] })) : null] })) : null, _jsx("ul", { ref: listBoxRef, role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-MultipleSelectBox__listBox'), tabIndex: -1, style: isVirtualized && totalSize > 0
                         ? {
                             height: `${String(totalSize)}px`,
                             position: 'relative',
@@ -271,5 +275,5 @@ export function MultipleSelectBox({ id, triggerProps, triggerWrapperProps, size,
                                 ? notFoundMessage
                                 : options.length > 0
                                     ? notFoundMessage
-                                    : emptyMessage }) })) }), enableApplyControls ? (_jsxs(HStack, { className: cx(classes.menuFooter, 'mfui-MultipleSelectBox__menuFooter'), justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { variant: "body", color: "neutral.600", children: selectedCountProps?.render?.(temporaryValues.size) ?? `${String(temporaryValues.size)}件選択中` }), _jsxs(HStack, { gap: "inline.horizontal", children: [_jsx(Button, { ref: cancelButtonRef, size: "small", priority: "secondary", onClick: handleCancelButtonClick, children: cancelButtonProps?.label ?? 'キャンセル' }), _jsx(Button, { ref: applyButtonRef, size: "small", priority: "primary", onClick: handleApplyButtonClick, children: applyButtonProps?.label ?? '適用' })] })] })) : null] })), open: isOptionPanelOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: toggleOptionPanel, onBlur: onBlur }));
+                                    : emptyMessage }) })) }), enableApplyControls ? (_jsxs(HStack, { className: cx(classes.menuFooter, 'mfui-MultipleSelectBox__menuFooter'), justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { variant: "body", color: "neutral.600", children: selectedCountProps?.render?.(temporaryValues.size) ?? `${String(temporaryValues.size)}件選択中` }), _jsxs(HStack, { gap: "horizontal.0-1of2", children: [_jsx(Button, { ref: cancelButtonRef, size: "small", priority: "secondary", onClick: handleCancelButtonClick, children: cancelButtonProps?.label ?? 'キャンセル' }), _jsx(Button, { ref: applyButtonRef, size: "small", priority: "primary", onClick: handleApplyButtonClick, children: applyButtonProps?.label ?? '適用' })] })] })) : null] })), open: isOptionPanelOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: toggleOptionPanel, onBlur: onBlur }));
 }

package/dist/{cjs/src → src}/MultipleSelectBox/MultipleSelectBox.types.d.ts

@@ -128,21 +128,19 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
      * Pass the initial selected option values.
      * Use this prop when you want an uncontrolled component.
      *
-     * Can be either:
-     * - An array of primitive values (string/number) that match options' values
-     * - An array of MultipleSelectBoxOption objects with both label and value (useful for async scenarios)
+     * Pass an array of MultipleSelectBoxOption objects with both label and value.
+     * This is especially useful for async scenarios where options may not be in the current options list.
      */
-    defaultValue?: MultipleSelectBoxOption<T, AdditionalProps>['value'][] | MultipleSelectBoxOption<T, AdditionalProps>[];
+    defaultValue?: MultipleSelectBoxOption<T, AdditionalProps>[];
     /**
      * Pass the currently selected option values.
      * Use this prop when you want a controlled component.
      * Should use this prop with "onChange" prop to control the selected options.
      *
-     * Can be either:
-     * - An array of primitive values (string/number) that match options' values
-     * - An array of MultipleSelectBoxOption objects with both label and value (useful for async scenarios)
+     * Pass an array of MultipleSelectBoxOption objects with both label and value.
+     * This is especially useful for async scenarios where options may not be in the current options list.
      */
-    value?: MultipleSelectBoxOption<T, AdditionalProps>['value'][] | MultipleSelectBoxOption<T, AdditionalProps>[];
+    value?: MultipleSelectBoxOption<T, AdditionalProps>[];
     /**
      * The message to be displayed in the listbox when the options are empty.
      */
@@ -157,8 +155,6 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
     /**
      * The callback function that is called when the selected option is changed.
      *
-     * @param values - The array of selected values
-     *
      * @param options - The array of full option objects that were selected
      *
      * @example
@@ -171,7 +167,7 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
      * />
      * ```
      */
-    onChange?: (values: MultipleSelectBoxOption<T, AdditionalProps>['value'][], options: MultipleSelectBoxOption<T, AdditionalProps>[]) => void;
+    onChange?: (options: MultipleSelectBoxOption<T, AdditionalProps>[]) => void;
     /**
      * Whether to enable the all options controls including "Select All" and "Clear All" buttons.
      *

package/dist/{esm/src → src}/MultipleSelectBox/MultipleSelectBoxTrigger/MultipleSelectBoxTrigger.js

@@ -14,7 +14,9 @@ import { cx } from '../../../styled-system/css';
  *
  * @param ref - The forwarded ref to the trigger button element
  */
-function MultipleSelectBoxTriggerInner({ wrapperRef, triggerProps, triggerWrapperProps, size, selectedOptions, listBoxId, isOptionPanelOpen, invalid, showDisplayValueAsTag, placeholder, renderDisplayValue, updateSelectedValues, clearButtonProps, disableClearButton, onKeyDown, onBlur, name, disabled, ...rest }, ref) {
+function MultipleSelectBoxTriggerInner({ wrapperRef, triggerProps, triggerWrapperProps, size, selectedOptions, listBoxId, isOptionPanelOpen, invalid, showDisplayValueAsTag, 
+// eslint-disable-next-line @typescript-eslint/no-deprecated
+placeholder, renderDisplayValue, updateSelectedValues, clearButtonProps, disableClearButton, onKeyDown, onBlur, name, disabled, ...rest }, ref) {
     const classes = multipleSelectBoxTriggerRecipe({ size });
     const triggerRef = useRef(null);
     const textVariant = size === 'small' ? 'condensedInput' : 'controlLabel';

package/dist/{esm/src → src}/MultipleSelectBox/MultipleSelectBoxTrigger/MultipleSelectBoxTrigger.types.d.ts

@@ -59,9 +59,8 @@ export type PassedProps<T extends AllowedValueTypes = string, AdditionalProps ex
     triggerWrapperProps?: Pick<ComponentPropsWithoutRef<'div'>, 'className'>;
     /**
      * Text to be displayed when options are not selected.
-     * If you want to show placeholder even if using `renderDisplayValue`, please render placeholder in `renderDisplayValue` function.
      *
-     * @default undefined
+     * @deprecated Placeholder is discouraged by the design guidelines. It will be removed in a future version.
      */
     placeholder?: string;
     /**

package/dist/{esm/src → src}/MultipleSelectBox/hooks/useSelectedValues.d.ts

@@ -6,19 +6,17 @@ type UseSelectedValuesProps<T extends AllowedValueTypes = string, AdditionalProp
     options: MultipleSelectBoxOption<T, AdditionalProps>[];
     /**
      * Initial selected values for uncontrolled component.
-     * Can be either primitive values or full option objects.
      */
-    defaultValue?: MultipleSelectBoxOption<T, AdditionalProps>['value'][] | MultipleSelectBoxOption<T, AdditionalProps>[];
+    defaultValue?: MultipleSelectBoxOption<T, AdditionalProps>[];
     /**
      * Current selected values for controlled component.
-     * Can be either primitive values or full option objects.
      */
-    value?: MultipleSelectBoxOption<T, AdditionalProps>['value'][] | MultipleSelectBoxOption<T, AdditionalProps>[] | undefined;
+    value?: MultipleSelectBoxOption<T, AdditionalProps>[] | undefined;
     /**
      * Callback when the selected values change.
-     * Receives both values array and full options array.
+     * Receives full options array.
      */
-    onChange?: (values: MultipleSelectBoxOption<T, AdditionalProps>['value'][], options: MultipleSelectBoxOption<T, AdditionalProps>[]) => void;
+    onChange?: (options: MultipleSelectBoxOption<T, AdditionalProps>[]) => void;
 };
 /**
  * Hook to manage selected values in MultipleSelectBox

package/dist/{esm/src → src}/MultipleSelectBox/hooks/useSelectedValues.js

@@ -1,41 +1,19 @@
 import { useState, useEffect, useMemo } from 'react';
-/**
- * Helper function to check if an item is a full option object or a primitive value
- *
- * @param item - The item to check (can be a primitive value or full option object)
- */
-function isFullOption(item) {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    return item !== null && typeof item === 'object' && 'label' in item;
-}
 /**
  * Helper function to convert defaultValue/value to options array and values set
  *
- * @param initialValue - The initial value (can be primitive values or full option objects)
- *
- * @param options - The available options array
+ * @param initialValue - The initial value as full option objects
  */
-function initializeSelectedOptions(initialValue, options) {
+function initializeSelectedOptions(initialValue) {
     const optionsMap = new Map();
     const valuesSet = new Set();
     if (!initialValue) {
         return { optionsMap, valuesSet };
     }
     for (const item of initialValue) {
-        if (isFullOption(item)) {
-            // Item is a full option object
-            if (item.value != null) {
-                optionsMap.set(item.value, item);
-                valuesSet.add(item.value);
-            }
-        }
-        else {
-            // Item is a primitive value, try to find the option in the options array
-            const foundOption = options.find((opt) => opt.value === item);
-            if (foundOption) {
-                optionsMap.set(item, foundOption);
-            }
-            valuesSet.add(item);
+        if (item.value != null) {
+            optionsMap.set(item.value, item);
+            valuesSet.add(item.value);
         }
     }
     return { optionsMap, valuesSet };
@@ -57,14 +35,14 @@ export function useSelectedValues({ options, defaultValue, value, onChange }) {
     const [selectedOptionsMap, setSelectedOptionsMap] = useState(() => {
         // For initialization, use value if provided, otherwise use defaultValue
         const initialValue = value !== undefined ? value : defaultValue;
-        const { optionsMap } = initializeSelectedOptions(initialValue, options);
+        const { optionsMap } = initializeSelectedOptions(initialValue);
         return optionsMap;
     });
     // Store selected values as a Set for fast lookup
     const [localSelectedValuesSet, setLocalSelectedValuesSet] = useState(() => {
         // For initialization, use value if provided, otherwise use defaultValue
         const initialValue = value !== undefined ? value : defaultValue;
-        const { valuesSet } = initializeSelectedOptions(initialValue, options);
+        const { valuesSet } = initializeSelectedOptions(initialValue);
         return valuesSet;
     });
     // Derive local selected options array from the map
@@ -74,7 +52,7 @@ export function useSelectedValues({ options, defaultValue, value, onChange }) {
         if (!isControlled) {
             return;
         }
-        const { optionsMap, valuesSet } = initializeSelectedOptions(value, options);
+        const { optionsMap, valuesSet } = initializeSelectedOptions(value);
         // Preserve existing options from the map if they're not in the new options array
         setSelectedOptionsMap((previousMap) => {
             const newOptionsMap = new Map(optionsMap);
@@ -99,7 +77,7 @@ export function useSelectedValues({ options, defaultValue, value, onChange }) {
         }
         // This is display-only mode: value is provided but no onChange
         // Treat it like controlled for state sync purposes
-        const { optionsMap, valuesSet } = initializeSelectedOptions(value, options);
+        const { optionsMap, valuesSet } = initializeSelectedOptions(value);
         // Preserve existing options from the map if they're not in the new options array
         setSelectedOptionsMap((previousMap) => {
             const newOptionsMap = new Map(optionsMap);
@@ -140,15 +118,15 @@ export function useSelectedValues({ options, defaultValue, value, onChange }) {
         // The useEffect will sync local state when value prop changes
         if (isControlled) {
             const selectedOptions = [...newOptionsMap.values()];
-            onChange(newValues, selectedOptions);
+            onChange(selectedOptions);
             return;
         }
         // Uncontrolled component: Update local state and call onChange
         setSelectedOptionsMap(newOptionsMap);
         setLocalSelectedValuesSet(newValuesSet);
-        // Call onChange with both values and options arrays
+        // Call onChange with options array
         const selectedOptions = [...newOptionsMap.values()];
-        onChange?.(newValues, selectedOptions);
+        onChange?.(selectedOptions);
     };
     return {
         localSelectedValuesSet,

package/dist/{esm/src → src}/Pagination/ItemsPerPage/ItemsPerPage.js

@@ -10,7 +10,7 @@ export function ItemsPerPage({ itemsPerPage, itemsPerPageLabel, itemsPerPageOpti
     const classes = itemsPerPageSlotRecipe();
     return (_jsxs("div", { className: cx(classes.root, 'mfui-ItemsPerPage__root'), children: [_jsx(Typography, { children: itemsPerPageLabel }), _jsx("div", { className: cx(classes.root, 'mfui-ItemsPerPage__selectBoxWrapper'), children: _jsx(SelectBox, { size: "small", triggerProps: {
                         'aria-label': itemsPerPageSelectBoxProps?.['aria-label'] ?? '1ページあたりの表示件数を選択する',
-                    }, value: itemsPerPage.toString(), options: itemsPerPageOptions.map((value) => ({
+                    }, value: { value: itemsPerPage.toString(), label: itemsPerPage.toString() }, options: itemsPerPageOptions.map((value) => ({
                         value: value.toString(),
                         label: value.toString(),
                     })), popoverContentProps: { className: classes.optionPanel }, onChange: (value) => {

package/dist/{esm/src → src}/Pagination/PagePicker/PagePicker.js

@@ -14,7 +14,7 @@ export function PagePicker({ currentPageNumber, totalPages, prevButtonProps, pag
                     onPageChange?.(currentPageNumber - 1);
                 }, children: _jsx(PickerBefore, {}) }), _jsx("div", { className: cx(classes.pageSelect, 'mfui-PagePicker__pageSelect'), children: _jsx(SelectBox, { size: "small", triggerProps: {
                         'aria-label': pageSelectBoxProps?.['aria-label'] ?? 'ページを選択する',
-                    }, value: currentPageNumber.toString(), options: Array.from({ length: totalPages }).map((_, index) => ({
+                    }, value: { value: currentPageNumber.toString(), label: currentPageNumber.toString() }, options: Array.from({ length: totalPages }).map((_, index) => ({
                         value: (index + 1).toString(),
                         label: (index + 1).toString(),
                     })), popoverContentProps: { className: classes.optionPanel }, onChange: (value) => {

package/dist/{cjs/src → src}/RadioButtonCard/RadioButtonCard.d.ts

@@ -12,4 +12,4 @@ export declare const RadioButtonCard: import("react").ForwardRefExoticComponent<
     label: string;
     renderDetailsSlot?: RadioButtonCardResponsiveSlot | import("./RadioButtonCard.types").RadioButtonCardRenderDetailsSlot;
     disableResponsive?: import("../../styled-system/recipes").RadioButtonCardSlotRecipeVariant["disableResponsive"];
-} & Omit<import("../RadioButton").RadioButtonProps, "label"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<import("..").RadioButtonProps, "label"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/{cjs/src → src}/SectionMessage/SectionMessage.d.ts

@@ -12,7 +12,7 @@ export declare const SectionMessage: import("react").ForwardRefExoticComponent<{
     messageType?: import("../../styled-system/recipes").SectionMessageSlotRecipeVariant["messageType"];
     region?: import("../../styled-system/recipes").SectionMessageSlotRecipeVariant["region"];
     actionSlot?: import("react").ReactNode;
-    onClose?: import("../IconButton").IconButtonProps["onClick"];
+    onClose?: import("..").IconButtonProps["onClick"];
     children?: import("react").ReactNode;
     statusIconProps?: Pick<import("react").ComponentPropsWithoutRef<"svg">, "aria-label">;
     closeButtonProps?: Pick<import("react").ComponentPropsWithoutRef<"svg">, "aria-label">;

package/dist/{esm/src → src}/SelectBox/SelectBox.js

@@ -17,7 +17,6 @@ import { useUpdateEffect } from '../utilities/effect/useUpdateEffect';
 import { useTypeAhead } from './hooks/useTypeAhead';
 import { getFlatOptions, escapeAttributeSelector } from './utils/getFlatOptions';
 import { buildValueToIndexMap, findFlatOptionIndexByValue } from './utils/findFlatOptionIndexByValue';
-import { findOptionByValue } from './utils/findOptionByValue';
 import { useKeyboardNavigation } from './hooks/useKeyboardNavigation';
 import { SelectBoxOptionComponent } from './SelectBoxOption';
 import { SelectBoxOptionGroup } from './SelectBoxOptionGroup';
@@ -34,21 +33,16 @@ const SKELETON_ITEM_COUNT = 4;
  * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
  */
 export const SelectBox = forwardRef((props, ref) => {
-    const { id, triggerProps, clearButtonProps, enableClearButton = false, size, options = [], defaultValue, placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, onBlur, value, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, renderDisplayValue, renderOption, renderPopoverContent, enableAutoScrollToSelectedOption, popoverContentProps, popoverWrapperProps, onOpenStateChanged, showGroupOptionDivider, triggerWrapperProps, enableAutoUnmount = true, enableConstrainedPopoverWidth = false, enableVirtualization = false, virtualizationOptions, } = props;
+    const { id, triggerProps, clearButtonProps, enableClearButton = false, size, options = [], defaultValue, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, onBlur, value, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, renderDisplayValue, renderOption, renderPopoverContent, enableAutoScrollToSelectedOption, popoverContentProps, popoverWrapperProps, onOpenStateChanged, showGroupOptionDivider, triggerWrapperProps, enableAutoUnmount = true, enableConstrainedPopoverWidth = false, enableVirtualization = false, virtualizationOptions, } = props;
     const classes = selectBoxSlotRecipe({ size, showGroupOptionDivider });
     const triggerRef = useRef(null);
     const listBoxId = useId();
     const optionPanelRef = useRef(null);
     const scrollWrapperRef = useRef(null);
     const searchInputRef = useRef(null);
-    const [localSelectedOption, setLocalSelectedOption] = useState(() => {
-        if (defaultValue === undefined)
-            return null;
-        if (typeof defaultValue === 'string' || typeof defaultValue === 'number') {
-            return findOptionByValue(options, defaultValue);
-        }
-        return defaultValue;
-    });
+    const [localSelectedOption, setLocalSelectedOption] = useState(() => defaultValue ?? null);
     const { isOpen: isOptionPanelOpen, toggle: toggleOptionPanel, close: closeOptionPanel, } = useDisclosure({
         value: false,
         onToggle: onOpenStateChanged,
@@ -60,11 +54,8 @@ export const SelectBox = forwardRef((props, ref) => {
     const selectedOption = useMemo(() => {
         if (value === undefined)
             return null;
-        if (typeof value === 'string' || typeof value === 'number') {
-            return findOptionByValue(options, value);
-        }
         return value;
-    }, [options, value]);
+    }, [value]);
     useEffect(() => {
         // Only update when value prop is explicitly provided (controlled mode)
         if (value !== undefined) {
@@ -130,7 +121,7 @@ export const SelectBox = forwardRef((props, ref) => {
         if (isOptionDisabled(option))
             return;
         setLocalSelectedOption(option);
-        onChange?.(option.value, option);
+        onChange?.(option);
         closeOptionPanel();
     }, [onChange, closeOptionPanel]);
     const { handleTypeAhead, cleanup } = useTypeAhead({
@@ -290,10 +281,10 @@ export const SelectBox = forwardRef((props, ref) => {
                         : renderEmptyMessage() }) }));
     const handleClearValue = () => {
         setLocalSelectedOption(null);
-        onChange?.(undefined, null);
+        onChange?.(null);
         closeOptionPanel();
     };
-    const hasSelectedValue = value !== undefined ? value !== '' : localSelectedOption !== null;
+    const hasSelectedValue = value !== undefined || localSelectedOption !== null;
     const showClearButton = enableClearButton && hasSelectedValue;
     // Use Popover's centralized blur handling instead of custom logic
     return (_jsx(Popover, { open: isOptionPanelOpen, targetDOMNode: targetDOMNode, minWidth: popoverContentProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: popoverContentProps?.allowedPlacements, enableConstrainedContentWidth: enableConstrainedPopoverWidth, renderContent: () => (_jsx("div", { ref: optionPanelRef, id: listBoxId, className: cx(classes.optionPanel, 'mfui-SelectBox__optionPanel', popoverContentProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: renderPopoverContent ? (renderPopoverContent({ searchNode, optionsNode })) : (_jsxs(_Fragment, { children: [searchNode, optionsNode] })) })), renderTrigger: ({ setTriggerRef, togglePopover, isPopoverOpen, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, ...triggerWrapperProps, className: cx(classes.triggerWrapper, 'mfui-SelectBox__triggerWrapper', triggerWrapperProps?.className), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", disabled: disabled, "aria-label": triggerProps?.['aria-label'], "aria-controls": listBoxId, "aria-expanded": isPopoverOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, className: cx(classes.trigger, 'mfui-SelectBox__trigger', triggerProps?.className), "data-placeholder": !!placeholder && !localSelectedOption, "data-selected": !!localSelectedOption, "data-mfui-has-clear-button": showClearButton, onClick: togglePopover, onKeyDown: (event) => {