@moneyforward/mfui-components 3.34.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/IconButton/IconButton.d.ts

@@ -1,5 +1,6 @@
 export declare const InternalIconButton: import("react").ForwardRefExoticComponent<{
     outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['outlined'];
+    destructive?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['destructive'];
     children: React.ReactNode;
     disabled?: boolean;
     href?: string;
@@ -9,6 +10,7 @@ export declare const InternalIconButton: import("react").ForwardRefExoticCompone
 } & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export declare const IconButton: import("react").ForwardRefExoticComponent<{
     outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['outlined'];
+    destructive?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['destructive'];
     children: React.ReactNode;
     disabled?: boolean;
     href?: string;

package/dist/src/IconButton/IconButton.js

@@ -20,8 +20,8 @@ import { FocusIndicator } from '../FocusIndicator';
  *
  * @param ref - Forwarded ref for the rendered button or anchor element.
  */
-function IconButtonBase({ children, outlined, size = 'default', className, href, customLinkComponent, disabled = false, type = 'button', ...rest }, ref) {
-    const classes = iconButtonSlotRecipe({ outlined, size });
+function IconButtonBase({ children, outlined, destructive, size = 'default', className, href, customLinkComponent, disabled = false, type = 'button', ...rest }, ref) {
+    const classes = iconButtonSlotRecipe({ outlined, size, destructive });
     const isButton = disabled || href === undefined;
     const Tag = useMemo(() => {
         // If disabled, always render as a button since the link component doesn't support disabled prop

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

@@ -7,6 +7,13 @@ type IconButtonCommonProps = {
      * @default false
      */
     outlined?: IconButtonSlotRecipeVariant['outlined'];
+    /**
+     * Whether the button is destructive.
+     * The style of the button will be changed to indicate that the action is destructive.
+     *
+     * @default false
+     */
+    destructive?: IconButtonSlotRecipeVariant['destructive'];
     /**
      * Icon element to be rendered inside the button.
      * Only one element (typically an SVG icon) is expected.

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.
      *
@@ -446,6 +446,10 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
      * Handler executed when text is entered in the search box.
      * The handler is debounced by 300ms.
      *
+     * If the handler is provided after the user has already typed (e.g.
+     * `onSearchOptions={isReady ? handleSearch : undefined}`), it is called
+     * once with the current search text so that pending input is not lost.
+     *
      * When this prop is provided, client-side filtering is disabled as it's
      * assumed that filtering will be handled by the prop.
      */

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/MultipleSelectBox/hooks/useSearchBox.js

@@ -1,5 +1,6 @@
 'use client';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { useLatest } from '../../utilities/state/useLatest';
 import { normalizeFullWidth } from '../../utilities/string/normalizeFullWidth';
 /**
  * Custom hook to handle search functionality within a SelectBox component.
@@ -18,6 +19,10 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
     const [searchText, setSearchText] = useState('');
     const debounceRef = useRef(null);
     const previousSearchTextRef = useRef('');
+    // Keep the latest handler in a ref so that a new handler identity (e.g. an
+    // inline function re-created on parent re-render) does not re-run the
+    // debounce effect and cancel a pending call.
+    const onSearchOptionsRef = useLatest(onSearchOptions);
     const filteredOptions = useMemo(() => {
         if (!enableSearchOptions || onSearchOptions) {
             return options;
@@ -29,8 +34,14 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
     const onSearchTextChange = (event) => {
         setSearchText(event.target.value);
     };
+    // Track only the presence of the handler (not its identity) so that an
+    // undefined → defined transition re-runs the effect and dispatches the
+    // pending search text, while identity changes do not cancel pending calls.
+    // This preserves the behavior of the previous implementation, where the
+    // handler itself was an effect dependency and the transition dispatched.
+    const hasSearchHandler = Boolean(onSearchOptions);
     useEffect(() => {
-        if (!enableSearchOptions || !onSearchOptions)
+        if (!enableSearchOptions || !hasSearchHandler)
             return;
         // Skip if searchText hasn't changed (prevents initial mount and unnecessary calls)
         if (searchText === previousSearchTextRef.current) {
@@ -41,14 +52,14 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
             clearTimeout(debounceRef.current);
         }
         debounceRef.current = setTimeout(() => {
-            onSearchOptions(searchText);
+            onSearchOptionsRef.current?.(searchText);
         }, 300);
         return () => {
             if (debounceRef.current) {
                 clearTimeout(debounceRef.current);
             }
         };
-    }, [searchText, onSearchOptions, enableSearchOptions]);
+    }, [searchText, enableSearchOptions, hasSearchHandler, onSearchOptionsRef]);
     return {
         onSearchTextChange,
         filteredOptions,

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();
@@ -53,7 +53,14 @@ export const SelectBox = forwardRef((props, ref) => {
             triggerRef.current?.focus();
         },
     });
-    const { searchText, onSearchTextChange, filteredOptions } = useSearchBox(options, enableSearchOptions, onSearchOptions);
+    const { searchText, onSearchTextChange, filteredOptions, resetSearchText } = useSearchBox(options, enableSearchOptions, onSearchOptions);
+    // Clear the search text whenever the option panel closes so that
+    // reopening always starts from an unfiltered option list.
+    useUpdateEffect(() => {
+        if (!isOptionPanelOpen) {
+            resetSearchText();
+        }
+    }, [isOptionPanelOpen, resetSearchText]);
     const selectedOption = useMemo(() => {
         if (value === undefined)
             return null;
@@ -331,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
@@ -361,6 +391,13 @@ export type SelectBoxProps<T extends AllowedValueTypes = string, AdditionalProps
      * Handler executed when text is entered in the search box.
      * The handler is debounced by 300ms.
      *
+     * Also called with an empty string when the option panel closes, because the
+     * search text is reset on close so that reopening shows the full option list.
+     *
+     * If the handler is provided after the user has already typed (e.g.
+     * `onSearchOptions={isReady ? handleSearch : undefined}`), it is called
+     * once with the current search text so that pending input is not lost.
+     *
      * When this prop is provided, client-side filtering is disabled as it's
      * assumed that filtering will be handled by the prop.
      */

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

@@ -10,7 +10,8 @@ import { type BasedAdditionalProps, type SelectBoxOption } from '../SelectBox.ty
  * provided, client-side filtering is disabled as it's assumed that the caller
  * will handle the filtering.
  *
- * @returns Object containing the filtered options, search text, and handler to update search text.
+ * @returns Object containing the filtered options, search text, handler to update search text,
+ * and a callback to reset the search text.
  */
 export declare const useSearchBox: <T extends string | number | undefined = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps>(options: (SelectBoxOption<T, AdditionalProps> | null | undefined)[], enableSearchOptions: boolean, onSearchOptions?: (text: string) => void) => {
     /**
@@ -25,4 +26,8 @@ export declare const useSearchBox: <T extends string | number | undefined = stri
      * Current search text value.
      */
     searchText: string;
+    /**
+     * Resets the search text to an empty string.
+     */
+    resetSearchText: () => void;
 };

package/dist/src/SelectBox/hooks/useSearchBox.js

@@ -1,5 +1,6 @@
 'use client';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLatest } from '../../utilities/state/useLatest';
 import { normalizeFullWidth } from '../../utilities/string/normalizeFullWidth';
 /**
  * Custom hook to handle search functionality within a SelectBox component.
@@ -12,12 +13,17 @@ import { normalizeFullWidth } from '../../utilities/string/normalizeFullWidth';
  * provided, client-side filtering is disabled as it's assumed that the caller
  * will handle the filtering.
  *
- * @returns Object containing the filtered options, search text, and handler to update search text.
+ * @returns Object containing the filtered options, search text, handler to update search text,
+ * and a callback to reset the search text.
  */
 export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
     const [searchText, setSearchText] = useState('');
     const debounceRef = useRef(null);
     const previousSearchTextRef = useRef('');
+    // Keep the latest handler in a ref so that a new handler identity (e.g. an
+    // inline function re-created on parent re-render) does not re-run the
+    // debounce effect and cancel a pending call.
+    const onSearchOptionsRef = useLatest(onSearchOptions);
     const filteredOptions = useMemo(() => {
         // If not searchable or if onSearchOptions is provided, return all options without filtering
         if (!enableSearchOptions || onSearchOptions) {
@@ -49,8 +55,17 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
     const handleSearchTextChange = useCallback((event) => {
         setSearchText(event.target.value);
     }, []);
+    const resetSearchText = useCallback(() => {
+        setSearchText('');
+    }, []);
+    // Track only the presence of the handler (not its identity) so that an
+    // undefined → defined transition re-runs the effect and dispatches the
+    // pending search text, while identity changes do not cancel pending calls.
+    // This preserves the behavior of the previous implementation, where the
+    // handler itself was an effect dependency and the transition dispatched.
+    const hasSearchHandler = Boolean(onSearchOptions);
     useEffect(() => {
-        if (!enableSearchOptions || !onSearchOptions)
+        if (!enableSearchOptions || !hasSearchHandler)
             return;
         // Skip if searchText hasn't changed (prevents initial mount and unnecessary calls)
         if (searchText === previousSearchTextRef.current) {
@@ -61,14 +76,14 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
             clearTimeout(debounceRef.current);
         }
         debounceRef.current = setTimeout(() => {
-            onSearchOptions(searchText);
+            onSearchOptionsRef.current?.(searchText);
         }, 300);
         return () => {
             if (debounceRef.current) {
                 clearTimeout(debounceRef.current);
             }
         };
-    }, [searchText, onSearchOptions, enableSearchOptions]);
+    }, [searchText, enableSearchOptions, hasSearchHandler, onSearchOptionsRef]);
     return {
         /**
          * Handler for search input change events.
@@ -82,5 +97,9 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
          * Current search text value.
          */
         searchText,
+        /**
+         * Resets the search text to an empty string.
+         */
+        resetSearchText,
     };
 };

package/dist/src/SplitView/SplitView.js

@@ -195,6 +195,20 @@ export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot,
         isDragging,
         dividerPropsStyle: dividerProps?.style,
     });
+    // `dividerProps` is spread after the built-in attributes so that consumers can override ARIA
+    // attributes (e.g. aria-label, aria-valuenow). These four entries must be excluded from that
+    // spread and re-applied afterwards, otherwise they would silently replace internal wiring:
+    // the styling classes/styles and the resize event handlers.
+    const { className: dividerClassName, style: _dividerPropsStyle, onPointerDown: dividerOnPointerDown, onKeyDown: dividerOnKeyDown, ...restDividerProps } = dividerProps ?? {};
+    // Run the internal resize handler first, then forward the event to the consumer's handler.
+    const handleDividerPointerDown = (event) => {
+        handleMouseDown(event);
+        dividerOnPointerDown?.(event);
+    };
+    const handleDividerKeyDown = (event) => {
+        handleKeyDown(event);
+        dividerOnKeyDown?.(event);
+    };
     // Apply controlled panel style to the correct panel based on targetPanel.
     // When a panel is the main panel (not controlled), flex: 1 ensures it fills remaining space.
     const computedLeftPanelStyle = resolvedTargetPanel === 'left' ? controlledPanelOuterStyle : leftPanelProps?.style;
@@ -209,7 +223,7 @@ export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot,
                 ref.current = node;
             }
             containerRef.current = node;
-        }, className: cx(classes.root, 'mfui-SplitView__root', className), ...props, children: [resolvedTargetPanel === 'left' ? (shouldRenderControlledPanel || isSlideOutAnimating ? (_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), style: computedLeftPanelStyle, children: _jsx("div", { style: controlledPanelInnerStyle, children: enableAutoUnmount ? (leftPanelSlot ?? lastRightPanelRef.current) : leftPanelSlot }) })) : null) : (_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), style: computedLeftPanelStyle, children: leftPanelSlot })), isRightPanelVisible || isSlideOutAnimating ? (_jsx("div", { className: cx(classes.divider, 'mfui-SplitView__divider', dividerProps?.className), role: "separator", "aria-orientation": "vertical", "aria-label": dividerProps?.['aria-label'] ?? '左右のパネルを調整', "aria-valuenow": currentControlledPanelSize ?? initialPanelSizeNumber, "aria-valuemin": minPanelSizeNumber, "aria-valuemax": maxPanelSizeNumber, 
+        }, className: cx(classes.root, 'mfui-SplitView__root', className), ...props, children: [resolvedTargetPanel === 'left' ? (shouldRenderControlledPanel || isSlideOutAnimating ? (_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), style: computedLeftPanelStyle, children: _jsx("div", { style: controlledPanelInnerStyle, children: enableAutoUnmount ? (leftPanelSlot ?? lastRightPanelRef.current) : leftPanelSlot }) })) : null) : (_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), style: computedLeftPanelStyle, children: leftPanelSlot })), isRightPanelVisible || isSlideOutAnimating ? (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": dividerProps?.['aria-label'] ?? '左右のパネルを調整', "aria-valuenow": currentControlledPanelSize ?? initialPanelSizeNumber, "aria-valuemin": minPanelSizeNumber, "aria-valuemax": maxPanelSizeNumber, 
                 // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                tabIndex: 0, style: dividerStyle, onPointerDown: handleMouseDown, onKeyDown: handleKeyDown, ...dividerProps })) : null, resolvedTargetPanel === 'right' ? (shouldRenderControlledPanel || isSlideOutAnimating ? (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: computedRightPanelStyle, children: _jsx("div", { style: controlledPanelInnerStyle, children: enableAutoUnmount ? (rightPanelSlot ?? lastRightPanelRef.current) : rightPanelSlot }) })) : null) : (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: computedRightPanelStyle, children: rightPanelSlot }))] }));
+                tabIndex: 0, ...restDividerProps, className: cx(classes.divider, 'mfui-SplitView__divider', dividerClassName), style: dividerStyle, onPointerDown: handleDividerPointerDown, onKeyDown: handleDividerKeyDown })) : null, resolvedTargetPanel === 'right' ? (shouldRenderControlledPanel || isSlideOutAnimating ? (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: computedRightPanelStyle, children: _jsx("div", { style: controlledPanelInnerStyle, children: enableAutoUnmount ? (rightPanelSlot ?? lastRightPanelRef.current) : rightPanelSlot }) })) : null) : (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: computedRightPanelStyle, children: rightPanelSlot }))] }));
 });

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)