@moneyforward/mfui-components 3.35.0 → 3.36.0

package/dist/src/DataTable/DataTable.d.ts

@@ -281,4 +281,54 @@ export declare const DataTable: import("react").ForwardRefExoticComponent<Omit<D
      * ```
      */
     Row: import("react").ForwardRefExoticComponent<Omit<import("./DataTableRow").DataTableRowProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
+    /**
+     * The `DataTableFilterButton` component.
+     * An icon-only filter button intended to be placed in the `actions` of `DataTable.HeaderCell`.
+     *
+     * It extends the props of `IconButton` except `children`. The filter icon
+     * (outline / filled) is switched internally based on the `filtered` prop, and the button is
+     * internally wired as the trigger of a `Popover` rendering `renderContent` — consumers only
+     * provide the filter state and the popover content.
+     *
+     * @example
+     *
+     * ```tsx
+     * <DataTable.HeaderCell
+     *   actions={
+     *     <DataTable.FilterButton filtered={isFiltered} renderContent={() => <FilterOptions />} />
+     *   }
+     * >
+     *   Name
+     * </DataTable.HeaderCell>
+     * ```
+     */
+    FilterButton: import("react").ForwardRefExoticComponent<Omit<import("..").IconButtonProps, "aria-label" | "children" | "customLinkComponent" | "href" | "target"> & {
+        'aria-label'?: import("..").IconButtonProps['aria-label'];
+        popoverProps?: Pick<import("react").ComponentPropsWithoutRef<'div'>, 'aria-label' | 'aria-labelledby'>;
+        filtered?: boolean;
+        renderContent: import("..").PopoverProps['renderContent'];
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+    /**
+     * The `DataTableSortButton` component.
+     * An icon-only sort button intended to be placed in the `actions` of `DataTable.HeaderCell`.
+     *
+     * It extends the props of `IconButton` except `children` — the sort icon
+     * (unsorted / ascending / descending) is switched internally based on the `sortOrder` prop,
+     * so consumers only provide the behavior (e.g. `onClick`).
+     *
+     * @example
+     *
+     * ```tsx
+     * <DataTable.HeaderCell
+     *   sortOrder={sortOrder}
+     *   actions={<DataTable.SortButton sortOrder={sortOrder} onClick={handleSort} />}
+     * >
+     *   Age
+     * </DataTable.HeaderCell>
+     * ```
+     */
+    SortButton: import("react").ForwardRefExoticComponent<Omit<import("..").IconButtonProps, "aria-label" | "children"> & {
+        'aria-label'?: import("..").IconButtonProps['aria-label'];
+        sortOrder?: 'ascending' | 'descending';
+    } & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 };

package/dist/src/DataTable/DataTable.js

@@ -8,7 +8,9 @@ import { DataTableCell } from './DataTableCell';
 import { DataTableHeader } from './DataTableHeader';
 import { DataTableHeaderCell } from './DataTableHeaderCell';
 import { DataTableHeaderRow } from './DataTableHeaderRow';
+import { DataTableFilterButton } from './DataTableFilterButton';
 import { DataTableRow } from './DataTableRow';
+import { DataTableSortButton } from './DataTableSortButton';
 import { cx } from '../../styled-system/css';
 import { isComponentOrWrapped } from '../utilities/react/isComponentOrWrapped';
 const Base = forwardRef(({ className, size = 'medium', enableRowSelection = false, fixedHeader = false, showVerticalBorder = false, leftFixedColumnIndex, rightFixedColumnIndex, layout = 'default', wrapperProps, loading = false, emptyStateSlot, children, ...props }, ref) => {
@@ -324,4 +326,46 @@ export const DataTable = Object.assign(Base, {
      * ```
      */
     Row: DataTableRow,
+    /**
+     * The `DataTableFilterButton` component.
+     * An icon-only filter button intended to be placed in the `actions` of `DataTable.HeaderCell`.
+     *
+     * It extends the props of `IconButton` except `children`. The filter icon
+     * (outline / filled) is switched internally based on the `filtered` prop, and the button is
+     * internally wired as the trigger of a `Popover` rendering `renderContent` — consumers only
+     * provide the filter state and the popover content.
+     *
+     * @example
+     *
+     * ```tsx
+     * <DataTable.HeaderCell
+     *   actions={
+     *     <DataTable.FilterButton filtered={isFiltered} renderContent={() => <FilterOptions />} />
+     *   }
+     * >
+     *   Name
+     * </DataTable.HeaderCell>
+     * ```
+     */
+    FilterButton: DataTableFilterButton,
+    /**
+     * The `DataTableSortButton` component.
+     * An icon-only sort button intended to be placed in the `actions` of `DataTable.HeaderCell`.
+     *
+     * It extends the props of `IconButton` except `children` — the sort icon
+     * (unsorted / ascending / descending) is switched internally based on the `sortOrder` prop,
+     * so consumers only provide the behavior (e.g. `onClick`).
+     *
+     * @example
+     *
+     * ```tsx
+     * <DataTable.HeaderCell
+     *   sortOrder={sortOrder}
+     *   actions={<DataTable.SortButton sortOrder={sortOrder} onClick={handleSort} />}
+     * >
+     *   Age
+     * </DataTable.HeaderCell>
+     * ```
+     */
+    SortButton: DataTableSortButton,
 });

