@moneyforward/mfui-components 3.28.1 → 3.29.0

package/dist/src/Accordion/Accordion.js

@@ -63,7 +63,7 @@ const AccordionTrigger = forwardRef(({ children, className, onClick, ...props },
         toggle();
         onClick?.(event);
     }, [onClick, toggle]);
-    return (_jsx(FocusIndicator, { children: _jsxs("button", { ref: ref, className: cx(classes.trigger, 'mfui-Accordion__trigger', className), "aria-expanded": isOpen, "aria-controls": id, onClick: handleClick, ...props, children: [_jsx(Typography, { variant: "controlLabel", children: children }), isOpen ? _jsx(DisclosureBasicExpanded, { "aria-hidden": "true" }) : _jsx(DisclosureBasicCollapsed, { "aria-hidden": "true" })] }) }));
+    return (_jsx(FocusIndicator, { children: _jsxs("button", { ref: ref, className: cx(classes.trigger, 'mfui-Accordion__trigger', className), "aria-expanded": isOpen, "aria-controls": id, type: "button", onClick: handleClick, ...props, children: [_jsx(Typography, { variant: "controlLabel", children: children }), isOpen ? _jsx(DisclosureBasicExpanded, { "aria-hidden": "true" }) : _jsx(DisclosureBasicCollapsed, { "aria-hidden": "true" })] }) }));
 });
 const AccordionTarget = forwardRef(({ children, className, style, ...props }, ref) => {
     const { size } = useAccordionContext();

package/dist/src/DataTable/DataTableCell/DataTableCell.js

@@ -38,7 +38,7 @@ export const DataTableCell = forwardRef(({ onClickCell, children, type = 'text',
         }
         if (onClickCell) {
             return (_jsx(FocusIndicator, { position: "inside", children: _jsx("button", { type: "button", className: cx(classes.interactiveCell, 'mfui-DataTableCell__interactiveCell', 
-                    /* TODO: Remove in v5.0.0 */ 'mfui-DataGridCell__interactiveCell'), onClick: handleClick, children: _jsx(CellContent, { depth: depth, disclosureIconProps: nestingIconProps, classes: classes, children: children }) }) }));
+                    /* TODO: Remove in v5.0.0 */ 'mfui-DataGridCell__interactiveCell'), ...(nestingIconProps && { 'aria-expanded': nestingIconProps.isOpen ?? false }), onClick: handleClick, children: _jsx(CellContent, { depth: depth, disclosureIconProps: nestingIconProps, classes: classes, children: children }) }) }));
         }
         if (isCheckboxCell) {
             return (_jsx(FocusIndicator, { position: "inside", children: _jsx("div", { className: cx(classes.defaultCell, 'mfui-DataTableCell__defaultCell', 

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

@@ -75,6 +75,14 @@ export type DataTableCellProps = {
      * If provided, the dropdown icon is displayed in the cell.
      * If not provided, the dropdown icon is not displayed.
      *
+     * `aria-expanded` is set automatically based on `isOpen`:
+     * on the cell button when the cell is interactive (`onClickCell`),
+     * or on the row when the row is interactive (`onClickRow`).
+     *
+     * Note: the attribute on the cell button is fully derived from `isOpen`
+     * and cannot be overridden, while an `aria-expanded` passed to
+     * `DataTable.Row` takes precedence over the derived value.
+     *
      * @default undefined
      */
     disclosureIconProps?: {

package/dist/src/DataTable/DataTableRow/DataTableRow.js

@@ -17,6 +17,12 @@ export const DataTableRow = forwardRef(({ children, disabled = false, highlighte
         interactive: isInteractive,
         disabled,
     });
+    // When the interactive row itself toggles a disclosure (a child cell shows the disclosure icon
+    // but does not handle the click by itself), expose the expanded state on the row.
+    const disclosureIconProps = Children.toArray(children)
+        .filter((child) => isValidElement(child) && isComponentOrWrapped(child, DataTableCell))
+        .find((cell) => cell.props.disclosureIconProps && !cell.props.onClickCell)?.props.disclosureIconProps;
+    const ariaExpanded = isInteractive && disclosureIconProps ? (disclosureIconProps.isOpen ?? false) : undefined;
     const handleClickRow = (event) => {
         if (!disabled) {
             onClickRow?.(event);
@@ -28,7 +34,7 @@ export const DataTableRow = forwardRef(({ children, disabled = false, highlighte
         }
     };
     return (_jsxs("tr", { ref: ref, className: cx(classes.root, 'mfui-DataTableRow__root', 
-        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridRow__root', className), ...props, 
+        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridRow__root', className), ...(ariaExpanded !== undefined && { 'aria-expanded': ariaExpanded }), ...props, 
         // When the row is clickable, the role should be 'button' in order to allow screen readers to understand the row is clickable.
         role: isInteractive ? 'button' : 'row', tabIndex: isInteractive ? 0 : undefined, ...(disabled && { 'aria-disabled': disabled }), onClick: handleClickRow, onKeyDown: handleKeyDownRow, children: [isSelectable ? (_jsx(DataTableCell, { columnIndex: 0, isRowHighlighted: isRowHighlighted, disabled: disabled, children: _jsx(Checkbox, { checked: checkboxProps?.checked, "aria-label": checkboxProps?.['aria-label'] ?? '行を選択', disabled: disabled || checkboxProps?.disabled, onChange: checkboxProps?.onChange, onClick: checkboxProps?.onClick }) })) : null, Children.map(children, (child, index) => {
                 if (!isValidElement(child)) {

package/dist/src/DateTimeSelection/FilterDatePicker/CalendarPopover/CalendarPopover.d.ts

@@ -3,4 +3,4 @@ import { type InternalCalendarPopoverProps } from './CalendarPopover.types';
  * Internal component that accesses BasePickerContext for viewing-month reset and focus trap.
  * Must be rendered inside a BasePickerProvider.
  */
-export declare function InternalCalendarPopover({ currentValue, defaultValue, isCalendarOpen, toggleCalendar, handleValueChange, handleClear, disabled, className, classes, formattedValue, hasValue, label, clearButtonProps, checkDisabledDate, minDate, maxDate, prevMonthIconButtonProps, nextMonthIconButtonProps, todayButtonProps, triggerRef, targetDOMNode, dialogId, }: InternalCalendarPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function InternalCalendarPopover({ currentValue, defaultValue, isCalendarOpen, toggleCalendar, handleValueChange, handleClear, disabled, className, classes, formattedValue, hasValue, enableClearButton, label, clearButtonProps, checkDisabledDate, minDate, maxDate, prevMonthIconButtonProps, nextMonthIconButtonProps, todayButtonProps, triggerRef, targetDOMNode, dialogId, }: InternalCalendarPopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/FilterDatePicker/CalendarPopover/CalendarPopover.js

@@ -17,7 +17,7 @@ const BASE_FORMAT = 'YYYY-MM-DD';
  * Internal component that accesses BasePickerContext for viewing-month reset and focus trap.
  * Must be rendered inside a BasePickerProvider.
  */
-export function InternalCalendarPopover({ currentValue, defaultValue, isCalendarOpen, toggleCalendar, handleValueChange, handleClear, disabled, className, classes, formattedValue, hasValue, label, clearButtonProps, checkDisabledDate, minDate, maxDate, prevMonthIconButtonProps, nextMonthIconButtonProps, todayButtonProps, triggerRef, targetDOMNode, dialogId, }) {
+export function InternalCalendarPopover({ currentValue, defaultValue, isCalendarOpen, toggleCalendar, handleValueChange, handleClear, disabled, className, classes, formattedValue, hasValue, enableClearButton, label, clearButtonProps, checkDisabledDate, minDate, maxDate, prevMonthIconButtonProps, nextMonthIconButtonProps, todayButtonProps, triggerRef, targetDOMNode, dialogId, }) {
     const { setViewingValue, setPendingFocusDate } = useBasePickerContext();
     const { handleOnKeyDown } = useFocusTrap({
         onPressingTabOnNotFocusableElement: (event) => {
@@ -39,7 +39,7 @@ export function InternalCalendarPopover({ currentValue, defaultValue, isCalendar
         setViewingValue(dayjs(dateToFocus).startOf('month').startOf('day').toDate());
         setPendingFocusDate(formattedDate);
     }, [currentValue, defaultValue, setViewingValue, setPendingFocusDate]);
-    return (_jsx(Popover, { open: isCalendarOpen, targetDOMNode: targetDOMNode, renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterDatePicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterDatePicker__trigger', className), "data-selected": hasValue, "data-mfui-has-clear-button": hasValue, "aria-controls": dialogId, "aria-expanded": isCalendarOpen, "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterDatePicker__content'), "data-mfui-content": "filter-date-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-date-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-date-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-date-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterDatePicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterDatePicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-date-picker-clear-button", disabled: disabled, onClick: handleClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: "mfui-FilterDatePicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: _jsx(DatePickerPanel, { value: currentValue, checkDisabledDate: checkDisabledDate, minDate: minDate, maxDate: maxDate, prevMonthIconButtonProps: prevMonthIconButtonProps, nextMonthIconButtonProps: nextMonthIconButtonProps, todayButtonProps: todayButtonProps, onChange: (date) => {
+    return (_jsx(Popover, { open: isCalendarOpen, targetDOMNode: targetDOMNode, renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterDatePicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterDatePicker__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-FilterDatePicker__content'), "data-mfui-content": "filter-date-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-date-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-date-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-date-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterDatePicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), enableClearButton && hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterDatePicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-date-picker-clear-button", disabled: disabled, onClick: handleClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: "mfui-FilterDatePicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: _jsx(DatePickerPanel, { value: currentValue, checkDisabledDate: checkDisabledDate, minDate: minDate, maxDate: maxDate, prevMonthIconButtonProps: prevMonthIconButtonProps, nextMonthIconButtonProps: nextMonthIconButtonProps, todayButtonProps: todayButtonProps, onChange: (date) => {
                     handleValueChange(date);
                 } }) })), minWidth: "min-content", onOpenStateChanged: toggleCalendar, onOpen: handlePopoverOpen }));
 }

package/dist/src/DateTimeSelection/FilterDatePicker/CalendarPopover/CalendarPopover.types.d.ts

@@ -12,6 +12,7 @@ export type InternalCalendarPopoverProps = {
     classes: ReturnType<typeof filterDatePickerSlotRecipe>;
     formattedValue: string | undefined;
     hasValue: boolean;
+    enableClearButton: boolean;
     label: string;
     clearButtonProps: FilterDatePickerProps['clearButtonProps'];
     checkDisabledDate: FilterDatePickerProps['checkDisabledDate'];

package/dist/src/DateTimeSelection/FilterDatePicker/FilterDatePicker.d.ts

@@ -11,4 +11,4 @@ import { type FilterDatePickerProps } from './FilterDatePicker.types';
  * neither of which are appropriate here. FilterDatePicker uses CalendarIcon and
  * has no form-field semantics.
  */
-export declare function FilterDatePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format, clearButtonProps, disabled, className, targetDOMNode, checkDisabledDate, minDate, maxDate, prevMonthIconButtonProps, nextMonthIconButtonProps, todayButtonProps, }: FilterDatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterDatePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format, enableClearButton, clearButtonProps, disabled, className, targetDOMNode, checkDisabledDate, minDate, maxDate, prevMonthIconButtonProps, nextMonthIconButtonProps, todayButtonProps, }: FilterDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/FilterDatePicker/FilterDatePicker.js

@@ -19,7 +19,7 @@ const DEFAULT_FORMAT = 'YYYY/MM/DD';
  * neither of which are appropriate here. FilterDatePicker uses CalendarIcon and
  * has no form-field semantics.
  */
-export function FilterDatePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format = DEFAULT_FORMAT, clearButtonProps, disabled = false, className, targetDOMNode, checkDisabledDate, minDate, maxDate, prevMonthIconButtonProps, nextMonthIconButtonProps, todayButtonProps, }) {
+export function FilterDatePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format = DEFAULT_FORMAT, enableClearButton = false, clearButtonProps, disabled = false, className, targetDOMNode, checkDisabledDate, minDate, maxDate, prevMonthIconButtonProps, nextMonthIconButtonProps, todayButtonProps, }) {
     const classes = filterDatePickerSlotRecipe();
     const triggerRef = useRef(null);
     const dialogId = useId();
@@ -71,5 +71,5 @@ export function FilterDatePicker({ label, value, defaultValue, onChange, open, o
     }, [value, onChange, triggerRef]);
     const formattedValue = currentValue ? dayjs(currentValue).format(format) : undefined;
     const hasValue = !!formattedValue;
-    return (_jsx(BasePickerProvider, { value: currentValue, children: _jsx(InternalCalendarPopover, { currentValue: currentValue, defaultValue: defaultValue, isCalendarOpen: isCalendarOpen, toggleCalendar: toggleCalendar, handleValueChange: handleValueChange, handleClear: handleClear, disabled: disabled, className: className, classes: classes, formattedValue: formattedValue, hasValue: hasValue, label: label, clearButtonProps: clearButtonProps, checkDisabledDate: checkDisabledDate, minDate: minDate, maxDate: maxDate, prevMonthIconButtonProps: prevMonthIconButtonProps, nextMonthIconButtonProps: nextMonthIconButtonProps, todayButtonProps: todayButtonProps, triggerRef: triggerRef, targetDOMNode: targetDOMNode, dialogId: dialogId }) }));
+    return (_jsx(BasePickerProvider, { value: currentValue, children: _jsx(InternalCalendarPopover, { currentValue: currentValue, defaultValue: defaultValue, isCalendarOpen: isCalendarOpen, toggleCalendar: toggleCalendar, handleValueChange: handleValueChange, handleClear: handleClear, disabled: disabled, className: className, classes: classes, formattedValue: formattedValue, hasValue: hasValue, enableClearButton: enableClearButton, label: label, clearButtonProps: clearButtonProps, checkDisabledDate: checkDisabledDate, minDate: minDate, maxDate: maxDate, prevMonthIconButtonProps: prevMonthIconButtonProps, nextMonthIconButtonProps: nextMonthIconButtonProps, todayButtonProps: todayButtonProps, triggerRef: triggerRef, targetDOMNode: targetDOMNode, dialogId: dialogId }) }));
 }

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

@@ -37,7 +37,13 @@ export type FilterDatePickerProps = {
      */
     format?: string;
     /**
-     * Props for the clear button, shown automatically when a date is selected.
+     * Whether to show the clear button when the selected date is present.
+     *
+     * @default false
+     */
+    enableClearButton?: boolean;
+    /**
+     * Props for the clear button.
      *
      * @property aria-label - The alternative text for the clear button. Default is '値をクリアする'.
      */

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

@@ -3,4 +3,4 @@ import { type InternalDateRangePickerContentProps } from './DateRangePickerConte
  * Internal component that accesses BaseRangePickerContext for display and clear handling.
  * Must be rendered inside a BaseRangePickerProvider.
  */
-export declare function InternalDateRangePickerContent({ classes, triggerRef, dialogId, label, format, disabled, className, clearButtonProps, targetDOMNode, isCalendarOpen, toggleCalendar, calendarLocale, }: InternalDateRangePickerContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function InternalDateRangePickerContent({ classes, triggerRef, dialogId, label, format, disabled, className, enableClearButton, clearButtonProps, targetDOMNode, isCalendarOpen, toggleCalendar, calendarLocale, }: InternalDateRangePickerContentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -15,7 +15,7 @@ import { useBaseRangePickerContext } from '../../shared/BaseRangePicker/BaseRang
  * Internal component that accesses BaseRangePickerContext for display and clear handling.
  * Must be rendered inside a BaseRangePickerProvider.
  */
-export function InternalDateRangePickerContent({ classes, triggerRef, dialogId, label, format, disabled, className, clearButtonProps, targetDOMNode, isCalendarOpen, toggleCalendar, calendarLocale, }) {
+export function InternalDateRangePickerContent({ classes, triggerRef, dialogId, label, format, disabled, className, enableClearButton, clearButtonProps, targetDOMNode, isCalendarOpen, toggleCalendar, calendarLocale, }) {
     const { startDate, endDate, handleClear: contextHandleClear, setPendingFocusDate } = useBaseRangePickerContext();
     const formattedStartDate = startDate ? dayjs(startDate).format(format) : undefined;
     const formattedEndDate = endDate ? dayjs(endDate).format(format) : undefined;
@@ -29,5 +29,5 @@ 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": hasValue, "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 }) })] }) }), 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'] ?? '値をクリアする', "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/DateRangePickerContent/DateRangePickerContent.types.d.ts

@@ -9,6 +9,7 @@ export type InternalDateRangePickerContentProps = {
     format: string;
     disabled: boolean;
     className: string | undefined;
+    enableClearButton: boolean;
     clearButtonProps: FilterDateRangePickerProps['clearButtonProps'];
     targetDOMNode: FilterDateRangePickerProps['targetDOMNode'];
     isCalendarOpen: boolean;

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

@@ -11,4 +11,4 @@ import { type FilterDateRangePickerProps } from './FilterDateRangePicker.types';
  * neither of which are appropriate here. FilterDateRangePicker uses CalendarIcon and
  * has no form-field semantics.
  */
-export declare function FilterDateRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format, clearButtonProps, disabled, className, targetDOMNode, minDate, maxDate, calendarLocale, }: FilterDateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterDateRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format, enableClearButton, clearButtonProps, disabled, className, targetDOMNode, minDate, maxDate, calendarLocale, }: FilterDateRangePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -18,7 +18,7 @@ const DEFAULT_FORMAT = 'YYYY/MM/DD';
  * neither of which are appropriate here. FilterDateRangePicker uses CalendarIcon and
  * has no form-field semantics.
  */
-export function FilterDateRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format = DEFAULT_FORMAT, clearButtonProps, disabled = false, className, targetDOMNode, minDate, maxDate, calendarLocale = 'ja', }) {
+export function FilterDateRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format = DEFAULT_FORMAT, enableClearButton = false, clearButtonProps, disabled = false, className, targetDOMNode, minDate, maxDate, calendarLocale = 'ja', }) {
     const classes = filterDateRangePickerSlotRecipe();
     const triggerRef = useRef(null);
     const dialogId = useId();
@@ -38,5 +38,5 @@ export function FilterDateRangePicker({ label, value, defaultValue, onChange, op
             onOpenStateChanged?.(false);
         },
     });
-    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, format: format, isOpen: isCalendarOpen, open: openCalendar, close: closeCalendar, minDate: minDate, maxDate: maxDate, disabled: disabled, onChange: onChange, children: _jsx(InternalDateRangePickerContent, { classes: classes, triggerRef: triggerRef, dialogId: dialogId, label: label, format: format, disabled: disabled, className: className, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, isCalendarOpen: isCalendarOpen, toggleCalendar: toggleCalendar, calendarLocale: calendarLocale }) }));
+    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, format: format, isOpen: isCalendarOpen, open: openCalendar, close: closeCalendar, minDate: minDate, maxDate: maxDate, disabled: disabled, onChange: onChange, children: _jsx(InternalDateRangePickerContent, { classes: classes, triggerRef: triggerRef, dialogId: dialogId, label: label, format: format, disabled: disabled, className: className, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, isCalendarOpen: isCalendarOpen, toggleCalendar: toggleCalendar, calendarLocale: calendarLocale }) }));
 }

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

@@ -40,7 +40,13 @@ export type FilterDateRangePickerProps = {
      */
     format?: string;
     /**
-     * Props for the clear button, shown automatically when a date range is selected.
+     * Whether to show the clear button when a complete date range is selected.
+     *
+     * @default false
+     */
+    enableClearButton?: boolean;
+    /**
+     * Props for the clear button.
      *
      * @property aria-label - The alternative text for the clear button. Default is '値をクリアする'.
      */

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

@@ -11,4 +11,4 @@ import { type FilterMonthPickerProps } from './FilterMonthPicker.types';
  * neither of which are appropriate here. FilterMonthPicker uses CalendarIcon and
  * has no form-field semantics.
  */
-export declare function FilterMonthPicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format, clearButtonProps, disabled, className, targetDOMNode, checkDisabledMonth, minMonth, maxMonth, calendarLocale, }: FilterMonthPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterMonthPicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format, enableClearButton, clearButtonProps, disabled, className, targetDOMNode, checkDisabledMonth, minMonth, maxMonth, calendarLocale, }: FilterMonthPickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -19,7 +19,7 @@ const DEFAULT_FORMAT = 'YYYY/MM';
  * neither of which are appropriate here. FilterMonthPicker uses CalendarIcon and
  * has no form-field semantics.
  */
-export function FilterMonthPicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format = DEFAULT_FORMAT, clearButtonProps, disabled = false, className, targetDOMNode, checkDisabledMonth, minMonth, maxMonth, calendarLocale = 'ja', }) {
+export function FilterMonthPicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format = DEFAULT_FORMAT, enableClearButton = false, clearButtonProps, disabled = false, className, targetDOMNode, checkDisabledMonth, minMonth, maxMonth, calendarLocale = 'ja', }) {
     const classes = filterMonthPickerSlotRecipe();
     const triggerRef = useRef(null);
     const dialogId = useId();
@@ -71,5 +71,5 @@ export function FilterMonthPicker({ label, value, defaultValue, onChange, open,
     }, [value, onChange, triggerRef]);
     const formattedValue = currentValue ? dayjs(currentValue).format(format) : undefined;
     const hasValue = !!formattedValue;
-    return (_jsx(BasePickerProvider, { value: currentValue, baseFormat: "YYYY-MM", children: _jsx(InternalMonthPickerPopover, { currentValue: currentValue, defaultValue: defaultValue, isPickerOpen: isPickerOpen, togglePicker: togglePicker, handleValueChange: handleValueChange, handleClear: handleClear, disabled: disabled, className: className, classes: classes, formattedValue: formattedValue, hasValue: hasValue, label: label, clearButtonProps: clearButtonProps, checkDisabledMonth: checkDisabledMonth, minMonth: minMonth, maxMonth: maxMonth, calendarLocale: calendarLocale, triggerRef: triggerRef, targetDOMNode: targetDOMNode, dialogId: dialogId }) }));
+    return (_jsx(BasePickerProvider, { value: currentValue, baseFormat: "YYYY-MM", children: _jsx(InternalMonthPickerPopover, { currentValue: currentValue, defaultValue: defaultValue, isPickerOpen: isPickerOpen, togglePicker: togglePicker, handleValueChange: handleValueChange, handleClear: handleClear, disabled: disabled, className: className, classes: classes, formattedValue: formattedValue, hasValue: hasValue, enableClearButton: enableClearButton, label: label, clearButtonProps: clearButtonProps, checkDisabledMonth: checkDisabledMonth, minMonth: minMonth, maxMonth: maxMonth, calendarLocale: calendarLocale, triggerRef: triggerRef, targetDOMNode: targetDOMNode, dialogId: dialogId }) }));
 }

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

@@ -37,7 +37,13 @@ export type FilterMonthPickerProps = {
      */
     format?: string;
     /**
-     * Props for the clear button, shown automatically when a month is selected.
+     * Whether to show the clear button when the selected month is present.
+     *
+     * @default false
+     */
+    enableClearButton?: boolean;
+    /**
+     * Props for the clear button.
      *
      * @property aria-label - The alternative text for the clear button. Default is '値をクリアする'.
      */

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

@@ -3,4 +3,4 @@ import { type InternalMonthPickerPopoverProps } from './MonthPickerPopover.types
  * Internal component that accesses BasePickerContext for viewing-month reset and focus trap.
  * Must be rendered inside a BasePickerProvider.
  */
-export declare function InternalMonthPickerPopover({ currentValue, defaultValue, isPickerOpen, togglePicker, handleValueChange, handleClear, disabled, className, classes, formattedValue, hasValue, label, clearButtonProps, checkDisabledMonth, minMonth, maxMonth, calendarLocale, triggerRef, targetDOMNode, dialogId, }: InternalMonthPickerPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function InternalMonthPickerPopover({ currentValue, defaultValue, isPickerOpen, togglePicker, handleValueChange, handleClear, disabled, className, classes, formattedValue, hasValue, enableClearButton, label, clearButtonProps, checkDisabledMonth, minMonth, maxMonth, calendarLocale, triggerRef, targetDOMNode, dialogId, }: InternalMonthPickerPopoverProps): import("react/jsx-runtime").JSX.Element;

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

@@ -18,7 +18,7 @@ const MONTH_BASE_FORMAT = 'YYYY-MM';
  * Internal component that accesses BasePickerContext for viewing-month reset and focus trap.
  * Must be rendered inside a BasePickerProvider.
  */
-export function InternalMonthPickerPopover({ currentValue, defaultValue, isPickerOpen, togglePicker, handleValueChange, handleClear, disabled, className, classes, formattedValue, hasValue, label, clearButtonProps, checkDisabledMonth, minMonth, maxMonth, calendarLocale = 'ja', triggerRef, targetDOMNode, dialogId, }) {
+export function InternalMonthPickerPopover({ currentValue, defaultValue, isPickerOpen, togglePicker, handleValueChange, handleClear, disabled, className, classes, formattedValue, hasValue, enableClearButton, label, clearButtonProps, checkDisabledMonth, minMonth, maxMonth, calendarLocale = 'ja', triggerRef, targetDOMNode, dialogId, }) {
     const { viewingValue, setViewingValue, setPendingFocusDate } = useBasePickerContext();
     const { handleOnKeyDown } = useFocusTrap({
         onPressingTabOnNotFocusableElement: (event) => {
@@ -39,7 +39,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": hasValue, "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 }) })] }) }), 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'] ?? '値をクリアする', "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/FilterMonthPicker/MonthPickerPopover/MonthPickerPopover.types.d.ts

