@moneyforward/mfui-components 4.3.0 → 4.3.1

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

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

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

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

package/dist/src/FileDropZone/FileDropZone.js

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

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

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

package/dist/src/NumberBox/NumberBox.js

@@ -117,7 +117,8 @@ export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign
     // Sync with controlled value
     useEffect(() => {
         if (value !== undefined) {
-            setDisplayValue(formatWithCommas(sanitizeInput(String(value))));
+            const sanitized = sanitizeInput(String(value));
+            setDisplayValue(formatWithCommas(sanitized));
         }
     }, [value]);
     // Restore cursor position after display value update

package/dist/src/Popover/Popover.js

@@ -114,7 +114,8 @@ export function Popover({ renderTrigger, renderContent, open, onOpenStateChanged
             const documentActiveElement = document.activeElement;
             // In Shadow DOM environments, we need to handle focus detection differently
             const isInShadowDOM = rootNode instanceof ShadowRoot;
-            let isFocusStillWithinComponent = false;
+            // Both branches below assign this, so it deliberately has no initial value.
+            let isFocusStillWithinComponent;
             if (isInShadowDOM) {
                 // In Shadow DOM: check both shadow and document active elements
                 isFocusStillWithinComponent =

package/dist/src/SidePane/hooks/useSidePaneStateController.js

@@ -41,13 +41,11 @@ export function useSidePaneStateController({ open, onClose, ref, insideElement }
      * Handles the close action for the side pane.
      */
     const handleCloseSidePane = useCallback(() => {
-        if (open !== undefined) {
-            onClose?.();
-        }
-        else {
+        // When `open` is controlled by the consumer, only notify; the consumer owns the state.
+        if (open === undefined) {
             closeSidePane();
-            onClose?.();
         }
+        onClose?.();
     }, [closeSidePane, open, onClose]);
     // Function to prevent the side pane from closing when clicking inside the side pane.
     const handleStopCloseSidePane = useCallback((event) => {

package/dist/src/SplitView/utils/parseSize.d.ts

@@ -10,6 +10,6 @@ import { type CSSProperties } from 'react';
  *
  * @returns Number value in pixels
  *
- * @throws Error if value is undefined or invalid
+ * @throws {Error} If value is undefined or invalid
  */
 export declare function parseSizeToNumber(value: CSSProperties['width'], propName?: string): number;

package/dist/src/SplitView/utils/parseSize.js

@@ -9,7 +9,7 @@
  *
  * @returns Number value in pixels
  *
- * @throws Error if value is undefined or invalid
+ * @throws {Error} If value is undefined or invalid
  */
 export function parseSizeToNumber(value, propName) {
     const propPrefix = propName ? `SplitView: ${propName}` : 'SplitView';
@@ -23,7 +23,9 @@ export function parseSizeToNumber(value, propName) {
         // Support pixel values like '300px'
         const match = /^(\d+(?:\.\d+)?)px$/.exec(value);
         if (match?.[1]) {
-            return Number.parseFloat(match[1]);
+            // The capture group is `\d+(?:\.\d+)?`, so `Number` matches the previous
+            // `Number.parseFloat` exactly.
+            return Number(match[1]);
         }
         // Warn about unsupported string formats but don't throw to avoid breaking the component
         const warningMessage = propName

package/dist/src/Tabs/TabContext.d.ts

@@ -1,4 +1,5 @@
 import { type TabItemProps } from './TabItem';
+import { type TabElementRef } from './hooks/useTabRegistry';
 type TabContextType = {
     selectedTabId: string | undefined;
     onSelectedTabIdChange?: (tabId: string) => void;
@@ -6,7 +7,8 @@ type TabContextType = {
     shouldShowMenu: boolean;
     setShouldShowMenu?: (shouldShowMenu: boolean) => void;
     targetDOMNode?: HTMLElement;
-    registerTab?: (tab: TabItemProps) => void;
+    registerTab?: (tab: TabItemProps, elementRef: TabElementRef) => void;
+    updateTab?: (tab: TabItemProps) => void;
     unregisterTab?: (tabId: string) => void;
     enableAutoUnmount: boolean;
 };

package/dist/src/Tabs/TabContext.js

@@ -8,6 +8,7 @@ export const TabContext = createContext({
     setShouldShowMenu: undefined,
     targetDOMNode: undefined,
     registerTab: undefined,
+    updateTab: undefined,
     unregisterTab: undefined,
     enableAutoUnmount: true,
 });

package/dist/src/Tabs/TabItem/TabItem.js

@@ -10,7 +10,7 @@ import { useArrowKeyHandler } from './hooks/useArrowKeyHandler';
 import { Badge } from '../../Badge';
 import { cx } from '../../../styled-system/css';
 export function TabItem({ id, badgeProps, children, className }) {
-    const { selectedTabId, onSelectedTabIdChange, tabs, shouldShowMenu, targetDOMNode, registerTab, unregisterTab } = useContext(TabContext);
+    const { selectedTabId, onSelectedTabIdChange, tabs, shouldShowMenu, targetDOMNode, registerTab, updateTab, unregisterTab, } = useContext(TabContext);
     const { onKeyDown } = useArrowKeyHandler();
     const buttonRef = useRef(null);
     const labelRef = useRef(null);
@@ -40,12 +40,23 @@ export function TabItem({ id, badgeProps, children, className }) {
     const onClick = useCallback(() => {
         onSelectedTabIdChange?.(id);
     }, [id, onSelectedTabIdChange]);
+    // The lifecycle of a registration and the updates to it must stay in two separate effects.
+    // Merging them back would unregister and re-register the tab whenever its label or badge
+    // changes, which moves it to the end of the registry and gives it the corner radius meant for
+    // the last tab. See https://github.com/moneyforward/mfui/issues/2883
+    //
+    // `badgeProps` and `children` are deliberately absent from the dependencies here: the update
+    // effect below carries them, so this effect only runs on mount and unmount.
     useLayoutEffect(() => {
-        registerTab?.({ id, badgeProps, children });
+        registerTab?.({ id, badgeProps, children }, buttonRef);
         return () => {
             unregisterTab?.(id);
         };
-    }, [id, badgeProps, children, registerTab, unregisterTab]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id, registerTab, unregisterTab]);
+    useLayoutEffect(() => {
+        updateTab?.({ id, badgeProps, children });
+    }, [id, badgeProps, children, updateTab]);
     useLayoutEffect(() => {
         if (!labelRef.current) {
             return;

package/dist/src/Tabs/Tabs.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { tabsSlotRecipe } from '../../styled-system/recipes';
 import { useCalculatedSelectedTabId } from './hooks/useCalculatedSelectedTabId';
+import { useTabRegistry } from './hooks/useTabRegistry';
 import { TabItem } from './TabItem';
 import { TabList } from './TabList';
 import { TabPanel } from './TabPanel';
@@ -13,31 +14,12 @@ function Base({ selectedTabId, onSelectedTabChange, targetDOMNode, enableAutoUnm
     const classNames = tabsSlotRecipe();
     const [shouldShowMenu, setShouldShowMenu] = useState(false);
     const wrapperRef = useRef(null);
-    const [tabs, setTabs] = useState([]);
+    const { tabs, registerTab, updateTab, unregisterTab } = useTabRegistry();
     const { calculatedSelectedTabId, setCalculatedSelectedTab } = useCalculatedSelectedTabId({
         selectedTabId,
         onSelectedTabChange,
         tabs,
     });
-    const registeringTabs = useRef({});
-    const { registerTab, unregisterTab } = useMemo(() => {
-        const registerTab = (tab) => {
-            registeringTabs.current[tab.id] = tab;
-            setTabs(Object.values(registeringTabs.current));
-        };
-        const unregisterTab = (tabId) => {
-            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-            delete registeringTabs.current[tabId];
-            setTabs(Object.values(registeringTabs.current));
-        };
-        return {
-            registerTab,
-            unregisterTab,
-        };
-    }, []);
-    useEffect(() => {
-        setTabs(Object.values(registeringTabs.current));
-    }, []);
     const contextValue = useMemo(() => ({
         selectedTabId: calculatedSelectedTabId,
         onSelectedTabIdChange: setCalculatedSelectedTab,
@@ -46,6 +28,7 @@ function Base({ selectedTabId, onSelectedTabChange, targetDOMNode, enableAutoUnm
         setShouldShowMenu,
         targetDOMNode: getTargetDomNode(targetDOMNode, wrapperRef.current),
         registerTab,
+        updateTab,
         unregisterTab,
         enableAutoUnmount,
     }), [
@@ -56,6 +39,7 @@ function Base({ selectedTabId, onSelectedTabChange, targetDOMNode, enableAutoUnm
         setShouldShowMenu,
         targetDOMNode,
         registerTab,
+        updateTab,
         unregisterTab,
         enableAutoUnmount,
     ]);

package/dist/src/Tabs/hooks/useTabRegistry.d.ts

@@ -0,0 +1,24 @@
+import { type RefObject } from 'react';
+import { type TabItemProps } from '../TabItem';
+/**
+ * A reference to the rendered tab element, used to order the registry by document position.
+ * It is a ref rather than the element itself because a `TabItem` swaps its button for a new
+ * node whenever its tooltip wrapper appears or disappears.
+ */
+export type TabElementRef = RefObject<HTMLElement | null>;
+/**
+ * Custom hook to manage the tabs registered by the `TabItem` components.
+ *
+ * The published list is ordered by the position of the tabs in the document, which is how the
+ * guideline defines the `start` / `middle` / `end` styles, and it is also the order the tab
+ * dropdown and the uncontrolled default selection rely on. Ordering by registration recency
+ * instead would move a tab whose label or badge changed after mount to the end of the list.
+ *
+ * @returns The ordered tab list and the callbacks a `TabItem` uses to register itself.
+ */
+export declare function useTabRegistry(): {
+    tabs: TabItemProps[];
+    registerTab: (props: TabItemProps, elementRef: TabElementRef) => void;
+    updateTab: (props: TabItemProps) => void;
+    unregisterTab: (tabId: string) => void;
+};

package/dist/src/Tabs/hooks/useTabRegistry.js

@@ -0,0 +1,130 @@
+'use client';
+import { useMemo, useRef, useState } from 'react';
+/**
+ * Compares two `badgeProps` objects field by field.
+ * Consumers usually pass an inline object literal, so comparing by reference would report
+ * a change on every render. The comparison must stay field by field, including `aria-label`,
+ * so a badge whose count and accessible label resolve after mount still propagates.
+ *
+ * @param a - The badge props of the already published tab.
+ * @param b - The badge props the tab wants to publish.
+ *
+ * @returns `true` when every field holds the same value.
+ */
+function areBadgePropsEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    return [...keys].every((key) => Object.is(a[key], b[key]));
+}
+/**
+ * Compares two published tab lists.
+ * Returning `true` lets the registry keep the previous array identity, which is what stops a
+ * `TabItem` re-rendered with an equivalent-but-new `badgeProps` object from feeding itself.
+ *
+ * @param a - The already published tab list.
+ * @param b - The tab list the registry wants to publish.
+ *
+ * @returns `true` when both lists hold the same tabs, in the same order, with the same props.
+ */
+function areTabListsEqual(a, b) {
+    if (a === b)
+        return true;
+    if (a.length !== b.length)
+        return false;
+    return a.every((tab, index) => {
+        const other = b[index];
+        return (other !== undefined &&
+            tab.id === other.id &&
+            Object.is(tab.children, other.children) &&
+            tab.className === other.className &&
+            areBadgePropsEqual(tab.badgeProps, other.badgeProps));
+    });
+}
+/**
+ * Sorts the entries in place so they follow the order the tabs appear in the document.
+ * Entries whose element is not in the document yet keep their relative order, because
+ * `Array#sort` is stable and the comparator reports them as equal.
+ *
+ * @param entries - The registered entries, sorted in place.
+ */
+function sortByDocumentPosition(entries) {
+    entries.sort((a, b) => {
+        const aElement = a.elementRef.current;
+        const bElement = b.elementRef.current;
+        if (!aElement?.isConnected || !bElement?.isConnected)
+            return 0;
+        const relation = aElement.compareDocumentPosition(bElement);
+        // eslint-disable-next-line no-bitwise
+        if (relation & Node.DOCUMENT_POSITION_FOLLOWING)
+            return -1;
+        // eslint-disable-next-line no-bitwise
+        if (relation & Node.DOCUMENT_POSITION_PRECEDING)
+            return 1;
+        return 0;
+    });
+}
+/**
+ * Custom hook to manage the tabs registered by the `TabItem` components.
+ *
+ * The published list is ordered by the position of the tabs in the document, which is how the
+ * guideline defines the `start` / `middle` / `end` styles, and it is also the order the tab
+ * dropdown and the uncontrolled default selection rely on. Ordering by registration recency
+ * instead would move a tab whose label or badge changed after mount to the end of the list.
+ *
+ * @returns The ordered tab list and the callbacks a `TabItem` uses to register itself.
+ */
+export function useTabRegistry() {
+    const [tabs, setTabs] = useState([]);
+    const entriesRef = useRef([]);
+    const { registerTab, updateTab, unregisterTab } = useMemo(() => {
+        const publish = () => {
+            sortByDocumentPosition(entriesRef.current);
+            const nextTabs = entriesRef.current.map((entry) => entry.props);
+            setTabs((previousTabs) => (areTabListsEqual(previousTabs, nextTabs) ? previousTabs : nextTabs));
+        };
+        return {
+            /**
+             * Registers a tab, or replaces it in place when the id is already registered.
+             *
+             * @param props - The props of the tab to register.
+             * @param elementRef - The reference to the rendered tab element.
+             */
+            registerTab: (props, elementRef) => {
+                const entry = entriesRef.current.find((registered) => registered.props.id === props.id);
+                if (entry) {
+                    entry.props = props;
+                    entry.elementRef = elementRef;
+                }
+                else {
+                    entriesRef.current.push({ props, elementRef });
+                }
+                publish();
+            },
+            /**
+             * Updates the props of an already registered tab without changing its place in the list.
+             *
+             * @param props - The new props of the tab.
+             */
+            updateTab: (props) => {
+                const entry = entriesRef.current.find((registered) => registered.props.id === props.id);
+                if (!entry)
+                    return;
+                entry.props = props;
+                publish();
+            },
+            /**
+             * Removes a tab from the registry. The remaining tabs keep their relative order.
+             *
+             * @param tabId - The ID of the tab to remove.
+             */
+            unregisterTab: (tabId) => {
+                entriesRef.current = entriesRef.current.filter((registered) => registered.props.id !== tabId);
+                publish();
+            },
+        };
+    }, []);
+    return { tabs, registerTab, updateTab, unregisterTab };
+}

package/dist/src/Tooltip/hooks/useOpenStateDelayed.js

@@ -16,8 +16,9 @@ export function useOpenStateDelayed(tooltipOpen, onActualClose) {
     const openTimeout = useRef(null);
     const closeTimeout = useRef(null);
     const setOpenDelayed = useCallback((value) => {
+        // A pending open is cancelled either way; only the rest of the handling differs.
+        openTimeout.current && clearTimeout(openTimeout.current);
         if (value) {
-            openTimeout.current && clearTimeout(openTimeout.current);
             closeTimeout.current && clearTimeout(closeTimeout.current);
             closeTimeout.current = null;
             openTimeout.current = window.setTimeout(() => {
@@ -26,7 +27,6 @@ export function useOpenStateDelayed(tooltipOpen, onActualClose) {
             }, OPEN_DELAY);
         }
         else {
-            openTimeout.current && clearTimeout(openTimeout.current);
             openTimeout.current = null;
             closeTimeout.current = window.setTimeout(() => {
                 setOpen(false);

package/dist/src/utilities/dom/setInputFiles.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Assigns the given files to a `<input type="file">` element.
+ *
+ * The browser only fills `input.files` by itself when the drop lands on the input element and the
+ * default action is not prevented. Components that intercept the drop on a surrounding container
+ * have to perform the assignment themselves, otherwise the input stays empty and native form
+ * serialization (`new FormData(form)`) silently omits the file.
+ *
+ * `input.files` only accepts a `FileList`, which cannot be constructed directly, so the files are
+ * copied into a fresh `DataTransfer` and its `files` list is assigned.
+ *
+ * @param input - The file input element to assign the files to
+ *
+ * @param files - The files to assign
+ *
+ * @returns `true` when the files were assigned, `false` when the environment does not support
+ * `DataTransfer` or rejected the assignment
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files
+ */
+export declare const setInputFiles: (input: HTMLInputElement, files: Iterable<File>) => boolean;

package/dist/src/utilities/dom/setInputFiles.js

@@ -0,0 +1,41 @@
+/**
+ * Assigns the given files to a `<input type="file">` element.
+ *
+ * The browser only fills `input.files` by itself when the drop lands on the input element and the
+ * default action is not prevented. Components that intercept the drop on a surrounding container
+ * have to perform the assignment themselves, otherwise the input stays empty and native form
+ * serialization (`new FormData(form)`) silently omits the file.
+ *
+ * `input.files` only accepts a `FileList`, which cannot be constructed directly, so the files are
+ * copied into a fresh `DataTransfer` and its `files` list is assigned.
+ *
+ * @param input - The file input element to assign the files to
+ *
+ * @param files - The files to assign
+ *
+ * @returns `true` when the files were assigned, `false` when the environment does not support
+ * `DataTransfer` or rejected the assignment
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files
+ */
+export const setInputFiles = (input, files) => {
+    if (typeof DataTransfer === 'undefined') {
+        return false;
+    }
+    try {
+        const dataTransfer = new DataTransfer();
+        for (const file of files) {
+            dataTransfer.items.add(file);
+        }
+        // eslint-disable-next-line no-param-reassign -- Assigning the files to the given input is the purpose of this utility
+        input.files = dataTransfer.files;
+        return true;
+    }
+    catch {
+        /*
+         * Some engines expose `DataTransfer` but forbid constructing it or mutating its items outside
+         * of a drag operation. Failing to sync must not break the visible file selection.
+         */
+        return false;
+    }
+};

package/dist/src/utilities/dom/toFileList.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Builds a `FileList` from an array of files.
+ *
+ * `FileList` cannot be constructed: the only ways to obtain one are a user selection on a file
+ * input, a drag operation, or a `DataTransfer`. Code that has to hand a `FileList` to an API it
+ * does not control, without a `DataTransfer` available, therefore has to assemble the shape by
+ * hand. Every member of the interface is implemented, so index access, `item()`, `length` and
+ * iteration all behave as they do on a native list.
+ *
+ * The result is not an instance of `FileList`, so `instanceof` is `false` and it is rejected by
+ * APIs that check the brand rather than the shape, `HTMLInputElement.files` among them. Prefer
+ * {@link setInputFiles} whenever the destination is a file input.
+ *
+ * @param files - The files the list should contain, in order
+ *
+ * @returns A `FileList` holding the given files
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FileList
+ */
+export declare const toFileList: (files: readonly File[]) => FileList;

package/dist/src/utilities/dom/toFileList.js

@@ -0,0 +1,26 @@
+/**
+ * Builds a `FileList` from an array of files.
+ *
+ * `FileList` cannot be constructed: the only ways to obtain one are a user selection on a file
+ * input, a drag operation, or a `DataTransfer`. Code that has to hand a `FileList` to an API it
+ * does not control, without a `DataTransfer` available, therefore has to assemble the shape by
+ * hand. Every member of the interface is implemented, so index access, `item()`, `length` and
+ * iteration all behave as they do on a native list.
+ *
+ * The result is not an instance of `FileList`, so `instanceof` is `false` and it is rejected by
+ * APIs that check the brand rather than the shape, `HTMLInputElement.files` among them. Prefer
+ * {@link setInputFiles} whenever the destination is a file input.
+ *
+ * @param files - The files the list should contain, in order
+ *
+ * @returns A `FileList` holding the given files
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FileList
+ */
+export const toFileList = (files) => ({
+    // eslint-disable-next-line no-misused-spread -- Spreading the array to indexed keys is exactly the `[index: number]: File` half of the FileList contract
+    ...files,
+    length: files.length,
+    item: (index) => files[index] ?? null,
+    [Symbol.iterator]: () => files[Symbol.iterator](),
+});

package/dist/src/utilities/dom/useFixedColumns.js

@@ -21,12 +21,14 @@ export const useFixedColumns = ({ enableRowSelection = false, columnIndex, leftF
             return 'left';
         if (leftFixedColumnIndex !== undefined &&
             actualColumnIndex !== undefined &&
-            actualColumnIndex <= leftFixedColumnIndex)
+            actualColumnIndex <= leftFixedColumnIndex) {
             return 'left';
+        }
         if (rightFixedColumnIndex !== undefined &&
             actualColumnIndex !== undefined &&
-            actualColumnIndex >= rightFixedColumnIndex)
+            actualColumnIndex >= rightFixedColumnIndex) {
             return 'right';
+        }
         // Without this, "Not all code paths return a value. ts(7030)" warning occurs.
         // eslint-disable-next-line no-useless-return
         return;

package/dist/src/utilities/dom/useOnClickOutside.js

@@ -8,7 +8,9 @@ import { getRootNode } from './getRootNode';
  */
 const getPortalNestingDepth = (portalElement) => {
     const depthAttribute = portalElement.dataset['mfuiPopoverDepth'];
-    return depthAttribute ? Number.parseInt(depthAttribute, 10) : 0;
+    // The attribute is written by this package as a stringified integer, so plain `Number`
+    // is equivalent to the previous `Number.parseInt(_, 10)` here.
+    return depthAttribute ? Number(depthAttribute) : 0;
 };
 /**
  * Helper function to get the nesting depth of a popover container element.

package/dist/styled-system/types/composition.d.ts

@@ -38,7 +38,7 @@ type TextStyleProperty =
   | 'fontVariationSettings'
   | 'fontWeight'
   | 'hangingPunctuation'
-  | 'hypens'
+  | 'hyphens'
   | 'hyphenateCharacter'
   | 'hyphenateLimitChars'
   | 'letterSpacing'