@moneyforward/mfui-components 3.37.2 → 4.1.0

package/README.md

@@ -99,7 +99,7 @@ import { IconButton } from '@moneyforward/mfui-components';
 
 export function Bar() {
   return (
-    <IconButton>
+    <IconButton aria-label="Add">
       <Add />
     </IconButton>
   );

package/dist/src/Button/Button.js

@@ -50,5 +50,5 @@ type = 'button', href, customLinkComponent, ...props }, ref) => {
             ...props,
         };
     }, [isButton, classes.root, className, href, isDisabled, type, props, ref]);
-    return (_jsx(FocusIndicator, { children: _jsxs(Tag, { ...tagProps, children: [leftIcon ? _jsx("div", { className: cx(classes.leftIcon, 'mfui-Button__leftIcon'), children: leftIcon }) : null, loading ? (_jsx(ProgressIndicator, { className: cx(classes.loadingIndicator, 'mfui-Button__loadingIndicator') })) : null, typeof children === 'string' ? _jsx(Typography, { variant: typographyVariant, children: children }) : children, rightIcon ? _jsx("div", { className: cx(classes.rightIcon, 'mfui-Button__rightIcon'), children: rightIcon }) : null, isDropdownTrigger ? (_jsx(Dropdown, { "aria-hidden": "true", className: cx(classes.dropdownIcon, 'mfui-Button__dropdownIcon') })) : null] }) }));
+    return (_jsx(FocusIndicator, { children: _jsxs(Tag, { ...tagProps, children: [leftIcon ? (_jsx("div", { "aria-hidden": "true", className: cx(classes.leftIcon, 'mfui-Button__leftIcon'), children: leftIcon })) : null, loading ? (_jsx(ProgressIndicator, { className: cx(classes.loadingIndicator, 'mfui-Button__loadingIndicator') })) : null, typeof children === 'string' ? _jsx(Typography, { variant: typographyVariant, children: children }) : children, rightIcon ? (_jsx("div", { "aria-hidden": "true", className: cx(classes.rightIcon, 'mfui-Button__rightIcon'), children: rightIcon })) : null, isDropdownTrigger ? (_jsx(Dropdown, { "aria-hidden": "true", className: cx(classes.dropdownIcon, 'mfui-Button__dropdownIcon') })) : null] }) }));
 });

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

