@moneyforward/mfui-components 4.3.0 → 4.5.0

package/dist/src/Accordion/Accordion.d.ts

@@ -1,6 +1,6 @@
 import { type AccordionProps, type AccordionItemProps } from './Accordion.types';
 declare function AccordionBase({ children, size, width, defaultOpenItems }: AccordionProps): import("react/jsx-runtime").JSX.Element;
-declare function AccordionItem({ children, id, enableAutoUnmount }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ children, id, enableAutoUnmount, open, onOpenStateChanged }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
 /**
  * The `Accordion` component.
  *
@@ -24,6 +24,26 @@ declare function AccordionItem({ children, id, enableAutoUnmount }: AccordionIte
  *   </Accordion.Item>
  * </Accordion>
  * ```
+ *
+ * Each `Accordion.Item` can also be controlled with the `open` and `onOpenStateChanged` props, which lets a trigger
+ * outside the Accordion tree drive it. In that case you own the `aria-expanded` and `aria-controls` attributes of
+ * your own trigger, and `enableAutoUnmount={false}` keeps the collapsed content mounted.
+ *
+ * @example
+ * ```jsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <>
+ *   <button type="button" aria-expanded={isOpen} aria-controls="accordion-1" onClick={() => setIsOpen(!isOpen)}>
+ *     Toggle
+ *   </button>
+ *   <Accordion>
+ *     <Accordion.Item id="accordion-1" open={isOpen} enableAutoUnmount={false}>
+ *       <Accordion.Target>Content for section 1</Accordion.Target>
+ *     </Accordion.Item>
+ *   </Accordion>
+ * </>
+ * ```
  */
 export declare const Accordion: typeof AccordionBase & {
     /**

package/dist/src/Accordion/Accordion.js

@@ -41,12 +41,16 @@ function AccordionBase({ children, size = 'medium', width, defaultOpenItems = []
     };
     return (_jsx("div", { style: containerStyle, children: _jsx(AccordionContext.Provider, { value: contextValue, children: children }) }));
 }
-function AccordionItem({ children, id, enableAutoUnmount = true }) {
+function AccordionItem({ children, id, enableAutoUnmount = true, open, onOpenStateChanged }) {
     const { openItems, toggleItem } = useAccordionContext();
-    const isOpen = openItems[id] || false;
+    const isControlled = open !== undefined;
+    const isOpen = open ?? openItems[id] ?? false;
     const toggle = useCallback(() => {
-        toggleItem(id);
-    }, [toggleItem, id]);
+        if (!isControlled) {
+            toggleItem(id);
+        }
+        onOpenStateChanged?.(!isOpen);
+    }, [isControlled, toggleItem, id, onOpenStateChanged, isOpen]);
     const contextValue = useMemo(() => ({
         isOpen,
         toggle,
@@ -100,6 +104,26 @@ const AccordionTarget = forwardRef(({ children, className, style, ...props }, re
  *   </Accordion.Item>
  * </Accordion>
  * ```
+ *
+ * Each `Accordion.Item` can also be controlled with the `open` and `onOpenStateChanged` props, which lets a trigger
+ * outside the Accordion tree drive it. In that case you own the `aria-expanded` and `aria-controls` attributes of
+ * your own trigger, and `enableAutoUnmount={false}` keeps the collapsed content mounted.
+ *
+ * @example
+ * ```jsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <>
+ *   <button type="button" aria-expanded={isOpen} aria-controls="accordion-1" onClick={() => setIsOpen(!isOpen)}>
+ *     Toggle
+ *   </button>
+ *   <Accordion>
+ *     <Accordion.Item id="accordion-1" open={isOpen} enableAutoUnmount={false}>
+ *       <Accordion.Target>Content for section 1</Accordion.Target>
+ *     </Accordion.Item>
+ *   </Accordion>
+ * </>
+ * ```
  */
 export const Accordion = Object.assign(AccordionBase, {
     /**

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

@@ -42,6 +42,27 @@ export type AccordionItemProps = {
      * @default true
      */
     enableAutoUnmount?: boolean;
+    /**
+     * The open state of this accordion item.
+     * You only need to use this prop if you want to control the item programmatically, for example when the trigger
+     * lives outside the Accordion tree. While this prop is defined, it takes precedence over the `defaultOpenItems` of
+     * the Accordion and over the internal state, so you have to update it yourself in response to
+     * `onOpenStateChanged`. Supply it consistently: do not switch an item between controlled and uncontrolled.
+     *
+     * When you drive the item from your own trigger outside the Accordion, you own its `aria-expanded` and
+     * `aria-controls` attributes. `Accordion.Target` renders the item `id` as its DOM `id`, so
+     * `aria-controls={id}` points at it. Note that with the default `enableAutoUnmount` the target is unmounted
+     * while collapsed, so `aria-controls` refers to an element that does not exist yet; set
+     * `enableAutoUnmount={false}` to keep the target in the DOM.
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the open state of this accordion item is toggled by `Accordion.Trigger`.
+     * It is called in both controlled and uncontrolled mode.
+     *
+     * @param open - The new open state of the accordion item.
+     */
+    onOpenStateChanged?: (open: boolean) => void;
 };
 /**
  * Props for the Accordion.Trigger component

package/dist/src/Breadcrumbs/Breadcrumbs.js

@@ -102,7 +102,7 @@ export const Breadcrumbs = forwardRef(({ items, wrap = false, customLinkComponen
         if (wrap || !listRef.current)
             return;
         const observer = new ResizeObserver((entries) => {
-            const entry = entries[0];
+            const [entry] = entries;
             if (entry) {
                 setContainerWidth(entry.contentRect.width);
             }

package/dist/src/CheckboxCard/CheckboxCard.js

@@ -29,5 +29,7 @@ export const CheckboxCard = forwardRef(({ label, layout = 'vertical', renderDeta
         disableResponsive,
         isResponsive: Boolean(responsiveSlot.narrowViewport),
     });
-    return (_jsxs("div", { className: cx(classes.root, 'mfui-CheckboxCard__root', className), children: [_jsx(FocusIndicator, { disableNestedFocus: true, children: _jsxs(Typography, { variant: "label", className: cx(classes.inputWrapper, 'mfui-CheckboxCard__inputWrapper'), as: "label", htmlFor: props.id, children: [_jsx(Checkbox, { ref: ref, ...props, className: cx(classes.input, 'mfui-CheckboxCard__input') }), _jsx("span", { className: cx(classes.label, 'mfui-CheckboxCard__label'), children: label })] }) }), responsiveSlot.narrowViewport && disableResponsive ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-CheckboxCard__details'), children: responsiveSlot.narrowViewport(checkboxState) })] })) : responsiveSlot.narrowViewport ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-CheckboxCard__details'), children: responsiveSlot.narrowViewport(checkboxState) })] })) : responsiveSlot.base ? (_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) })) : null] }));
+    return (_jsxs("div", { className: cx(classes.root, 'mfui-CheckboxCard__root', className), children: [_jsx(FocusIndicator, { disableNestedFocus: true, children: _jsxs(Typography, { variant: "label", className: cx(classes.inputWrapper, 'mfui-CheckboxCard__inputWrapper'), as: "label", htmlFor: props.id, children: [_jsx(Checkbox, { ref: ref, ...props, className: cx(classes.input, 'mfui-CheckboxCard__input') }), _jsx("span", { className: cx(classes.label, 'mfui-CheckboxCard__label'), children: label })] }) }), responsiveSlot.narrowViewport ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-CheckboxCard__details'), children: responsiveSlot.narrowViewport(checkboxState) })] })) : (
+            /* For function-based renderDetailsSlot or ResponsiveSlot with only base, use single details element */
+            responsiveSlot.base && (_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) })))] }));
 });

