@moneyforward/mfui-components 3.35.0 → 3.36.0

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

@@ -0,0 +1,41 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export type DeterminateProgressIndicatorProps = {
+    /**
+     * The current progress value expressed as a percentage (`0`–`100`).
+     *
+     * Values outside this range are clamped to `0` or `100`.
+     */
+    value: number;
+    /**
+     * Whether to display the value text (the progress percentage as a number).
+     *
+     * @default true
+     */
+    showValueText?: boolean;
+    /**
+     * Where to place the value text relative to the progress indicator.
+     *
+     * - `'right'`: to the right of the progress indicator, vertically centered.
+     * - `'top'`: in the upper-right corner, above the progress indicator.
+     *
+     * @default 'right'
+     */
+    valueTextPosition?: 'right' | 'top';
+    /**
+     * The unit shown after the value. Set to an empty string to hide the unit.
+     *
+     * @default '%'
+     */
+    unit?: string;
+    /**
+     * The accessible name describing what is loading.
+     *
+     * Provide this (or `aria-labelledby`) so assistive technologies can announce
+     * the purpose of the progress indicator.
+     */
+    'aria-label'?: string;
+    /**
+     * The additional class name for the root element.
+     */
+    className?: string;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'role' | 'children'>;

package/dist/src/DeterminateProgressIndicator/DeterminateProgressIndicator.types.js

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

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

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

package/dist/src/DeterminateProgressIndicator/index.js

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

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

@@ -14,4 +14,4 @@ export type FilterSelectBoxProps = {
      * @param open - The new open state of the FilterSelectBox.
      */
     onOpenStateChanged?: (open: boolean) => void;
-} & Omit<SelectBoxProps, 'renderDisplayValue' | 'placeholder' | 'invalid' | 'triggerProps'>;
+} & Omit<SelectBoxProps, 'renderDisplayValue' | 'placeholder' | 'invalid' | 'caution' | 'triggerProps'>;

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

@@ -8,4 +8,4 @@ export type MultipleFilterSelectBoxProps<T extends AllowedValueTypes = string, A
      * The class name to apply to the component
      */
     className?: string;
-} & Omit<MultipleSelectBoxProps<T, AdditionalProps>, 'renderDisplayValue' | 'showDisplayValueAsTag' | 'placeholder' | 'invalid' | 'triggerWrapperProps' | 'triggerProps'>;
+} & Omit<MultipleSelectBoxProps<T, AdditionalProps>, 'renderDisplayValue' | 'showDisplayValueAsTag' | 'placeholder' | 'invalid' | 'caution' | 'triggerWrapperProps' | 'triggerProps'>;

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, enableCreateOption, onCreateOption, createOptionProps, }: 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, required, caution, 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

