@moneyforward/mfui-components 3.29.1 → 3.31.1

package/dist/src/Button/Button.d.ts

@@ -11,13 +11,13 @@
 export declare const Button: import("react").ForwardRefExoticComponent<{
     children: React.ReactNode;
     disabled?: boolean;
-    size?: import("../../styled-system/recipes").ButtonSlotRecipeVariant["size"];
-    priority?: import("../../styled-system/recipes").ButtonSlotRecipeVariant["priority"];
-    destructive?: import("../../styled-system/recipes").ButtonSlotRecipeVariant["destructive"];
+    size?: import("../../styled-system/recipes").ButtonSlotRecipeVariant['size'];
+    priority?: import("../../styled-system/recipes").ButtonSlotRecipeVariant['priority'];
+    destructive?: import("../../styled-system/recipes").ButtonSlotRecipeVariant['destructive'];
     leftIcon?: React.ReactElement;
     isDropdownTrigger?: boolean;
     loading?: boolean;
     rightIcon?: React.ReactElement;
     href?: string;
     customLinkComponent?: import("react").ElementType;
-} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "type" | "rel" | "download" | "hrefLang" | "ping" | "target" | "referrerPolicy"> & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "download" | "hrefLang" | "ping" | "referrerPolicy" | "rel" | "target" | "type"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/dist/src/CheckboxCard/CheckboxCard.d.ts

@@ -8,8 +8,8 @@ import { type CheckboxCardResponsiveSlot } from './CheckboxCard.types';
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
  */
 export declare const CheckboxCard: import("react").ForwardRefExoticComponent<{
-    layout?: import("../../styled-system/recipes").CheckboxCardSlotRecipeVariant["layout"];
+    layout?: import("../../styled-system/recipes").CheckboxCardSlotRecipeVariant['layout'];
     label: string;
     renderDetailsSlot?: CheckboxCardResponsiveSlot | import("./CheckboxCard.types").CheckboxCardRenderDetailsSlot;
-    disableResponsive?: import("../../styled-system/recipes").CheckboxCardSlotRecipeVariant["disableResponsive"];
+    disableResponsive?: import("../../styled-system/recipes").CheckboxCardSlotRecipeVariant['disableResponsive'];
 } & Omit<import("..").CheckboxProps, "label"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/src/CheckboxCard/CheckboxCard.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from 'react';
 import { cx } from '../../styled-system/css';
 import { FocusIndicator } from '../FocusIndicator';

package/dist/src/DataTable/DataTable.js

@@ -11,7 +11,7 @@ import { DataTableHeaderRow } from './DataTableHeaderRow';
 import { DataTableRow } from './DataTableRow';
 import { cx } from '../../styled-system/css';
 import { isComponentOrWrapped } from '../utilities/react/isComponentOrWrapped';