@@ -12,6 +12,7 @@ export type InternalMonthPickerPopoverProps = {
     classes: ReturnType<typeof filterMonthPickerSlotRecipe>;
     formattedValue: string | undefined;
     hasValue: boolean;
+    enableClearButton: boolean;
     label: string;
     clearButtonProps: FilterMonthPickerProps['clearButtonProps'];
     checkDisabledMonth: FilterMonthPickerProps['checkDisabledMonth'];

package/dist/src/DateTimeSelection/FilterMonthRangePicker/FilterMonthRangePicker.d.ts

@@ -12,4 +12,4 @@ import { type FilterMonthRangePickerProps } from './FilterMonthRangePicker.types
  * neither of which are appropriate here. FilterMonthRangePicker uses CalendarIcon and
  * has no form-field semantics.
  */
-export declare function FilterMonthRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format, initialDisplayedMonths, clearButtonProps, disabled, className, targetDOMNode, minMonth, maxMonth, }: FilterMonthRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterMonthRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format, initialDisplayedMonths, enableClearButton, clearButtonProps, disabled, className, targetDOMNode, minMonth, maxMonth, }: FilterMonthRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/FilterMonthRangePicker/FilterMonthRangePicker.js

@@ -21,7 +21,7 @@ const DEFAULT_FORMAT = 'YYYY/MM';
  * neither of which are appropriate here. FilterMonthRangePicker uses CalendarIcon and
  * has no form-field semantics.
  */