package/dist/src/DataTable/DataTableFilterButton/DataTableFilterButton.d.ts

@@ -0,0 +1,6 @@
+export declare const DataTableFilterButton: import("react").ForwardRefExoticComponent<Omit<import("../..").IconButtonProps, "aria-label" | "children" | "customLinkComponent" | "href" | "target"> & {
+    'aria-label'?: import("../..").IconButtonProps['aria-label'];
+    popoverProps?: Pick<import("react").ComponentPropsWithoutRef<'div'>, 'aria-label' | 'aria-labelledby'>;
+    filtered?: boolean;
+    renderContent: import("../..").PopoverProps['renderContent'];
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/src/DataTable/DataTableFilterButton/DataTableFilterButton.js

@@ -0,0 +1,63 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Filter, FilterOn } from '@moneyforward/mfui-icons-react';
+import { forwardRef, useCallback, useId, useRef } from 'react';
+import { dataTableFilterButtonSlotRecipe } from '../../../styled-system/recipes';
+import { IconButton } from '../../IconButton';
+import { Popover } from '../../Popover';
+import { getFocusableNodes } from '../../utilities/dom/getFocusableNodes';
+import { mergeRefs } from '../../utilities/dom/mergeRefs';
+import { useFocusTrap } from '../../utilities/dom/useFocusTrap';
+import { cx } from '../../../styled-system/css';
+export const DataTableFilterButton = forwardRef(({ filtered = false, renderContent, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, popoverProps, onClick, onKeyDown, onBlur, className, ...props }, ref) => {
+    const filteredDescriptionId = useId();
+    const popoverContentId = useId();
+    const triggerRef = useRef(null);
+    const triggerLabel = ariaLabel ?? '絞り込み';
+    const dialogLabel = popoverProps?.['aria-label'] ?? '絞り込み条件';
+    const describedBy = [ariaDescribedBy, filtered ? filteredDescriptionId : undefined].filter(Boolean).join(' ');
+    const classes = dataTableFilterButtonSlotRecipe({ filtered });
+    const { handleOnKeyDown: handleFocusTrapKeyDown } = useFocusTrap({
+        onPressingTabOnNotFocusableElement: (event) => {
+            const nodes = getFocusableNodes(event.currentTarget);
+            const focusableNodeAfterFocusingNode = nodes.find((element) => 
+            // eslint-disable-next-line no-bitwise
+            element.compareDocumentPosition(event.target) & Node.DOCUMENT_POSITION_PRECEDING);
+            (focusableNodeAfterFocusingNode ?? nodes.at(0))?.focus();
+            event.preventDefault();
+        },
+    });
+    // Focus the dialog container itself (tabIndex={-1}) on open — not its first control —
+    // so opening with the mouse and with the keyboard behave the same: the first Tab always
+    // moves into the first control.
+    const focusInitialElement = useCallback((node) => {
+        node?.focus();
+    }, []);
+    return (_jsx(Popover
+    // handleTriggerKeyDown is intentionally not wired: arrow-key opening belongs to
+    // menu/listbox patterns, while this trigger opens a dialog.
+    , { 
+        // handleTriggerKeyDown is intentionally not wired: arrow-key opening belongs to
+        // menu/listbox patterns, while this trigger opens a dialog.
+        renderTrigger: ({ setTriggerRef, togglePopover, closePopover, isPopoverOpen, handleTriggerBlur }) => (_jsxs(_Fragment, { children: [_jsx(IconButton, { ref: mergeRefs(ref, setTriggerRef, triggerRef), ...props, className: cx(classes.root, 'mfui-DataTableFilterButton__root', className), "aria-label": triggerLabel, "aria-describedby": describedBy || undefined, "aria-haspopup": "dialog", "aria-expanded": isPopoverOpen, "aria-controls": popoverContentId, onClick: (event) => {
+                        togglePopover(event);
+                        onClick?.(event);
+                    }, onKeyDown: (event) => {
+                        // The popover's own Escape handler lives on the portaled content, so it never
+                        // sees a keydown fired on the trigger (e.g. after Shift+Tab back while open).
+                        if (event.key === 'Escape' && isPopoverOpen) {
+                            event.stopPropagation();
+                            event.preventDefault();
+                            closePopover(event);
+                        }
+                        onKeyDown?.(event);
+                    }, onBlur: (event) => {
+                        handleTriggerBlur(event);
+                        onBlur?.(event);
+                    }, children: filtered ? _jsx(FilterOn, {}) : _jsx(Filter, {}) }), filtered ? (_jsx("span", { id: filteredDescriptionId, className: cx(classes.filteredDescription, 'mfui-DataTableFilterButton__filteredDescription'), children: "\u9069\u7528\u4E2D" })) : null] })), renderContent: (options) => (_jsx("div", { ref: focusInitialElement, role: "dialog", "aria-label": dialogLabel, "aria-labelledby": popoverProps?.['aria-labelledby'], tabIndex: -1, className: cx(classes.dialog, 'mfui-DataTableFilterButton__dialog'), onKeyDown: handleFocusTrapKeyDown, children: renderContent(options) })), contentProps: { id: popoverContentId }, enableAutoFocusOnPopover: false, onClose: (event) => {
+            // Keep Escape focus restoration scoped to the filter button instead of changing the shared Popover.
+            if (event && 'key' in event && event.key === 'Escape') {
+                triggerRef.current?.focus();
+            }
+        } }));
+});
+DataTableFilterButton.displayName = 'DataTableFilterButton';

