@moneyforward/mfui-components 3.29.0 → 3.30.0

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

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

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

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

package/dist/src/CheckboxCard/CheckboxCard.js

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

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { DisclosureBasicCollapsed, DisclosureBasicExpanded, DisclosureNestedCollapsed, DisclosureNestedExpanded, } from '@moneyforward/mfui-icons-react';
 import { dataTableCellSlotRecipe } from '../../../styled-system/recipes';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/src/DropdownMenu/DropdownMenuItem/DropdownMenuItem.js

@@ -2,7 +2,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef } from 'react';
 import { cx } from '../../../styled-system/css';
-import { findSiblingElements } from '../../utilities/dom/findSiblingElements';
 import { FocusIndicator } from '../../FocusIndicator';
 import { dropdownMenuItemSlotRecipe } from '../../../styled-system/recipes';
 import { Typography } from '../../Typography';
@@ -26,7 +25,12 @@ export function DropdownMenuItem({ children, className, href, target, customLink
     const id = useId();
     const itemRef = useRef(null);
     const handleKeyDown = useCallback((event) => {
-        const siblingElements = findSiblingElements(event.currentTarget, '[data-mfui-menu-item]:is([data-mfui-focusable=true])');
+        // Search from the menu container (not the immediate parent) so arrow navigation still works
+        // when items are wrapped in another element such as a Tooltip.
+        const container = event.currentTarget.closest('[data-mfui-menu-container]');
+        const siblingElements = container
+            ? [...container.querySelectorAll('[data-mfui-menu-item]:is([data-mfui-focusable=true])')]
+            : [];
         const currentIndex = siblingElements.indexOf(event.currentTarget);
         // If the current element is the last element, move to the first element.
         const nextIndex = siblingElements.length - 1 === currentIndex ? 0 : currentIndex + 1;
@@ -52,7 +56,11 @@ export function DropdownMenuItem({ children, className, href, target, customLink
             return;
         if (onClick) {
             onClick(event);
-            closeMenuPopover?.();
+            // Consumers can keep the menu open after a click by calling `event.preventDefault()`
+            // in their `onClick` handler (e.g. for in-menu actions like copy-to-clipboard).
+            if (!event.defaultPrevented) {
+                closeMenuPopover?.();
+            }
         }
     }, [disabled, onClick, closeMenuPopover]);
     const isButton = useMemo(() => onClick && !href, [onClick, href]);

package/dist/src/EmbeddedSidePane/EmbeddedSidePane.d.ts

@@ -7,7 +7,7 @@
  */
 export declare const EmbeddedSidePane: import("react").ForwardRefExoticComponent<{
     container?: HTMLElement | null;
-} & Omit<import("..").SidePaneProps, "targetDOMNode" | "enableNonModal"> & import("react").RefAttributes<HTMLDivElement>> & {
+} & Omit<import("..").SidePaneProps, "enableNonModal" | "targetDOMNode"> & import("react").RefAttributes<HTMLDivElement>> & {
     /**
      * The `EmbeddedSidePane.Container` component is used to define the container for the `EmbeddedSidePane`.
      * It should be a parent element that has `position: relative` for proper positioning and `overflow: hidden/clip` for clipping.

package/dist/src/FileBox/FileBox.d.ts

@@ -6,12 +6,12 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
  */
 export declare const FileBox: import("react").ForwardRefExoticComponent<{
-    invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["invalid"];
+    invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['invalid'];
     disabled?: boolean;
-    multiple?: import("react").ComponentPropsWithoutRef<"input">["multiple"];
-    accept?: import("react").ComponentPropsWithoutRef<"input">["accept"];
+    multiple?: import("react").ComponentPropsWithoutRef<'input'>['multiple'];
+    accept?: import("react").ComponentPropsWithoutRef<'input'>['accept'];
     buttonLabel?: string;
     placeholder?: string;
     multipleFilesSuffixLabel?: string;
-    clearButtonProps?: Pick<import("..").IconButtonProps, "aria-label">;
+    clearButtonProps?: Pick<import("..").IconButtonProps, 'aria-label'>;
 } & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/src/FileBox/FileBox.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useState } from 'react';
 import { cx } from '../../styled-system/css';
 import { fileBoxSlotRecipe } from '../../styled-system/recipes';

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

@@ -28,11 +28,11 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
  */
 export declare const FileDropZone: import("react").ForwardRefExoticComponent<{
-    invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["invalid"];
+    invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['invalid'];
     disabled?: boolean;
-    multiple?: import("react").ComponentPropsWithoutRef<"input">["multiple"];
-    accept?: import("react").ComponentPropsWithoutRef<"input">["accept"];
-    clearButtonProps?: Pick<import("..").IconButtonProps, "aria-label">;
+    multiple?: import("react").ComponentPropsWithoutRef<'input'>['multiple'];
+    accept?: import("react").ComponentPropsWithoutRef<'input'>['accept'];
+    clearButtonProps?: Pick<import("..").IconButtonProps, 'aria-label'>;
     errorMessage?: string;
     helperMessage?: string;
     illustrationUrl?: string;

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

@@ -81,7 +81,7 @@ export declare function createValidationResult(isValid: boolean, error?: string)
  * @property ARCHIVES - The archive file types
  */
 export declare const FILE_TYPES: {
-    readonly IMAGES: readonly ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml"];
-    readonly DOCUMENTS: readonly ["application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "text/plain"];
-    readonly ARCHIVES: readonly ["application/zip", "application/x-rar-compressed", "application/x-tar"];
+    readonly IMAGES: readonly ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'];
+    readonly DOCUMENTS: readonly ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/plain'];
+    readonly ARCHIVES: readonly ['application/zip', 'application/x-rar-compressed', 'application/x-tar'];
 };

package/dist/src/FilterTrigger/FilterTrigger.d.ts

@@ -5,11 +5,11 @@
 export declare const FilterTrigger: import("react").ForwardRefExoticComponent<{
     label: string;
     value?: string;
-    inputProps?: Omit<import("react").ComponentPropsWithoutRef<"input">, "type">;
+    inputProps?: Omit<import("react").ComponentPropsWithoutRef<'input'>, 'type'>;
     className?: string;
     enableClearButton?: boolean;
     clearButtonProps?: {
-        "aria-label"?: string;
+        'aria-label'?: string;
         onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     };
 } & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/src/Heading/Heading.d.ts

@@ -11,6 +11,6 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
  */
 export declare const Heading: import("react").ForwardRefExoticComponent<{
-    variant: "pageHeading1" | "pageHeading2" | "sectionHeading1" | "sectionHeading2" | "contentHeading";
-    tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    variant: 'pageHeading1' | 'pageHeading2' | 'sectionHeading1' | 'sectionHeading2' | 'contentHeading';
+    tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/src/HelpMessage/HelpMessage.d.ts

@@ -11,8 +11,8 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
  */
 export declare const HelpMessage: import("react").ForwardRefExoticComponent<{
-    messageType?: import("../../styled-system/recipes").HelpMessageRecipeVariant["messageType"];
+    messageType?: import("../../styled-system/recipes").HelpMessageRecipeVariant['messageType'];
     showIcon?: boolean;
-    messageAlign?: "left" | "center";
-    children?: import("..").TypographyProps["children"];
+    messageAlign?: 'left' | 'center';
+    children?: import("..").TypographyProps['children'];
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/IconButton/IconButton.d.ts

@@ -1,16 +1,16 @@
 export declare const InternalIconButton: import("react").ForwardRefExoticComponent<{
-    outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant["outlined"];
+    outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['outlined'];
     children: React.ReactNode;
     disabled?: boolean;
     href?: string;
     customLinkComponent?: import("react").ElementType;
-} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "type" | "rel" | "download" | "hrefLang" | "ping" | "target" | "referrerPolicy"> & {
-    size?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant["size"];
-} & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "download" | "hrefLang" | "ping" | "referrerPolicy" | "rel" | "target" | "type"> & {
+    size?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['size'];
+} & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export declare const IconButton: import("react").ForwardRefExoticComponent<{
-    outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant["outlined"];
+    outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['outlined'];
     children: React.ReactNode;
     disabled?: boolean;
     href?: string;
     customLinkComponent?: import("react").ElementType;
-} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "type" | "rel" | "download" | "hrefLang" | "ping" | "target" | "referrerPolicy"> & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "download" | "hrefLang" | "ping" | "referrerPolicy" | "rel" | "target" | "type"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/dist/src/KeyValue/KeyValue.d.ts

@@ -3,8 +3,8 @@
  * Both the key and value areas accept any elements and are rendered with predefined layout styles.
  */
 export declare const KeyValue: import("react").ForwardRefExoticComponent<{
-    size?: import("../../styled-system/recipes").KeyValueSlotRecipeVariant["size"];
+    size?: import("../../styled-system/recipes").KeyValueSlotRecipeVariant['size'];
     keyItem: React.ReactNode;
     valueItem: React.ReactNode;
-    gridTemplateColumns?: import("react").CSSProperties["gridTemplateColumns"];
+    gridTemplateColumns?: import("react").CSSProperties['gridTemplateColumns'];
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/MainNavigation/MainNavigation.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { BaseMainNavigation } from './BaseMainNavigation';
 import { NarrowViewportMainNavigation } from './NarrowViewportMainNavigation';

package/dist/src/MultipleSelectBox/MultipleSelectBox.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef } from 'react';
 import { Add, CheckboxChecked, CheckboxUnchecked, Error } from '@moneyforward/mfui-icons-react';
 import { FocusIndicator } from '../FocusIndicator';

package/dist/src/MultipleSelectBox/hooks/useApplyControls.d.ts

@@ -22,7 +22,7 @@ type UseApplyControlsProps<T extends AllowedValueTypes = string, AdditionalProps
  */
 export declare function useApplyControls<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>({ options, onValuesChange, closeOptionPanel }: UseApplyControlsProps<T, AdditionalProps>): {
     temporaryValues: Set<MultipleSelectBoxOption<T, AdditionalProps>["value"]>;
-    updateTemporaryValues: (values: MultipleSelectBoxOption<T, AdditionalProps>["value"][]) => void;
+    updateTemporaryValues: (values: MultipleSelectBoxOption<T, AdditionalProps>['value'][]) => void;
     openWithSelectedOptions: (selectedOptions: MultipleSelectBoxOption<T, AdditionalProps>[]) => void;
     initializeTemporaryValues: () => void;
     handleCancelButtonClick: () => void;

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

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { getDeepActiveElement } from '../utils/getDeepActiveElement';
 import { isSelectableOption } from '../utils/isSelectableOption';
 /**
  * Control the focus when the option panel is opened.
@@ -9,7 +10,7 @@ export const useInitialFocusOnOptionPanelOpen = ({ isOptionPanelOpen, selectAllB
         if (!isOptionPanelOpen)
             return;
         // Check if the active element is one of the all options control buttons
-        const { activeElement } = document;
+        const activeElement = getDeepActiveElement();
         // If an all options control button is focused, don't change focus
         if (activeElement === selectAllButtonRef.current || activeElement === clearAllButtonRef.current) {
             return;
@@ -17,7 +18,7 @@ export const useInitialFocusOnOptionPanelOpen = ({ isOptionPanelOpen, selectAllB
         // Focus the search input when the select is searchable and the value is empty.
         if (enableSearchOptions) {
             // If it is already focused, return.
-            if (searchInputRef.current === document.activeElement)
+            if (searchInputRef.current === activeElement)
                 return;
             // Otherwise, focus the search input
             if (localSelectedValuesSet.size === 0) {
@@ -57,10 +58,6 @@ export const useInitialFocusOnOptionPanelOpen = ({ isOptionPanelOpen, selectAllB
             if (focusIndexInOptions === -1)
                 focusIndexInOptions = 0;
         }
-        else {
-            // Default to the first focusable option
-            focusIndexInOptions = 0;
-        }
         const optionNode = optionPanelRef.current?.querySelectorAll('[role="option"][data-focusable="true"]');
         if (optionNode && optionNode.length > 0) {
             optionNode[focusIndexInOptions]?.focus({ preventScroll: true });

package/dist/src/MultipleSelectBox/hooks/useSelectedValues.d.ts

@@ -28,7 +28,7 @@ type UseSelectedValuesProps<T extends AllowedValueTypes = string, AdditionalProp
 export declare function useSelectedValues<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>({ options, defaultValue, value, onChange }: UseSelectedValuesProps<T, AdditionalProps>): {
     localSelectedValuesSet: Set<MultipleSelectBoxOption<T, AdditionalProps>["value"]>;
     localSelectedOptions: MultipleSelectBoxOption<T, AdditionalProps>[];
-    updateSelectedValues: (newValues: MultipleSelectBoxOption<T, AdditionalProps>["value"][]) => void;
+    updateSelectedValues: (newValues: MultipleSelectBoxOption<T, AdditionalProps>['value'][]) => void;
     updateSelectedOptions: (newOptions: MultipleSelectBoxOption<T, AdditionalProps>[]) => void;
 };
 export {};