-export function FilterMonthRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format = DEFAULT_FORMAT, initialDisplayedMonths = 'currentAndNext', clearButtonProps, disabled = false, className, targetDOMNode, minMonth, maxMonth, }) {
+export function FilterMonthRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format = DEFAULT_FORMAT, initialDisplayedMonths = 'currentAndNext', enableClearButton = false, clearButtonProps, disabled = false, className, targetDOMNode, minMonth, maxMonth, }) {
     const classes = filterMonthRangePickerSlotRecipe();
     const triggerRef = useRef(null);
     const dialogId = useId();
@@ -85,5 +85,5 @@ export function FilterMonthRangePicker({ label, value, defaultValue, onChange, o
         }
         return new Date(startDate.getFullYear() - 1, 0, 1);
     })();
-    return (_jsx(BaseRangePickerProvider, { value: currentValue, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isPickerOpen, open: openPicker, close: closePickerAndNotify, minDate: minMonth, maxDate: maxMonth, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, onChange: handleRangeChange, children: _jsx(InternalMonthRangePickerPopover, { isPickerOpen: isPickerOpen, togglePicker: togglePicker, handleClear: handleClear, disabled: disabled, className: className, classes: classes, formattedValue: formattedValue, hasValue: hasValue, label: label, clearButtonProps: clearButtonProps, minMonth: minMonth, maxMonth: maxMonth, triggerRef: triggerRef, targetDOMNode: targetDOMNode, dialogId: dialogId }) }));
+    return (_jsx(BaseRangePickerProvider, { value: currentValue, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isPickerOpen, open: openPicker, close: closePickerAndNotify, minDate: minMonth, maxDate: maxMonth, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, onChange: handleRangeChange, children: _jsx(InternalMonthRangePickerPopover, { isPickerOpen: isPickerOpen, togglePicker: togglePicker, handleClear: handleClear, disabled: disabled, className: className, classes: classes, formattedValue: formattedValue, hasValue: hasValue, enableClearButton: enableClearButton, label: label, clearButtonProps: clearButtonProps, minMonth: minMonth, maxMonth: maxMonth, triggerRef: triggerRef, targetDOMNode: targetDOMNode, dialogId: dialogId }) }));
 }

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

