@react-md/core 6.4.0 → 6.5.1

package/dist/utils/trigonometry.js

@@ -19,7 +19,7 @@
  * @since 6.3.0
  */ export function calcHypotenuse(point) {
     const { x, y } = point;
-    return Math.sqrt(x * x + y * y);
+    return Math.hypot(x, y);
 }
 
 //# sourceMappingURL=trigonometry.js.map

package/dist/utils/trigonometry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/trigonometry.ts"],"sourcesContent":["import { type Point } from \"../types.js\";\n\n/**\n * @since 6.3.0\n * @internal\n */\nexport const radiansToDegrees = (radians: number): number =>\n  (radians * 180) / Math.PI;\n\n/**\n * @since 6.3.0\n * @internal\n */\nexport const degreesToRadians = (degrees: number): number =>\n  (degrees * Math.PI) / 180;\n\n/**\n * @since 6.3.0\n * @internal\n */\ninterface IsPointInCircleOptions {\n  point: Point;\n  center: Point;\n  radius: number;\n}\n\n/**\n * @since 6.3.0\n * @internal\n */\nexport function isPointInCircle(options: IsPointInCircleOptions): boolean {\n  const { point, center, radius } = options;\n\n  const distance = (center.x - point.x) ** 2 + (center.y - point.y) ** 2;\n  return distance <= radius ** 2;\n}\n\n/**\n * @internal\n * @since 6.3.0\n */\nexport function calcHypotenuse(point: Point): number {\n  const { x, y } = point;\n\n  return Math.sqrt(x * x + y * y);\n}\n"],"names":["radiansToDegrees","radians","Math","PI","degreesToRadians","degrees","isPointInCircle","options","point","center","radius","distance","x","y","calcHypotenuse","sqrt"],"mappings":"AAEA;;;CAGC,GACD,OAAO,MAAMA,mBAAmB,CAACC,UAC/B,AAACA,UAAU,MAAOC,KAAKC,EAAE,CAAC;AAE5B;;;CAGC,GACD,OAAO,MAAMC,mBAAmB,CAACC,UAC/B,AAACA,UAAUH,KAAKC,EAAE,GAAI,IAAI;AAY5B;;;CAGC,GACD,OAAO,SAASG,gBAAgBC,OAA+B;IAC7D,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,MAAM,EAAE,GAAGH;IAElC,MAAMI,WAAW,AAACF,CAAAA,OAAOG,CAAC,GAAGJ,MAAMI,CAAC,AAADA,KAAM,IAAI,AAACH,CAAAA,OAAOI,CAAC,GAAGL,MAAMK,CAAC,AAADA,KAAM;IACrE,OAAOF,YAAYD,UAAU;AAC/B;AAEA;;;CAGC,GACD,OAAO,SAASI,eAAeN,KAAY;IACzC,MAAM,EAAEI,CAAC,EAAEC,CAAC,EAAE,GAAGL;IAEjB,OAAON,KAAKa,IAAI,CAACH,IAAIA,IAAIC,IAAIA;AAC/B"}
+{"version":3,"sources":["../../src/utils/trigonometry.ts"],"sourcesContent":["import { type Point } from \"../types.js\";\n\n/**\n * @since 6.3.0\n * @internal\n */\nexport const radiansToDegrees = (radians: number): number =>\n  (radians * 180) / Math.PI;\n\n/**\n * @since 6.3.0\n * @internal\n */\nexport const degreesToRadians = (degrees: number): number =>\n  (degrees * Math.PI) / 180;\n\n/**\n * @since 6.3.0\n * @internal\n */\ninterface IsPointInCircleOptions {\n  point: Point;\n  center: Point;\n  radius: number;\n}\n\n/**\n * @since 6.3.0\n * @internal\n */\nexport function isPointInCircle(options: IsPointInCircleOptions): boolean {\n  const { point, center, radius } = options;\n\n  const distance = (center.x - point.x) ** 2 + (center.y - point.y) ** 2;\n  return distance <= radius ** 2;\n}\n\n/**\n * @internal\n * @since 6.3.0\n */\nexport function calcHypotenuse(point: Point): number {\n  const { x, y } = point;\n\n  return Math.hypot(x, y);\n}\n"],"names":["radiansToDegrees","radians","Math","PI","degreesToRadians","degrees","isPointInCircle","options","point","center","radius","distance","x","y","calcHypotenuse","hypot"],"mappings":"AAEA;;;CAGC,GACD,OAAO,MAAMA,mBAAmB,CAACC,UAC/B,AAACA,UAAU,MAAOC,KAAKC,EAAE,CAAC;AAE5B;;;CAGC,GACD,OAAO,MAAMC,mBAAmB,CAACC,UAC/B,AAACA,UAAUH,KAAKC,EAAE,GAAI,IAAI;AAY5B;;;CAGC,GACD,OAAO,SAASG,gBAAgBC,OAA+B;IAC7D,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,MAAM,EAAE,GAAGH;IAElC,MAAMI,WAAW,AAACF,CAAAA,OAAOG,CAAC,GAAGJ,MAAMI,CAAC,AAADA,KAAM,IAAI,AAACH,CAAAA,OAAOI,CAAC,GAAGL,MAAMK,CAAC,AAADA,KAAM;IACrE,OAAOF,YAAYD,UAAU;AAC/B;AAEA;;;CAGC,GACD,OAAO,SAASI,eAAeN,KAAY;IACzC,MAAM,EAAEI,CAAC,EAAEC,CAAC,EAAE,GAAGL;IAEjB,OAAON,KAAKa,KAAK,CAACH,GAAGC;AACvB"}