@@ -38,6 +38,9 @@ export type ButtonProps = {
      * Icon element to be rendered on the left side within the button
      * Only one element is allowed
      *
+     * The icon is treated as decorative and hidden from assistive technologies.
+     * If the icon conveys meaning, express it in the button's text content or `aria-label` instead.
+     *
      * @default undefined
      */
     leftIcon?: React.ReactElement;
@@ -59,6 +62,9 @@ export type ButtonProps = {
      * Icon element to be rendered on the right side and before dropdown trigger within the button
      * Only one element is allowed
      *
+     * The icon is treated as decorative and hidden from assistive technologies.
+     * If the icon conveys meaning, express it in the button's text content or `aria-label` instead.
+     *
      * @default undefined
      */
     rightIcon?: React.ReactElement;

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

@@ -6,11 +6,43 @@
  *
  * @see DataTable
  */
-export { DataTable as DataGrid } from '../DataTable';
-export type { DataTableProps as DataGridProps } from '../DataTable';
-export type { DataTableBodyProps as DataGridBodyProps } from '../DataTable';
-export type { DataTableCellProps as DataGridCellProps } from '../DataTable';
-export type { DataTableHeaderProps as DataGridHeaderProps } from '../DataTable';
-export type { DataTableHeaderCellProps as DataGridHeaderCellProps } from '../DataTable';
-export type { DataTableHeaderRowProps as DataGridHeaderRowProps } from '../DataTable';
-export type { DataTableRowProps as DataGridRowProps } from '../DataTable';
+export { 
+/**
+ * @deprecated Use `DataTable` instead. `DataGrid` will be removed in v5.0.0.
+ */
+DataTable as DataGrid, } from '../DataTable';
+export type { 
+/**
+ * @deprecated Use `DataTableProps` instead. `DataGridProps` will be removed in v5.0.0.
+ */
+DataTableProps as DataGridProps, } from '../DataTable';
+export type { 
+/**
+ * @deprecated Use `DataTableBodyProps` instead. `DataGridBodyProps` will be removed in v5.0.0.
+ */
+DataTableBodyProps as DataGridBodyProps, } from '../DataTable';
+export type { 
+/**
+ * @deprecated Use `DataTableCellProps` instead. `DataGridCellProps` will be removed in v5.0.0.
+ */
+DataTableCellProps as DataGridCellProps, } from '../DataTable';
+export type { 
+/**
+ * @deprecated Use `DataTableHeaderProps` instead. `DataGridHeaderProps` will be removed in v5.0.0.
+ */
+DataTableHeaderProps as DataGridHeaderProps, } from '../DataTable';
+export type { 
+/**
+ * @deprecated Use `DataTableHeaderCellProps` instead. `DataGridHeaderCellProps` will be removed in v5.0.0.
+ */
+DataTableHeaderCellProps as DataGridHeaderCellProps, } from '../DataTable';
+export type { 
+/**
+ * @deprecated Use `DataTableHeaderRowProps` instead. `DataGridHeaderRowProps` will be removed in v5.0.0.
+ */
+DataTableHeaderRowProps as DataGridHeaderRowProps, } from '../DataTable';
+export type { 
+/**
+ * @deprecated Use `DataTableRowProps` instead. `DataGridRowProps` will be removed in v5.0.0.
+ */
+DataTableRowProps as DataGridRowProps, } from '../DataTable';

package/dist/src/DataGrid/index.js

@@ -6,4 +6,8 @@
  *
  * @see DataTable
  */
-export { DataTable as DataGrid } from '../DataTable';
+export { 
+/**
+ * @deprecated Use `DataTable` instead. `DataGrid` will be removed in v5.0.0.
+ */
+DataTable as DataGrid, } from '../DataTable';

package/dist/src/DataTable/DataTable.js

@@ -13,7 +13,7 @@ import { DataTableRow } from './DataTableRow';
 import { DataTableSortButton } from './DataTableSortButton';
 import { cx } from '../../styled-system/css';
 import { isComponentOrWrapped } from '../utilities/react/isComponentOrWrapped';
-const Base = forwardRef(({ className, size = 'medium', enableRowSelection = false, fixedHeader = false, showVerticalBorder = false, leftFixedColumnIndex, rightFixedColumnIndex, layout = 'default', wrapperProps, loading = false, emptyStateSlot, children, ...props }, ref) => {
+const Base = forwardRef(({ className, size = 'medium', enableRowSelection = false, enableRowClickSelection = 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(() => {
@@ -38,7 +38,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, showVerticalBorder: showVerticalBorder, 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, enableRowClickSelection: enableRowClickSelection, 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

@@ -31,6 +31,26 @@ export type DataTableProps = {
      * @default false
      */
     enableRowSelection?: boolean;
+    /**
+     * Whether clicking anywhere in a selectable row toggles its selection.
+     * This prop is intended to be combined with the `enableRowSelection` prop, and has no effect on rows that are not selectable.
+     *
+     * If `true`, the whole row becomes the trigger of the row selection:
+     *
+     * - Clicking the row, including its checkbox cell, calls the `checkboxProps.onChange` of the `DataTable.Row` component once.
+     *   The checkbox stops responding to clicks on its own, so a single click never toggles the selection twice.
+     *   The checkbox cell does not have independent hover, focus, or active styles; the checkbox icon follows the row state.
+     * - The row is focusable, and pressing Enter or Space while the row itself is focused toggles the selection.
+     *   The checkbox is removed from the tab order, so keyboard selection is handled through the row.
+     * - The row selection is not toggled when the click originates from another interactive element inside the row,
+     *   such as a button or a link, or when the row or its checkbox is disabled.
+     *
+     * Note that the `onClickRow` prop of the `DataTable.Row` component is still called for the row clicks.
+     * Do not toggle the row selection in `onClickRow` while this prop is `true`, otherwise the selection is toggled twice.
+     *
+     * @default false
+     */
+    enableRowClickSelection?: boolean;
     /**
      * Whether the header is fixed when scrolling horizontally.
      * If `true`, the header will be sticky.

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

@@ -11,20 +11,23 @@ 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, isRowHeader = false, disabled = false, depth = 0, columnIndex, disclosureIconProps: nestingIconProps, style, ...props }, ref) => {
-    const { size, leftFixedColumnIndex, rightFixedColumnIndex, loading, enableRowSelection, showVerticalBorder, layout, } = useDataTableContext();
+    const { size, leftFixedColumnIndex, rightFixedColumnIndex, loading, enableRowSelection, enableRowClickSelection, showVerticalBorder, layout, } = useDataTableContext();
     const { cellRef, isFixedColumn, isEdgeFixedColumn, fixedPositionStyles } = useFixedColumns({
         enableRowSelection,
         columnIndex,
         leftFixedColumnIndex,
         rightFixedColumnIndex,
     });
+    const isCheckboxCell = enableRowSelection && columnIndex === 0;
+    const isCheckboxCellInteractive = isCheckboxCell && !enableRowClickSelection;
     const classes = dataTableCellSlotRecipe({
         size,
         type,
         rowHighlighted: isRowHighlighted,
         fixedColumn: isFixedColumn,
         edgeFixedColumn: isEdgeFixedColumn,
-        isCheckboxCell: enableRowSelection && columnIndex === 0,
+        isCheckboxCell,
+        isCheckboxCellInteractive: isCheckboxCellInteractive || undefined,
         verticalBorder: showVerticalBorder,
         layout,
         // Passing `false` would emit a class for the unused `false` variant value, changing the
@@ -36,7 +39,6 @@ export const DataTableCell = forwardRef(({ onClickCell, children, type = 'text',
     const handleClick = (event) => {
         onClickCell?.(event);
     };
-    const isCheckboxCell = enableRowSelection && columnIndex === 0;
     const cellContent = (() => {
         if (loading) {
             return (_jsx("div", { className: cx(classes.skeletonCell, 'mfui-DataTableCell__skeletonCell', 
@@ -47,8 +49,9 @@ export const DataTableCell = forwardRef(({ onClickCell, children, type = 'text',
                     /* 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', 
-                    /* TODO: Remove in v5.0.0 */ 'mfui-DataGridCell__defaultCell'), "data-mfui-content": "data-table-checkbox-cell", ...(disabled && { 'data-disabled': true, 'aria-disabled': true }), onClick: disabled ? undefined : handleCheckboxCellClick, children: _jsx(CellContent, { depth: depth, disclosureIconProps: nestingIconProps, classes: classes, children: children }) }) }));
+            const checkboxCell = (_jsx("div", { className: cx(classes.defaultCell, 'mfui-DataTableCell__defaultCell', 
+                /* TODO: Remove in v5.0.0 */ 'mfui-DataGridCell__defaultCell'), ...(isCheckboxCellInteractive && { 'data-mfui-content': 'data-table-checkbox-cell' }), ...(disabled && { 'data-disabled': true, 'aria-disabled': true }), onClick: disabled || !isCheckboxCellInteractive ? undefined : handleCheckboxCellClick, children: _jsx(CellContent, { depth: depth, disclosureIconProps: nestingIconProps, classes: classes, children: children }) }));
+            return isCheckboxCellInteractive ? (_jsx(FocusIndicator, { position: "inside", children: checkboxCell })) : (checkboxCell);
         }
         return (_jsx("div", { className: cx(classes.defaultCell, 'mfui-DataTableCell__defaultCell', 
             /* TODO: Remove in v5.0.0 */ 'mfui-DataGridCell__defaultCell'), children: _jsx(CellContent, { depth: depth, disclosureIconProps: nestingIconProps, classes: classes, children: children }) }));

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

@@ -31,14 +31,14 @@ export const DataTableHeaderCell = forwardRef(({ children, type = 'text', sortBu
     const sortIcon = (() => {
         if (!sortOrder) {
             return (_jsx(SortUnsorted, { className: cx(classes.unsortedIcon, 'mfui-DataTableHeaderCell__unsortedIcon', 
-                /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__unsortedIcon'), "aria-label": unsortedIconProps?.['aria-label'] ?? '並び替えを解除' }));
+                /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__unsortedIcon'), role: "img", "aria-label": unsortedIconProps?.['aria-label'] ?? '並び替えを解除' }));
         }
         if (sortOrder === 'ascending') {
             return (_jsx(SortAscending, { className: cx(classes.sortIcon, 'mfui-DataTableHeaderCell__sortIcon', 
-                /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__sortIcon'), "aria-label": ascendingIconProps?.['aria-label'] ?? '昇順で並び替え' }));
+                /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__sortIcon'), role: "img", "aria-label": ascendingIconProps?.['aria-label'] ?? '昇順で並び替え' }));
         }
         return (_jsx(SortDescending, { className: cx(classes.sortIcon, 'mfui-DataTableHeaderCell__sortIcon', 
-            /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__sortIcon'), "aria-label": descendingIconProps?.['aria-label'] ?? '降順で並び替え' }));
+            /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__sortIcon'), role: "img", "aria-label": descendingIconProps?.['aria-label'] ?? '降順で並び替え' }));
     })();
     const handleClickSortButton = sortButtonProps?.onClick;
     const cellContent = (() => {

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' | 'showVerticalBorder' | 'leftFixedColumnIndex' | 'rightFixedColumnIndex' | 'loading' | 'layout'>;
+export type DataTableContextProps = Pick<DataTableProps, 'size' | 'enableRowSelection' | 'enableRowClickSelection' | '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, showVerticalBorder, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout, }: PropsWithChildren<DataTableContextProps>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableProvider({ children, size, enableRowSelection, enableRowClickSelection, fixedHeader, showVerticalBorder, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout, }: PropsWithChildren<DataTableContextProps>): import("react/jsx-runtime").JSX.Element;

package/dist/src/DataTable/DataTableProvider.js

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

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, forwardRef, isValidElement } from 'react';
+import { Children, cloneElement, forwardRef, isValidElement, useRef } from 'react';
 import { dataTableRowSlotRecipe } from '../../../styled-system/recipes';
 import { DataTableCell } from '../DataTableCell';
 import { Checkbox } from '../../Checkbox';
@@ -37,14 +37,18 @@ function isClickFromNestedInteractiveElement(event) {
     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 { enableRowSelection: contextEnableRowSelection, enableRowClickSelection, layout } = useDataTableContext();
+    const selectionCheckboxRef = useRef(null);
     const isSelectable = selectable ?? contextEnableRowSelection;
     const isRowHighlighted = isSelectable ? (checkboxProps?.checked ?? highlighted) : highlighted;
-    const isInteractive = onClickRow !== undefined && !disabled;
+    // Only a row whose selection can actually be toggled becomes the trigger of the row selection.
+    const isRowClickSelectable = !!enableRowClickSelection && isSelectable && !disabled && !checkboxProps?.disabled;
+    const isInteractive = (onClickRow !== undefined || isRowClickSelectable) && !disabled;
     const classes = dataTableRowSlotRecipe({
         layout,
         highlighted: isRowHighlighted,
         interactive: isInteractive,
+        rowClickSelectable: isRowClickSelectable,
         disabled,
     });
     // When the interactive row itself toggles a disclosure (a child cell shows the disclosure icon
@@ -52,22 +56,35 @@ export const DataTableRow = forwardRef(({ children, disabled = false, highlighte
     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 ariaExpanded = onClickRow !== undefined && !disabled && disclosureIconProps ? (disclosureIconProps.isOpen ?? false) : undefined;
+    // Forwarding the interaction to the checkbox lets the consumer keep handling the row selection in
+    // `checkboxProps.onChange` only, and the change event carries the real next checked state.
+    const toggleSelectionByRowInteraction = () => {
+        selectionCheckboxRef.current?.click();
+    };
     const handleClickRow = (event) => {
         if (disabled || isClickFromNestedInteractiveElement(event)) {
             return;
         }
+        if (isRowClickSelectable) {
+            toggleSelectionByRowInteraction();
+        }
         onClickRow?.(event);
     };
     const handleKeyDownRow = (event) => {
         if (!disabled && event.target === event.currentTarget && (event.key === 'Enter' || event.key === ' ')) {
+            if (isRowClickSelectable) {
+                // Not to scroll the page when the Space key is pressed on the focused row.
+                event.preventDefault();
+                toggleSelectionByRowInteraction();
+            }
             onClickRow?.(event);
         }
     };
     return (_jsxs("tr", { ref: ref, className: cx(classes.root, 'mfui-DataTableRow__root', 
         /* 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) => {
+        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, { ref: selectionCheckboxRef, className: cx(classes.selectionCheckbox, 'mfui-DataTableRow__selectionCheckbox'), checked: checkboxProps?.checked, "aria-label": checkboxProps?.['aria-label'] ?? '行を選択', disabled: disabled || checkboxProps?.disabled, tabIndex: isRowClickSelectable ? -1 : undefined, onChange: checkboxProps?.onChange, onClick: checkboxProps?.onClick }) })) : null, Children.map(children, (child, index) => {
                 if (!isValidElement(child)) {
                     return child;
                 }

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

@@ -54,6 +54,10 @@ export type DataTableRowProps = {
      * Likewise, Enter or Space triggers this callback only while the row itself is focused,
      * not while a focusable descendant is focused.
      *
+     * When the `enableRowClickSelection` prop of the `DataTable` component is `true`, the selection checkbox stops
+     * responding to clicks on its own, so this callback is called for the clicks on the checkbox cell as well.
+     * Do not toggle the row selection here in that case, otherwise the selection is toggled twice.
+     *
      * @default undefined
      */
     onClickRow?: (event: React.MouseEvent<HTMLTableRowElement> | React.KeyboardEvent<HTMLTableRowElement>) => void;

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

@@ -1,5 +1,6 @@
 import { type BasePickerProps } from '../shared/BasePicker';
 import { type IconButtonProps } from '../../IconButton';
+import { type FirstDayOfWeek } from '../shared/BasePicker/constants';
 export type DatePickerProps = Omit<BasePickerProps, 'renderPopoverContent' | 'baseFormat'> & {
     /**
      * Function to check if a date should be disabled.
@@ -45,6 +46,12 @@ export type DatePickerProps = Omit<BasePickerProps, 'renderPopoverContent' | 'ba
      * @default 'ja'
      */
     calendarLocale?: BasePickerProps['calendarLocale'];
+    /**
+     * The day of the week that the calendar week starts on.
+     *
+     * @default 'monday'
+     */
+    firstDayOfWeek?: FirstDayOfWeek;
 };
 /**
  * DatePicker component
@@ -52,4 +59,4 @@ export type DatePickerProps = Omit<BasePickerProps, 'renderPopoverContent' | 'ba
  * This is a wrapper around BasePicker, setting default format to 'YYYY/MM/DD' and using DatePickerPanel.
  * See BasePicker for implementation details.
  */
-export declare function DatePicker({ format, checkDisabledDate, minDate, maxDate, prevMonthIconButtonProps, nextMonthIconButtonProps, todayButtonProps, displayJapaneseCalendar, calendarLocale, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePicker({ format, checkDisabledDate, minDate, maxDate, prevMonthIconButtonProps, nextMonthIconButtonProps, todayButtonProps, displayJapaneseCalendar, calendarLocale, firstDayOfWeek, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -4,6 +4,8 @@ import { BasePicker } from '../shared/BasePicker';
 import { DatePickerPanel } from './DatePickerPanel';
 import { CalendarLocaleProvider } from '../shared/CalendarLocale/CalendarLocaleContext';
 import { DisplayJapaneseCalendarProvider } from '../shared/CalendarLocale/DisplayJapaneseCalendarContext';
+import { FirstDayOfWeekProvider } from '../shared/CalendarLocale/FirstDayOfWeekContext';
+import { DEFAULT_FIRST_DAY_OF_WEEK } from '../shared/BasePicker/constants';
 import { dateToEnglishEraShort, dateToJapaneseEra } from '../shared/utilities/japaneseCalendar';
 /**
  * DatePicker component
@@ -11,11 +13,11 @@ import { dateToEnglishEraShort, dateToJapaneseEra } from '../shared/utilities/ja
  * This is a wrapper around BasePicker, setting default format to 'YYYY/MM/DD' and using DatePickerPanel.
  * See BasePicker for implementation details.
  */
-export function DatePicker({ format = 'YYYY/MM/DD', checkDisabledDate, minDate, maxDate, prevMonthIconButtonProps, nextMonthIconButtonProps, todayButtonProps, displayJapaneseCalendar = false, calendarLocale = 'ja', ...props }) {
+export function DatePicker({ format = 'YYYY/MM/DD', checkDisabledDate, minDate, maxDate, prevMonthIconButtonProps, nextMonthIconButtonProps, todayButtonProps, displayJapaneseCalendar = false, calendarLocale = 'ja', firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, ...props }) {
     const customFormatValue = useMemo(() => {
         if (!displayJapaneseCalendar)
             return;
         return calendarLocale === 'en' ? dateToEnglishEraShort : dateToJapaneseEra;
     }, [displayJapaneseCalendar, calendarLocale]);
-    return (_jsx(BasePicker, { ...props, format: format, baseFormat: "YYYY-MM-DD", calendarLocale: calendarLocale, customFormatValue: customFormatValue, renderPopoverContent: ({ value, onChange }) => (_jsx(DisplayJapaneseCalendarProvider, { value: displayJapaneseCalendar, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(DatePickerPanel, { value: value, checkDisabledDate: checkDisabledDate, minDate: minDate, maxDate: maxDate, prevMonthIconButtonProps: prevMonthIconButtonProps, nextMonthIconButtonProps: nextMonthIconButtonProps, todayButtonProps: todayButtonProps, onChange: onChange }) }) })) }));
+    return (_jsx(BasePicker, { ...props, format: format, baseFormat: "YYYY-MM-DD", calendarLocale: calendarLocale, customFormatValue: customFormatValue, renderPopoverContent: ({ value, onChange }) => (_jsx(DisplayJapaneseCalendarProvider, { value: displayJapaneseCalendar, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(FirstDayOfWeekProvider, { value: firstDayOfWeek, children: _jsx(DatePickerPanel, { value: value, checkDisabledDate: checkDisabledDate, minDate: minDate, maxDate: maxDate, prevMonthIconButtonProps: prevMonthIconButtonProps, nextMonthIconButtonProps: nextMonthIconButtonProps, todayButtonProps: todayButtonProps, onChange: onChange }) }) }) })) }));
 }

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

@@ -5,4 +5,4 @@ import { type DateRangePickerProps } from './DateRangePicker.types';
  *
  * @param props - DateRangePicker props
  */
-export declare function DateRangePicker({ format, calendarLocale, displayJapaneseCalendar, ...restProps }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateRangePicker({ format, calendarLocale, displayJapaneseCalendar, firstDayOfWeek, ...restProps }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -10,6 +10,8 @@ import { useMemo } from 'react';
 import { BaseRangePicker } from '../shared/BaseRangePicker';
 import { CalendarLocaleProvider } from '../shared/CalendarLocale/CalendarLocaleContext';
 import { DisplayJapaneseCalendarProvider } from '../shared/CalendarLocale/DisplayJapaneseCalendarContext';
+import { FirstDayOfWeekProvider } from '../shared/CalendarLocale/FirstDayOfWeekContext';
+import { DEFAULT_FIRST_DAY_OF_WEEK } from '../shared/BasePicker/constants';
 import { DateRangePickerPopover } from './DateRangePickerPopover/DateRangePickerPopover';
 import { dateToEnglishEraShort, dateToJapaneseEra } from '../shared/utilities/japaneseCalendar';
 /**
@@ -18,11 +20,11 @@ import { dateToEnglishEraShort, dateToJapaneseEra } from '../shared/utilities/ja
  *
  * @param props - DateRangePicker props
  */
-export function DateRangePicker({ format = 'YYYY/MM/DD', calendarLocale = 'ja', displayJapaneseCalendar = false, ...restProps }) {
+export function DateRangePicker({ format = 'YYYY/MM/DD', calendarLocale = 'ja', displayJapaneseCalendar = false, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, ...restProps }) {
     const customFormatValue = useMemo(() => {
         if (!displayJapaneseCalendar)
             return;
         return calendarLocale === 'en' ? dateToEnglishEraShort : dateToJapaneseEra;
     }, [displayJapaneseCalendar, calendarLocale]);
-    return (_jsx(BaseRangePicker, { ...restProps, format: format, calendarLocale: calendarLocale, customFormatValue: customFormatValue, renderPopoverContent: () => (_jsx(DisplayJapaneseCalendarProvider, { value: displayJapaneseCalendar, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(DateRangePickerPopover, {}) }) })) }));
+    return (_jsx(BaseRangePicker, { ...restProps, format: format, calendarLocale: calendarLocale, customFormatValue: customFormatValue, renderPopoverContent: () => (_jsx(DisplayJapaneseCalendarProvider, { value: displayJapaneseCalendar, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(FirstDayOfWeekProvider, { value: firstDayOfWeek, children: _jsx(DateRangePickerPopover, {}) }) }) })) }));
 }

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

@@ -1,5 +1,6 @@
 import { type BaseRangePickerProps } from '../shared/BaseRangePicker';
 import { type BasePickerProps } from '../shared/BasePicker';
+import { type FirstDayOfWeek } from '../shared/BasePicker/constants';
 /**
  * The props for the DateRangePicker component
  */
@@ -10,6 +11,12 @@ export type DateRangePickerProps = BaseRangePickerProps & {
      * @default 'ja'
      */
     calendarLocale?: BasePickerProps['calendarLocale'];
+    /**
+     * The day of the week that the calendar week starts on.
+     *
+     * @default 'monday'
+     */
+    firstDayOfWeek?: FirstDayOfWeek;
     /**
      * Whether to display the date in Japanese calendar format (e.g., "令和7年1月15日")
      * When enabled, the text inputs will show dates in Japanese calendar format

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, enableClearButton, 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, firstDayOfWeek, triggerRef, targetDOMNode, dialogId, }: InternalCalendarPopoverProps): import("react/jsx-runtime").JSX.Element;

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

@@ -10,6 +10,7 @@ import { cx } from '../../../../styled-system/css';
 import { dayjs } from '../../../utilities/date/dayjs';
 import { DatePickerPanel } from '../../DatePicker/DatePickerPanel';
 import { useBasePickerContext } from '../../shared/BasePicker/BasePickerProvider';
+import { FirstDayOfWeekProvider } from '../../shared/CalendarLocale/FirstDayOfWeekContext';
 import { useFocusTrap } from '../../../utilities/dom/useFocusTrap';
 import { getFocusableNodes } from '../../../utilities/dom/getFocusableNodes';
 const BASE_FORMAT = 'YYYY-MM-DD';
@@ -17,7 +18,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, enableClearButton, 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, firstDayOfWeek, triggerRef, targetDOMNode, dialogId, }) {
     const { setViewingValue, setPendingFocusDate } = useBasePickerContext();
     const { handleOnKeyDown } = useFocusTrap({
         onPressingTabOnNotFocusableElement: (event) => {
@@ -39,7 +40,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": 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 }));
+    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(FirstDayOfWeekProvider, { value: firstDayOfWeek, 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

@@ -21,6 +21,7 @@ export type InternalCalendarPopoverProps = {
     prevMonthIconButtonProps: FilterDatePickerProps['prevMonthIconButtonProps'];
     nextMonthIconButtonProps: FilterDatePickerProps['nextMonthIconButtonProps'];
     todayButtonProps: FilterDatePickerProps['todayButtonProps'];
+    firstDayOfWeek: NonNullable<FilterDatePickerProps['firstDayOfWeek']>;
     triggerRef: React.RefObject<HTMLButtonElement | null>;
     targetDOMNode: FilterDatePickerProps['targetDOMNode'];
     dialogId: string;

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, enableClearButton, 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, firstDayOfWeek, }: FilterDatePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,6 +6,7 @@ import { useDisclosure } from '../../utilities/state/useDisclosure';
 import { dayjs } from '../../utilities/date/dayjs';
 import { filterDatePickerSlotRecipe } from '../../../styled-system/recipes';
 import { InternalCalendarPopover } from './CalendarPopover/CalendarPopover';
+import { DEFAULT_FIRST_DAY_OF_WEEK } from '../shared/BasePicker/constants';
 const DEFAULT_FORMAT = 'YYYY/MM/DD';
 /**
  * FilterDatePicker component.
@@ -19,7 +20,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, enableClearButton = false, 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, firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, }) {
     const classes = filterDatePickerSlotRecipe();
     const triggerRef = useRef(null);
     const dialogId = useId();
@@ -71,5 +72,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, enableClearButton: enableClearButton, 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, firstDayOfWeek: firstDayOfWeek, triggerRef: triggerRef, targetDOMNode: targetDOMNode, dialogId: dialogId }) }));
 }

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

@@ -1,5 +1,6 @@
 import { type IconButtonProps } from '../../IconButton';
 import { type PopoverProps } from '../../Popover';
+import { type FirstDayOfWeek } from '../shared/BasePicker/constants';
 export type FilterDatePickerProps = {
     /**
      * The label to display for the filter.
@@ -94,4 +95,10 @@ export type FilterDatePickerProps = {
     todayButtonProps?: {
         label?: string;
     };
+    /**
+     * The day of the week that the calendar week starts on.
+     *
+     * @default 'monday'
+     */
+    firstDayOfWeek?: FirstDayOfWeek;
 };

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, enableClearButton, 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, firstDayOfWeek, }: InternalDateRangePickerContentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -10,13 +10,14 @@ import { cx } from '../../../../styled-system/css';
 import { dayjs } from '../../../utilities/date/dayjs';
 import { DateRangePickerPopover } from '../../DateRangePicker/DateRangePickerPopover';
 import { CalendarLocaleProvider } from '../../shared/CalendarLocale/CalendarLocaleContext';
+import { FirstDayOfWeekProvider } from '../../shared/CalendarLocale/FirstDayOfWeekContext';
 import { getBaseRangePickerTriggerLabel } from '../../shared/BaseRangePicker/BaseRangePickerTrigger/constants';
 import { useBaseRangePickerContext } from '../../shared/BaseRangePicker/BaseRangePickerProvider';
 /**
  * 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, enableClearButton, clearButtonProps, targetDOMNode, isCalendarOpen, toggleCalendar, calendarLocale, }) {
+export function InternalDateRangePickerContent({ classes, triggerRef, dialogId, label, format, disabled, className, enableClearButton, clearButtonProps, targetDOMNode, isCalendarOpen, toggleCalendar, calendarLocale, firstDayOfWeek, }) {
     const { startDate, endDate, handleClear: contextHandleClear, setPendingFocusDate } = useBaseRangePickerContext();
     const formattedStartDate = startDate ? dayjs(startDate).format(format) : undefined;
     const formattedEndDate = endDate ? dayjs(endDate).format(format) : undefined;
@@ -31,5 +32,5 @@ export function InternalDateRangePickerContent({ classes, triggerRef, dialogId,
         setPendingFocusDate(dayjs(dateToFocus).format('YYYY-MM-DD'));
     }, [startDate, endDate, setPendingFocusDate]);
     return (_jsx(Popover, { open: isCalendarOpen, targetDOMNode: targetDOMNode, minWidth: "min-content", allowedPlacements: ['bottom-start', 'top-start'], renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterDateRangePicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterDateRangePicker__trigger', className), "data-selected": hasValue, "data-mfui-has-clear-button": enableClearButton ? hasValue : null, "aria-controls": dialogId, "aria-expanded": isCalendarOpen, "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterDateRangePicker__content'), "data-mfui-content": "filter-date-range-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-date-range-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-date-range-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-date-range-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterDateRangePicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), enableClearButton && hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterDateRangePicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ??
-                            getBaseRangePickerTriggerLabel('CLEAR_BUTTON_LABEL', calendarLocale), "data-mfui-content": "filter-date-range-picker-clear-button", disabled: disabled, onClick: handleTriggerClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: cx(classes.popoverWrapper, 'mfui-FilterDateRangePicker__popoverWrapper'), children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(DateRangePickerPopover, {}) }) })), onOpenStateChanged: toggleCalendar, onOpen: handlePopoverOpen }));
+                            getBaseRangePickerTriggerLabel('CLEAR_BUTTON_LABEL', calendarLocale), "data-mfui-content": "filter-date-range-picker-clear-button", disabled: disabled, onClick: handleTriggerClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: cx(classes.popoverWrapper, 'mfui-FilterDateRangePicker__popoverWrapper'), children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(FirstDayOfWeekProvider, { value: firstDayOfWeek, children: _jsx(DateRangePickerPopover, {}) }) }) })), onOpenStateChanged: toggleCalendar, onOpen: handlePopoverOpen }));
 }