package/dist/src/DataTable/DataTable.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, isValidElement, useMemo, forwardRef } from 'react';
+import { Children, isValidElement, useMemo, useRef, forwardRef } from 'react';
 import { DataTableProvider } from './DataTableProvider';
 import { dataTableSlotRecipe } from '../../styled-system/recipes';
 import { DataTableBody } from './DataTableBody';
@@ -13,8 +13,15 @@ import { DataTableRow } from './DataTableRow';
 import { DataTableSortButton } from './DataTableSortButton';
 import { cx } from '../../styled-system/css';
 import { isComponentOrWrapped } from '../utilities/react/isComponentOrWrapped';
+import { mergeRefs } from '../utilities/dom/mergeRefs';
+import { useTableEdgeCellMarkers } from '../utilities/dom/useTableEdgeCellMarkers';
 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 });
+    const tableRef = useRef(null);
+    // `:first-child` / `:last-child` cannot tell which grid column a cell renders in, so the
+    // table-edge spacing of the cell recipes misfires on the rows a `rowSpan` extends into.
+    // This marks the displaced cells so that spacing can be cancelled on them.
+    useTableEdgeCellMarkers(tableRef);
     // Check if DataTable has any rows by looking for DataTable.Body with DataTable.Row children
     const hasRows = useMemo(() => {
         if (loading)
@@ -39,7 +46,7 @@ const Base = forwardRef(({ className, size = 'medium', enableRowSelection = fals
     }, [children, loading]);
     const shouldShowEmptyState = !hasRows && !!emptyStateSlot && !loading;
     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__wrapper', wrapperProps?.className), children: [_jsx("table", { ref: mergeRefs(ref, tableRef), 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

@@ -9,6 +9,15 @@ import { type DataTableSlotRecipeVariant } from '../../styled-system/recipes';
  * - `amount`: Right-aligned numeric content (amounts, balances, etc.)
  */
 export type CellDataType = 'text' | 'amount';
+/**
+ * The function that wraps the built-in selection checkbox of `DataTable.HeaderRow` or `DataTable.Row`.
+ *
+ * It receives the selection checkbox element and returns the content to render in the checkbox cell.
+ * The returned content must contain the passed element, because the row owns the checkbox itself.
+ *
+ * @param checkbox - The built-in selection checkbox element.
+ */
+export type DataTableSelectionCheckboxWrapper = (checkbox: ReactNode) => ReactNode;
 /**
  * The props for the `DataTable` component.
  *
@@ -81,6 +90,9 @@ export type DataTableProps = {
      * If the fixed column width might be changed with any interaction, such as disclosure, removing row or translating,
      * please add `table-layout: fixed` to the DataTable and specify the width of the each column.
      *
+     * **Not supported together with merged cells.** The index is counted in source order, which a
+     * `colSpan` / `rowSpan` shifts, so the fixed column is resolved on the wrong cells.
+     *
      * @default undefined
      */
     leftFixedColumnIndex?: number;
@@ -91,6 +103,9 @@ export type DataTableProps = {
      * If the fixed column width might be changed with any interaction, such as disclosure, removing row or translating,
      * please add `table-layout: fixed` to the DataTable and specify the width of the each column.
      *
+     * **Not supported together with merged cells.** The index is counted in source order, which a
+     * `colSpan` / `rowSpan` shifts, so the fixed column is resolved on the wrong cells.
+     *
      * @default undefined
      */
     rightFixedColumnIndex?: number;

package/dist/src/DataTable/DataTableHeaderRow/DataTableHeaderRow.js

@@ -9,13 +9,15 @@ import { isComponentOrWrapped } from '../../utilities/react/isComponentOrWrapped
 export const DataTableHeaderRow = forwardRef(({ children, checkboxProps, className, ...props }, ref) => {
     const { enableRowSelection, setNumberColumns } = useDataTableContext();
     const classes = dataTableHeaderRowSlotRecipe();
+    // Building the element before wrapping keeps everything the header row owns on the Checkbox itself.
+    const selectionCheckbox = (_jsx(Checkbox, { checked: checkboxProps?.checked, indeterminate: checkboxProps?.indeterminate, "aria-label": checkboxProps?.['aria-label'] ?? 'すべての行を選択', disabled: checkboxProps?.disabled, onChange: checkboxProps?.onChange, onClick: checkboxProps?.onClick }));
     // Count the number of header cells
     useEffect(() => {
         const headerCells = Children.toArray(children).filter((child) => isValidElement(child) && isComponentOrWrapped(child, DataTableHeaderCell));
         setNumberColumns(headerCells.length);
     }, [children, enableRowSelection, setNumberColumns]);
     return (_jsxs("tr", { className: cx(classes.root, 'mfui-DataTableHeaderRow__root', 
-        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderRow__root', className), ...props, ref: ref, children: [enableRowSelection ? (_jsx(DataTableHeaderCell, { columnIndex: 0, disabled: checkboxProps?.disabled, children: _jsx(Checkbox, { checked: checkboxProps?.checked, indeterminate: checkboxProps?.indeterminate, "aria-label": checkboxProps?.['aria-label'] ?? 'すべての行を選択', disabled: checkboxProps?.disabled, onChange: checkboxProps?.onChange, onClick: checkboxProps?.onClick }) })) : null, Children.map(children, (child, index) => {
+        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderRow__root', className), ...props, ref: ref, children: [enableRowSelection ? (_jsx(DataTableHeaderCell, { columnIndex: 0, disabled: checkboxProps?.disabled, children: checkboxProps?.wrapper ? checkboxProps.wrapper(selectionCheckbox) : selectionCheckbox })) : null, Children.map(children, (child, index) => {
                 if (!isValidElement(child)) {
                     return child;
                 }

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

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithRef } from 'react';
 import { type CheckboxProps } from '../../Checkbox';
+import { type DataTableSelectionCheckboxWrapper } from '../DataTable.types';
 /**
  * The props for the `DataTableHeaderRow` component.
  *
@@ -24,6 +25,23 @@ export type DataTableHeaderRowProps = {
      * @property onClick - The handler called when the checkbox is clicked (for event propagation control).
      *
      * @property disabled - Whether the checkbox is disabled.
+     *
+     * @property wrapper - The function that wraps the checkbox, for example with the `Tooltip` component.
+     * It receives the checkbox element and must render it as it is, because the header row owns the checkbox itself.
+     * Keep the `Tooltip` component with its default `trigger` (`['hover', 'focus']`) so that keyboard users can also
+     * read the content; a tooltip opened by a click would duplicate the action of the checkbox.
+     * When the content restates the accessible name of the checkbox, pass `hideFromScreenReader` to the `Tooltip`
+     * component to avoid announcing the same information twice.
+     *
+     * ```tsx
+     * <DataTable.HeaderRow
+     *   checkboxProps={{
+     *     wrapper: (checkbox) => <Tooltip content="すべて選択">{checkbox}</Tooltip>,
+     *   }}
+     * >
+     * ```
      */
-    checkboxProps?: Pick<CheckboxProps, 'aria-label' | 'checked' | 'indeterminate' | 'onChange' | 'disabled' | 'onClick'>;
+    checkboxProps?: Pick<CheckboxProps, 'aria-label' | 'checked' | 'indeterminate' | 'onChange' | 'disabled' | 'onClick'> & {
+        wrapper?: DataTableSelectionCheckboxWrapper;
+    };
 } & ComponentPropsWithRef<'tr'>;

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

@@ -62,6 +62,9 @@ export const DataTableRow = forwardRef(({ children, disabled = false, highlighte
     const toggleSelectionByRowInteraction = () => {
         selectionCheckboxRef.current?.click();
     };
+    // Building the element before wrapping keeps everything the row owns on the Checkbox itself, so that the
+    // ref-based toggle and the recipe selectors keep working with a consumer-supplied wrapper in between.
+    const selectionCheckbox = (_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 }));
     const handleClickRow = (event) => {
         if (disabled || isClickFromNestedInteractiveElement(event)) {
             return;
@@ -84,7 +87,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), ...(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, { 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) => {
+        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: checkboxProps?.wrapper ? checkboxProps.wrapper(selectionCheckbox) : selectionCheckbox })) : null, Children.map(children, (child, index) => {
                 if (!isValidElement(child)) {
                     return child;
                 }

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

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithRef } from 'react';
 import { type CheckboxProps } from '../../Checkbox';
+import { type DataTableSelectionCheckboxWrapper } from '../DataTable.types';
 /**
  * The props for the `DataTableRow` component.
  *
@@ -38,8 +39,29 @@ export type DataTableRowProps = {
      * @property onClick - The handler called when the checkbox is clicked (for event propagation control).
      *
      * @property disabled - Whether the checkbox is disabled.
+     *
+     * @property wrapper - The function that wraps the checkbox, for example with the `Tooltip` component.
+     * It receives the checkbox element and must render it as it is, because the row owns the checkbox itself.
+     * Keep the `Tooltip` component with its default `trigger` (`['hover', 'focus']`) so that keyboard users can also
+     * read the content; a tooltip opened by a click would duplicate the action of the checkbox.
+     * When the content restates the accessible name of the checkbox, pass `hideFromScreenReader` to the `Tooltip`
+     * component to avoid announcing the same information twice.
+     *
+     * Note that when the `enableRowClickSelection` prop of the `DataTable` component is `true`, the checkbox is removed
+     * from the tab order and the focusable element is the row, which is outside the wrapper. A tooltip in the wrapper is
+     * then opened by hover only, so do not put information that keyboard users need in it in that case.
+     *
+     * ```tsx
+     * <DataTable.Row
+     *   checkboxProps={{
+     *     wrapper: (checkbox) => <Tooltip content="この行を選択">{checkbox}</Tooltip>,
+     *   }}
+     * >
+     * ```
      */
-    checkboxProps?: Pick<CheckboxProps, 'aria-label' | 'checked' | 'onChange' | 'disabled' | 'onClick'>;
+    checkboxProps?: Pick<CheckboxProps, 'aria-label' | 'checked' | 'onChange' | 'disabled' | 'onClick'> & {
+        wrapper?: DataTableSelectionCheckboxWrapper;
+    };
     /**
      * The callback function that is called when the row is clicked.
      * If provided, the row can be focused and the focus indicator is displayed.

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

@@ -1,2 +1,2 @@
 export * from './DatePickerDateCell';
-export * from './DatePickerDateCell.types';
+export type * from './DatePickerDateCell.types';

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

@@ -1,2 +1 @@
 export * from './DatePickerDateCell';
-export * from './DatePickerDateCell.types';

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

@@ -57,7 +57,7 @@ export function CalendarGrid({ viewingValue, minDate, maxDate, checkDisabledDate
         let tabbableDateIndex = -1;
         // First, try to find the selected date if it exists and is not disabled
         if (value) {
-            tabbableDateIndex = newDates.findIndex((dateItem) => dateItem && dateItem.selected && !dateItem.disabled);
+            tabbableDateIndex = newDates.findIndex((dateItem) => dateItem?.selected && !dateItem.disabled);
         }
         // If no selected date or selected date is disabled, try today's date
         if (tabbableDateIndex === -1) {
@@ -101,8 +101,6 @@ export function CalendarGrid({ viewingValue, minDate, maxDate, checkDisabledDate
                 .map((_, index) => ((weekStart + index) % 7))
                 .map((weekday) => (_jsx(DayCell, { day: weekday }, weekday))), computedPropsForDates.map((dateItem, index) => {
                 // All props are generated internally and guaranteed to have required fields
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
                 if (!dateItem) {
                     return (_jsx("div", { className: cx(classes.emptyDateCell, 'mfui-CalendarGrid__emptyDateCell') }, `empty-date-${String(index)}`));
                 }

package/dist/src/DateTimeSelection/shared/CalendarGrid/utilities/computeDataForStyling.js

@@ -14,9 +14,8 @@ export function computeDataForStyling(viewingValue, weekStart) {
     const firstDateDay = viewingValue.getDay();
     // The last column of the grid, i.e. the day right before the week starts over
     const weekEnd = (weekStart + 6) % 7;
-    const datesHasBorderTopLeftRadius = new Set();
     // First date of the month has borderTopLeftRadius
-    datesHasBorderTopLeftRadius.add(1);
+    const datesHasBorderTopLeftRadius = new Set([1]);
     // First date sitting at the start of a row has borderTopLeftRadius
     const firstRowStartDate = firstDate + ((weekStart - firstDateDay + 7) % 7);
     datesHasBorderTopLeftRadius.add(firstRowStartDate);
@@ -29,9 +28,8 @@ export function computeDataForStyling(viewingValue, weekStart) {
     // Last date sitting at the start of a row has borderBottomLeftRadius
     const lastRowStartDate = lastDate.getDate() - ((lastDate.getDay() - weekStart + 7) % 7);
     datesHasBorderBottomLeftRadius.add(lastRowStartDate);
-    const datesHasBorderBottomRightRadius = new Set();
     // Last date of the month has borderBottomRightRadius
-    datesHasBorderBottomRightRadius.add(lastDate.getDate());
+    const datesHasBorderBottomRightRadius = new Set([lastDate.getDate()]);
     // Last date sitting at the end of a row has borderBottomRightRadius
     const lastRowEndDate = lastDate.getDate() - ((lastDate.getDay() - weekEnd + 7) % 7);
     datesHasBorderBottomRightRadius.add(lastRowEndDate);

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

@@ -19,6 +19,6 @@ export declare const Dialog: import("react").ForwardRefExoticComponent<{
     enableAutoUnmount?: boolean;
     disableBackdropClose?: boolean;
     customFocusElement?: import("react").RefObject<HTMLElement | null> | HTMLElement | null;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onClose" | "open"> & {
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onClose" | "open" | "title"> & {
     ref?: (import("react").RefCallback<HTMLDivElement> | import("react").RefObject<HTMLDivElement | null> | null) | undefined;
 } & import("react").Attributes>;

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

@@ -97,4 +97,4 @@ export type DialogProps = {
      * ```
      */
     customFocusElement?: RefObject<HTMLElement | null> | HTMLElement | null;
-} & Omit<ComponentPropsWithoutRef<'div'>, 'open' | 'onClose'>;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'open' | 'onClose' | 'title'>;

package/dist/src/FileDropZone/FileDropZone.d.ts

@@ -15,7 +15,11 @@
  * - **Controlled/uncontrolled modes**: Proper state management for both patterns
  * - **Provide 'onClear' (user-initiated only)**: Clear the file selection
  * - **Provide 'onValueCleared' (external changes only)**: Called when controlled value transitions from non-empty to empty
- * - **Drag and drop support**: Visual feedback and enhanced file selection UX
+ * - **Drag and drop support**: Visual feedback and enhanced file selection UX.
+ *   Dropped files are assigned to the underlying `<input type="file">`, so they are included in
+ *   native form submission (`new FormData(form)`) just like files chosen through the dialog.
+ *   Without `multiple`, only the first dropped file is kept, matching what the dialog allows.
+ *   In controlled mode the input is reset after every selection by design, for both paths.
  *
  * ## Internationalization
  * This component supports internationalization through text override props following the MFUI Component Internationalization Strategy.

package/dist/src/FileDropZone/FileDropZone.js

@@ -8,6 +8,8 @@ import { ClearButton } from '../shared/ClearButton';
 import { HelpMessage } from '../HelpMessage';
 import { Button } from '../Button';
 import { mergeRefs } from '../utilities/dom/mergeRefs';
+import { setInputFiles } from '../utilities/dom/setInputFiles';
+import { toFileList } from '../utilities/dom/toFileList';
 import { useIsNarrowViewport } from '../utilities/responsive/useIsNarrowViewport';
 /**
  * The component for selecting a single file or multiple files for upload by dialog or drag and drop.
@@ -26,7 +28,11 @@ import { useIsNarrowViewport } from '../utilities/responsive/useIsNarrowViewport
  * - **Controlled/uncontrolled modes**: Proper state management for both patterns
  * - **Provide 'onClear' (user-initiated only)**: Clear the file selection
  * - **Provide 'onValueCleared' (external changes only)**: Called when controlled value transitions from non-empty to empty
- * - **Drag and drop support**: Visual feedback and enhanced file selection UX
+ * - **Drag and drop support**: Visual feedback and enhanced file selection UX.
+ *   Dropped files are assigned to the underlying `<input type="file">`, so they are included in
+ *   native form submission (`new FormData(form)`) just like files chosen through the dialog.
+ *   Without `multiple`, only the first dropped file is kept, matching what the dialog allows.
+ *   In controlled mode the input is reset after every selection by design, for both paths.
  *
  * ## Internationalization
  * This component supports internationalization through text override props following the MFUI Component Internationalization Strategy.
@@ -160,15 +166,29 @@ fileSelectButtonLabel = 'ファイルを選択', instructionText, fileCountLabel
         }
         const { files } = event.dataTransfer;
         if (files.length > 0) {
-            // Create a synthetic change event to reuse existing logic
+            /*
+             * The drop is handled on the container instead of the input element, so the browser
+             * applies none of the input's own behaviour to it: it neither assigns the dropped files
+             * to the input nor honours the `multiple` attribute. Copying the files over keeps native
+             * form submission (`new FormData(form)`) working for the drag and drop path, and keeping
+             * only the first file when `multiple` is not set prevents a selection that the file
+             * selection dialog could never produce for the same markup.
+             */
+            const droppedFiles = [...files];
+            const acceptedFiles = multiple ? droppedFiles : droppedFiles.slice(0, 1);
+            const input = inputRef.current;
+            const isSynced = input !== null && setInputFiles(input, acceptedFiles);
+            /*
+             * Create a synthetic change event to reuse existing logic. When the files could not be
+             * copied over, `target` stands in for the input and carries them directly, so a drop
+             * still updates the visible selection.
+             */
             const syntheticEvent = {
-                target: {
-                    files,
-                },
+                target: isSynced ? input : { files: toFileList(acceptedFiles) },
             };
             handleChange(syntheticEvent);
         }
-    }, [disabled, handleChange]);
+    }, [disabled, multiple, handleChange]);
     const handleClear = useCallback(() => {
         if (!isControlled) {
             setInternalValues(undefined);

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

@@ -98,6 +98,16 @@ export type FileDropZoneProps = {
      * The callback function to be called when files are selected through dialog or drag-and-drop.
      * This is the standard HTML input onChange event.
      *
+     * **Note:** For the drag-and-drop path the event is a synthetic object rather than a React event.
+     * Its `target` is the underlying `<input type="file">`, which the dropped files are assigned to
+     * beforehand, but other event members such as `currentTarget` are not populated. In the rare
+     * environments where that assignment is not possible, `target` is a plain `{ files }` object
+     * instead and the dropped files do not reach native form submission.
+     *
+     * **Note:** A drop lands on the container rather than on the input, so the `multiple` attribute
+     * is applied by this component instead of the browser. Without `multiple`, only the first
+     * dropped file is passed on.
+     *
      * @param event - The change event from the file input element
      *
      * @default undefined

package/dist/src/MainNavigation/BaseMainNavigation.d.ts

@@ -3,4 +3,4 @@ import { type MainNavigationProps } from './MainNavigation.types';
  * The component for the main navigation on the normal viewport.
  * This component must only be used in MainNavigation.tsx, do not export it.
  */
-export declare function BaseMainNavigation({ className, featureShortcut, navigationItems, enableCollapsible, nestedNavigationDisplay, width, customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }: MainNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function BaseMainNavigation({ className, featureShortcut, navigationItems, navLandmarkLabel, enableCollapsible, nestedNavigationDisplay, width, customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }: MainNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/MainNavigation/BaseMainNavigation.js

@@ -13,7 +13,7 @@ import { Popover } from '../Popover';
  * The component for the main navigation on the normal viewport.
  * This component must only be used in MainNavigation.tsx, do not export it.
  */
-export function BaseMainNavigation({ className, featureShortcut, navigationItems, enableCollapsible = false, nestedNavigationDisplay = 'accordion', width = 'normal', customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }) {
+export function BaseMainNavigation({ className, featureShortcut, navigationItems, navLandmarkLabel, enableCollapsible = false, nestedNavigationDisplay = 'accordion', width = 'normal', customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }) {
     const [localIsCollapsed, setLocalIsCollapsed] = useState(controlledIsCollapsed ?? false);
     const [openPopoverIndex, setOpenPopoverIndex] = useState(null);
     const isControlled = controlledIsCollapsed !== undefined;
@@ -31,7 +31,7 @@ export function BaseMainNavigation({ className, featureShortcut, navigationItems
     const toggleButtonLabel = isCollapsed
         ? (expandButtonProps?.label ?? 'ナビゲーションを拡げる')
         : (collapseButtonProps?.label ?? 'ナビゲーションを折りたたむ');
-    return (_jsxs("div", { "data-mfui-collapsed": isCollapsed, className: cx(classes.root, 'mfui-BaseMainNavigation__root', className), children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-BaseMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-BaseMainNavigation__featureShortcutAnchor'), children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsxs("nav", { id: navId, className: cx(classes.nav, 'mfui-BaseMainNavigation__nav'), children: [_jsx("ul", { className: cx(classes.list, 'mfui-BaseMainNavigation__list'), children: navigationItems.map((navigation, index) => {
+    return (_jsxs("div", { "data-mfui-collapsed": isCollapsed, className: cx(classes.root, 'mfui-BaseMainNavigation__root', className), children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-BaseMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-BaseMainNavigation__featureShortcutAnchor'), children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsxs("nav", { id: navId, "aria-label": navLandmarkLabel, className: cx(classes.nav, 'mfui-BaseMainNavigation__nav'), children: [_jsx("ul", { className: cx(classes.list, 'mfui-BaseMainNavigation__list'), children: navigationItems.map((navigation, index) => {
                             const isGroupLabel = navigation.children && 'isGroupLabel' in navigation && navigation.isGroupLabel;
                             const isGroupMenu = 'isGroupMenu' in navigation && navigation.isGroupMenu;
                             if (isGroupLabel || isGroupMenu) {

package/dist/src/MainNavigation/MainNavigation.js

@@ -12,11 +12,12 @@ import { NarrowViewportMainNavigation } from './NarrowViewportMainNavigation';
  * `MainNavigation` is intended to be paired with `GlobalHeader`. If you need a self-contained
  * layout that already includes both header and navigation features, use `Sidebar` instead.
  */
-export const MainNavigation = forwardRef(({ className, featureShortcut, navigationItems, disableResponsive = false, width = 'normal', customLinkComponent, enableCollapsible, nestedNavigationDisplay, isCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }, ref) => {
+export const MainNavigation = forwardRef(({ className, featureShortcut, navigationItems, navLandmarkLabel = 'メイン', disableResponsive = false, width = 'normal', customLinkComponent, enableCollapsible, nestedNavigationDisplay, isCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }, ref) => {
     const commonProps = {
         className,
         featureShortcut,
         navigationItems,
+        navLandmarkLabel,
         width,
         customLinkComponent,
     };

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

@@ -186,6 +186,15 @@ export type MainNavigationProps = {
      * The navigation items.
      */
     navigationItems: NavigationItem[];
+    /**
+     * The accessible name for the navigation landmark, applied as `aria-label` to both the sidebar `<nav>`
+     * and the narrow viewport drawer `<nav>`.
+     *
+     * Avoid including the role name (e.g. 'ナビゲーション'); assistive technology already announces it.
+     *
+     * @default 'メイン'
+     */
+    navLandmarkLabel?: string;
     /**
      * Whether the navigation is collapsible.
      *

package/dist/src/MainNavigation/NarrowViewportMainNavigation.js

@@ -13,7 +13,7 @@ import { Portal } from '../Portal';
  * The component for the main navigation on the narrow viewport.
  * This component must only be used in MainNavigation.tsx, do not export it.
  */
-export const NarrowViewportMainNavigation = forwardRef(({ className, featureShortcut, navigationItems, width = 'normal', customLinkComponent }, ref) => {
+export const NarrowViewportMainNavigation = forwardRef(({ className, featureShortcut, navigationItems, navLandmarkLabel, width = 'normal', customLinkComponent }, ref) => {
     const classes = narrowViewportMainNavigationSlotRecipe({ width });
     const InternalLinkTag = customLinkComponent ?? 'a';
     const navId = useId();
@@ -48,7 +48,7 @@ export const NarrowViewportMainNavigation = forwardRef(({ className, featureShor
     }
     return (_jsx(Portal, { children: _jsxs("div", { ref: dialogRef, role: "dialog", className: cx(classes.root, 'mfui-NarrowViewportMainNavigation__root', className), tabIndex: -1, onKeyDown: handleOnKeyDown, children: [_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-NarrowViewportMainNavigation__backdrop'), onClick: handleCloseMainNavigation }), _jsxs("div", { "data-mfui-content": "inside", className: cx(classes.container, 'mfui-NarrowViewportMainNavigation__container'), onClick: (event) => {
                         event.stopPropagation();
-                    }, children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-NarrowViewportMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-NarrowViewportMainNavigation__featureShortcutAnchor'), onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsxs("nav", { className: cx(classes.nav, 'mfui-NarrowViewportMainNavigation__nav'), children: [_jsx("ul", { className: cx(classes.list, 'mfui-NarrowViewportMainNavigation__list'), children: navigationItems.map((navigation, index) => {
+                    }, children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-NarrowViewportMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-NarrowViewportMainNavigation__featureShortcutAnchor'), onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsxs("nav", { "aria-label": navLandmarkLabel, className: cx(classes.nav, 'mfui-NarrowViewportMainNavigation__nav'), children: [_jsx("ul", { className: cx(classes.list, 'mfui-NarrowViewportMainNavigation__list'), children: navigationItems.map((navigation, index) => {
                                         const isGroupLabel = navigation.children && 'isGroupLabel' in navigation && navigation.isGroupLabel;
                                         if (isGroupLabel) {
                                             return null;