package/dist/src/DataTable/DataTableFilterButton/DataTableFilterButton.types.d.ts

@@ -0,0 +1,49 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type IconButtonProps } from '../../IconButton';
+import { type PopoverProps } from '../../Popover';
+/**
+ * The props for the `DataTableFilterButton` component.
+ *
+ * It extends the props of `IconButton` except `children` — the filter icon is
+ * rendered internally based on `filtered`, and the button is internally wired as
+ * the trigger of a `Popover` rendering `renderContent`. The link-related props
+ * (`href`, `customLinkComponent`, `target`) are also excluded: the trigger is
+ * always rendered as a `<button>` because a link cannot carry the disclosure
+ * semantics (`aria-haspopup` / `aria-expanded`).
+ */
+export type DataTableFilterButtonProps = Omit<IconButtonProps, 'children' | 'aria-label' | 'href' | 'customLinkComponent' | 'target'> & {
+    /**
+     * The accessible name of the filter button.
+     * Override this value to provide a label specific to the column being filtered
+     * (e.g. `担当者で絞り込む`).
+     *
+     * @default '絞り込み'
+     */
+    'aria-label'?: IconButtonProps['aria-label'];
+    /**
+     * Props applied to the filter popover that the button opens.
+     * `aria-label` and `aria-labelledby` name its dialog element (`aria-labelledby` can
+     * reference a visible title rendered inside `renderContent`). When neither is
+     * provided, the dialog is named `絞り込み条件`.
+     */
+    popoverProps?: Pick<ComponentPropsWithoutRef<'div'>, 'aria-label' | 'aria-labelledby'>;
+    /**
+     * Whether the column is currently filtered.
+     * The filter icon is switched internally according to this value:
+     *
+     * - `false`: outline filter icon
+     * - `true`: filled filter icon
+     *
+     * When `true`, the button is associated with an `適用中` description
+     * so the filtered state is exposed to assistive technologies without changing its accessible name.
+     *
+     * @default false
+     */
+    filtered?: boolean;
+    /**
+     * The content of the filter popover (e.g. a list of checkboxes for the column values).
+     * The popover itself — trigger wiring, positioning, and open/close behavior — is
+     * handled internally.
+     */
+    renderContent: PopoverProps['renderContent'];
+};

package/dist/src/DataTable/DataTableFilterButton/DataTableFilterButton.types.js

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

package/dist/src/DataTable/DataTableFilterButton/index.d.ts

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

package/dist/src/DataTable/DataTableFilterButton/index.js

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

package/dist/src/DataTable/DataTableHeaderCell/DataTableHeaderCell.js

@@ -9,7 +9,7 @@ import { cx } from '../../../styled-system/css';
 import { useFixedColumns } from '../../utilities/dom/useFixedColumns';
 import { handleCheckboxCellClick } from '../utils/handleCheckbox';
 import { mergeRefs } from '../../utilities/dom/mergeRefs';