package/dist/window-splitter/_window-splitter.scss

@@ -125,12 +125,11 @@ $variables: (
 /// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
+    // prettier-ignore
     $pseudo-selectors: if(
-        not $disable-inactive-background-color,
-        "&::before, ",
-        ""
-      ) +
-      "&::after";
+      sass(not $disable-inactive-background-color): "&::before, ";
+      else: "",
+    ) + "&::after";
 
     @include utils.optional-layer(window-splitter, $disable-layer) {
       .rmd-window-splitter {
@@ -150,14 +149,12 @@ $variables: (
         }
 
         &::after {
-          @include use-var(
-            background-color,
-            $fallback: if(
-                $background-color == interaction.get-var(focus-color),
-                $background-color,
-                null
-              )
+          // prettier-ignore
+          $fallback: if(
+            sass($background-color == interaction.get-var(focus-color)): $background-color;
+            else: null
           );
+          @include use-var(background-color, $fallback: $fallback);
           @include use-var(opacity);
 
           transition: opacity transition.$linear-duration;
@@ -169,14 +166,15 @@ $variables: (
           }
 
           &::before {
+            // prettier-ignore
+            $fallback: if(
+              sass($inactive-background-color == divider.get-var(color)): $inactive-background-color;
+              else: null,
+            );
             @include use-var(
               background-color,
               inactive-background-color,
-              if(
-                $inactive-background-color == divider.get-var(color),
-                $inactive-background-color,
-                null
-              )
+              $fallback
             );
 
             pointer-events: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "6.4.0",
+  "version": "6.5.1",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -29,6 +29,7 @@
     "./autocomplete/AutocompleteListboxChildren": null,
     "./autocomplete/utils": null,
     "./error-boundary/context": null,
+    "./files/createAcceptFromExtensions": null,
     "./form/InputToggleIcon": null,
     "./form/ResizingTextAreaWrapper": null,
     "./form/SliderTrack": null,
@@ -80,25 +81,25 @@
   "devDependencies": {
     "@jest/globals": "^30.2.0",
     "@jest/types": "^30.2.0",
-    "@microsoft/api-extractor": "^7.55.1",
+    "@microsoft/api-extractor": "^7.55.2",
     "@swc/cli": "^0.7.9",
-    "@swc/core": "^1.15.3",
+    "@swc/core": "^1.15.7",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^6.0.0",
     "@types/lodash": "^4.17.21",
-    "@types/node": "^24.10.1",
+    "@types/node": "^24.10.4",
     "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react-swc": "^4.2.2",
     "@vitest/coverage-v8": "^3.2.4",
     "chokidar": "^5.0.0",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "filesize": "^11.0.13",
     "glob": "13.0.0",
-    "jsdom": "^27.2.0",
+    "jsdom": "^27.3.0",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "npm-run-all2": "^8.0.2",
@@ -177,6 +178,7 @@
     "clean-dist": "rm -rf dist",
     "clean": "rm -rf .turbo dist node_modules",
     "typecheck": "tsc --noEmit",
+    "typecheck-watch": "pnpm typecheck --watch",
     "check-format": "prettier --check .",
     "format": "prettier --write .",
     "lint-scripts": "eslint \"src/**/*.{ts,tsx,js,jsx,cjs,mjs}\"",

package/src/autocomplete/AutocompleteChip.tsx

@@ -28,11 +28,11 @@ export const AutocompleteChip = forwardRef<
   let rightAddon = propRightAddon;
   let ariaDescription = propAriaDescription;
   const removeIcon = getIcon("remove", propRemoveIcon);
-  if (typeof rightAddon === "undefined") {
+  if (rightAddon === undefined) {
     rightAddon = removeIcon;
   }
 
-  if (typeof ariaDescription === "undefined" && typeof children === "string") {
+  if (ariaDescription === undefined && typeof children === "string") {
     ariaDescription = `Remove "${children}"`;
   }
 

package/src/autocomplete/AutocompleteListboxChildren.tsx

@@ -49,7 +49,7 @@ export function AutocompleteListboxChildren<Option extends AutocompleteOption>(
   return (
     <>
       {children}
-      {!availableOptions.length && noOptionsChildren}
+      {availableOptions.length === 0 && noOptionsChildren}
       {availableOptions.map((option, index) => {
         const label = getOptionLabel(option);
         const optionProps = getOptionProps({

package/src/autocomplete/useAutocomplete.ts

@@ -136,7 +136,7 @@ export function useAutocomplete<
     propMultiselect ??
     (!!value && typeof value === "object" && "length" in value);
   let updateQueryOnSelect = propUpdateQueryOnSelect;
-  if (typeof propUpdateQueryOnSelect === "undefined") {
+  if (propUpdateQueryOnSelect === undefined) {
     updateQueryOnSelect = multiselect ? "clear" : "selected";
   }
 
@@ -294,13 +294,13 @@ export function useAutocomplete<
       let unselectedIcon = propUnselectedIcon;
       let disableSelectedIcon = propDisableSelectedIcon;
       if (multiselect && checkboxes) {
-        if (typeof selectedIcon === "undefined") {
+        if (selectedIcon === undefined) {
           selectedIcon = getIcon("checkboxChecked");
         }
-        if (typeof unselectedIcon === "undefined") {
+        if (unselectedIcon === undefined) {
           unselectedIcon = getIcon("checkbox");
         }
-      } else if (typeof disableSelectedIcon === "undefined") {
+      } else if (disableSelectedIcon === undefined) {
         disableSelectedIcon = true;
       }
 

package/src/autocomplete/utils.ts

@@ -46,7 +46,7 @@ export function getDefaultValue<Option extends AutocompleteOption>(
     getOptionLabel,
   } = options;
 
-  if (typeof defaultValue !== "undefined") {
+  if (defaultValue !== undefined) {
     return defaultValue;
   }
 
@@ -66,7 +66,7 @@ export function getDefaultValue<Option extends AutocompleteOption>(
     if (query) {
       q = query;
     } else if (defaultQuery) {
-      q = defaultQuery instanceof Function ? defaultQuery() : defaultQuery;
+      q = typeof defaultQuery === "function" ? defaultQuery() : defaultQuery;
     }
 
     if (!q) {
@@ -178,7 +178,7 @@ export function enforceSelectedValue<Option extends AutocompleteOption>(
     return;
   }
 
-  window.requestAnimationFrame(() => {
+  globalThis.requestAnimationFrame(() => {
     if (
       container.contains(document.activeElement) ||
       popupRef.current?.contains(document.activeElement)

package/src/box/styles.ts

@@ -428,14 +428,14 @@ function applyBoxVarGroup(
     value,
   });
   if (value && typeof value === "object") {
-    BREAKPOINTS.forEach((media) => {
+    for (const media of BREAKPOINTS) {
       style = applyBoxVar({
         type,
         style,
         media,
         value: value[media],
       });
-    });
+    }
   }
   return style;
 }

package/src/button/AsyncButton.tsx

@@ -310,9 +310,7 @@ export const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(
         onClick={handleAsync((event) => Promise.resolve(onClick(event)))}
       >
         {beforeAddon}
-        {loading && typeof loadingChildren !== "undefined"
-          ? loadingChildren
-          : children}
+        {loading && loadingChildren !== undefined ? loadingChildren : children}
         {afterAddon}
         {overlayElement}
       </Button>

package/src/chip/Chip.tsx

@@ -271,8 +271,7 @@ export const Chip = forwardRef<HTMLButtonElement, ChipProps>(
     const isTransitionable =
       !selectedThemed &&
       typeof selected === "boolean" &&
-      typeof (selectedIconAfter ? propRightAddon : propLeftAddon) ===
-        "undefined";
+      (selectedIconAfter ? propRightAddon : propLeftAddon) === undefined;
     const selectedIcon = useMaxWidthTransition({
       element: selectedIconNode,
       transitionIn: !!selected,

package/src/cssUtils.ts

@@ -115,6 +115,16 @@ export interface TextCssUtilsOptions {
   textOverflow?: TextOverflow;
 }
 
+/**
+ * Set this to `true` to allow the content to only be visible for screen
+ * readers. Set this to `"focusable"` to allow the content to be visible to
+ * screen readers and once focused. Set this to `"phone"` to only render the
+ * content as screen reader only text on phones.
+ *
+ * @since 6.5.1
+ */
+export type SrOnlyBehavior = boolean | "focusable" | "phone";
+
 /**
  * @since 6.0.0
  */
@@ -122,14 +132,10 @@ export interface CssUtilsOptions extends TextCssUtilsOptions {
   className?: string;
 
   /**
-   * Set this to `true` to allow the content to only be visible for screen
-   * readers. Set this to `"focusable"` to allow the content to be visible to
-   * screen readers and once focused. Set this to `"phone"` to only render the
-   * the content as screen reader only text on phones.
-   *
+   * @see {@link SrOnlyBehavior}
    * @defaultValue `false`
    */
-  srOnly?: boolean | "focusable" | "phone";
+  srOnly?: SrOnlyBehavior;
 
   /**
    * Set this to `"current-color"` to inherit the current text color or a

package/src/datetime/useTimeField.ts

@@ -201,7 +201,7 @@ export function useTimeField(
   const { min, max, step, ...fieldOptions } = options;
   if (
     process.env.NODE_ENV !== "production" &&
-    typeof step !== "undefined" &&
+    step !== undefined &&
     (!min || !max)
   ) {
     throw new Error(

package/src/delegateEvent.ts

@@ -49,8 +49,8 @@ function createEventHandler(
 ): (event: WindowEventMap[keyof WindowEventMap]) => void {
   let running = false;
   const runCallbacks = (event: WindowEventMap[keyof WindowEventMap]) => () => {
-    for (let i = 0; i < callbacks.length; i += 1) {
-      callbacks[i](event);
+    for (const callback of callbacks) {
+      callback(event);
     }
 
     running = false;
@@ -67,7 +67,7 @@ function createEventHandler(
     }
 
     running = true;
-    window.requestAnimationFrame(runCallbacks(event));
+    globalThis.requestAnimationFrame(runCallbacks(event));
   };
 }
 
@@ -77,7 +77,7 @@ function createEventHandler(
  */
 function createDelegatedEventHandler(
   eventType: string,
-  eventTarget: DelegatedEventTarget = window,
+  eventTarget: DelegatedEventTarget = globalThis.window,
   throttle = false,
   options?: boolean | AddEventListenerOptions
 ): DelegatedEventHandler {
@@ -91,11 +91,11 @@ function createDelegatedEventHandler(
      * event will also be started.
      */
     add: (callback: EventListener) => {
-      if (!callbacks.length) {
+      if (callbacks.length === 0) {
         eventTarget.addEventListener(eventType, handler, options);
       }
 
-      if (callbacks.indexOf(callback) === -1) {
+      if (!callbacks.includes(callback)) {
         callbacks.push(callback);
       }
     },
@@ -107,10 +107,10 @@ function createDelegatedEventHandler(
      */
     remove: (callback: EventListener) => {
       const i = callbacks.indexOf(callback);
-      if (i >= 0) {
+      if (i !== -1) {
         callbacks.splice(i, 1);
 
-        if (!callbacks.length) {
+        if (callbacks.length === 0) {
           eventTarget.removeEventListener(eventType, handler, options);
         }
       }
@@ -145,7 +145,7 @@ function createDelegatedEventHandler(
  */
 export function delegateEvent(
   eventType: string,
-  eventTarget: DelegatedEventTarget = window,
+  eventTarget: DelegatedEventTarget = globalThis.window,
   throttle: boolean = eventType === "resize" || eventType === "scroll",
   options?: boolean | AddEventListenerOptions
 ): DelegatedEventHandler {

package/src/draggable/useDraggable.ts

@@ -477,11 +477,11 @@ export function useDraggable<E extends HTMLElement>(
     const stopKey = isTouch ? "touchend" : "mouseup";
     const passive = isTouch ? { passive: false } : undefined;
 
-    window.addEventListener(updateKey, updatePosition, passive);
-    window.addEventListener(stopKey, stopDragging);
+    globalThis.addEventListener(updateKey, updatePosition, passive);
+    globalThis.addEventListener(stopKey, stopDragging);
     return () => {
-      window.removeEventListener(updateKey, updatePosition);
-      window.removeEventListener(stopKey, stopDragging);
+      globalThis.removeEventListener(updateKey, updatePosition);
+      globalThis.removeEventListener(stopKey, stopDragging);
     };
   }, [
     dragging,

package/src/draggable/utils.ts

@@ -232,7 +232,7 @@ export function deserializeDraggableValue(
 ): number {
   const { item, min, max } = options;
 
-  const value = parseFloat(item);
+  const value = Number.parseFloat(item);
   if (Number.isNaN(item)) {
     return min;
   }

package/src/expansion-panel/ExpansionPanel.tsx

@@ -241,7 +241,7 @@ export const ExpansionPanel = forwardRef<
   });
 
   let header = propHeader;
-  if (typeof header === "undefined") {
+  if (header === undefined) {
     header = (
       <ExpansionPanelHeader
         style={headerStyle}

package/src/expansion-panel/useExpansionPanels.ts

@@ -215,7 +215,7 @@ export function useExpansionPanels(
   } = useReadonlySet({
     toggleType: multiple ? "multiple" : "single",
     defaultValue: () => {
-      if (typeof defaultExpandedIds === "undefined") {
+      if (defaultExpandedIds === undefined) {
         const initialList: string[] = [];
         if (typeof defaultExpandedIndex === "number" || preventAllCollapsed) {
           initialList.push(createId(defaultExpandedIndex ?? 0));

package/src/files/FileInput.tsx

@@ -166,7 +166,7 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
     const icon = getIcon("upload", propIcon);
     let children = propChildren;
     if (
-      typeof propChildren === "undefined" &&
+      propChildren === undefined &&
       !props["aria-label"] &&
       !props["aria-labelledby"]
     ) {

package/src/files/createAcceptFromExtensions.ts

@@ -0,0 +1,18 @@
+/**
+ * @since 6.5.1
+ * @internal
+ */
+export function createAcceptFromExtensions(
+  extensions: readonly string[]
+): string {
+  let accept = "";
+  for (const extension of extensions) {
+    if (accept) {
+      accept += ",";
+    }
+
+    accept += `.${extension}`;
+  }
+
+  return accept;
+}

package/src/files/useFileUpload.ts

@@ -9,6 +9,7 @@ import {
   useReducer,
 } from "react";
 
+import { createAcceptFromExtensions } from "./createAcceptFromExtensions.js";
 import {
   type CompletedFileUploadStats,
   type FileReaderResult,
@@ -259,28 +260,27 @@ export function useFileUpload<E extends HTMLElement, CustomError = never>(
             stats,
           };
         }
-        case "queue":
+        case "queue": {
+          const nextStats: Record<string, ProcessingFileUploadStats> = {};
+          for (const file of action.files) {
+            const key = nanoid();
+            nextStats[key] = {
+              key,
+              file,
+              progress: 0,
+              status: "pending",
+            };
+          }
+
           return {
             ...state,
             stats: {
               ...state.stats,
-              ...action.files.reduce<Record<string, ProcessingFileUploadStats>>(
-                (files, file) => {
-                  const key = nanoid();
-                  files[key] = {
-                    key,
-                    file,
-                    progress: 0,
-                    status: "pending",
-                  };
-
-                  return files;
-                },
-                {}
-              ),
+              ...nextStats,
             },
             errors: [...state.errors, ...action.errors],
           };
+        }
         case "start": {
           const { key, reader } = action;
           const fileStats: ProcessingFileUploadStats = {
@@ -389,14 +389,16 @@ export function useFileUpload<E extends HTMLElement, CustomError = never>(
       try {
         const files = event.dataTransfer.files;
         if (files) {
-          queueFiles(Array.from(files));
+          queueFiles([...files]);
         }
-      } catch (e) {
+      } catch (error) {
         dispatch({
           type: "queue",
           files: [],
           errors: [
-            new FileAccessError(e instanceof Error ? e.message : undefined),
+            new FileAccessError(
+              error instanceof Error ? error.message : undefined
+            ),
           ],
         });
       }
@@ -409,16 +411,18 @@ export function useFileUpload<E extends HTMLElement, CustomError = never>(
       try {
         const files = event.currentTarget.files;
         if (files) {
-          queueFiles(Array.from(files));
+          queueFiles([...files]);
         } else {
-          throw new Error();
+          throw new Error("There are no files");
         }
-      } catch (e) {
+      } catch (error) {
         dispatch({
           type: "queue",
           files: [],
           errors: [
-            new FileAccessError(e instanceof Error ? e.message : undefined),
+            new FileAccessError(
+              error instanceof Error ? error.message : undefined
+            ),
           ],
         });
       }
@@ -429,18 +433,18 @@ export function useFileUpload<E extends HTMLElement, CustomError = never>(
   const remove = useCallback(
     (keyOrKeys: string | readonly string[]) => {
       const files = typeof keyOrKeys === "string" ? [keyOrKeys] : keyOrKeys;
-      files.forEach((fileKey) => {
+      for (const fileKey of files) {
         readers[fileKey]?.abort();
-      });
+      }
 
       dispatch({ type: "remove", files });
     },
     [readers]
   );
   const reset = useCallback(() => {
-    Object.values(readers).forEach((reader) => {
+    for (const reader of Object.values(readers)) {
       reader.abort();
-    });
+    }
 
     dispatch({ type: "reset" });
   }, [readers]);
@@ -469,24 +473,24 @@ export function useFileUpload<E extends HTMLElement, CustomError = never>(
   useEffect(() => {
     const pending: ProcessingFileUploadStats[] = [];
     const uploading: ProcessingFileUploadStats[] = [];
-    Object.values(stats).forEach((file) => {
+    for (const file of Object.values(stats)) {
       if (file.status === "pending") {
         pending.push(file);
       } else if (file.status === "uploading") {
         uploading.push(file);
       }
-    });
+    }
 
     const lastIndex =
       concurrency === -1
         ? pending.length
         : Math.max(0, concurrency - uploading.length);
     const queue = pending.slice(0, lastIndex);
-    if (!queue.length) {
+    if (queue.length === 0) {
       return;
     }
 
-    queue.forEach((stats) => {
+    for (const stats of queue) {
       const { key, file } = stats;
       const reader = new FileReader();
 
@@ -508,7 +512,7 @@ export function useFileUpload<E extends HTMLElement, CustomError = never>(
       }
 
       reader[parser](file);
-    });
+    }
   }, [
     concurrency,
     stats,
@@ -518,15 +522,10 @@ export function useFileUpload<E extends HTMLElement, CustomError = never>(
     complete,
   ]);
 
-  let accept = "";
-  if (extensions.length) {
-    accept = extensions.reduce((s, ext) => `${s ? `${s},` : ""}.${ext}`, "");
-  }
-
   return {
     stats: statsList,
     errors,
-    accept,
+    accept: createAcceptFromExtensions(extensions),
     totalBytes,
     totalFiles,
     onDrop,

package/src/files/utils.ts

@@ -247,18 +247,22 @@ export function getSplitFileUploads(
   const pending: ProcessingFileUploadStats[] = [];
   const uploading: ProcessingFileUploadStats[] = [];
   const complete: CompletedFileUploadStats[] = [];
-  stats.forEach((stat) => {
-    if (stat.status === "pending") {
-      pending.push(stat);
-    } else if (stat.status === "uploading") {
-      uploading.push(stat);
-    } else if (stat.status === "complete") {
-      complete.push(stat);
-    } else {
-      /* istanbul ignore next */
-      throw new Error("Invalid upload stat");
+  for (const stat of stats) {
+    switch (stat.status) {
+      case "pending":
+        pending.push(stat);
+        break;
+      case "uploading":
+        uploading.push(stat);
+        break;
+      case "complete":
+        complete.push(stat);
+        break;
+      default:
+        /* istanbul ignore next */
+        throw new Error("Invalid upload stat");
     }
-  });
+  }
 
   return { pending, uploading, complete };
 }