@moneyforward/mfui-components 2.48.1

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

@@ -0,0 +1,2 @@
+export { DropdownMenu } from './DropdownMenu';
+export type { DropdownMenuProps } from './DropdownMenu.types';

package/dist/cjs/src/DropdownMenu/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenu = void 0;
+var DropdownMenu_1 = require("./DropdownMenu");
+Object.defineProperty(exports, "DropdownMenu", { enumerable: true, get: function () { return DropdownMenu_1.DropdownMenu; } });

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

@@ -0,0 +1,20 @@
+/**
+ * `EmbeddedSidePane` is a variant of `SidePane` that is positioned absolutely within its container.
+ * The container must have `position: relative` for proper positioning and `overflow: hidden/clip` for clipping.
+ * This component extends the props of `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export declare const EmbeddedSidePane: import("react").ForwardRefExoticComponent<{
+    container?: HTMLElement | null;
+} & Omit<import("..").SidePaneProps, "targetDOMNode" | "enableNonModal"> & 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.
+     *
+     * This component extends the props of `<div>` element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+     */
+    Container: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/cjs/src/EmbeddedSidePane/EmbeddedSidePane.js

@@ -0,0 +1,48 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmbeddedSidePane = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SidePane_1 = require("../SidePane/SidePane");
+const recipes_1 = require("../../styled-system/recipes");
+const css_1 = require("../../styled-system/css");
+const mergeRefs_1 = require("../utilities/dom/mergeRefs");
+const EmbeddedSidePaneContext = (0, react_1.createContext)({
+    container: null,
+});
+const Container = (0, react_1.forwardRef)(({ className, ...props }, ref) => {
+    const classes = (0, recipes_1.embeddedSidePaneSlotRecipe)();
+    const localRef = (0, react_1.useRef)(null);
+    const [container, setContainer] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        setContainer(localRef.current);
+    }, []);
+    const values = (0, react_1.useMemo)(() => ({
+        container,
+    }), [container]);
+    return ((0, jsx_runtime_1.jsx)(EmbeddedSidePaneContext.Provider, { value: values, children: (0, jsx_runtime_1.jsx)("div", { ref: (0, mergeRefs_1.mergeRefs)(ref, localRef), className: (0, css_1.cx)('mfui-EmbeddedSidePane__container', classes.container, className), ...props }) }));
+});
+const Base = (0, react_1.forwardRef)(({ container, className, ...props }, ref) => {
+    const classes = (0, recipes_1.embeddedSidePaneSlotRecipe)();
+    const embeddedSidePaneContext = (0, react_1.useContext)(EmbeddedSidePaneContext);
+    return ((0, jsx_runtime_1.jsx)(SidePane_1.SidePane, { ref: ref, enableModal: false, targetDOMNode: container ?? embeddedSidePaneContext.container, className: (0, css_1.cx)('mfui-EmbeddedSidePane__root', classes.root, className), ...props }));
+});
+/**
+ * `EmbeddedSidePane` is a variant of `SidePane` that is positioned absolutely within its container.
+ * The container must have `position: relative` for proper positioning and `overflow: hidden/clip` for clipping.
+ * This component extends the props of `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+exports.EmbeddedSidePane = Object.assign(Base, {
+    /**
+     * 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.
+     *
+     * This component extends the props of `<div>` element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+     */
+    Container,
+});

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

@@ -0,0 +1,12 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type SidePaneProps } from '../SidePane/SidePane.types';
+export type EmbeddedSidePaneProps = {
+    /**
+     * The container element where the EmbeddedSidePane will be rendered inside and positioned.
+     * This element must have "position: relative" for proper positioning and "overflow: hidden/clip" for clipping.
+     *
+     * @default undefined
+     */
+    container?: HTMLElement | null;
+} & Omit<SidePaneProps, 'targetDOMNode' | 'enableNonModal'>;
+export type EmbeddedSidePaneContainerProps = ComponentPropsWithoutRef<'div'>;

