@moneyforward/mfui-components 4.3.0 → 4.5.0

package/dist/src/SubNavigation/SubNavigation.d.ts

@@ -1,5 +1,14 @@
 import { type SubNavigationProps } from './SubNavigation.types';
 /**
  * This component is for the navigation links under the main navigation.
+ *
+ * The root element is a `<nav>` landmark. Name it with `aria-label` or `aria-labelledby` when the
+ * page has other navigation landmarks. No name is applied by default because the right name
+ * depends on what the navigation is for on each page.
+ *
+ * @example
+ * ```tsx
+ * <SubNavigation navigationItems={items} aria-label="設定" />
+ * ```
  */
-export declare function SubNavigation({ orientation, navigationItems, customLinkComponent, renderNavigationLabel, headerSlot, className, }: SubNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare const SubNavigation: import("react").ForwardRefExoticComponent<SubNavigationProps & import("react").RefAttributes<HTMLElement>>;

package/dist/src/SubNavigation/SubNavigation.js

@@ -1,17 +1,28 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DisclosureBasicCollapsed, Lock } from '@moneyforward/mfui-icons-react';
+import { forwardRef } from 'react';
 import { cx } from '../../styled-system/css';
 import { subNavigationSlotRecipe } from '../../styled-system/recipes';
 import { FocusIndicator } from '../FocusIndicator';
 import { Typography } from '../Typography';
 /**
  * This component is for the navigation links under the main navigation.
+ *
+ * The root element is a `<nav>` landmark. Name it with `aria-label` or `aria-labelledby` when the
+ * page has other navigation landmarks. No name is applied by default because the right name
+ * depends on what the navigation is for on each page.
+ *
+ * @example
+ * ```tsx
+ * <SubNavigation navigationItems={items} aria-label="設定" />
+ * ```
  */
-export function SubNavigation({ orientation = 'vertical', navigationItems, customLinkComponent, renderNavigationLabel, headerSlot, className, }) {
+export const SubNavigation = forwardRef(({ orientation = 'vertical', navigationItems, customLinkComponent, renderNavigationLabel, headerSlot, className, ...rest }, ref) => {
     const hasLabelIcon = navigationItems.some(({ labelIcon }) => !!labelIcon);
     const classes = subNavigationSlotRecipe({ orientation, hasLabelIcon });
-    return (_jsxs("nav", { className: cx(classes.root, 'mfui-SubNavigation__root', className), children: [headerSlot ? (_jsx("div", { className: cx(classes.subNavigationHeader, 'mfui-SubNavigation__subNavigationHeader'), children: headerSlot })) : null, _jsx("ul", { className: cx(classes.list, 'mfui-SubNavigation__list'), children: navigationItems.map((navigationItem, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-SubNavigation__listItem'), children: renderNavigationItem(navigationItem, customLinkComponent, classes, 0, renderNavigationLabel) }, index))) })] }));
-}
+    return (_jsxs("nav", { ...rest, ref: ref, className: cx(classes.root, 'mfui-SubNavigation__root', className), children: [headerSlot ? (_jsx("div", { className: cx(classes.subNavigationHeader, 'mfui-SubNavigation__subNavigationHeader'), children: headerSlot })) : null, _jsx("ul", { className: cx(classes.list, 'mfui-SubNavigation__list'), children: navigationItems.map((navigationItem, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-SubNavigation__listItem'), children: renderNavigationItem(navigationItem, customLinkComponent, classes, 0, renderNavigationLabel) }, index))) })] }));
+});
+SubNavigation.displayName = 'SubNavigation';
 /**
  * Render a navigation item based on the following conditions:
  * - a link without children

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

@@ -33,6 +33,32 @@ type HorizontalSubNavigationProps = BaseSubNavigationProps & {
  * Common properties for both vertical and horizontal SubNavigation.
  */
 type BaseSubNavigationProps = {
+    /**
+     * The accessible name of the `<nav>` landmark.
+     *
+     * Set this when the page has other navigation landmarks (e.g. `MainNavigation`, `Breadcrumbs`).
+     * Describe this page's navigation (e.g. `"設定"`). Avoid including the role name;
+     * assistive technology already announces it.
+     */
+    'aria-label'?: string;
+    /**
+     * The ID of the element that names the `<nav>` landmark.
+     * Use this instead of `aria-label` when a visible heading already names the navigation.
+     *
+     * @example
+     * ```tsx
+     * function SettingsNavigation() {
+     *   const headingId = useId();
+     *   return (
+     *     <>
+     *       <h2 id={headingId}>設定</h2>
+     *       <SubNavigation navigationItems={items} aria-labelledby={headingId} />
+     *     </>
+     *   );
+     * }
+     * ```
+     */
+    'aria-labelledby'?: string;
     /**
      * The component to use as the link element instead of the general anchor element `<a>`.
      * The custom component must extend the HTMLAnchorElement interface.
@@ -109,7 +135,7 @@ type BaseSubNavigationProps = {
      * For overriding styles if you need.
      */
     className?: string;
-};
+} & Omit<ComponentPropsWithoutRef<'nav'>, 'children' | 'className' | 'aria-label' | 'aria-labelledby'>;
 /**
  * The union that discriminates whether each navigation item has children.
  */

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));
+    });
+}
+/**
+ * Returns the entries ordered by the position their elements appear in the document.
+ * Entries whose element is not in the document yet keep their relative order, because
+ * `Array#toSorted` is stable and the comparator reports them as equal.
+ *
+ * @param entries - The registered entries to order.
+ */
+function sortByDocumentPosition(entries) {
+    return entries.toSorted((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 = () => {
+            entriesRef.current = 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/ToggleSwitch/index.d.ts

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

package/dist/src/ToggleSwitch/index.js

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

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/containsAcrossShadowRoots.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Returns whether `node` is `ancestor` itself or a descendant of it, crossing shadow boundaries.
+ *
+ * `Node.contains()` walks the node tree only, so an element inside a shadow root is *not*
+ * reported as contained by the shadow host or by any of the host's ancestors. This function
+ * follows the chain of shadow hosts upwards, so focus inside a web component rendered within
+ * `ancestor` still counts as being inside it.
+ *
+ * Pair it with `getDeepActiveElement`, which pierces shadow roots downwards: a shadow-piercing
+ * lookup compared with the non-piercing `Node.contains()` reports the deepest focused element as
+ * outside every ancestor it actually lives in.
+ *
+ * @param ancestor - The node expected to contain `node`. A nullish ancestor contains nothing.
+ *
+ * @param node - The node to look for. A nullish node is never contained.
+ *
+ * @returns `true` when `node` is inside `ancestor`, across any number of shadow boundaries.
+ *
+ * @see https://dom.spec.whatwg.org/#dom-node-contains
+ */
+export declare const containsAcrossShadowRoots: (ancestor: Node | null | undefined, node: Node | null | undefined) => boolean;

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

@@ -0,0 +1,33 @@
+/**
+ * Returns whether `node` is `ancestor` itself or a descendant of it, crossing shadow boundaries.
+ *
+ * `Node.contains()` walks the node tree only, so an element inside a shadow root is *not*
+ * reported as contained by the shadow host or by any of the host's ancestors. This function
+ * follows the chain of shadow hosts upwards, so focus inside a web component rendered within
+ * `ancestor` still counts as being inside it.
+ *
+ * Pair it with `getDeepActiveElement`, which pierces shadow roots downwards: a shadow-piercing
+ * lookup compared with the non-piercing `Node.contains()` reports the deepest focused element as
+ * outside every ancestor it actually lives in.
+ *
+ * @param ancestor - The node expected to contain `node`. A nullish ancestor contains nothing.
+ *
+ * @param node - The node to look for. A nullish node is never contained.
+ *
+ * @returns `true` when `node` is inside `ancestor`, across any number of shadow boundaries.
+ *
+ * @see https://dom.spec.whatwg.org/#dom-node-contains
+ */
+export const containsAcrossShadowRoots = (ancestor, node) => {
+    if (!ancestor || !node)
+        return false;
+    let current = node;
+    while (current) {
+        if (ancestor.contains(current))
+            return true;
+        const rootNode = current.getRootNode();
+        // Only a ShadowRoot has a host to continue from; a Document ends the walk.
+        current = rootNode instanceof ShadowRoot ? rootNode.host : null;
+    }
+    return 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/useFocusTrap.js

@@ -18,7 +18,7 @@ export function useFocusTrap({ onKeyDown, onPressingTabOnNotFocusableElement } =
         const wrapper = event.currentTarget;
         const focusingElement = wrapper.ownerDocument.activeElement;
         const focusableNodes = getFocusableNodes(wrapper);
-        const firstFocusableNode = focusableNodes[0];
+        const [firstFocusableNode] = focusableNodes;
         const lastFocusableNode = focusableNodes.at(-1);
         const focusingOnFirstNode = focusingElement === firstFocusableNode;
         const focusingOnLastNode = focusingElement === lastFocusableNode;

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.