@@ -36,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, enableCreateOption = false, onCreateOption, createOptionProps, }) {
+placeholder, emptyMessage, disabled, invalid, required, caution, 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();
@@ -350,5 +350,5 @@ placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, val
                         `${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, 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 }));
+            placeholder: placeholder, size: size, listBoxId: listBoxId, isOptionPanelOpen: isOptionPanelOpen, invalid: invalid, required: required, caution: caution, 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

@@ -414,7 +414,7 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
      * Pass `aria-label` to override the search input's default
      * accessible name (`検索する`).
      */
-    searchBoxProps?: Pick<SearchBoxProps, 'clearButtonProps' | 'placeholder' | 'invalid' | 'aria-label'>;
+    searchBoxProps?: Pick<SearchBoxProps, 'clearButtonProps' | 'placeholder' | 'invalid' | 'caution' | 'aria-label'>;
     /**
      * The properties for the option panel element.
      *

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

@@ -14,7 +14,7 @@ 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, 
+function MultipleSelectBoxTriggerInner({ wrapperRef, triggerProps, triggerWrapperProps, size, selectedOptions, listBoxId, isOptionPanelOpen, invalid, required, caution = false, showDisplayValueAsTag, 
 // eslint-disable-next-line @typescript-eslint/no-deprecated
 placeholder, renderDisplayValue, updateSelectedValues, clearButtonProps, disableClearButton, onKeyDown, onBlur, name, disabled, ...rest }, ref) {
     const classes = multipleSelectBoxTriggerRecipe({ size });
@@ -48,6 +48,6 @@ placeholder, renderDisplayValue, updateSelectedValues, clearButtonProps, disable
         .map((option) => option.value)
         .filter((v) => v != null)
         .map(String);
-    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, { "aria-hidden": "true", 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, "aria-required": required || undefined, "data-mfui-caution": caution && !invalid ? true : undefined, 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, { "aria-hidden": "true", className: cx(classes.dropdownIcon, 'mfui-MultipleSelectBoxTrigger__dropdownIcon') }) })] }) }));
 }
 export const MultipleSelectBoxTrigger = forwardRef(MultipleSelectBoxTriggerInner);

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

@@ -39,16 +39,54 @@ export type PassedProps<T extends AllowedValueTypes = string, AdditionalProps ex
      * @default false
      */
     invalid?: boolean;
+    /**
+     * Whether the trigger is required.
+     * When true, `aria-required="true"` is forwarded to the trigger so that
+     * assistive technologies announce the field as required.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the trigger element shows a caution state — the selection is valid but is
+     * worth double-checking.
+     *
+     * Unlike `invalid`, this does not set `aria-invalid` — the state is advisory, not an error.
+     * It changes the border color only, so you must also render an adjacent
+     * `<HelpMessage messageType="caution">` describing the concern — color alone does not
+     * convey the state (WCAG 2.2 1.4.1).
+     *
+     * Associate that `HelpMessage` with the trigger via `triggerProps['aria-describedby']` so
+     * screen readers announce it on focus, and give it `role="status"` so it is also announced
+     * the moment it appears while focus is already on the trigger.
+     *
+     * ```tsx
+     * const cautionMessageId = useId();
+     *
+     * <MultipleSelectBox caution triggerProps={{ 'aria-describedby': cautionMessageId }} />
+     * <HelpMessage id={cautionMessageId} role="status" messageType="caution">
+     *   通常より多くの項目が選択されています。
+     * </HelpMessage>
+     * ```
+     *
+     * Ignored while `invalid` is `true`, because the error state takes precedence.
+     *
+     * @default false
+     */
+    caution?: boolean;
     /**
      * The properties for the trigger element.
      *
      * @property aria-label - The alternative text for the trigger element. It is overridden by associated label using labelId prop.
      *
+     * @property aria-describedby - The id of the element describing the trigger element,
+     * such as an adjacent `HelpMessage`.
+     *
      * @property className - The class name for the trigger element.
      *
      * @default undefined
      */
-    triggerProps?: Pick<ComponentPropsWithoutRef<'button'>, 'aria-label' | 'className'>;
+    triggerProps?: Pick<ComponentPropsWithoutRef<'button'>, 'aria-label' | 'aria-describedby' | 'className'>;
     /**
      * The properties for the wrapper element of the trigger element.
      *

package/dist/src/Popover/Popover.js

@@ -253,7 +253,7 @@ export function Popover({ renderTrigger, renderContent, open, onOpenStateChanged
             });
         };
     }, [isPopoverOpen, refs.reference, refs.floating]);
-    return (_jsxs(_Fragment, { children: [renderTrigger(options), shouldRenderTheContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsx("div", { ref: refs.setFloating, tabIndex: contentProps.tabIndex ?? 0, "data-mfui-content": "popover-portal-content", "data-mfui-popover-depth": nestingDepth, className: cx(classes.root, 'mfui-Popover__root', contentProps.className), style: {
+    return (_jsxs(_Fragment, { children: [renderTrigger(options), shouldRenderTheContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsx("div", { ref: refs.setFloating, id: contentProps.id, tabIndex: contentProps.tabIndex ?? 0, "data-mfui-content": "popover-portal-content", "data-mfui-popover-depth": nestingDepth, className: cx(classes.root, 'mfui-Popover__root', contentProps.className), style: {
                         ...floatingStyles,
                         ...(!enableAutoUnmount && !isPopoverOpen && { display: 'none' }),
                     }, onKeyDown: handleKeyDownPopover, children: _jsx(TargetDomNodeProvider, { targetDomNode: refs.floating.current, children: _jsx(PopoverContextProvider, { children: renderContent(options) }) }) }) })) : null] }));

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

@@ -126,7 +126,7 @@ export type PopoverProps = {
      *
      * @default {}
      */
-    contentProps?: Pick<ComponentProps<'div'>, 'className'> & {
+    contentProps?: Pick<ComponentProps<'div'>, 'className' | 'id'> & {
         /**
          * The tab index of the popover content element.
          * Please note if you set this prop, it may cause the incorrect focus behavior when `enableAutoFocusOnPopover` is true.

package/dist/src/SelectBox/SelectBox.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type BasedAdditionalProps, type SelectBoxProps } from './SelectBox.types';
 /**
  * The general-purpose SelectBox component.
- * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
+ * This component switches the variants of looks and behaviors depends on the props: size, invalid, caution, disabled.
  */
 export declare const SelectBox: (<T extends string | number | undefined = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps>(props: SelectBoxProps<T, AdditionalProps> & {
     ref?: React.ForwardedRef<HTMLInputElement>;

package/dist/src/SelectBox/SelectBox.js

@@ -33,12 +33,12 @@ const DEFAULT_SCROLL_OPTIONS = {
 const SKELETON_ITEM_COUNT = 4;
 /**
  * The general-purpose SelectBox component.
- * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
+ * This component switches the variants of looks and behaviors depends on the props: size, invalid, caution, disabled.
  */
 export const SelectBox = forwardRef((props, ref) => {
     const { id, triggerProps, clearButtonProps, enableClearButton = false, size, options = [], defaultValue, 
     // eslint-disable-next-line @typescript-eslint/no-deprecated
-    placeholder, emptyMessage, disabled, invalid, required, 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, infiniteScroll, } = props;
+    placeholder, emptyMessage, disabled, invalid, caution = false, required, 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, infiniteScroll, } = props;
     const classes = selectBoxSlotRecipe({ size, showGroupOptionDivider });
     const triggerRef = useRef(null);
     const listBoxId = useId();
@@ -338,7 +338,7 @@ export const SelectBox = forwardRef((props, ref) => {
     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, "aria-required": required, 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) => {
+    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-describedby": triggerProps?.['aria-describedby'], "aria-expanded": isPopoverOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, "aria-required": required, className: cx(classes.trigger, 'mfui-SelectBox__trigger', triggerProps?.className), "data-placeholder": !!placeholder && !localSelectedOption, "data-selected": !!localSelectedOption, "data-mfui-has-clear-button": showClearButton, "data-mfui-caution": caution && !invalid ? true : undefined, onClick: togglePopover, onKeyDown: (event) => {
                             handleTypeAhead(event.nativeEvent);
                             handleTriggerKeyDown(event);
                         }, onBlur: handleTriggerBlur, children: [_jsx("span", { "data-mfui-content": "select-box-trigger-display-value", children: renderTriggerLabel() }), _jsx(DropdownIcon, { "aria-hidden": "true", focusable: false }), _jsx("input", { ref: ref, type: "hidden", value: localSelectedOption?.value ?? '', name: name, disabled: disabled })] }) }), showClearButton ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-SelectBox__clearButtonWrapper'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : size === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "select-box-clear-button", onClick: (event) => {

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

@@ -157,9 +157,12 @@ export type SelectBoxProps<T extends AllowedValueTypes = string, AdditionalProps
      *
      * @property aria-label - The alternative text for the trigger element.
      *
+     * @property aria-describedby - The id of the element describing the trigger element,
+     * such as an adjacent `HelpMessage`.
+     *
      * @property className - The class name of the trigger element.
      */
-    triggerProps?: Pick<ComponentPropsWithoutRef<'button'>, 'aria-label' | 'className'>;
+    triggerProps?: Pick<ComponentPropsWithoutRef<'button'>, 'aria-label' | 'aria-describedby' | 'className'>;
     /**
      * Whether you let user to clear the content or not.
      * This will add the Clear button if current SelectBox has value.
@@ -227,6 +230,33 @@ export type SelectBoxProps<T extends AllowedValueTypes = string, AdditionalProps
      * Whether the trigger is invalid.
      */
     invalid?: boolean;
+    /**
+     * Whether the trigger needs the user's attention while still being submittable.
+     * Use it when the selection is valid but is worth double-checking.
+     *
+     * Unlike `invalid`, this does not set `aria-invalid` — the state is advisory, not an error.
+     * It changes the border color only, so you must also render an adjacent
+     * `<HelpMessage messageType="caution">` describing the concern — color alone does not
+     * convey the state (WCAG 2.2 1.4.1).
+     *
+     * Associate that `HelpMessage` with the trigger via `triggerProps['aria-describedby']` so
+     * screen readers announce it on focus, and give it `role="status"` so it is also announced
+     * the moment it appears while focus is already on the trigger.
+     *
+     * ```tsx
+     * const cautionMessageId = useId();
+     *
+     * <SelectBox caution triggerProps={{ 'aria-describedby': cautionMessageId }} />
+     * <HelpMessage id={cautionMessageId} role="status" messageType="caution">
+     *   通常とは異なる勘定科目が選択されています。
+     * </HelpMessage>
+     * ```
+     *
+     * Ignored while `invalid` is `true`, because the error state takes precedence.
+     *
+     * @default false
+     */
+    caution?: boolean;
     /**
      * Whether the trigger is required.
      * When true, `aria-required="true"` is forwarded to the trigger so that

package/dist/src/TextBox/TextBox.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 /**
  * The general-purpose TextBox component.
- * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled, enableClearButton.
+ * This component switches the variants of looks and behaviors depends on the props: size, invalid, caution, disabled, enableClearButton.
  *
  * Also extends the props of `<input>` element
  *
@@ -11,6 +11,7 @@ export declare const TextBox: React.ForwardRefExoticComponent<{
     enableClearButton?: boolean;
     onClear?: import("..").IconButtonProps['onClick'];
     invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['invalid'];
+    caution?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['caution'];
     textBoxSize?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['size'];
     disabled?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['disabled'];
     wrapperProps?: React.ComponentPropsWithRef<'div'>;

package/dist/src/TextBox/TextBox.js

@@ -11,13 +11,13 @@ import { useInputHasValue } from '../utilities/state/useInputHasValue';
 import { useIsTouchDevice } from '../utilities/dom/useIsTouchDevice';
 /**
  * The general-purpose TextBox component.
- * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled, enableClearButton.
+ * This component switches the variants of looks and behaviors depends on the props: size, invalid, caution, disabled, enableClearButton.
  *
  * Also extends the props of `<input>` element
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
  */
-export const TextBox = forwardRef(({ enableClearButton = false, onClear, invalid = false, textBoxSize = 'medium', disabled = false, wrapperProps = {}, prefixSlot, suffixSlot, clearButtonProps, touchDeviceReadOnly = false, ...inputProps }, ref) => {
+export const TextBox = forwardRef(({ enableClearButton = false, onClear, invalid = false, caution = false, textBoxSize = 'medium', disabled = false, wrapperProps = {}, prefixSlot, suffixSlot, clearButtonProps, touchDeviceReadOnly = false, ...inputProps }, ref) => {
     const isTouchDevice = useIsTouchDevice();
     const shouldUseTouchDeviceMode = isTouchDevice && touchDeviceReadOnly;
     const inputRef = useRef(null);
@@ -28,7 +28,8 @@ export const TextBox = forwardRef(({ enableClearButton = false, onClear, invalid
         onInput: inputProps.onInput,
     });
     const shouldShowClearButton = enableClearButton && hasValue;
-    const classes = textBoxSlotRecipe({ invalid, disabled, size: textBoxSize });
+    // The error state takes precedence over the caution state
+    const classes = textBoxSlotRecipe({ invalid, caution: caution && !invalid, disabled, size: textBoxSize });
     const mergedInputRef = mergeRefs(ref, inputRef);
     const onClickClear = useCallback((event) => {
         if (!inputRef.current)

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

@@ -26,6 +26,32 @@ export type TextBoxProps = {
      * @default false
      */
     invalid?: TextBoxSlotRecipeVariant['invalid'];
+    /**
+     * Whether the text box needs the user's attention while still being submittable.
+     * Use it when the value passes validation but is worth double-checking.
+     *
+     * This changes the border color only, so you must also render an adjacent
+     * `<HelpMessage messageType="caution">` describing the concern — color alone does not
+     * convey the state (WCAG 2.2 1.4.1).
+     *
+     * Associate that `HelpMessage` with the text box via `aria-describedby` so screen readers
+     * announce it on focus, and give it `role="status"` so it is also announced the moment it
+     * appears while focus is already inside the text box.
+     *
+     * ```tsx
+     * const cautionMessageId = useId();
+     *
+     * <TextBox caution aria-describedby={cautionMessageId} />
+     * <HelpMessage id={cautionMessageId} role="status" messageType="caution">
+     *   過去の平均を大きく上回る金額です。
+     * </HelpMessage>
+     * ```
+     *
+     * Ignored while `invalid` is `true`, because the error state takes precedence.
+     *
+     * @default false
+     */
+    caution?: TextBoxSlotRecipeVariant['caution'];
     /**
      * The size of the text box.
      *

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

@@ -1,6 +1,6 @@
 /**
  * The general-purpose Textarea component.
- * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
+ * This component switches the variants of looks and behaviors depends on the props: size, invalid, caution, disabled.
  *
  * Also extends the props of `<textarea>` element
  *
@@ -11,6 +11,7 @@
  */
 export declare const Textarea: import("react").ForwardRefExoticComponent<{
     invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['invalid'];
+    caution?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['caution'];
     size?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['size'];
     disabled?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['disabled'];
     enableAutoResize?: boolean;

package/dist/src/Textarea/Textarea.js

@@ -6,7 +6,7 @@ import { FocusIndicator } from '../FocusIndicator';
 import { mergeRefs } from '../utilities/dom/mergeRefs';
 /**
  * The general-purpose Textarea component.
- * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
+ * This component switches the variants of looks and behaviors depends on the props: size, invalid, caution, disabled.
  *
  * Also extends the props of `<textarea>` element
  *
@@ -15,11 +15,19 @@ import { mergeRefs } from '../utilities/dom/mergeRefs';
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
  */
-export const Textarea = forwardRef(({ invalid = false, size = 'medium', disabled = false, rows = 1, enableAutoResize = false, resize = 'both', onChange, ...props }, ref) => {
+export const Textarea = forwardRef(({ invalid = false, caution = 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 = textareaSlotRecipe({ size, disabled, invalid, enableAutoResize, resize: effectiveResize });
+    // The error state takes precedence over the caution state
+    const classes = textareaSlotRecipe({
+        size,
+        disabled,
+        invalid,
+        caution: caution && !invalid,
+        enableAutoResize,
+        resize: effectiveResize,
+    });
     const adjustHeight = useCallback(() => {
         if (!enableAutoResize || !localRef.current)
             return;

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

@@ -11,6 +11,32 @@ export type TextareaProps = {
      * @default false
      */
     invalid?: TextBoxSlotRecipeVariant['invalid'];
+    /**
+     * Whether the textarea needs the user's attention while still being submittable.
+     * Use it when the value passes validation but is worth double-checking.
+     *
+     * This changes the border color only, so you must also render an adjacent
+     * `<HelpMessage messageType="caution">` describing the concern — color alone does not
+     * convey the state (WCAG 2.2 1.4.1).
+     *
+     * Associate that `HelpMessage` with the textarea via `aria-describedby` so screen readers
+     * announce it on focus, and give it `role="status"` so it is also announced the moment it
+     * appears while focus is already inside the textarea.
+     *
+     * ```tsx
+     * const cautionMessageId = useId();
+     *
+     * <Textarea caution aria-describedby={cautionMessageId} />
+     * <HelpMessage id={cautionMessageId} role="status" messageType="caution">
+     *   送信先に社外メンバーが含まれています。内容をご確認ください。
+     * </HelpMessage>
+     * ```
+     *
+     * Ignored while `invalid` is `true`, because the error state takes precedence.
+     *
+     * @default false
+     */
+    caution?: TextBoxSlotRecipeVariant['caution'];
     /**
      * The size of the textarea.
      *

package/dist/src/index.d.ts

@@ -8,6 +8,7 @@ export * from './CheckboxGroup';
 export * from './DataGrid';
 export * from './DataTable';
 export * from './DateTimeSelection';
+export * from './DeterminateProgressIndicator';
 export * from './Dialog';
 export * from './Disclosure';
 export * from './DisplayTable';

package/dist/src/index.js

@@ -8,6 +8,7 @@ export * from './CheckboxGroup';
 export * from './DataGrid';
 export * from './DataTable';
 export * from './DateTimeSelection';
+export * from './DeterminateProgressIndicator';
 export * from './Dialog';
 export * from './Disclosure';
 export * from './DisplayTable';

package/dist/styled-system/recipes/base-range-picker-trigger-slot-recipe.d.ts

@@ -4,6 +4,7 @@ import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface BaseRangePickerTriggerSlotRecipeVariant {
   invalid: boolean
+caution: boolean
 disabled: boolean
 size: "small" | "medium" | "large"
 }

package/dist/styled-system/recipes/base-range-picker-trigger-slot-recipe.js

@@ -30,6 +30,7 @@ const baseRangePickerTriggerSlotRecipeFn = memo((props = {}) => {
 });
 const baseRangePickerTriggerSlotRecipeVariantKeys = [
     "invalid",
+    "caution",
     "disabled",
     "size"
 ];
@@ -45,6 +46,10 @@ export const baseRangePickerTriggerSlotRecipe = /* @__PURE__ */ Object.assign(ba
             "true",
             "false"
         ],
+        "caution": [
+            "true",
+            "false"
+        ],
         "disabled": [
             "true",
             "false"

package/dist/styled-system/recipes/data-table-filter-button-slot-recipe.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DataTableFilterButtonSlotRecipeVariant {
+  filtered: boolean
+}
+
+type DataTableFilterButtonSlotRecipeVariantMap = {
+  [key in keyof DataTableFilterButtonSlotRecipeVariant]: Array<DataTableFilterButtonSlotRecipeVariant[key]>
+}
+
+type DataTableFilterButtonSlotRecipeSlot = "root" | "dialog" | "filteredDescription"
+
+export type DataTableFilterButtonSlotRecipeVariantProps = {
+  [key in keyof DataTableFilterButtonSlotRecipeVariant]?: ConditionalValue<DataTableFilterButtonSlotRecipeVariant[key]> | undefined
+}
+
+export interface DataTableFilterButtonSlotRecipeRecipe {
+  __slot: DataTableFilterButtonSlotRecipeSlot
+  __type: DataTableFilterButtonSlotRecipeVariantProps
+  (props?: DataTableFilterButtonSlotRecipeVariantProps): Pretty<Record<DataTableFilterButtonSlotRecipeSlot, string>>
+  raw: (props?: DataTableFilterButtonSlotRecipeVariantProps) => DataTableFilterButtonSlotRecipeVariantProps
+  variantMap: DataTableFilterButtonSlotRecipeVariantMap
+  variantKeys: Array<keyof DataTableFilterButtonSlotRecipeVariant>
+  splitVariantProps<Props extends DataTableFilterButtonSlotRecipeVariantProps>(props: Props): [DataTableFilterButtonSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DataTableFilterButtonSlotRecipeVariantProps>>]
+  getVariantProps: (props?: DataTableFilterButtonSlotRecipeVariantProps) => DataTableFilterButtonSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI DataTable.FilterButton sub-component.
+ */
+export declare const dataTableFilterButtonSlotRecipe: DataTableFilterButtonSlotRecipeRecipe

package/dist/styled-system/recipes/data-table-filter-button-slot-recipe.js

@@ -0,0 +1,43 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const dataTableFilterButtonSlotRecipeDefaultVariants = {};
+const dataTableFilterButtonSlotRecipeCompoundVariants = [];
+const dataTableFilterButtonSlotRecipeSlotNames = [
+    [
+        "root",
+        "DataTableFilterButton__root"
+    ],
+    [
+        "dialog",
+        "DataTableFilterButton__dialog"
+    ],
+    [
+        "filteredDescription",
+        "DataTableFilterButton__filteredDescription"
+    ]
+];
+const dataTableFilterButtonSlotRecipeSlotFns = /* @__PURE__ */ dataTableFilterButtonSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableFilterButtonSlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableFilterButtonSlotRecipeCompoundVariants, slotName))]);
+const dataTableFilterButtonSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(dataTableFilterButtonSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const dataTableFilterButtonSlotRecipeVariantKeys = [
+    "filtered"
+];
+const getVariantProps = (variants) => ({ ...dataTableFilterButtonSlotRecipeDefaultVariants, ...compact(variants) });
+export const dataTableFilterButtonSlotRecipe = /* @__PURE__ */ Object.assign(dataTableFilterButtonSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'dataTableFilterButtonSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: dataTableFilterButtonSlotRecipeVariantKeys,
+    variantMap: {
+        "filtered": [
+            "true",
+            "false"
+        ]
+    },
+    splitVariantProps(props) {
+        return splitProps(props, dataTableFilterButtonSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/data-table-header-cell-slot-recipe.d.ts

@@ -4,6 +4,7 @@ import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface DataTableHeaderCellSlotRecipeVariant {
   size: "small" | "medium"
+hasActions: boolean
 fixedColumn: boolean
 verticalBorder: boolean
 edgeFixedColumn: "left" | "right"
@@ -15,10 +16,10 @@ type DataTableHeaderCellSlotRecipeVariantMap = {
   [key in keyof DataTableHeaderCellSlotRecipeVariant]: Array<DataTableHeaderCellSlotRecipeVariant[key]>
 }
 
-type DataTableHeaderCellSlotRecipeSlot = "root" | "headerCell" | "sortButton" | "sortIconContainer" | "sortIcon" | "unsortedIcon"
+type DataTableHeaderCellSlotRecipeSlot = "root" | "headerCell" | "sortButton" | "sortIconContainer" | "sortIcon" | "unsortedIcon" | "container" | "actionsContainer"
 
 export type DataTableHeaderCellSlotRecipeVariantProps = {
-  [key in keyof DataTableHeaderCellSlotRecipeVariant]?: ConditionalValue<DataTableHeaderCellSlotRecipeVariant[key]> | undefined
+  [key in keyof DataTableHeaderCellSlotRecipeVariant]?: DataTableHeaderCellSlotRecipeVariant[key] | undefined
 }
 
 export interface DataTableHeaderCellSlotRecipeRecipe {