package/dist/cjs/src/EmbeddedSidePane/EmbeddedSidePane.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,2 @@
+export { EmbeddedSidePane } from './EmbeddedSidePane';
+export type { EmbeddedSidePaneProps, EmbeddedSidePaneContainerProps } from './EmbeddedSidePane.types';

package/dist/cjs/src/EmbeddedSidePane/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmbeddedSidePane = void 0;
+var EmbeddedSidePane_1 = require("./EmbeddedSidePane");
+Object.defineProperty(exports, "EmbeddedSidePane", { enumerable: true, get: function () { return EmbeddedSidePane_1.EmbeddedSidePane; } });

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

@@ -0,0 +1,17 @@
+/**
+ * The component for selecting a single file or multiple files for upload.
+ *
+ * Also extends the props of `<input type="file">` element
+ *
+ * @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"];
+    disabled?: boolean;
+    multiple?: import("react").ComponentPropsWithoutRef<"input">["multiple"];
+    accept?: import("react").ComponentPropsWithoutRef<"input">["accept"];
+    buttonLabel?: string;
+    placeholder?: string;
+    multipleFilesSuffixLabel?: string;
+    clearButtonProps?: Pick<import("../IconButton").IconButtonProps, "aria-label">;
+} & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/src/FileBox/FileBox.js

@@ -0,0 +1,88 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileBox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
+const css_1 = require("../../styled-system/css");
+const recipes_1 = require("../../styled-system/recipes");
+const FocusIndicator_1 = require("../FocusIndicator");
+const IconButton_1 = require("../IconButton");
+const useIsTextOverflowed_1 = require("../utilities/dom/useIsTextOverflowed");
+/**
+ * The component for selecting a single file or multiple files for upload.
+ *
+ * Also extends the props of `<input type="file">` element
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
+ */
+exports.FileBox = (0, react_1.forwardRef)(({ invalid = false, disabled = false, className, multiple = false, accept = '', buttonLabel = 'ファイルを選択', placeholder = 'ファイルを選択してください。', multipleFilesSuffixLabel = 'ファイル', clearButtonProps, id, ...props }, ref) => {
+    const [values, setValues] = (0, react_1.useState)(null);
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const [key, setKey] = (0, react_1.useState)(0);
+    const inputRef = (0, react_1.useRef)(null);
+    const fileNameRef = (0, react_1.useRef)(null);
+    const classes = (0, recipes_1.fileBoxSlotRecipe)({ invalid, isDragging });
+    const isTextOverflowed = (0, useIsTextOverflowed_1.useIsTextOverflowed)(values?.[0] ?? '', fileNameRef, 24);
+    const handleChange = (event) => {
+        const { files } = event.target;
+        if (files !== null && files.length > 0) {
+            setValues([...files].map((file) => file.name));
+        }
+        else {
+            setValues(null);
+        }
+        props.onChange?.(event);
+        setIsDragging(false);
+    };
+    const handleDragEnter = () => {
+        setIsDragging(true);
+    };
+    const handleDragLeave = () => {
+        setIsDragging(false);
+    };
+    const handleDrop = () => {
+        if (isDragging) {
+            setIsDragging(false);
+        }
+    };
+    const handleClear = () => {
+        setValues(null);
+        // Trigger onChange event with empty files to notify parent component
+        if (props.onChange && inputRef.current) {
+            // Clear the input value first
+            inputRef.current.value = '';
+            const syntheticEvent = {
+                target: inputRef.current,
+                currentTarget: inputRef.current,
+            };
+            props.onChange(syntheticEvent);
+        }
+        // use a key to force re-render in order to clear the file input value
+        setKey((previous) => previous + 1);
+    };
+    const renderDisplayValues = () => {
+        if (values !== null) {
+            if (values.length > 1) {
+                return ((0, jsx_runtime_1.jsxs)("span", { className: (0, css_1.cx)(classes.span, 'mfui-FileBox__span'), children: [String(values.length), multipleFilesSuffixLabel] }));
+            }
+            return values[0] && isTextOverflowed ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { ref: fileNameRef, className: (0, css_1.cx)(classes.span, 'mfui-FileBox__span'), children: values[0] }), (0, jsx_runtime_1.jsx)("span", { className: (0, css_1.cx)(classes.span, 'mfui-FileBox__span'), children: values[0] })] })) : ((0, jsx_runtime_1.jsx)("span", { ref: fileNameRef, className: (0, css_1.cx)(classes.span, 'mfui-FileBox__span'), children: values[0] }));
+        }
+        return placeholder;
+    };
+    return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.root, 'mfui-FileBox__root'), children: [(0, jsx_runtime_1.jsx)("input", { ref: (element) => {
+                        inputRef.current = element;
+                        if (typeof ref === 'function') {
+                            ref(element);
+                        }
+                        else if (ref !== null && typeof ref === 'object') {
+                            // eslint-disable-next-line no-param-reassign
+                            ref.current = element;
+                        }
+                    }, id: id, type: "file", accept: accept, multiple: multiple, disabled: disabled, 
+                    // https://github.com/w3c/html-aria/issues/126
+                    // following Chrome's classification
+                    role: "button", className: (0, css_1.cx)(classes.input, 'mfui-FileBox__input'), onChange: handleChange, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop }, key), (0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "filebox-input-background", className: (0, css_1.cx)(classes.inputBackground, 'mfui-FileBox__inputBackground') }), (0, jsx_runtime_1.jsxs)("div", { "data-mfui-content": "filebox-container", className: (0, css_1.cx)(classes.container, 'mfui-FileBox__container'), children: [(0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "filebox-button", ...props, className: (0, css_1.cx)(classes.button, 'mfui-FileBox__button', className), children: buttonLabel }), (0, jsx_runtime_1.jsxs)("div", { "data-mfui-content": "filebox-file-info", className: (0, css_1.cx)(classes.fileInfo, 'mfui-FileBox__fileInfo'), children: [renderDisplayValues(), values !== null && values.length > 0 && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": clearButtonProps?.['aria-label'] ?? 'ファイルをクリアする', className: (0, css_1.cx)(classes.clearButton, 'mfui-FileBox__clearButton'), onClick: handleClear, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Close, {}) }))] })] })] }) }));
+});
+exports.FileBox.displayName = 'FileBox';

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

@@ -0,0 +1,61 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type TextBoxSlotRecipeVariant } from '../../styled-system/recipes';
+import { type IconButtonProps } from '../IconButton/IconButton.types';
+/**
+ * The props for the FileBox component.
+ */
+export type FileBoxProps = {
+    /**
+     * Whether the file input is invalid or not.
+     * This will change the style of the file box.
+     *
+     * @default false
+     */
+    invalid?: TextBoxSlotRecipeVariant['invalid'];
+    /**
+     * Whether the file input is disabled or not.
+     * If disabled, users cannot select files.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allow users to select multiple files.
+     *
+     * @default false
+     */
+    multiple?: ComponentPropsWithoutRef<'input'>['multiple'];
+    /**
+     * Accept attribute for the file input.
+     *
+     * @default undefined
+     */
+    accept?: ComponentPropsWithoutRef<'input'>['accept'];
+    /**
+     * The text label for the file selection button.
+     *
+     * @default "ファイルを選択"
+     */
+    buttonLabel?: string;
+    /**
+     * The placeholder text shown when no file is selected.
+     *
+     * @default "ファイルを選択してください。"
+     */
+    placeholder?: string;
+    /**
+     * The text that appears after the count when displaying multiple files. For example, "ファイル" in Japanese or "files" in English.
+     *
+     * @default "ファイル"
+     */
+    multipleFilesSuffixLabel?: string;
+    /**
+     * The properties for the clear button.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the clear button.
+     *
+     * @default "ファイルをクリアする"
+     */
+    clearButtonProps?: Pick<IconButtonProps, 'aria-label'>;
+} & ComponentPropsWithoutRef<'input'>;

package/dist/cjs/src/FileBox/FileBox.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,2 @@
+export { FileBox } from './FileBox';
+export type { FileBoxProps } from './FileBox.types';

package/dist/cjs/src/FileBox/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileBox = void 0;
+var FileBox_1 = require("./FileBox");
+Object.defineProperty(exports, "FileBox", { enumerable: true, get: function () { return FileBox_1.FileBox; } });

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

@@ -0,0 +1,53 @@
+/**
+ * The component for selecting a single file or multiple files for upload by dialog or drag and drop.
+ *
+ * ## Event Handling
+ * - `onChange`: Called when user selects files through dialog or drag-and-drop
+ * - `onClear`: Called when user clicks the clear button (user-initiated only)
+ * - `onValueCleared`: Called when controlled value transitions from non-empty to empty (external changes only)
+ *
+ * ## Controlled vs Uncontrolled
+ * - Controlled: Provide `value` prop to control file names externally
+ * - Uncontrolled: Use `defaultValue` for initial state, component manages internal state
+ *
+ * ## Enhanced Features
+ * - **Explicit clear button**: Provides discoverable way to clear files
+ * - **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
+ *
+ * ## Internationalization
+ * This component supports internationalization through text override props following the MFUI Component Internationalization Strategy.
+ * All text props are optional with Japanese defaults for backward compatibility.
+ *
+ * @see {@link https://github.com/moneyforward/mfui/blob/main/docs/ADRs/2025-12-05-component-internationalization-strategy.md | Component Internationalization Strategy ADR}
+ *
+ * Also extends the props of `<input type="file">` element
+ *
+ * @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"];
+    disabled?: boolean;
+    multiple?: import("react").ComponentPropsWithoutRef<"input">["multiple"];
+    accept?: import("react").ComponentPropsWithoutRef<"input">["accept"];
+    clearButtonProps?: Pick<import("../IconButton").IconButtonProps, "aria-label">;
+    errorMessage?: string;
+    helperMessage?: string;
+    illustrationUrl?: string;
+    extraElement?: React.ReactNode;
+    value?: string[] | undefined;
+    defaultValue?: string[] | undefined;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onClear?: () => void;
+    onValueCleared?: () => void;
+    fileBoxWidth?: number;
+    fileSelectButtonLabel?: string;
+    instructionText?: string;
+    fileCountLabel?: (count: number) => string;
+    screenReaderTexts?: {
+        single?: (filename: string) => string;
+        multiple?: (count: number) => string;
+    };
+} & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/src/FileDropZone/FileDropZone.js

@@ -0,0 +1,219 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileDropZone = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
+const recipes_1 = require("../../styled-system/recipes");
+const css_1 = require("../../styled-system/css");
+const useMiddleTruncatedText_1 = require("../utilities/dom/useMiddleTruncatedText");
+const IconButton_1 = require("../IconButton");
+const HelpMessage_1 = require("../HelpMessage");
+const Button_1 = require("../Button");
+const mergeRefs_1 = require("../utilities/dom/mergeRefs");
+/**
+ * The component for selecting a single file or multiple files for upload by dialog or drag and drop.
+ *
+ * ## Event Handling
+ * - `onChange`: Called when user selects files through dialog or drag-and-drop
+ * - `onClear`: Called when user clicks the clear button (user-initiated only)
+ * - `onValueCleared`: Called when controlled value transitions from non-empty to empty (external changes only)
+ *
+ * ## Controlled vs Uncontrolled
+ * - Controlled: Provide `value` prop to control file names externally
+ * - Uncontrolled: Use `defaultValue` for initial state, component manages internal state
+ *
+ * ## Enhanced Features
+ * - **Explicit clear button**: Provides discoverable way to clear files
+ * - **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
+ *
+ * ## Internationalization
+ * This component supports internationalization through text override props following the MFUI Component Internationalization Strategy.
+ * All text props are optional with Japanese defaults for backward compatibility.
+ *
+ * @see {@link https://github.com/moneyforward/mfui/blob/main/docs/ADRs/2025-12-05-component-internationalization-strategy.md | Component Internationalization Strategy ADR}
+ *
+ * Also extends the props of `<input type="file">` element
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
+ */
+exports.FileDropZone = (0, react_1.forwardRef)(({ invalid = false, disabled = false, multiple = false, accept = '', clearButtonProps, errorMessage, helperMessage, illustrationUrl, extraElement, className, id, style, onChange, value, defaultValue, onClear, onValueCleared, fileBoxWidth = 280, 
+// Text override props for internationalization
+fileSelectButtonLabel = 'ファイルを選択', instructionText, fileCountLabel, screenReaderTexts = {}, ...props }, ref) => {
+    // Normalize instructionText: convert literal "\n" to actual newline character
+    // This allows users to use string literals like "text\nmore text" in JSX attributes
+    const normalizedInstructionText = (0, react_1.useMemo)(() => {
+        const defaultValue = 'ファイルを\nドラッグアンドドロップ\nまたは';
+        const text = instructionText ?? defaultValue;
+        // Replace literal "\n" strings with actual newline characters using split/join
+        const normalized = text.split(String.raw `\n`).join('\n');
+        return normalized;
+    }, [instructionText]);
+    const getFileCountText = (0, react_1.useCallback)((count) => (fileCountLabel ? fileCountLabel(count) : `${String(count)}ファイル`), [fileCountLabel]);
+    const getScreenReaderText = (type, data) => {
+        if (type === 'single') {
+            return screenReaderTexts.single ? screenReaderTexts.single(String(data)) : `選択済みファイル: ${String(data)}`;
+        }
+        return screenReaderTexts.multiple
+            ? screenReaderTexts.multiple(Number(data))
+            : `選択済みファイル: ${String(data)}個のファイル`;
+    };
+    // Get clear button aria-label with priority: clearButtonProps['aria-label'] > default
+    const getClearButtonAriaLabel = () => clearButtonProps?.['aria-label'] || 'ファイルをクリアする';
+    const isControlled = value !== undefined;
+    const [internalValues, setInternalValues] = (0, react_1.useState)(defaultValue);
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const [key, setKey] = (0, react_1.useState)(0);
+    const [buttonWidth, setButtonWidth] = (0, react_1.useState)(126); // Default fallback width
+    const fileNameRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const buttonRef = (0, react_1.useRef)(null);
+    const previousValueRef = (0, react_1.useRef)(value);
+    const isUserInitiatedClearRef = (0, react_1.useRef)(false);
+    const displayValues = isControlled ? value : internalValues;
+    const CLEAR_BUTTON_WIDTH = 24; // Width of clear button to subtract from available space
+    const truncatedSingleName = (0, useMiddleTruncatedText_1.useMiddleTruncatedText)(displayValues?.[0] ?? '', fileNameRef, CLEAR_BUTTON_WIDTH);
+    const classes = (0, recipes_1.fileDropZoneSlotRecipe)({ isDragging, invalid });
+    const gap = 7; // From spacing.mfui.size.spacing.inline.horizontal.comfort token value
+    const fileInfoWidth = (0, react_1.useMemo)(() => {
+        if (fileBoxWidth) {
+            return fileBoxWidth - buttonWidth - gap;
+        }
+        return 280 - buttonWidth - gap;
+    }, [buttonWidth, fileBoxWidth, gap]);
+    // Measure button width after initial render
+    (0, react_1.useLayoutEffect)(() => {
+        if (buttonRef.current) {
+            const measuredWidth = buttonRef.current.offsetWidth;
+            if (measuredWidth > 0) {
+                setButtonWidth(measuredWidth);
+            }
+        }
+    }, []);
+    // Force file input to re-render and clear its internal value
+    const resetFileInput = (0, react_1.useCallback)(() => {
+        setKey((previous) => previous + 1);
+    }, []);
+    // Cleanup function to ensure no memory leaks
+    (0, react_1.useEffect)(() => () => {
+        // Clear any pending refs when component unmounts
+        if (inputRef.current) {
+            inputRef.current = null;
+        }
+    }, []);
+    // Handle external value clearing (controlled mode)
+    (0, react_1.useEffect)(() => {
+        if (isControlled) {
+            const previousValue = previousValueRef.current;
+            const currentValue = value;
+            // Only call onValueCleared if value transitioned from non-empty to empty
+            // AND it wasn't initiated by user clicking clear button
+            const wasNotEmpty = previousValue && previousValue.length > 0;
+            const isNowEmpty = !currentValue || currentValue.length === 0;
+            if (wasNotEmpty && isNowEmpty && !isUserInitiatedClearRef.current) {
+                resetFileInput();
+                onValueCleared?.();
+            }
+            isUserInitiatedClearRef.current = false;
+            previousValueRef.current = currentValue;
+        }
+    }, [isControlled, value, onValueCleared, resetFileInput]);
+    const handleChange = (0, react_1.useCallback)((event) => {
+        const { files } = event.target;
+        let newValues;
+        if (files !== null && files.length > 0) {
+            newValues = [...files].map((file) => file.name);
+        }
+        if (!isControlled) {
+            setInternalValues(newValues);
+        }
+        onChange?.(event);
+        // Only reset input for controlled mode to maintain controlled data flow
+        // For uncontrolled mode, let the input maintain its natural state
+        if (isControlled) {
+            resetFileInput();
+        }
+        setIsDragging(false);
+    }, [isControlled, onChange, resetFileInput]);
+    const handleDragEnter = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragging(true);
+    }, []);
+    const handleDragLeave = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragging(false);
+    }, []);
+    const handleDragOver = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+    }, []);
+    const handleDrop = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragging(false);
+        if (disabled) {
+            return;
+        }
+        const { files } = event.dataTransfer;
+        if (files.length > 0) {
+            // Create a synthetic change event to reuse existing logic
+            const syntheticEvent = {
+                target: {
+                    files,
+                },
+            };
+            handleChange(syntheticEvent);
+        }
+    }, [disabled, handleChange]);
+    const handleClear = (0, react_1.useCallback)(() => {
+        if (!isControlled) {
+            setInternalValues(undefined);
+        }
+        else {
+            // Mark this as user-initiated clear to prevent onValueCleared from firing
+            isUserInitiatedClearRef.current = true;
+        }
+        resetFileInput();
+        onClear?.();
+        // Return focus to select button after clearing files
+        setTimeout(() => {
+            buttonRef.current?.focus();
+        }, 0);
+    }, [isControlled, onClear, resetFileInput]);
+    const handleFileInputTrigger = (0, react_1.useCallback)(() => {
+        if (inputRef.current && !disabled) {
+            inputRef.current.click();
+        }
+    }, [disabled]);
+    const handleContainerClick = (0, react_1.useCallback)((event) => {
+        // Only trigger file input if clicking directly on the container
+        // and not on interactive elements within it
+        if (event.target === event.currentTarget) {
+            handleFileInputTrigger();
+        }
+    }, [handleFileInputTrigger]);
+    const renderDisplayValues = (0, react_1.useMemo)(() => {
+        if (displayValues !== undefined && displayValues.length > 0) {
+            if (displayValues.length > 1) {
+                const originals = displayValues.join('\n');
+                return ((0, jsx_runtime_1.jsx)("span", { className: (0, css_1.cx)(classes.span, 'mfui-FileDropZone__span'), title: originals, children: getFileCountText(displayValues.length) }));
+            }
+            const original = displayValues[0] ?? '';
+            const isTextTruncated = original.length > 0 && original !== truncatedSingleName && truncatedSingleName.includes('…');
+            return ((0, jsx_runtime_1.jsx)("span", { ref: fileNameRef, className: (0, css_1.cx)(classes.span, 'mfui-FileDropZone__span'), title: isTextTruncated ? original : undefined, children: truncatedSingleName }));
+        }
+        return '';
+    }, [displayValues, truncatedSingleName, classes.span, getFileCountText]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.root, 'mfui-FileDropZone__root'), children: [(0, jsx_runtime_1.jsx)("input", { ref: (0, mergeRefs_1.mergeRefs)(ref, inputRef), id: id, type: "file", disabled: disabled, multiple: multiple, accept: accept, className: (0, css_1.cx)(classes.input, 'mfui-FileDropZone__input'), tabIndex: -1, "aria-hidden": "true", onChange: handleChange, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop, ...props }, key), (0, jsx_runtime_1.jsxs)("div", { "data-mfui-content": "file-drop-zone-container", className: (0, css_1.cx)(classes.container, 'mfui-FileDropZone__container', className), style: style, onClick: handleContainerClick, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [illustrationUrl ? ((0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "file-drop-zone-illustration", className: (0, css_1.cx)(classes.illustration, 'mfui-FileDropZone__illustration'), children: (0, jsx_runtime_1.jsx)("img", { src: illustrationUrl, alt: "illustration" }) })) : null, (0, jsx_runtime_1.jsxs)("div", { "data-mfui-content": "file-drop-zone-main-container", className: (0, css_1.cx)(classes.mainContainer, 'mfui-FileDropZone__mainContainer'), style: { maxWidth: fileBoxWidth }, children: [(0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "file-drop-zone-instruction", className: (0, css_1.cx)(classes.instruction, 'mfui-FileDropZone__instruction'), children: (0, jsx_runtime_1.jsx)("p", { className: (0, css_1.cx)(classes.phrase, 'mfui-FileDropZone__phrase'), children: normalizedInstructionText }) }), (0, jsx_runtime_1.jsxs)("div", { "data-mfui-content": "file-drop-zone-button-container", className: (0, css_1.cx)(classes.buttonContainer, 'mfui-FileDropZone__buttonContainer'), children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { ref: buttonRef, className: (0, css_1.cx)(classes.button, 'mfui-FileDropZone__button'), disabled: disabled, "aria-describedby": errorMessage || helperMessage || (displayValues && displayValues.length > 0)
+                                            ? `${id ? `${id}-` : ''}file-drop-zone-messages`
+                                            : undefined, onClick: handleFileInputTrigger, children: fileSelectButtonLabel }), displayValues !== undefined && displayValues.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { "data-mfui-content": "file-drop-zone-file-info", className: (0, css_1.cx)(classes.fileInfo, 'mfui-FileDropZone__fileInfo'), style: { maxWidth: `${(fileInfoWidth || 147).toString()}px` }, children: [renderDisplayValues, (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { ...clearButtonProps, "aria-label": getClearButtonAriaLabel(), className: (0, css_1.cx)(classes.clearButton, 'mfui-FileDropZone__clearButton'), disabled: disabled, onClick: handleClear, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Close, {}) })] }))] }), (0, jsx_runtime_1.jsxs)("div", { id: id ? `${id}-file-drop-zone-messages` : 'file-drop-zone-messages', "data-mfui-content": "file-drop-zone-help-message", className: (0, css_1.cx)(classes.helpMessage, 'mfui-FileDropZone__helpMessage'), children: [errorMessage ? ((0, jsx_runtime_1.jsx)(HelpMessage_1.HelpMessage, { messageType: "error", messageAlign: "center", children: errorMessage })) : null, helperMessage ? (0, jsx_runtime_1.jsx)(HelpMessage_1.HelpMessage, { messageAlign: "center", children: helperMessage }) : null, displayValues && displayValues.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "sr-only", children: displayValues.length === 1
+                                            ? getScreenReaderText('single', displayValues[0] || '')
+                                            : getScreenReaderText('multiple', displayValues.length) })) : null] })] }), extraElement ? ((0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "file-drop-zone-extra", className: (0, css_1.cx)(classes.extra, 'mfui-FileDropZone__extra'), children: extraElement })) : null] })] }));
+});
+exports.FileDropZone.displayName = 'FileDropZone';