-export const DataTableHeaderCell = forwardRef(({ children, type = 'text', sortButtonProps, sortOrder, ascendingIconProps, descendingIconProps, unsortedIconProps, className, columnIndex, disabled = false, ...props }, ref) => {
+export const DataTableHeaderCell = forwardRef(({ children, type = 'text', sortButtonProps, sortOrder, actions, ascendingIconProps, descendingIconProps, unsortedIconProps, className, columnIndex, disabled = false, ...props }, ref) => {
     const { size, leftFixedColumnIndex, rightFixedColumnIndex, enableRowSelection, showVerticalBorder } = useDataTableContext();
     const { cellRef, isFixedColumn, isEdgeFixedColumn, fixedPositionStyles } = useFixedColumns({
         enableRowSelection,
@@ -20,6 +20,7 @@ export const DataTableHeaderCell = forwardRef(({ children, type = 'text', sortBu
     const classes = dataTableHeaderCellSlotRecipe({
         size,
         type,
+        hasActions: Boolean(actions),
         fixedColumn: isFixedColumn,
         edgeFixedColumn: isEdgeFixedColumn,
         isCheckboxCell: enableRowSelection && columnIndex === 0,
@@ -53,7 +54,10 @@ export const DataTableHeaderCell = forwardRef(({ children, type = 'text', sortBu
         return (_jsx("div", { className: cx(classes.headerCell, 'mfui-DataTableHeaderCell__headerCell', 
             /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__headerCell'), children: isStringChild ? _jsx(Typography, { variant: "strongBody", children: children }) : children }));
     })();
+    // Actions are rendered as siblings of the sort button (never inside it)
+    // to avoid nesting interactive elements.
+    const cellContentWithActions = actions ? (_jsxs("div", { className: cx(classes.container, 'mfui-DataTableHeaderCell__container'), children: [cellContent, _jsx("div", { className: cx(classes.actionsContainer, 'mfui-DataTableHeaderCell__actionsContainer'), children: actions })] })) : (cellContent);
     return (_jsx("th", { ref: mergeRefs(ref, cellRef), className: cx(classes.root, 'mfui-DataTableHeaderCell__root', 
-        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__root', className), "aria-sort": sortOrder, style: fixedPositionStyles, ...props, children: cellContent }));
+        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__root', className), "aria-sort": sortOrder, style: fixedPositionStyles, ...props, children: cellContentWithActions }));
 });
 DataTableHeaderCell.displayName = 'DataTableHeaderCell';

package/dist/src/DataTable/DataTableHeaderCell/DataTableHeaderCell.types.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithRef, type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import { type CellDataType } from '../DataTable.types';
 /**
  * The props for the `DataTableHeaderCell` component.
@@ -61,6 +61,28 @@ export type DataTableHeaderCellProps = {
      * @default undefined
      */
     sortOrder?: 'ascending' | 'descending';
+    /**
+     * Action elements (e.g. `IconButton`) displayed at the right side of the header cell.
+     *
+     * The actions are rendered as siblings of the sort button, not inside it,
+     * so interactive elements are never nested even when used together with sorting.
+     *
+     * @default undefined
+     *
+     * @example
+     * ```tsx
+     * <DataTable.HeaderCell
+     *   actions={
+     *     <IconButton aria-label="絞り込み">
+     *       <Filter />
+     *     </IconButton>
+     *   }
+     * >
+     *   Name
+     * </DataTable.HeaderCell>
+     * ```
+     */
+    actions?: ReactNode;
     /**
      * **Do not pass this prop manually.**
      *

package/dist/src/DataTable/DataTableSortButton/DataTableSortButton.d.ts

@@ -0,0 +1,4 @@
+export declare const DataTableSortButton: import("react").ForwardRefExoticComponent<Omit<import("../..").IconButtonProps, "aria-label" | "children"> & {
+    'aria-label'?: import("../..").IconButtonProps['aria-label'];
+    sortOrder?: 'ascending' | 'descending';
+} & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/dist/src/DataTable/DataTableSortButton/DataTableSortButton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SortAscending, SortDescending, SortUnsorted } from '@moneyforward/mfui-icons-react';
+import { forwardRef } from 'react';
+import { IconButton } from '../../IconButton';
+import { dataTableSortButtonSlotRecipe } from '../../../styled-system/recipes';
+import { cx } from '../../../styled-system/css';
+export const DataTableSortButton = forwardRef(({ sortOrder, 'aria-label': ariaLabel = '並び替え', className, ...props }, ref) => {
+    const classes = dataTableSortButtonSlotRecipe({ sorted: Boolean(sortOrder) });
+    const sortIcon = (() => {
+        if (!sortOrder) {
+            return _jsx(SortUnsorted, {});
+        }
+        return sortOrder === 'ascending' ? _jsx(SortAscending, {}) : _jsx(SortDescending, {});
+    })();
+    return (_jsx(IconButton, { ref: ref, "aria-label": ariaLabel, className: cx(classes.root, 'mfui-DataTableSortButton__root', className), ...props, children: sortIcon }));
+});
+DataTableSortButton.displayName = 'DataTableSortButton';

package/dist/src/DataTable/DataTableSortButton/DataTableSortButton.types.d.ts

@@ -0,0 +1,25 @@
+import { type IconButtonProps } from '../../IconButton';
+/**
+ * The props for the `DataTableSortButton` component.
+ *
+ * It extends the props of `IconButton` except `children` — the sort icon is
+ * rendered internally based on `sortOrder`.
+ */
+export type DataTableSortButtonProps = Omit<IconButtonProps, 'children' | 'aria-label'> & {
+    /**
+     * The accessible name of the sort button.
+     * Override this value to provide a label specific to the column being sorted.
+     *
+     * @default '並び替え'
+     */
+    'aria-label'?: IconButtonProps['aria-label'];
+    /**
+     * The current sort order of the column.
+     * The sort icon is switched internally according to this value:
+     *
+     * - `undefined`: unsorted icon
+     * - `'ascending'`: ascending icon
+     * - `'descending'`: descending icon
+     */
+    sortOrder?: 'ascending' | 'descending';
+};

package/dist/src/DataTable/DataTableSortButton/DataTableSortButton.types.js

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

package/dist/src/DataTable/DataTableSortButton/index.d.ts

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

package/dist/src/DataTable/DataTableSortButton/index.js

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

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

@@ -6,4 +6,6 @@ export type { DataTableCellProps } from './DataTableCell';
 export type { DataTableHeaderProps } from './DataTableHeader';
 export type { DataTableHeaderCellProps } from './DataTableHeaderCell';
 export type { DataTableHeaderRowProps } from './DataTableHeaderRow';
+export type { DataTableFilterButtonProps } from './DataTableFilterButton';
 export type { DataTableRowProps } from './DataTableRow';
+export type { DataTableSortButtonProps } from './DataTableSortButton';

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

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import dayjs from 'dayjs';
 import { useBasePickerContext } from '../../shared/BasePicker/BasePickerProvider';
+import { useCalendarLocale } from '../../shared/CalendarLocale/CalendarLocaleContext';
 import { DateCell } from '../../shared/DateCell';
 import { getDateAriaAttributes } from '../../shared/accessibility';
 /**
@@ -14,10 +15,12 @@ import { getDateAriaAttributes } from '../../shared/accessibility';
  */
 export function DatePickerDateCell({ date, selected, disabled, onKeyDown, ...otherProps }) {
     const { viewingValue, setViewingValue, setPendingFocusDate } = useBasePickerContext();
+    const calendarLocale = useCalendarLocale();
     const ariaAttributes = getDateAriaAttributes({
         date,
         selected,
         disabled,
+        locale: calendarLocale,
     });
     const handleKeyDown = useCallback((event) => {
         const { key, currentTarget } = event;

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/DateRangePickerCalendar/DateRangePickerDateCell.d.ts

@@ -6,7 +6,7 @@ export type DateRangePickerDateCellProps = DateCellProps & {
     isRangeEnd?: boolean;
 };
 /**
- * DateRangePicker-specific DateCell component with enhanced accessibility
- * for Japanese users. Provides configurable labels and range-specific context.
+ * DateRangePicker-specific DateCell component with enhanced accessibility.
+ * Provides locale-aware labels and range-specific context.
  */
 export declare function DateRangePickerDateCell({ date, selected, inRange, disabled, isRangeStart, isRangeEnd, ...rest }: DateRangePickerDateCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/DateRangePickerCalendar/DateRangePickerDateCell.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DateCell } from '../../../shared/DateCell';
+import { useCalendarLocale } from '../../../shared/CalendarLocale/CalendarLocaleContext';
 import { getDateAriaAttributes } from '../../../shared/accessibility';
 /**
- * DateRangePicker-specific DateCell component with enhanced accessibility
- * for Japanese users. Provides configurable labels and range-specific context.
+ * DateRangePicker-specific DateCell component with enhanced accessibility.
+ * Provides locale-aware labels and range-specific context.
  */
 export function DateRangePickerDateCell({ date, selected, inRange, disabled, isRangeStart, isRangeEnd, ...rest }) {
+    const calendarLocale = useCalendarLocale();
     const ariaAttributes = getDateAriaAttributes({
         date,
         selected,
@@ -13,6 +15,7 @@ export function DateRangePickerDateCell({ date, selected, inRange, disabled, isR
         disabled,
         isRangeStart,
         isRangeEnd,
+        locale: calendarLocale,
     });
     return (_jsx(DateCell, { ...rest, date: date, selected: selected, inRange: inRange, disabled: disabled, ...ariaAttributes }));
 }

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerTrigger/DateRangePickerTrigger.js

@@ -16,7 +16,7 @@ import { useDateRangeTriggerInputClick } from './hooks/useDateRangeTriggerInputC
  * Trigger component for DateRangePicker
  * Handles the display and interaction of the date range input field
  */
-export const DateRangePickerTrigger = forwardRef(({ enableClearValue = false, invalid = false, size = 'medium', disabled = false, wrapperProps = {}, clearButtonProps = {}, startInputProps = {}, endInputProps = {}, calendarButtonProps = {}, startInputRef, endInputRef, popoverOpenFunction, format = 'YYYY-MM-DD', ...props }, ref) => {
+export const DateRangePickerTrigger = forwardRef(({ enableClearValue = false, invalid = false, caution = false, size = 'medium', disabled = false, wrapperProps = {}, clearButtonProps = {}, startInputProps = {}, endInputProps = {}, calendarButtonProps = {}, startInputRef, endInputRef, popoverOpenFunction, format = 'YYYY-MM-DD', ...props }, ref) => {
     const { toggle, disableAutoOpen } = useDateRangePickerContext();
     const { handleInputClick } = useDateRangeTriggerInputClick(disableAutoOpen ?? false, popoverOpenFunction);
     const { onClick: onClickClearButton, 'aria-label': clearAriaLabel = LOCALE.CLEAR_BUTTON_LABEL } = clearButtonProps;
@@ -35,7 +35,8 @@ export const DateRangePickerTrigger = forwardRef(({ enableClearValue = false, in
     const { placeholder: startPlaceholder = LOCALE.START_DATE_PLACEHOLDER } = startInputProps;
     const { placeholder: endPlaceholder = LOCALE.END_DATE_PLACEHOLDER } = endInputProps;
     const shouldShowClearButton = enableClearValue && (enhancedStartInputProps.value || enhancedEndInputProps.value);
-    const classes = baseRangePickerTriggerSlotRecipe({ invalid, disabled, size });
+    // The error state takes precedence over the caution state
+    const classes = baseRangePickerTriggerSlotRecipe({ invalid, caution: caution && !invalid, disabled, size });
     const handleClickClearButton = useCallback((event) => {
         handleClear();
         onClickClearButton?.(event);

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerTrigger/DateRangePickerTrigger.types.d.ts

@@ -11,6 +11,23 @@ export type DateRangePickerTriggerProps = {
      * @default false
      */
     invalid?: boolean;
+    /**
+     * Whether the inputs need the user's attention while still being submittable.
+     *
+     * 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 both inputs via `startInputProps['aria-describedby']`
+     * and `endInputProps['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 one of the inputs.
+     *
+     * Ignored while `invalid` is `true`, because the error state takes precedence.
+     *
+     * @default false
+     */
+    caution?: boolean;
     /**
      * Whether to enable the clear functionality
      *

package/dist/src/DateTimeSelection/FilterDateRangePicker/DateRangePickerContent/DateRangePickerContent.js

@@ -10,6 +10,7 @@ import { cx } from '../../../../styled-system/css';
 import { dayjs } from '../../../utilities/date/dayjs';
 import { DateRangePickerPopover } from '../../DateRangePicker/DateRangePickerPopover';
 import { CalendarLocaleProvider } from '../../shared/CalendarLocale/CalendarLocaleContext';
+import { getBaseRangePickerTriggerLabel } from '../../shared/BaseRangePicker/BaseRangePickerTrigger/constants';
 import { useBaseRangePickerContext } from '../../shared/BaseRangePicker/BaseRangePickerProvider';
 /**
  * Internal component that accesses BaseRangePickerContext for display and clear handling.
@@ -29,5 +30,6 @@ export function InternalDateRangePickerContent({ classes, triggerRef, dialogId,
         const dateToFocus = startDate ?? endDate ?? new Date();
         setPendingFocusDate(dayjs(dateToFocus).format('YYYY-MM-DD'));
     }, [startDate, endDate, setPendingFocusDate]);
-    return (_jsx(Popover, { open: isCalendarOpen, targetDOMNode: targetDOMNode, minWidth: "min-content", allowedPlacements: ['bottom-start', 'top-start'], renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterDateRangePicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterDateRangePicker__trigger', className), "data-selected": hasValue, "data-mfui-has-clear-button": enableClearButton ? hasValue : null, "aria-controls": dialogId, "aria-expanded": isCalendarOpen, "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterDateRangePicker__content'), "data-mfui-content": "filter-date-range-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-date-range-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-date-range-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-date-range-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterDateRangePicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), enableClearButton && hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterDateRangePicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-date-range-picker-clear-button", disabled: disabled, onClick: handleTriggerClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: cx(classes.popoverWrapper, 'mfui-FilterDateRangePicker__popoverWrapper'), children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(DateRangePickerPopover, {}) }) })), onOpenStateChanged: toggleCalendar, onOpen: handlePopoverOpen }));
+    return (_jsx(Popover, { open: isCalendarOpen, targetDOMNode: targetDOMNode, minWidth: "min-content", allowedPlacements: ['bottom-start', 'top-start'], renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterDateRangePicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterDateRangePicker__trigger', className), "data-selected": hasValue, "data-mfui-has-clear-button": enableClearButton ? hasValue : null, "aria-controls": dialogId, "aria-expanded": isCalendarOpen, "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterDateRangePicker__content'), "data-mfui-content": "filter-date-range-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-date-range-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-date-range-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-date-range-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterDateRangePicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), enableClearButton && hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterDateRangePicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ??
+                            getBaseRangePickerTriggerLabel('CLEAR_BUTTON_LABEL', calendarLocale), "data-mfui-content": "filter-date-range-picker-clear-button", disabled: disabled, onClick: handleTriggerClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: cx(classes.popoverWrapper, 'mfui-FilterDateRangePicker__popoverWrapper'), children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(DateRangePickerPopover, {}) }) })), onOpenStateChanged: toggleCalendar, onOpen: handlePopoverOpen }));
 }

package/dist/src/DateTimeSelection/FilterDateRangePicker/FilterDateRangePicker.types.d.ts

@@ -48,7 +48,8 @@ export type FilterDateRangePickerProps = {
     /**
      * Props for the clear button.
      *
-     * @property aria-label - The alternative text for the clear button. Default is '値をクリアする'.
+     * @property aria-label - The alternative text for the clear button.
+     *   Default follows `calendarLocale` ('値をクリアする' for 'ja', 'Clear value' for 'en').
      */
     clearButtonProps?: {
         'aria-label'?: string;

package/dist/src/DateTimeSelection/FilterMonthPicker/FilterMonthPicker.types.d.ts

@@ -45,7 +45,8 @@ export type FilterMonthPickerProps = {
     /**
      * Props for the clear button.
      *
-     * @property aria-label - The alternative text for the clear button. Default is '値をクリアする'.
+     * @property aria-label - The alternative text for the clear button.
+     *   Default follows `calendarLocale` ('値をクリアする' for 'ja', 'Clear value' for 'en').
      */
     clearButtonProps?: {
         'aria-label'?: string;

package/dist/src/DateTimeSelection/FilterMonthPicker/MonthPickerPopover/MonthPickerPopover.js

@@ -10,6 +10,7 @@ import { cx } from '../../../../styled-system/css';
 import { dayjs } from '../../../utilities/date/dayjs';
 import { MonthPickerPanel } from '../../MonthPicker/MonthPickerPanel/MonthPickerPanel';
 import { CalendarLocaleProvider } from '../../shared/CalendarLocale/CalendarLocaleContext';
+import { getBasePickerLabel } from '../../shared/BasePicker/constants';
 import { useBasePickerContext } from '../../shared/BasePicker/BasePickerProvider';
 import { useFocusTrap } from '../../../utilities/dom/useFocusTrap';
 import { getFocusableNodes } from '../../../utilities/dom/getFocusableNodes';
@@ -39,7 +40,7 @@ export function InternalMonthPickerPopover({ currentValue, defaultValue, isPicke
         setViewingValue(monthToFocus);
         setPendingFocusDate(dayjs(monthToFocus).format(MONTH_BASE_FORMAT));
     }, [currentValue, defaultValue, setViewingValue, setPendingFocusDate]);
-    return (_jsx(Popover, { open: isPickerOpen, targetDOMNode: targetDOMNode, renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterMonthPicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterMonthPicker__trigger', className), "data-selected": hasValue, "data-mfui-has-clear-button": enableClearButton ? hasValue : null, "aria-controls": dialogId, "aria-expanded": isPickerOpen, "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterMonthPicker__content'), "data-mfui-content": "filter-month-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-month-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-month-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-month-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterMonthPicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), enableClearButton && hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterMonthPicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-month-picker-clear-button", disabled: disabled, onClick: handleClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: "mfui-FilterMonthPicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(MonthPickerPanel, { viewingValue: viewingValue, setViewingValue: setViewingValue, value: currentValue, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth, onChange: (date) => {
+    return (_jsx(Popover, { open: isPickerOpen, targetDOMNode: targetDOMNode, renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterMonthPicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterMonthPicker__trigger', className), "data-selected": hasValue, "data-mfui-has-clear-button": enableClearButton ? hasValue : null, "aria-controls": dialogId, "aria-expanded": isPickerOpen, "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterMonthPicker__content'), "data-mfui-content": "filter-month-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-month-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-month-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-month-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterMonthPicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), enableClearButton && hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterMonthPicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? getBasePickerLabel('CLEAR_VALUE', calendarLocale), "data-mfui-content": "filter-month-picker-clear-button", disabled: disabled, onClick: handleClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: "mfui-FilterMonthPicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(MonthPickerPanel, { viewingValue: viewingValue, setViewingValue: setViewingValue, value: currentValue, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth, onChange: (date) => {
                         handleValueChange(date);
                     } }) }) })), minWidth: "min-content", allowedPlacements: ['bottom-start', 'top-start'], onOpenStateChanged: togglePicker, onOpen: handlePopoverOpen }));
 }

package/dist/src/DateTimeSelection/MonthRangePicker/MonthRangePickerMonthCell/MonthRangePickerMonthCell.d.ts

@@ -1,5 +1,6 @@
 import { type MonthRangePickerMonthCellProps } from './MonthRangePickerMonthCell.types';
 import 'dayjs/locale/en';
+import 'dayjs/locale/ja';
 /**
  * MonthRangePickerMonthCell component that wraps MonthCell with range selection visual states.
  *

package/dist/src/DateTimeSelection/MonthRangePicker/MonthRangePickerMonthCell/MonthRangePickerMonthCell.js

@@ -6,6 +6,7 @@ import { getMonthCellMonthFormat } from '../../shared/utilities/monthCellMonthFo
 import { dayjs } from '../../../utilities/date/dayjs';
 import { MONTH_RANGE_PICKER_A11Y_LABELS } from './constants';
 import 'dayjs/locale/en';
+import 'dayjs/locale/ja';
 /**
  * MonthRangePickerMonthCell component that wraps MonthCell with range selection visual states.
  *
@@ -26,26 +27,28 @@ export function MonthRangePickerMonthCell({ isInRange, isRangeStart, isRangeEnd,
     const monthFormat = useMemo(() => getMonthCellMonthFormat(calendarLocale, monthCellProps.date), [calendarLocale, monthCellProps.date]);
     // Create accessible label for range selection
     const accessibleLabel = useMemo(() => {
-        const monthText = calendarLocale === 'en'
-            ? dayjs(monthCellProps.date).locale('en').format('MMMM YYYY')
-            : dayjs(monthCellProps.date).format('MMMM YYYY');
+        // Fall back to 'ja' so an unknown locale from untyped consumers cannot crash the calendar
+        const safeLocale = calendarLocale in MONTH_RANGE_PICKER_A11Y_LABELS ? calendarLocale : 'ja';
+        const labels = MONTH_RANGE_PICKER_A11Y_LABELS[safeLocale];
+        // Pin the dayjs locale per call so the output does not depend on the global dayjs locale
+        const monthText = dayjs(monthCellProps.date).locale(safeLocale).format('MMMM YYYY');
         const statusParts = [];
         if (monthCellProps.disabled) {
-            statusParts.push(MONTH_RANGE_PICKER_A11Y_LABELS.UNAVAILABLE);
+            statusParts.push(labels.UNAVAILABLE);
         }
         else if (selected) {
             if (isRangeStart) {
-                statusParts.push(MONTH_RANGE_PICKER_A11Y_LABELS.RANGE_START);
+                statusParts.push(labels.RANGE_START);
             }
             else if (isRangeEnd) {
-                statusParts.push(MONTH_RANGE_PICKER_A11Y_LABELS.RANGE_END);
+                statusParts.push(labels.RANGE_END);
             }
             else {
-                statusParts.push(MONTH_RANGE_PICKER_A11Y_LABELS.SELECTED);
+                statusParts.push(labels.SELECTED);
             }
         }
         else if (isInRange) {
-            statusParts.push(MONTH_RANGE_PICKER_A11Y_LABELS.IN_RANGE);
+            statusParts.push(labels.IN_RANGE);
         }
         return statusParts.length > 0 ? `${monthText}, ${statusParts.join(', ')}` : monthText;
     }, [calendarLocale, monthCellProps.date, monthCellProps.disabled, selected, isInRange, isRangeStart, isRangeEnd]);