-const Base = forwardRef(({ className, size = 'medium', enableRowSelection = false, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, layout = 'default', wrapperProps, loading = false, emptyStateSlot, children, ...props }, ref) => {
+const Base = forwardRef(({ className, size = 'medium', enableRowSelection = false, fixedHeader = false, showVerticalBorder = false, leftFixedColumnIndex, rightFixedColumnIndex, layout = 'default', wrapperProps, loading = false, emptyStateSlot, children, ...props }, ref) => {
     const classes = dataTableSlotRecipe({ layout });
     // Check if DataTable has any rows by looking for DataTable.Body with DataTable.Row children
     const hasRows = useMemo(() => {
@@ -36,7 +36,7 @@ const Base = forwardRef(({ className, size = 'medium', enableRowSelection = fals
         return false;
     }, [children, loading]);
     const shouldShowEmptyState = !hasRows && !!emptyStateSlot && !loading;
-    return (_jsx(DataTableProvider, { size: size, enableRowSelection: enableRowSelection, fixedHeader: fixedHeader, leftFixedColumnIndex: leftFixedColumnIndex, rightFixedColumnIndex: rightFixedColumnIndex, loading: loading, layout: layout, children: _jsxs("div", { ...wrapperProps, className: cx(classes.wrapper, 'mfui-DataTable__wrapper', 
+    return (_jsx(DataTableProvider, { size: size, enableRowSelection: enableRowSelection, fixedHeader: fixedHeader, showVerticalBorder: showVerticalBorder, leftFixedColumnIndex: leftFixedColumnIndex, rightFixedColumnIndex: rightFixedColumnIndex, loading: loading, layout: layout, children: _jsxs("div", { ...wrapperProps, className: cx(classes.wrapper, 'mfui-DataTable__wrapper', 
             /* TODO: Remove in v5.0.0 */ 'mfui-DataGrid__wrapper', wrapperProps?.className), children: [_jsx("table", { ref: ref, className: cx(classes.table, 'mfui-DataTable__table', 
                     /* TODO: Remove in v5.0.0 */ 'mfui-DataGrid__table', className), ...props, children: children }), shouldShowEmptyState ? (_jsx("div", { className: cx(classes.emptyState, 'mfui-DataTable__emptyState', 
                     /* TODO: Remove in v5.0.0 */ 'mfui-DataGrid__emptyState'), role: "status", "aria-live": "polite", children: emptyStateSlot })) : null] }) }));

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

@@ -38,6 +38,15 @@ export type DataTableProps = {
      * @default false
      */
     fixedHeader?: boolean;
+    /**
+     * Whether to show vertical borders between columns.
+     * If `true`, a vertical border will be drawn between each column of the header and body.
+     *
+     * Enable this when using `colSpan` / `rowSpan` on cells to clarify the cell boundaries.
+     *
+     * @default false
+     */
+    showVerticalBorder?: boolean;
     /**
      * The layout of the data table.
      * It accepts `default` or `edge-to-edge`.

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { DisclosureBasicCollapsed, DisclosureBasicExpanded, DisclosureNestedCollapsed, DisclosureNestedExpanded, } from '@moneyforward/mfui-icons-react';
 import { dataTableCellSlotRecipe } from '../../../styled-system/recipes';
@@ -11,7 +11,7 @@ import { useFixedColumns } from '../../utilities/dom/useFixedColumns';
 import { handleCheckboxCellClick } from '../utils/handleCheckbox';
 import { mergeRefs } from '../../utilities/dom/mergeRefs';
 export const DataTableCell = forwardRef(({ onClickCell, children, type = 'text', className, isRowHighlighted, disabled = false, depth = 0, columnIndex, disclosureIconProps: nestingIconProps, style, ...props }, ref) => {
-    const { size, leftFixedColumnIndex, rightFixedColumnIndex, loading, enableRowSelection, layout } = useDataTableContext();
+    const { size, leftFixedColumnIndex, rightFixedColumnIndex, loading, enableRowSelection, showVerticalBorder, layout, } = useDataTableContext();
     const { cellRef, isFixedColumn, isEdgeFixedColumn, fixedPositionStyles } = useFixedColumns({
         enableRowSelection,
         columnIndex,
@@ -25,6 +25,7 @@ export const DataTableCell = forwardRef(({ onClickCell, children, type = 'text',
         fixedColumn: isFixedColumn,
         edgeFixedColumn: isEdgeFixedColumn,
         isCheckboxCell: enableRowSelection && columnIndex === 0,
+        verticalBorder: showVerticalBorder,
         layout,
     });
     const handleClick = (event) => {

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

@@ -10,7 +10,7 @@ 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) => {
-    const { size, leftFixedColumnIndex, rightFixedColumnIndex, enableRowSelection } = useDataTableContext();
+    const { size, leftFixedColumnIndex, rightFixedColumnIndex, enableRowSelection, showVerticalBorder } = useDataTableContext();
     const { cellRef, isFixedColumn, isEdgeFixedColumn, fixedPositionStyles } = useFixedColumns({
         enableRowSelection,
         columnIndex,
@@ -23,6 +23,7 @@ export const DataTableHeaderCell = forwardRef(({ children, type = 'text', sortBu
         fixedColumn: isFixedColumn,
         edgeFixedColumn: isEdgeFixedColumn,
         isCheckboxCell: enableRowSelection && columnIndex === 0,
+        verticalBorder: showVerticalBorder,
     });
     const isCheckboxCell = enableRowSelection && columnIndex === 0;
     const isStringChild = typeof children === 'string';

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

@@ -4,7 +4,7 @@ export type DataTableSize = 'small' | 'medium';
 /**
  * The props for the `DataTableContext` component.
  */
-export type DataTableContextProps = Pick<DataTableProps, 'size' | 'enableRowSelection' | 'fixedHeader' | 'leftFixedColumnIndex' | 'rightFixedColumnIndex' | 'loading' | 'layout'>;
+export type DataTableContextProps = Pick<DataTableProps, 'size' | 'enableRowSelection' | 'fixedHeader' | 'showVerticalBorder' | 'leftFixedColumnIndex' | 'rightFixedColumnIndex' | 'loading' | 'layout'>;
 export type DataTableProviderValues = {
     numberColumns: number;
     setNumberColumns: (number: number) => void;
@@ -24,4 +24,4 @@ export declare const useDataTableContext: () => DataTableProviderValues;
  *
  * This should only be used in DataTable component.
  */
-export declare function DataTableProvider({ children, size, enableRowSelection, fixedHeader, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout, }: PropsWithChildren<DataTableContextProps>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableProvider({ children, size, enableRowSelection, fixedHeader, showVerticalBorder, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout, }: PropsWithChildren<DataTableContextProps>): import("react/jsx-runtime").JSX.Element;

package/dist/src/DataTable/DataTableProvider.js

@@ -10,6 +10,7 @@ export const DataTableContext = createContext({
     size: 'medium',
     enableRowSelection: false,
     fixedHeader: false,
+    showVerticalBorder: false,
     leftFixedColumnIndex: undefined,
     rightFixedColumnIndex: undefined,
     layout: 'default',
@@ -27,12 +28,13 @@ export const useDataTableContext = () => useContext(DataTableContext);
  *
  * This should only be used in DataTable component.
  */
-export function DataTableProvider({ children, size = 'medium', enableRowSelection = false, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout = 'default', }) {
+export function DataTableProvider({ children, size = 'medium', enableRowSelection = false, fixedHeader = false, showVerticalBorder = false, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout = 'default', }) {
     const [numberColumns, setNumberColumns] = useState(0);
     const contextValue = useMemo(() => ({
         size,
         enableRowSelection,
         fixedHeader,
+        showVerticalBorder,
         leftFixedColumnIndex,
         rightFixedColumnIndex,
         loading,
@@ -43,6 +45,7 @@ export function DataTableProvider({ children, size = 'medium', enableRowSelectio
         size,
         enableRowSelection,
         fixedHeader,
+        showVerticalBorder,
         leftFixedColumnIndex,
         rightFixedColumnIndex,
         loading,

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

@@ -6,6 +6,36 @@ import { Checkbox } from '../../Checkbox';
 import { useDataTableContext } from '../DataTableProvider';
 import { cx } from '../../../styled-system/css';
 import { isComponentOrWrapped } from '../../utilities/react/isComponentOrWrapped';
+const INTERACTIVE_ELEMENT_SELECTOR = [
+    'a[href]',
+    'button',
+    'input',
+    'select',
+    'textarea',
+    'label',
+    'summary',
+    '[role="button"]',
+    '[role="link"]',
+    '[role="checkbox"]',
+    '[role="menuitem"]',
+    '[role="menuitemcheckbox"]',
+    '[role="menuitemradio"]',
+    '[role="option"]',
+    '[role="radio"]',
+    '[role="switch"]',
+    '[role="tab"]',
+    '[role="textbox"]',
+    '[contenteditable=""]',
+    '[contenteditable="true"]',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+function isClickFromNestedInteractiveElement(event) {
+    if (!(event.target instanceof Element)) {
+        return false;
+    }
+    const interactiveElement = event.target.closest(INTERACTIVE_ELEMENT_SELECTOR);
+    return interactiveElement !== null && interactiveElement !== event.currentTarget;
+}
 export const DataTableRow = forwardRef(({ children, disabled = false, highlighted, checkboxProps, className, onClickRow, selectable, ...props }, ref) => {
     const { enableRowSelection: contextEnableRowSelection, layout } = useDataTableContext();
     const isSelectable = selectable ?? contextEnableRowSelection;
@@ -24,12 +54,13 @@ export const DataTableRow = forwardRef(({ children, disabled = false, highlighte
         .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);
+        if (disabled || isClickFromNestedInteractiveElement(event)) {
+            return;
         }
+        onClickRow?.(event);
     };
     const handleKeyDownRow = (event) => {
-        if (!disabled && (event.key === 'Enter' || event.key === ' ')) {
+        if (!disabled && event.target === event.currentTarget && (event.key === 'Enter' || event.key === ' ')) {
             onClickRow?.(event);
         }
     };

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerProvider/DateRangePickerProvider.d.ts

@@ -31,7 +31,7 @@ export declare function useDateRangePickerContext(): {
     handleClear: () => void;
     handleApply: () => void;
     handleCancel: () => void;
-    selecting: "start" | "end";
+    selecting: "end" | "start";
     temporaryStart: Date | undefined;
     temporaryEnd: Date | undefined;
     previewDate: Date | undefined;
@@ -43,7 +43,7 @@ export declare function useDateRangePickerContext(): {
     isRangeEnd: (date: Date) => boolean;
     setTemporaryStart: import("react").Dispatch<import("react").SetStateAction<Date | undefined>>;
     setTemporaryEnd: import("react").Dispatch<import("react").SetStateAction<Date | undefined>>;
-    setSelecting: import("react").Dispatch<import("react").SetStateAction<"start" | "end">>;
+    setSelecting: import("react").Dispatch<import("react").SetStateAction<"end" | "start">>;
     disableAutoOpen: boolean | undefined;
     pendingFocusDate: string | null;
     setPendingFocusDate: import("react").Dispatch<import("react").SetStateAction<string | null>>;

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

@@ -1,7 +1,7 @@
 export declare const SEPARATOR_CONTENT = "\u301C";
 export declare const LOCALE: {
-    readonly CLEAR_BUTTON_LABEL: "値をクリアする";
-    readonly CALENDAR_BUTTON_LABEL: "カレンダーを開く";
-    readonly START_DATE_PLACEHOLDER: "開始日";
-    readonly END_DATE_PLACEHOLDER: "終了日";
+    readonly CLEAR_BUTTON_LABEL: '値をクリアする';
+    readonly CALENDAR_BUTTON_LABEL: 'カレンダーを開く';
+    readonly START_DATE_PLACEHOLDER: '開始日';
+    readonly END_DATE_PLACEHOLDER: '終了日';
 };

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerTrigger/hooks/useDateRangeTriggerInputClick.d.ts

@@ -11,5 +11,5 @@ import { type SyntheticEvent } from 'react';
  *   handleInputClick: (inputType: 'start' | 'end', userOnClick?: React.MouseEventHandler<HTMLInputElement>) => (event: React.MouseEvent<HTMLInputElement>) => void
  */
 export declare function useDateRangeTriggerInputClick(disableAutoOpen: boolean, popoverOpenFunction?: (event?: SyntheticEvent) => void): {
-    handleInputClick: (inputType: "start" | "end", userOnClick?: React.MouseEventHandler<HTMLInputElement>) => (event: React.MouseEvent<HTMLInputElement>) => void;
+    handleInputClick: (inputType: 'start' | 'end', userOnClick?: React.MouseEventHandler<HTMLInputElement>) => (event: React.MouseEvent<HTMLInputElement>) => void;
 };

package/dist/src/DateTimeSelection/DateRangePicker/utilities/createDateRangePickerTestUtility.d.ts

@@ -3,7 +3,6 @@ export type DateRangePickerTestUtilityConfig = {
     user: UserEvent;
 };
 export declare function createDateRangePickerTestUtility({ user }: DateRangePickerTestUtilityConfig): {
-    getPopover: () => Element | null;
     getPreviousMonthButton: () => HTMLElement | undefined;
     getNextMonthButton: () => HTMLElement | undefined;
     getTodayButton: () => HTMLElement;
@@ -29,4 +28,5 @@ export declare function createDateRangePickerTestUtility({ user }: DateRangePick
     setEndDate: (date: string) => Promise<void>;
     clearValues: () => Promise<void>;
     openCalendar: () => Promise<void>;
+    getPopover: () => Element | null;
 };

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

@@ -5,13 +5,13 @@
  */
 export declare const MONTH_RANGE_PICKER_A11Y_LABELS: {
     /** Label for selected months */
-    readonly SELECTED: "選択済み";
+    readonly SELECTED: '選択済み';
     /** Label for months in the selected range */
-    readonly IN_RANGE: "選択範囲内";
+    readonly IN_RANGE: '選択範囲内';
     /** Label for unavailable/disabled months */
-    readonly UNAVAILABLE: "無効";
+    readonly UNAVAILABLE: '無効';
     /** Label for range start months */
-    readonly RANGE_START: "範囲開始";
+    readonly RANGE_START: '範囲開始';
     /** Label for range end months */
-    readonly RANGE_END: "範囲終了";
+    readonly RANGE_END: '範囲終了';
 };

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

@@ -24,22 +24,22 @@
  * // With seconds
  * <TimePicker format="HH:mm:ss" />
  */
-export declare const TimePicker: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | "aria-invalid" | keyof {
+export declare const TimePicker: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "aria-invalid" | "type" | keyof {
     onChange?: (value: string, event: import("react").SyntheticEvent) => void;
-    format?: "HH:mm" | "HH:mm:ss";
-    size?: "small" | "medium" | "large";
+    format?: 'HH:mm' | 'HH:mm:ss';
+    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">;
+    clearButtonProps?: Pick<import("../..").IconButtonProps, 'aria-label'>;
+    pickerIndicatorIconButtonProps?: Pick<import("../..").IconButtonProps, 'aria-label'>;
 }> & {
     onChange?: (value: string, event: import("react").SyntheticEvent) => void;
-    format?: "HH:mm" | "HH:mm:ss";
-    size?: "small" | "medium" | "large";
+    format?: 'HH:mm' | 'HH:mm:ss';
+    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">;
+    clearButtonProps?: Pick<import("../..").IconButtonProps, 'aria-label'>;
+    pickerIndicatorIconButtonProps?: Pick<import("../..").IconButtonProps, 'aria-label'>;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/src/DateTimeSelection/shared/BasePicker/basePickerUtilities/useBasePickerValueController.d.ts

@@ -68,7 +68,7 @@ type UseBasePickerValueControllerOptions = {
 export declare function useBasePickerValueController({ value, defaultValue, format, customFormatValue, onChange, onPickerPopoverChange, }: UseBasePickerValueControllerOptions): {
     inputProps: {
         value: string;
-        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        onChange: (event: ChangeEvent<HTMLInputElement>) => void;
         onBlur: (event: React.FocusEvent<HTMLInputElement, Element>) => void;
         onClear: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     };

package/dist/src/DateTimeSelection/shared/BasePicker/constants.d.ts

@@ -8,7 +8,7 @@ export declare const LABEL_SELECT_MONTH = "\u6708\u3092\u9078\u629E";
 export declare const LABEL_OPEN_CALENDAR = "\u30AB\u30EC\u30F3\u30C0\u30FC\u3092\u958B\u304F";
 export declare const LABEL_CLOSE_CALENDAR = "\u30AB\u30EC\u30F3\u30C0\u30FC\u3092\u9589\u3058\u308B";
 export declare const LABEL_TODAY = "\u4ECA\u65E5";
-type LabelKey = 'GO_TO_PREV_MONTH' | 'GO_TO_NEXT_MONTH' | 'GO_TO_PREV_YEAR' | 'GO_TO_NEXT_YEAR' | 'SELECT_MONTH' | 'OPEN_CALENDAR' | 'CLOSE_CALENDAR' | 'TODAY';
+type LabelKey = 'GO_TO_PREV_MONTH' | 'GO_TO_NEXT_MONTH' | 'GO_TO_PREV_YEAR' | 'GO_TO_NEXT_YEAR' | 'SELECT_MONTH' | 'SELECT_YEAR' | 'OPEN_CALENDAR' | 'CLOSE_CALENDAR' | 'TODAY';
 export declare const BASE_PICKER_LABELS: Record<NonNullable<BasePickerProps['calendarLocale']>, Record<LabelKey, string>>;
 export declare const DAY_ABBREVIATIONS: Record<NonNullable<BasePickerProps['calendarLocale']>, string[]>;
 export declare const DAY_FULL_NAMES: Record<NonNullable<BasePickerProps['calendarLocale']>, string[]>;

package/dist/src/DateTimeSelection/shared/BasePicker/constants.js

@@ -14,6 +14,7 @@ export const BASE_PICKER_LABELS = {
         GO_TO_PREV_YEAR: '前の年',
         GO_TO_NEXT_YEAR: '次の年',
         SELECT_MONTH: '月を選択',
+        SELECT_YEAR: '年を選択',
         OPEN_CALENDAR: 'カレンダーを開く',
         CLOSE_CALENDAR: 'カレンダーを閉じる',
         TODAY: '今日',
@@ -24,6 +25,7 @@ export const BASE_PICKER_LABELS = {
         GO_TO_PREV_YEAR: 'Previous year',
         GO_TO_NEXT_YEAR: 'Next year',
         SELECT_MONTH: 'Select month',
+        SELECT_YEAR: 'Select year',
         OPEN_CALENDAR: 'Open calendar',
         CLOSE_CALENDAR: 'Close calendar',
         TODAY: 'Today',

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerCalendar/constants.d.ts

@@ -4,15 +4,15 @@
  */
 export declare const DATE_RANGE_PICKER_A11Y_LABELS: {
     /** Label for today's date */
-    readonly TODAY: "今日";
+    readonly TODAY: '今日';
     /** Label for selected dates */
-    readonly SELECTED: "選択済み";
+    readonly SELECTED: '選択済み';
     /** Label for dates in the selected range */
-    readonly IN_RANGE: "選択範囲内";
+    readonly IN_RANGE: '選択範囲内';
     /** Label for unavailable/disabled dates */
-    readonly UNAVAILABLE: "選択不可";
+    readonly UNAVAILABLE: '選択不可';
     /** Label for range start dates */
-    readonly RANGE_START: "開始日";
+    readonly RANGE_START: '開始日';
     /** Label for range end dates */
-    readonly RANGE_END: "終了日";
+    readonly RANGE_END: '終了日';
 };

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerProvider/BaseRangePickerProvider.d.ts

@@ -31,7 +31,7 @@ export declare function useBaseRangePickerContext(): {
     handleClear: () => void;
     handleApply: () => void;
     handleCancel: () => void;
-    selecting: "start" | "end";
+    selecting: "end" | "start";
     temporaryStart: Date | undefined;
     temporaryEnd: Date | undefined;
     previewDate: Date | undefined;
@@ -43,7 +43,7 @@ export declare function useBaseRangePickerContext(): {
     isRangeEnd: (date: Date) => boolean;
     setTemporaryStart: import("react").Dispatch<import("react").SetStateAction<Date | undefined>>;
     setTemporaryEnd: import("react").Dispatch<import("react").SetStateAction<Date | undefined>>;
-    setSelecting: import("react").Dispatch<import("react").SetStateAction<"start" | "end">>;
+    setSelecting: import("react").Dispatch<import("react").SetStateAction<"end" | "start">>;
     disableAutoOpen: boolean | undefined;
     pendingFocusDate: string | null;
     setPendingFocusDate: import("react").Dispatch<import("react").SetStateAction<string | null>>;

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/BaseRangePickerTrigger.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Calendar } from '@moneyforward/mfui-icons-react';
 import { forwardRef, useCallback } from 'react';
 import { cx } from '../../../../../styled-system/css';

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/hooks/useDateRangeTriggerInputClick.d.ts

@@ -11,5 +11,5 @@ import { type SyntheticEvent } from 'react';
  *   handleInputClick: (inputType: 'start' | 'end', userOnClick?: React.MouseEventHandler<HTMLInputElement>) => (event: React.MouseEvent<HTMLInputElement>) => void
  */
 export declare function useDateRangeTriggerInputClick(disableAutoOpen: boolean, popoverOpenFunction?: (event?: SyntheticEvent) => void): {
-    handleInputClick: (inputType: "start" | "end", userOnClick?: React.MouseEventHandler<HTMLInputElement>) => (event: React.MouseEvent<HTMLInputElement>) => void;
+    handleInputClick: (inputType: 'start' | 'end', userOnClick?: React.MouseEventHandler<HTMLInputElement>) => (event: React.MouseEvent<HTMLInputElement>) => void;
 };

package/dist/src/DateTimeSelection/shared/BaseRangePicker/utilities/createBaseRangePickerTestUtility.d.ts

@@ -5,7 +5,6 @@ export type BaseRangePickerTestUtilityConfig = {
     calendarLocale: BaseRangePickerProps['calendarLocale'];
 };
 export declare function createBaseRangePickerTestUtility({ user, calendarLocale }: BaseRangePickerTestUtilityConfig): {
-    getPopover: () => Element | null;
     getPreviousMonthButton: () => HTMLElement;
     getNextMonthButton: () => HTMLElement;
     getApplyButton: () => HTMLElement;
@@ -29,4 +28,5 @@ export declare function createBaseRangePickerTestUtility({ user, calendarLocale
     setEndDate: (date: string) => Promise<void>;
     clearValues: () => Promise<void>;
     openCalendar: () => Promise<void>;
+    getPopover: () => Element | null;
 };

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

@@ -3,6 +3,7 @@ import { useCallback, useMemo } from 'react';
 import { SelectBox } from '../../../SelectBox';
 import { yearSelectorSlotRecipe } from '../../../../styled-system/recipes';
 import { MAXIMUM_VIEWABLE_YEAR, MINIMUM_VIEWABLE_YEAR } from './constants';
+import { getBasePickerLabel } from '../BasePicker/constants';
 import { cx } from '../../../../styled-system/css';
 import { useCalendarLocale } from '../CalendarLocale/CalendarLocaleContext';
 import { useDisplayJapaneseCalendar } from '../CalendarLocale/DisplayJapaneseCalendarContext';
@@ -34,5 +35,10 @@ export function YearSelector({ value, onChange, filterYear, triggerProps, trigge
         }
     }, [onChange]);
     const classes = yearSelectorSlotRecipe();
-    return (_jsx(SelectBox, { value: selectedOption, options: options, size: "small", targetDOMNode: targetDOMNode, enableAutoScrollToSelectedOption: { block: 'center', behavior: 'instant' }, popoverContentProps: { className: cx(classes.optionPanel, 'mfui-YearSelector__optionPanel') }, triggerProps: triggerProps, triggerWrapperProps: triggerWrapperProps, onChange: handleChange }));
+    return (_jsx(SelectBox, { value: selectedOption, options: options, size: "small", targetDOMNode: targetDOMNode, enableAutoScrollToSelectedOption: { block: 'center', behavior: 'instant' }, popoverContentProps: { className: cx(classes.optionPanel, 'mfui-YearSelector__optionPanel') }, triggerProps: {
+            // The trigger has role="combobox", which does not support naming from its
+            // content, so an explicit accessible name is required.
+            'aria-label': getBasePickerLabel('SELECT_YEAR', calendarLocale),
+            ...triggerProps,
+        }, triggerWrapperProps: triggerWrapperProps, onChange: handleChange }));
 }

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

@@ -4,15 +4,15 @@
  */
 export declare const DATE_PICKER_A11Y_LABELS: {
     /** Label for today's date */
-    readonly TODAY: "今日";
+    readonly TODAY: '今日';
     /** Label for selected dates */
-    readonly SELECTED: "選択済み";
+    readonly SELECTED: '選択済み';
     /** Label for dates in the selected range */
-    readonly IN_RANGE: "選択範囲内";
+    readonly IN_RANGE: '選択範囲内';
     /** Label for unavailable/disabled dates */
-    readonly UNAVAILABLE: "選択不可";
+    readonly UNAVAILABLE: '選択不可';
     /** Label for range start dates */
-    readonly RANGE_START: "開始日";
+    readonly RANGE_START: '開始日';
     /** Label for range end dates */
-    readonly RANGE_END: "終了日";
+    readonly RANGE_END: '終了日';
 };

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

@@ -12,13 +12,13 @@ export declare const Dialog: import("react").ForwardRefExoticComponent<{
     open?: boolean;
     onClose?: () => void;
     actionSlot?: import("react").ReactNode;
-    size?: import("../../styled-system/recipes").DialogSlotRecipeVariant["size"];
+    size?: import("../../styled-system/recipes").DialogSlotRecipeVariant['size'];
     hideCloseButton?: boolean;
-    closeButtonProps?: Pick<import("react").ComponentPropsWithoutRef<"button">, "aria-label">;
+    closeButtonProps?: Pick<import("react").ComponentPropsWithoutRef<'button'>, 'aria-label'>;
     targetDOMNode?: HTMLElement | null;
     enableAutoUnmount?: boolean;
     disableBackdropClose?: boolean;
     customFocusElement?: import("react").RefObject<HTMLElement | null> | HTMLElement | null;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "open" | "onClose"> & {
-    ref?: (import("react").RefObject<HTMLDivElement | null> | import("react").RefCallback<HTMLDivElement> | null) | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onClose" | "open"> & {
+    ref?: (import("react").RefCallback<HTMLDivElement> | import("react").RefObject<HTMLDivElement | null> | null) | undefined;
 } & import("react").Attributes>;

package/dist/src/Disclosure/Disclosure.d.ts

@@ -13,14 +13,25 @@ import { type DisclosureProps } from './Disclosure.types';
  */
 export declare function Disclosure({ children, isOpenByDefault, enableAutoUnmount }: DisclosureProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Disclosure {
-    var Trigger: import("react").ForwardRefExoticComponent<{
-        targetId: string;
-        className?: string;
-        children: string;
-    } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    var Target: import("react").ForwardRefExoticComponent<{
-        id: string;
-        className?: string;
-        children: import("react").ReactNode;
-    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    export { Trigger };
+    export { Target };
 }
+/**
+ * The trigger button component for the Disclosure.
+ * Must be used within a Disclosure component.
+ */
+declare const Trigger: import("react").ForwardRefExoticComponent<{
+    targetId: string;
+    className?: string;
+    children: string;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * The target component for the Disclosure.
+ * Must be used within a Disclosure component.
+ */
+declare const Target: import("react").ForwardRefExoticComponent<{
+    id: string;
+    className?: string;
+    children: import("react").ReactNode;
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/src/DropdownMenu/DropdownMenu.d.ts

@@ -21,7 +21,7 @@ import { DropdownMenuHeading } from './DropdownMenuHeading';
  */
 export declare function DropdownMenu({ icon, label, children, triggerProps, tooltipLabel, tooltipPlacement, triggerMiddleTruncate, triggerTypographyVariant, menuPopoverProps, disabled, targetDOMNode, enableAutoUnmount, onOpenStateChanged, onBlur, }: DropdownMenuProps<ReactElement | undefined>): import("react/jsx-runtime").JSX.Element;
 export declare namespace DropdownMenu {
-    var Divider: typeof DropdownMenuDivider;
-    var Item: typeof DropdownMenuItem;
-    var Heading: typeof DropdownMenuHeading;
+    export { DropdownMenuDivider as Divider };
+    export { DropdownMenuItem as Item };
+    export { DropdownMenuHeading as Heading };
 }

package/dist/src/DropdownMenu/DropdownMenu.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState, } from 'react';
 import { DropdownMenuButtonTrigger } from './DropdownMenuButtonTrigger';
 import { DropdownMenuContainer } from './DropdownMenuContainer';
 import { DropdownMenuDivider } from './DropdownMenuDivider';
@@ -29,7 +29,15 @@ import { DropdownMenuHeading } from './DropdownMenuHeading';
  */
 export function DropdownMenu({ icon, label, children, triggerProps, tooltipLabel, tooltipPlacement, triggerMiddleTruncate, triggerTypographyVariant, menuPopoverProps, disabled, targetDOMNode, enableAutoUnmount, onOpenStateChanged, onBlur, }) {
     const [menuDefaultFocusPosition, setMenuDefaultFocusPosition] = useState('first');
+    // Tracks keyboard activation (Enter / Space) of the trigger. The resulting click event usually
+    // has `detail === 0`, but Safari reports keyboard-triggered clicks with `detail === 1`, so the
+    // keydown itself is recorded as the reliable signal.
+    const isTriggerActivatedByKeyboardRef = useRef(false);
     const handleTriggerKeyDownLocal = useCallback((event) => {
+        // The flag only survives from an Enter / Space keydown to its follow-up click; any other key
+        // invalidates the pending keyboard activation so the flag cannot linger when the click never
+        // fires.
+        isTriggerActivatedByKeyboardRef.current = event.key === 'Enter' || event.key === ' ';
         switch (event.key) {
             case 'ArrowDown':
                 event.stopPropagation();
@@ -49,7 +57,23 @@ export function DropdownMenu({ icon, label, children, triggerProps, tooltipLabel
                 handleTriggerKeyDownLocal(event);
                 handleTriggerKeyDown(event);
             };
-            return icon ? (_jsx(IconButton, { ref: setTriggerRef, "aria-expanded": isPopoverOpen, "aria-haspopup": "menu", disabled: disabled, onKeyDown: handleKeyDownCommon, onBlur: handleTriggerBlur, onClick: togglePopover, ...triggerProps, "aria-label": label, children: icon })) : (_jsx(DropdownMenuButtonTrigger, { label: label, tooltipLabel: tooltipLabel, tooltipPlacement: tooltipPlacement, triggerMiddleTruncate: triggerMiddleTruncate, triggerTypographyVariant: triggerTypographyVariant, triggerProps: triggerProps, disabled: disabled, isPopoverOpen: isPopoverOpen, setTriggerRef: setTriggerRef, togglePopover: togglePopover, handleTriggerKeyDown: handleKeyDownCommon, handleTriggerBlur: handleTriggerBlur }));
+            const handleBlurCommon = (event) => {
+                // Focus leaving the trigger invalidates any pending keyboard activation (e.g. a Space
+                // keydown whose follow-up click never fired), so a later mouse click cannot be
+                // misclassified as keyboard activation.
+                isTriggerActivatedByKeyboardRef.current = false;
+                handleTriggerBlur(event);
+            };
+            const handleTriggerClick = (event) => {
+                // Opening with the keyboard (Enter / Space) focuses the first item, following the
+                // WAI-ARIA menu button pattern. Opening with the mouse focuses no item; the menu
+                // container receives focus instead so that arrow keys still work.
+                const isKeyboardActivation = isTriggerActivatedByKeyboardRef.current || event.detail === 0;
+                isTriggerActivatedByKeyboardRef.current = false;
+                setMenuDefaultFocusPosition(isKeyboardActivation ? 'first' : 'none');
+                togglePopover(event);
+            };
+            return icon ? (_jsx(IconButton, { ref: setTriggerRef, "aria-expanded": isPopoverOpen, "aria-haspopup": "menu", disabled: disabled, onKeyDown: handleKeyDownCommon, onBlur: handleBlurCommon, onClick: handleTriggerClick, ...triggerProps, "aria-label": label, children: icon })) : (_jsx(DropdownMenuButtonTrigger, { label: label, tooltipLabel: tooltipLabel, tooltipPlacement: tooltipPlacement, triggerMiddleTruncate: triggerMiddleTruncate, triggerTypographyVariant: triggerTypographyVariant, triggerProps: triggerProps, disabled: disabled, isPopoverOpen: isPopoverOpen, setTriggerRef: setTriggerRef, togglePopover: handleTriggerClick, handleTriggerKeyDown: handleKeyDownCommon, handleTriggerBlur: handleBlurCommon }));
         }, renderContent: ({ closePopover }) => (_jsx(DropdownMenuProvider, { value: { closeMenuPopover: closePopover }, children: _jsx(DropdownMenuContainer, { defaultFocusItem: menuDefaultFocusPosition, onClose: closePopover, children: children }) })), enableAutoFocusOnPopover: false, enableAutoUnmount: enableAutoUnmount, contentProps: {
             className: cx(classes.popover, menuPopoverProps?.className),
         }, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }));