@moneyforward/mfui-components 4.3.1 → 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/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/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;

package/dist/src/MultipleSelectBox/MultipleSelectBox.js

@@ -339,29 +339,38 @@ placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode,
                 `${String(localSelectedValuesSet.size)}件選択中`) })) : null;
     const applyControlsNode = enableApplyControls ? (_jsxs(HStack, { gap: "horizontal.0-1of2", children: [_jsx(Button, { ref: cancelButtonRef, size: "small", priority: "secondary", onClick: handleCancelButtonClick, children: cancelButtonProps?.label ?? 'キャンセル' }), _jsx(Button, { ref: applyButtonRef, size: "small", priority: "primary", onClick: handleApplyButtonClick, children: applyButtonProps?.label ?? '適用' })] })) : null;
     const resolvedNotFoundMessage = typeof notFoundMessage === 'function' ? notFoundMessage(searchText.trim()) : notFoundMessage;
+    // Early returns rather than a four-level ternary: the branches are mutually exclusive
+    // and each returns a different shape (skeletons, virtualized rows, options, or the
+    // empty message).
+    const renderListContent = () => {
+        if (loading) {
+            return Array.from({ length: SKELETON_ITEM_COUNT }).map((_, index) => (_jsx("li", { className: cx(classes.skeletonItem, 'mfui-MultipleSelectBox__skeletonItem'), children: _jsx(Skeleton, {}) }, index)));
+        }
+        if (isVirtualized && virtualItems.length > 0) {
+            return renderVirtualizedItems();
+        }
+        if (filteredOptions.length > 0) {
+            return [
+                ...renderNonVirtualizedItems(),
+                !isVirtualized && renderInfiniteScrollLoading(),
+                !isVirtualized && renderInfiniteScrollError(),
+            ].filter(Boolean);
+        }
+        return [
+            _jsx("li", { className: cx(classes.emptyMessage, 'mfui-MultipleSelectBox__emptyMessage'), children: _jsx(Typography, { variant: "body", children: enableSearchOptions && searchText && resolvedNotFoundMessage
+                        ? resolvedNotFoundMessage
+                        : options.length > 0
+                            ? resolvedNotFoundMessage
+                            : emptyMessage }) }, "empty"),
+            !isVirtualized && renderInfiniteScrollError(),
+        ].filter(Boolean);
+    };
     const optionsNode = (_jsxs("div", { ref: scrollWrapperRef, className: cx(classes.scrollWrapper, 'mfui-MultipleSelectBox__scrollWrapper'), onScroll: enableInfiniteScroll ? handleInfiniteScroll : undefined, children: [_jsx("ul", { ref: listBoxRef, role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-MultipleSelectBox__listBox'), tabIndex: -1, style: isVirtualized && totalSize > 0
                     ? {
                         height: `${String(totalSize)}px`,
                         position: 'relative',
                     }
-                    : undefined, children: loading
-                    ? Array.from({ length: SKELETON_ITEM_COUNT }).map((_, index) => (_jsx("li", { className: cx(classes.skeletonItem, 'mfui-MultipleSelectBox__skeletonItem'), children: _jsx(Skeleton, {}) }, index)))
-                    : isVirtualized && virtualItems.length > 0
-                        ? renderVirtualizedItems()
-                        : filteredOptions.length > 0
-                            ? [
-                                ...renderNonVirtualizedItems(),
-                                !isVirtualized && renderInfiniteScrollLoading(),
-                                !isVirtualized && renderInfiniteScrollError(),
-                            ].filter(Boolean)
-                            : [
-                                _jsx("li", { className: cx(classes.emptyMessage, 'mfui-MultipleSelectBox__emptyMessage'), children: _jsx(Typography, { variant: "body", children: enableSearchOptions && searchText && resolvedNotFoundMessage
-                                            ? resolvedNotFoundMessage
-                                            : options.length > 0
-                                                ? resolvedNotFoundMessage
-                                                : emptyMessage }) }, "empty"),
-                                !isVirtualized && renderInfiniteScrollError(),
-                            ].filter(Boolean) }), isVirtualized ? renderInfiniteScrollLoading() : null, isVirtualized ? renderInfiniteScrollError('div') : null, _jsx(OptionGroupLabelDescriptions, { groups: rendersHiddenGroupLabels ? optionGroupLabels : [] })] }));
+                    : undefined, children: renderListContent() }), isVirtualized ? renderInfiniteScrollLoading() : null, isVirtualized ? renderInfiniteScrollError('div') : null, _jsx(OptionGroupLabelDescriptions, { groups: rendersHiddenGroupLabels ? optionGroupLabels : [] })] }));
     const createOptionAreaNode = isCreateOptionVisible ? (_jsxs("div", { className: cx(classes.createOptionArea, 'mfui-MultipleSelectBox__createOptionArea'), children: [_jsxs("button", { "data-mfui-content": "create-new-option", type: "button", className: cx(classes.createOptionButton, 'mfui-MultipleSelectBox__createOptionButton'), disabled: isCreating, onClick: handleCreateOption, children: [_jsx(Add, { "aria-hidden": true }), createOptionProps?.renderLabel?.(searchText.trim()) ?? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "strongBody", children: searchText.trim() }), _jsx(Typography, { variant: "body", children: "\u3092\u8FFD\u52A0" })] }))] }), createError ? (_jsx("div", { className: cx(classes.createOptionErrorMessage, 'mfui-MultipleSelectBox__createOptionErrorMessage'), children: _jsx(HelpMessage, { messageType: "error", children: createOptionProps?.renderErrorMessage?.(searchText.trim()) ??
                         `${searchText.trim()}を追加できませんでした。` }) })) : null] })) : null;
     return (_jsx(Popover, { renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsx(MultipleSelectBoxTrigger, { ref: triggerRef, wrapperRef: setTriggerRef, selectedOptions: localSelectedOptions, id: id, disabled: disabled, triggerProps: triggerProps, triggerWrapperProps: triggerWrapperProps, name: name, 

package/dist/src/MultipleSelectBox/hooks/useInitialFocusOnOptionPanelOpen.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { getDeepActiveElement } from '../utils/getDeepActiveElement';
+import { getDeepActiveElement } from '../../utilities/dom/getDeepActiveElement';
 import { isSelectableOption } from '../utils/isSelectableOption';
 /**
  * Control the focus when the option panel is opened.

package/dist/src/NavigationList/NavigationListItem/NavigationListItem.d.ts

@@ -6,5 +6,8 @@ import { type NavigationListItemProps } from './NavigationListItem.types';
  * If the href prop is provided, the item will be rendered as an anchor element.
  * If the onClick prop is provided (without href), it will be rendered as a button element.
  * Otherwise, it will be rendered as a div element and not interactive.
+ *
+ * The trailing navigation indicator is displayed whenever the item can be activated,
+ * that is when either the href or the onClick prop is provided.
  */
 export declare const NavigationListItem: import("react").ForwardRefExoticComponent<NavigationListItemProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/src/NavigationList/NavigationListItem/NavigationListItem.js

@@ -16,6 +16,9 @@ const ARIA_DISABLED_PROPS = { 'aria-disabled': true, 'data-mfui-disabled': '' };
  * If the href prop is provided, the item will be rendered as an anchor element.
  * If the onClick prop is provided (without href), it will be rendered as a button element.
  * Otherwise, it will be rendered as a div element and not interactive.
+ *
+ * The trailing navigation indicator is displayed whenever the item can be activated,
+ * that is when either the href or the onClick prop is provided.
  */
 export const NavigationListItem = forwardRef(({ title, icon, description, leadingContent, href, target, customLinkComponent, onClick, disabled, className, ...rest }, ref) => {
     const classes = navigationListItemSlotRecipe();
@@ -26,7 +29,8 @@ export const NavigationListItem = forwardRef(({ title, icon, description, leadin
             return 'button';
         return 'div';
     }, [href, customLinkComponent, onClick]);
-    const isInteractive = (href !== undefined || onClick !== undefined) && !disabled;
+    const isActivatable = href !== undefined || onClick !== undefined;
+    const isInteractive = isActivatable && !disabled;
     const resolvedHref = disabled ? undefined : href;
     const disabledProps = useMemo(() => {
         if (!disabled)
@@ -35,6 +39,6 @@ export const NavigationListItem = forwardRef(({ title, icon, description, leadin
             return BUTTON_DISABLED_PROPS;
         return ARIA_DISABLED_PROPS;
     }, [disabled, onClick, href]);
-    const innerElement = (_jsx(FocusIndicator, { hideWhiteBorder: true, position: "inside", children: _jsxs(Tag, { ...rest, href: resolvedHref, target: target, type: href === undefined && onClick !== undefined ? 'button' : undefined, "data-mfui-focusable": isInteractive, className: cx(classes.root, 'mfui-NavigationListItem__root', className), onClick: disabled ? undefined : onClick, ...disabledProps, children: [leadingContent != null ? (_jsx("span", { className: cx(classes.leading, 'mfui-NavigationListItem__leading'), children: leadingContent })) : null, _jsxs("span", { className: cx(classes.content, 'mfui-NavigationListItem__content'), children: [_jsxs("span", { className: cx(classes.title, 'mfui-NavigationListItem__title'), children: [icon != null ? (_jsx("span", { className: cx(classes.titleIcon, 'mfui-NavigationListItem__titleIcon'), children: icon })) : null, _jsx(Typography, { variant: "contentHeading", children: title })] }), description != null ? _jsx(Typography, { variant: "body", children: description }) : null] }), href !== undefined ? (_jsx("span", { className: cx(classes.trailing, 'mfui-NavigationListItem__trailing'), children: _jsx(NavigationToDetail, { "aria-hidden": true }) })) : null] }) }));
+    const innerElement = (_jsx(FocusIndicator, { hideWhiteBorder: true, position: "inside", children: _jsxs(Tag, { ...rest, href: resolvedHref, target: target, type: href === undefined && onClick !== undefined ? 'button' : undefined, "data-mfui-focusable": isInteractive, className: cx(classes.root, 'mfui-NavigationListItem__root', className), onClick: disabled ? undefined : onClick, ...disabledProps, children: [leadingContent != null ? (_jsx("span", { className: cx(classes.leading, 'mfui-NavigationListItem__leading'), children: leadingContent })) : null, _jsxs("span", { className: cx(classes.content, 'mfui-NavigationListItem__content'), children: [_jsxs("span", { className: cx(classes.title, 'mfui-NavigationListItem__title'), children: [icon != null ? (_jsx("span", { className: cx(classes.titleIcon, 'mfui-NavigationListItem__titleIcon'), children: icon })) : null, _jsx(Typography, { variant: "contentHeading", children: title })] }), description != null ? _jsx(Typography, { variant: "body", children: description }) : null] }), isActivatable ? (_jsx("span", { className: cx(classes.trailing, 'mfui-NavigationListItem__trailing'), children: _jsx(NavigationToDetail, { "aria-hidden": true }) })) : null] }) }));
     return _jsx("li", { ref: ref, children: innerElement });
 });

package/dist/src/NavigationList/NavigationListItem/NavigationListItem.types.d.ts

@@ -25,7 +25,8 @@ type ButtonProps = {
     customLinkComponent?: undefined;
     /**
      * The click handler for the navigation item.
-     * When provided without href, the item is rendered as a button element.
+     * When provided without href, the item is rendered as a button element
+     * and displays the same trailing navigation indicator as an anchor item.
      */
     onClick: ComponentPropsWithoutRef<'button'>['onClick'];
     /**

package/dist/src/NumberBox/NumberBox.d.ts

@@ -5,8 +5,13 @@ import React from 'react';
  * and ignores invalid characters.
  *
  * The `onChange` callback receives the raw numeric string without commas.
+ *
+ * `maxIntegerDigits` and `decimalPlaces` cap how much the user can enter. Edits that would
+ * exceed either limit are silently rejected, so state the limit in an adjacent `HelpMessage`.
  */
 export declare const NumberBox: React.ForwardRefExoticComponent<Omit<import("..").TextBoxProps, "onChange" | "prefixSlot" | "suffixSlot"> & {
     onChange?: (value: string) => void;
     textAlign?: 'left' | 'right';
+    maxIntegerDigits?: number;
+    decimalPlaces?: number;
 } & React.RefAttributes<HTMLInputElement>>;