@@ -37,7 +37,13 @@ export type FilterMonthRangePickerProps = {
      */
     format?: string;
     /**
-     * Props for the clear button, shown automatically when a complete range is selected.
+     * Whether to show the clear button when a complete range is selected.
+     *
+     * @default false
+     */
+    enableClearButton?: boolean;
+    /**
+     * Props for the clear button.
      *
      * @property aria-label - The alternative text for the clear button. Default is '値をクリアする'.
      */

package/dist/src/DateTimeSelection/FilterMonthRangePicker/MonthRangePickerPopover/MonthRangePickerPopover.d.ts

@@ -2,4 +2,4 @@ import { type InternalMonthRangePickerPopoverProps } from './MonthRangePickerPop
 /**
  * Internal popover UI for FilterMonthRangePicker. Must render inside BaseRangePickerProvider.
  */
-export declare function InternalMonthRangePickerPopover({ isPickerOpen, togglePicker, handleClear, disabled, className, classes, formattedValue, hasValue, label, clearButtonProps, minMonth, maxMonth, triggerRef, targetDOMNode, dialogId, }: InternalMonthRangePickerPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function InternalMonthRangePickerPopover({ isPickerOpen, togglePicker, handleClear, disabled, className, classes, formattedValue, hasValue, enableClearButton, label, clearButtonProps, minMonth, maxMonth, triggerRef, targetDOMNode, dialogId, }: InternalMonthRangePickerPopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/FilterMonthRangePicker/MonthRangePickerPopover/MonthRangePickerPopover.js

@@ -15,7 +15,7 @@ import { getFocusableNodes } from '../../../utilities/dom/getFocusableNodes';
 /**
  * Internal popover UI for FilterMonthRangePicker. Must render inside BaseRangePickerProvider.
  */
-export function InternalMonthRangePickerPopover({ isPickerOpen, togglePicker, handleClear, disabled, className, classes, formattedValue, hasValue, label, clearButtonProps, minMonth, maxMonth, triggerRef, targetDOMNode, dialogId, }) {
+export function InternalMonthRangePickerPopover({ isPickerOpen, togglePicker, handleClear, disabled, className, classes, formattedValue, hasValue, enableClearButton, label, clearButtonProps, minMonth, maxMonth, triggerRef, targetDOMNode, dialogId, }) {
     const { viewingMonth, setViewingMonth, temporaryStart, temporaryEnd, startDate, endDate, setPendingFocusDate } = useBaseRangePickerContext();
     const { handleOnKeyDown } = useFocusTrap({
         onPressingTabOnNotFocusableElement: (event) => {
@@ -50,5 +50,5 @@ export function InternalMonthRangePickerPopover({ isPickerOpen, togglePicker, ha
         setViewingMonth(monthToFocus);
         setPendingFocusDate(dayjs(monthToFocus).format('YYYY-MM'));
     }, [temporaryStart, temporaryEnd, startDate, endDate, setViewingMonth, 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-FilterMonthRangePicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterMonthRangePicker__trigger', className), "data-selected": hasValue, "data-mfui-has-clear-button": hasValue, "aria-controls": dialogId, "aria-expanded": isPickerOpen, "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterMonthRangePicker__content'), "data-mfui-content": "filter-month-range-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-month-range-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-month-range-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-month-range-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterMonthRangePicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterMonthRangePicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-month-range-picker-clear-button", disabled: disabled, onClick: handleClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: "mfui-FilterMonthRangePicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: _jsx(MonthRangePickerPanel, { viewingValue: viewingMonth, setViewingValue: setViewingMonth, value: [temporaryStart, temporaryEnd], minMonth: minMonth, maxMonth: maxMonth }) })), minWidth: "min-content", allowedPlacements: ['bottom-start', 'top-start'], onOpenStateChanged: togglePicker, onOpen: handlePopoverOpen }));
+    return (_jsx(Popover, { open: isPickerOpen, targetDOMNode: targetDOMNode, renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterMonthRangePicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterMonthRangePicker__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-FilterMonthRangePicker__content'), "data-mfui-content": "filter-month-range-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-month-range-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-month-range-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-month-range-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterMonthRangePicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), enableClearButton && hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterMonthRangePicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-month-range-picker-clear-button", disabled: disabled, onClick: handleClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: "mfui-FilterMonthRangePicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: _jsx(MonthRangePickerPanel, { viewingValue: viewingMonth, setViewingValue: setViewingMonth, value: [temporaryStart, temporaryEnd], minMonth: minMonth, maxMonth: maxMonth }) })), minWidth: "min-content", allowedPlacements: ['bottom-start', 'top-start'], onOpenStateChanged: togglePicker, onOpen: handlePopoverOpen }));
 }

package/dist/src/DateTimeSelection/FilterMonthRangePicker/MonthRangePickerPopover/MonthRangePickerPopover.types.d.ts

@@ -9,6 +9,7 @@ export type InternalMonthRangePickerPopoverProps = {
     classes: ReturnType<typeof filterMonthRangePickerSlotRecipe>;
     formattedValue: string | undefined;
     hasValue: boolean;
+    enableClearButton: boolean;
     label: string;
     clearButtonProps: FilterMonthRangePickerProps['clearButtonProps'];
     minMonth: FilterMonthRangePickerProps['minMonth'];

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

@@ -49,5 +49,5 @@ export function MonthRangePickerMonthCell({ isInRange, isRangeStart, isRangeEnd,
         }
         return statusParts.length > 0 ? `${monthText}, ${statusParts.join(', ')}` : monthText;
     }, [calendarLocale, monthCellProps.date, monthCellProps.disabled, selected, isInRange, isRangeStart, isRangeEnd]);
-    return (_jsx("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: _jsx(MonthCell, { ...monthCellProps, monthFormat: monthFormat, selected: selected, inRange: isInRange, "aria-label": accessibleLabel, "aria-pressed": selected ? 'true' : undefined, "aria-selected": selected ? 'true' : 'false', onKeyDown: handleKeyboardNavigation }) }));
+    return (_jsx("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: _jsx(MonthCell, { ...monthCellProps, monthFormat: monthFormat, selected: selected, inRange: isInRange, "aria-label": accessibleLabel, "aria-pressed": selected ? 'true' : undefined, onKeyDown: handleKeyboardNavigation }) }));
 }

package/dist/src/DateTimeSelection/TimePicker/TimePicker.d.ts

@@ -30,6 +30,7 @@ export declare const TimePicker: import("react").ForwardRefExoticComponent<Omit<
     size?: "small" | "medium" | "large";
     invalid?: boolean;
     onClear?: (event: import("react").MouseEvent<HTMLButtonElement>) => void;
+    enableClearButton?: boolean;
     clearButtonProps?: Pick<import("../..").IconButtonProps, "aria-label">;
     pickerIndicatorIconButtonProps?: Pick<import("../..").IconButtonProps, "aria-label">;
 }> & {
@@ -38,6 +39,7 @@ export declare const TimePicker: import("react").ForwardRefExoticComponent<Omit<
     size?: "small" | "medium" | "large";
     invalid?: boolean;
     onClear?: (event: import("react").MouseEvent<HTMLButtonElement>) => void;
+    enableClearButton?: boolean;
     clearButtonProps?: Pick<import("../..").IconButtonProps, "aria-label">;
     pickerIndicatorIconButtonProps?: Pick<import("../..").IconButtonProps, "aria-label">;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/src/DateTimeSelection/TimePicker/TimePicker.js

@@ -35,7 +35,7 @@ import { getTimePickerLabel } from './constants';
  * // With seconds
  * <TimePicker format="HH:mm:ss" />
  */
-export const TimePicker = forwardRef(({ value, defaultValue, onChange, format = 'HH:mm', size = 'medium', disabled = false, invalid = false, step, onClear, clearButtonProps, pickerIndicatorIconButtonProps, className, ...inputProps }, ref) => {
+export const TimePicker = forwardRef(({ value, defaultValue, onChange, format = 'HH:mm', size = 'medium', disabled = false, invalid = false, step, onClear, enableClearButton = false, clearButtonProps, pickerIndicatorIconButtonProps, className, ...inputProps }, ref) => {
     const inputRef = useRef(null);
     const mergedInputRef = mergeRefs(ref, inputRef);
     // Track the live value internally so the clear button can read it whether
@@ -79,7 +79,7 @@ export const TimePicker = forwardRef(({ value, defaultValue, onChange, format =
     return (_jsx(FocusIndicator, { children: _jsxs("div", { className: cx(classes.root, 'mfui-TimePicker__root', className), children: [_jsx("input", { ...inputProps, ref: mergedInputRef, type: "time", className: cx(classes.input, 'mfui-TimePicker__input'), value: value, defaultValue: defaultValue, disabled: disabled, step: resolvedStep, "aria-invalid": invalid || undefined, onChange: (event) => {
                         setInternalValue(event.target.value);
                         onChange?.(event.target.value, event);
-                    } }), hasValue && !disabled ? (_jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', className: cx(classes.clearButton, 'mfui-TimePicker__clearButton'), disabled: disabled, onClick: handleClear })) : null, _jsx(IconButton, { size: size === 'small' ? 'small' : 'default', "aria-label": pickerLabel, className: cx(classes.pickerButton, 'mfui-TimePicker__pickerButton'), disabled: disabled, onClick: () => {
+                    } }), enableClearButton && hasValue && !disabled ? (_jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', className: cx(classes.clearButton, 'mfui-TimePicker__clearButton'), disabled: disabled, onClick: handleClear })) : null, _jsx(IconButton, { size: size === 'small' ? 'small' : 'default', "aria-label": pickerLabel, className: cx(classes.pickerButton, 'mfui-TimePicker__pickerButton'), disabled: disabled, onClick: () => {
                         triggerPicker();
                     }, children: _jsx(Time, {}) })] }) }));
 });

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

@@ -39,6 +39,12 @@ type TimePickerOwnProps = {
      * Callback fired when the clear button is clicked.
      */
     onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Whether to show the clear button when the input has a value.
+     *
+     * @default false
+     */
+    enableClearButton?: boolean;
     /**
      * Props for the clear IconButton. Use `aria-label` to override the default
      * accessible name.

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerCalendar/BaseRangePickerDateCell.js

@@ -38,5 +38,5 @@ export function BaseRangePickerDateCell({ date, selected, inRange, disabled, isR
         }
         return statusParts.length > 0 ? `${dateText}, ${statusParts.join(', ')}` : dateText;
     }, [date, selected, inRange, disabled, isRangeStart, isRangeEnd]);
-    return (_jsx(DateCell, { ...rest, date: date, selected: selected, inRange: inRange, disabled: disabled, "aria-label": accessibleLabel, "aria-pressed": selected ? 'true' : undefined, "aria-selected": selected ? 'true' : 'false' }));
+    return (_jsx(DateCell, { ...rest, date: date, selected: selected, inRange: inRange, disabled: disabled, "aria-label": accessibleLabel, "aria-pressed": selected ? 'true' : undefined }));
 }

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../../../../styled-system/css';
 import { dayCellSlotRecipe } from '../../../../styled-system/recipes';
 import { Typography } from '../../../Typography';
@@ -12,5 +12,5 @@ export function DayCell({ day }) {
     const classNames = dayCellSlotRecipe();
     const abbreviation = DAY_ABBREVIATIONS[calendarLocale][day];
     const fullName = DAY_FULL_NAMES[calendarLocale][day];
-    return (_jsx("div", { className: cx(classNames.root, 'mfui-DayCell__root'), "aria-label": fullName, children: _jsx(Typography, { "aria-hidden": true, variant: "contentHeading", className: cx(classNames.label, 'mfui-DayCell__label'), children: abbreviation }) }));
+    return (_jsxs("div", { className: cx(classNames.root, 'mfui-DayCell__root'), children: [_jsx(Typography, { "aria-hidden": true, variant: "contentHeading", className: cx(classNames.label, 'mfui-DayCell__label'), children: abbreviation }), _jsx("span", { className: cx(classNames.srOnlyLabel, 'mfui-DayCell__srOnlyLabel'), children: fullName })] }));
 }

package/dist/src/DateTimeSelection/shared/accessibility/getDateAriaAttributes.d.ts

@@ -2,7 +2,6 @@ import { type DateLabelOptions } from './generateDateLabel';
 export type DateAriaAttributes = {
     'aria-label': string;
     'aria-pressed': 'true' | undefined;
-    'aria-selected': 'true' | 'false';
 };
 /**
  * Generates consistent ARIA attributes for date cells

package/dist/src/DateTimeSelection/shared/accessibility/getDateAriaAttributes.js

@@ -11,6 +11,5 @@ export function getDateAriaAttributes(options) {
     return {
         'aria-label': generateAccessibleDateLabel(options),
         'aria-pressed': selected ? 'true' : undefined,
-        'aria-selected': selected ? 'true' : 'false',
     };
 }

package/dist/src/Dialog/Dialog.d.ts

@@ -1,6 +1,8 @@
 /**
  * The general purpose Dialog component.
- * This component extends the props of `<div>` element with `role="dialog"`.
+ * This component extends the props of `<div>` element. The extended props and `ref` are
+ * applied to the root overlay element covering the viewport, while `role="dialog"` and
+ * `aria-modal="true"` are set on the inner dialog window element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
  */

package/dist/src/Dialog/Dialog.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useId } from 'react';
+import { useCallback, useId, useState } from 'react';
 import { Close } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { dialogSlotRecipe } from '../../styled-system/recipes';
@@ -12,7 +12,9 @@ import { compatibleForwardRef } from '../utilities/react/compatibleForwardRef';
 import { Portal, TargetDomNodeProvider, useAutomaticTargetDomNode } from '../Portal';
 /**
  * The general purpose Dialog component.
- * This component extends the props of `<div>` element with `role="dialog"`.
+ * This component extends the props of `<div>` element. The extended props and `ref` are
+ * applied to the root overlay element covering the viewport, while `role="dialog"` and
+ * `aria-modal="true"` are set on the inner dialog window element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
  */
@@ -21,11 +23,13 @@ export const Dialog = compatibleForwardRef(({ open, title, onClose, className, a
     const titleId = `mfui-dialog-title-${id}`;
     const contentId = `mfui-dialog-content-${id}`;
     const classes = dialogSlotRecipe({ size });
+    const [insideElement, setInsideElement] = useState(null);
     const { localOpen, closeDialog, handleStopCloseDialog, dialogElement, setDialogElement } = useDialogStateController({
         open,
         onClose,
         forwardedRef: ref,
         customFocusElement,
+        insideElement,
     });
     const handleKeyDown = useCallback((event) => {
         if (event.key === 'Escape') {
@@ -47,8 +51,8 @@ export const Dialog = compatibleForwardRef(({ open, title, onClose, className, a
     });
     const targetElement = useAutomaticTargetDomNode(targetDOMNode, dialogElement);
     const shouldRenderContent = enableAutoUnmount ? localOpen : true;
-    return (_jsx(TargetDomNodeProvider, { targetDomNode: dialogElement, children: shouldRenderContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setDialogElement, role: "dialog", ...dialogProps, className: cx(classes.root, 'mfui-Dialog__root', className), "aria-labelledby": titleId, "aria-describedby": contentId, tabIndex: -1, style: {
+    return (_jsx(TargetDomNodeProvider, { targetDomNode: dialogElement, children: shouldRenderContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setDialogElement, ...dialogProps, className: cx(classes.root, 'mfui-Dialog__root', className), style: {
                     ...dialogProps.style,
                     ...(!enableAutoUnmount && !localOpen && { display: 'none' }),
-                }, onKeyDown: handleOnKeyDown, children: [_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-Dialog__backdrop'), onClick: handleBackdropClick }), _jsxs("div", { "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-Dialog__inside'), onClick: handleStopCloseDialog, children: [_jsx("header", { className: cx(classes.header, 'mfui-Dialog__header'), children: _jsxs("div", { className: cx(classes.headerContent, 'mfui-Dialog__headerContent'), children: [_jsx(Heading, { id: titleId, variant: "pageHeading2", tag: "h2", className: cx(classes.title, 'mfui-Dialog__title'), children: title }), !hideCloseButton ? (_jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-Dialog__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: closeDialog, children: _jsx(Close, {}) }) })) : null] }) }), _jsx("main", { id: contentId, className: cx(classes.content, 'mfui-Dialog__content'), children: children }), _jsx("footer", { className: cx(classes.footer, 'mfui-Dialog__footer'), children: actionSlot })] })] }) })) : null }));
+                }, onKeyDown: handleOnKeyDown, children: [_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-Dialog__backdrop'), onClick: handleBackdropClick }), _jsxs("div", { ref: setInsideElement, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": contentId, tabIndex: -1, "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-Dialog__inside'), onClick: handleStopCloseDialog, children: [_jsx("header", { className: cx(classes.header, 'mfui-Dialog__header'), children: _jsxs("div", { className: cx(classes.headerContent, 'mfui-Dialog__headerContent'), children: [_jsx(Heading, { id: titleId, variant: "pageHeading2", tag: "h2", className: cx(classes.title, 'mfui-Dialog__title'), children: title }), !hideCloseButton ? (_jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-Dialog__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: closeDialog, children: _jsx(Close, {}) }) })) : null] }) }), _jsx("main", { id: contentId, className: cx(classes.content, 'mfui-Dialog__content'), children: children }), _jsx("footer", { className: cx(classes.footer, 'mfui-Dialog__footer'), children: actionSlot })] })] }) })) : null }));
 });