@react-md/core 6.5.0 → 6.5.2

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 };
 }

package/src/files/validation.ts

@@ -389,7 +389,7 @@ export function validateFiles<CustomError>(
   const extraFiles: File[] = [];
   const extensionRegExp =
     extensions.length > 0
-      ? new RegExp(`\\.(${extensions.join("|")})$`, "i")
+      ? new RegExp(String.raw`\.(${extensions.join("|")})$`, "i")
       : undefined;
 
   let maxFilesReached = maxFiles > 0 && totalFiles >= maxFiles;
@@ -398,9 +398,7 @@ export function validateFiles<CustomError>(
   const minErrors: File[] = [];
   const maxErrors: File[] = [];
   const totalSizeErrors: File[] = [];
-  for (let i = 0; i < files.length; i += 1) {
-    const file = files[i];
-
+  for (const file of files) {
     let valid = true;
     const { size } = file;
     if (!isValidFileName(file, extensionRegExp, extensions)) {
@@ -433,23 +431,23 @@ export function validateFiles<CustomError>(
     }
   }
 
-  if (extensionErrors.length) {
+  if (extensionErrors.length > 0) {
     errors.push(new FileExtensionError(extensionErrors, extensions));
   }
 
-  if (minErrors.length) {
+  if (minErrors.length > 0) {
     errors.push(new FileSizeError(minErrors, "min", minFileSize));
   }
 
-  if (maxErrors.length) {
+  if (maxErrors.length > 0) {
     errors.push(new FileSizeError(maxErrors, "max", maxFileSize));
   }
 
-  if (totalSizeErrors.length) {
+  if (totalSizeErrors.length > 0) {
     errors.push(new FileSizeError(totalSizeErrors, "total", totalFileSize));
   }
 
-  if (extraFiles.length) {
+  if (extraFiles.length > 0) {
     errors.push(new TooManyFilesError(extraFiles, maxFiles));
   }
 

package/src/focus/useFocusContainer.ts

@@ -208,7 +208,7 @@ export function useFocusContainer<E extends HTMLElement>(
 
           // For some reason, the `"Enter"` keydown event fires at a different timing
           // than the Space  keydown event.
-          window.requestAnimationFrame(() => {
+          globalThis.requestAnimationFrame(() => {
             prevFocus.current?.focus();
           });
         },

package/src/focus/utils.ts

@@ -34,6 +34,7 @@ export const PROGRAMMATICALLY_FOCUSABLE = queries.join(",");
  * `tabindex="-1"` applied instead of only elements that had a manual tab index
  * applied.
  */
+// eslint-disable-next-line unicorn/no-array-reduce
 export const TAB_FOCUSABLE = queries.reduce((fullQuery, query) => {
   const prefix = `${fullQuery}${fullQuery ? "," : ""}`;
   const notProgrammaticQuery = `${query}:not([tabindex="-1"])`;
@@ -135,12 +136,16 @@ export function focusElementWithin(options: FocusElementWithinOptions): void {
   }
 
   let element: HTMLElement | null = null;
-  if (type === "first") {
-    [element] = elements;
-  } else if (type === "last") {
-    element = elements[elements.length - 1];
-  } else if (type === "query") {
-    element = document.querySelector<HTMLElement>(query);
+  switch (type) {
+    case "first":
+      [element] = elements;
+      break;
+    case "last":
+      element = elements.at(-1) ?? null;
+      break;
+    case "query":
+      element = document.querySelector<HTMLElement>(query);
+      break;
   }
 
   if (!element && isFocusable(container)) {

package/src/form/InputToggleIcon.tsx

@@ -90,11 +90,11 @@ export const InputToggleIcon = forwardRef<
   const uncontrolled = typeof checked !== "boolean";
   if (!uncontrolled || !FORM_CONFIG.uncontrolledToggles) {
     active = !!checked && !error;
-    icon = checked
-      ? indeterminate
-        ? indeterminateIcon
-        : checkedIcon
-      : uncheckedIcon;
+    if (checked) {
+      icon = indeterminate ? indeterminateIcon : checkedIcon;
+    } else {
+      icon = uncheckedIcon;
+    }
   } else {
     icon = (
       <>

package/src/form/NativeSelect.tsx

@@ -156,7 +156,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
     const underlined = theme === "underline" || theme === "filled";
 
     let rightAddon = propRightAddon;
-    if (typeof propRightAddon === "undefined" && !multiple) {
+    if (propRightAddon === undefined && !multiple) {
       rightAddon = icon;
     }
 

package/src/form/Select.tsx

@@ -333,13 +333,13 @@ export function Select<Value extends string>(
   const labelId = label ? selectLabelId : undefined;
 
   const [localValue, setLocalValue] = useState(() => {
-    if (typeof defaultValue !== "undefined") {
+    if (defaultValue !== undefined) {
       return defaultValue;
     }
 
-    return typeof value !== "undefined" ? value : EMPTY_STRING;
+    return value !== undefined ? value : EMPTY_STRING;
   });
-  const currentValue = typeof value === "undefined" ? localValue : value;
+  const currentValue = value === undefined ? localValue : value;
   const initialValue = useRef(currentValue);
   const { options, currentOption } = extractOptionsFromChildren(
     children,
@@ -371,7 +371,7 @@ export function Select<Value extends string>(
   const icon = getIcon("dropdown", propIcon);
   const theme = getFormConfig("theme", propTheme);
   let rightAddon = propRightAddon;
-  if (typeof rightAddon === "undefined" && icon) {
+  if (rightAddon === undefined && icon) {
     rightAddon = <IconRotator rotated={visible}>{icon}</IconRotator>;
   }
 
@@ -423,7 +423,7 @@ export function Select<Value extends string>(
           className={cnb(select({ theme }), textField())}
           onChange={(event) => {
             onChange(event as SelectChangeEvent<Value>);
-            if (typeof value !== "undefined") {
+            if (value !== undefined) {
               return;
             }
 

package/src/form/formConfig.ts

@@ -41,7 +41,7 @@ export function getFormConfig<N extends keyof FormConfiguration>(
   name: N,
   override?: FormConfiguration[N]
 ): FormConfiguration[N] {
-  if (typeof override !== "undefined") {
+  if (override !== undefined) {
     return override;
   }
 

package/src/form/inputToggleStyles.ts

@@ -1,6 +1,6 @@
 import { cnb } from "cnbuilder";
 
-import { cssUtils } from "../cssUtils.js";
+import { type TextColor, type ThemeColor, cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 import { type FormComponentStates } from "./types.js";
 
@@ -60,6 +60,13 @@ export function inputToggle(options: InputToggleClassNameOptions): string {
     uncontrolled,
   } = options;
 
+  let textColor: TextColor | ThemeColor | undefined;
+  if (disabled) {
+    textColor = "text-disabled";
+  } else if (error) {
+    textColor = "error";
+  }
+
   return cnb(
     `rmd-${type}`,
     styles({
@@ -72,9 +79,7 @@ export function inputToggle(options: InputToggleClassNameOptions): string {
       large: size === "large",
       uncontrolled,
     }),
-    cssUtils({
-      textColor: disabled ? "text-disabled" : error ? "error" : undefined,
-    }),
+    cssUtils({ textColor }),
     className
   );
 }

package/src/form/selectUtils.ts

@@ -77,10 +77,10 @@ export function extractOptionsFromChildren<Value extends string | number>(
     }
 
     const { value, disabled, children } = child.props;
-    if (typeof value !== "undefined") {
+    if (value !== undefined) {
       if (
         value === currentValue ||
-        (!currentOption && typeof currentValue === "undefined")
+        (!currentOption && currentValue === undefined)
       ) {
         currentOption = child.props;
       }

package/src/form/useCombobox.ts

@@ -491,6 +491,7 @@ export function useCombobox<
       // to really make sure the item is in view. An alternative would be to
       // implement a custom scrollIntoView behavior again like the previous
       // versions of react-md, but this is less lines of code
+      // eslint-disable-next-line unicorn/consistent-function-scoping
       const attemptScroll = (): void => {
         const activeOption = document.getElementById(activeDescendantId);
         if (activeOption) {

package/src/form/useFormReset.ts

@@ -29,7 +29,7 @@ export function useFormReset(options: FormResetOptions): void {
 
   useEffect(() => {
     const element = elementRef.current;
-    if (!element || (typeof defaultValue === "undefined" && !onReset)) {
+    if (!element || (defaultValue === undefined && !onReset)) {
       return;
     }
 
@@ -44,7 +44,7 @@ export function useFormReset(options: FormResetOptions): void {
     const handleReset = (): void => {
       if (onReset) {
         onReset();
-      } else if (typeof defaultValue !== "undefined") {
+      } else if (defaultValue !== undefined) {
         triggerManualChangeEvent(element, defaultValue);
       }
     };

package/src/form/useNumberField.ts

@@ -411,7 +411,7 @@ export function useNumberField(
       if (!Number.isNaN(value)) {
         setNumber(value);
         input.value = `${value}`;
-      } else if (typeof initial.current === "undefined") {
+      } else if (initial.current === undefined) {
         setNumber(undefined);
       }
     },

package/src/form/useResizingTextArea.ts

@@ -112,21 +112,21 @@ export function useResizingTextArea(
     }
     /* c8 ignore stop */
 
-    const containerStyles = window.getComputedStyle(container);
+    const containerStyles = globalThis.getComputedStyle(container);
     const isBorderBox = containerStyles.boxSizing === "border-box";
     let borderHeight = 0;
     if (isBorderBox) {
       borderHeight =
-        parseFloat(containerStyles.borderTopWidth) +
-        parseFloat(containerStyles.borderBottomWidth);
+        Number.parseFloat(containerStyles.borderTopWidth) +
+        Number.parseFloat(containerStyles.borderBottomWidth);
     }
 
     let nextHeight = mask.scrollHeight + borderHeight;
     if (maxRows > 0) {
       nextHeight -= borderHeight;
-      const maskStyles = window.getComputedStyle(mask);
+      const maskStyles = globalThis.getComputedStyle(mask);
       // in tests, this is `"normal"` by default instead of a number
-      let lineHeight = parseFloat(maskStyles.lineHeight);
+      let lineHeight = Number.parseFloat(maskStyles.lineHeight);
       if (Number.isNaN(lineHeight)) {
         lineHeight = DEFAULT_LINE_HEIGHT;
       }

package/src/form/useSelectCombobox.ts

@@ -62,10 +62,7 @@ export function useSelectCombobox<
         return values.length - 1;
       }
 
-      return Math.max(
-        0,
-        values.findIndex((option) => option === value)
-      );
+      return Math.max(0, values.indexOf(value));
     },
   });
 }

package/src/form/validation.ts

@@ -181,7 +181,7 @@ export const defaultGetErrorMessage: GetErrorMessage = (options) => {
 
   const keys = typeof validate === "string" ? [validate] : validate;
 
-  return keys.length &&
+  return keys.length > 0 &&
     VALIDITY_STATE_KEYS.some((key) => validity[key] && keys.includes(key))
     ? validationMessage
     : "";

package/src/hoverMode/useHoverMode.ts

@@ -166,15 +166,15 @@ export function useHoverMode(
   const state = useState(defaultVisible);
   let visible: boolean | undefined;
   let setVisible: UseStateSetter<boolean>;
-  if (typeof propSetVisible !== "undefined") {
+  if (propSetVisible !== undefined) {
     setVisible = propSetVisible;
   } else {
     [visible, setVisible] = state;
   }
 
-  const visibilityTimeout = useRef<number | undefined>();
+  const visibilityTimeout = useRef<NodeJS.Timeout>();
   const clearVisibilityTimeout = useCallback(() => {
-    window.clearTimeout(visibilityTimeout.current);
+    globalThis.clearTimeout(visibilityTimeout.current);
   }, []);
 
   // if the element is near the viewport edge, the mouseleave event might not
@@ -187,7 +187,7 @@ export function useHoverMode(
     }
 
     const handler = (): void => {
-      window.clearTimeout(visibilityTimeout.current);
+      globalThis.clearTimeout(visibilityTimeout.current);
 
       // might need to play with this more or make it configurable. if the mouse
       // leaves the window, you're _normally_ not interacting with the app
@@ -203,7 +203,7 @@ export function useHoverMode(
 
   useEffect(() => {
     return () => {
-      window.clearTimeout(visibilityTimeout.current);
+      globalThis.clearTimeout(visibilityTimeout.current);
     };
   }, []);
 
@@ -213,12 +213,12 @@ export function useHoverMode(
     startShowFlow: useCallback(
       (eventOrId) => {
         const hoverTimeout = hoverTime ?? hoverTimeoutRef.current;
-        if (disabled || typeof hoverTimeout === "undefined") {
+        if (disabled || hoverTimeout === undefined) {
           return;
         }
 
         let id: string;
-        if (typeof eventOrId === "string" || typeof eventOrId === "undefined") {
+        if (typeof eventOrId === "string" || eventOrId === undefined) {
           id = eventOrId || "";
         } else {
           id = eventOrId.currentTarget.id;
@@ -226,7 +226,7 @@ export function useHoverMode(
 
         clearDisableTimer();
         clearVisibilityTimeout();
-        visibilityTimeout.current = window.setTimeout(() => {
+        visibilityTimeout.current = globalThis.setTimeout(() => {
           enableHoverMode(id);
           setVisible(true);
         }, hoverTimeout);
@@ -248,7 +248,7 @@ export function useHoverMode(
 
       startDisableTimer();
       clearVisibilityTimeout();
-      visibilityTimeout.current = window.setTimeout(() => {
+      visibilityTimeout.current = globalThis.setTimeout(() => {
         setVisible(false);
       }, leaveTime ?? leaveTimeoutRef.current);
     }, [

package/src/hoverMode/useHoverModeProvider.ts

@@ -261,9 +261,9 @@ export function useHoverModeProvider(
   const hoverTimeoutRef = useRef(hoverTimeout);
   const leaveTimeoutRef = useRef(leaveTimeout);
   const animatedOnceRef = useRef(!!defaultActiveId);
-  const disableHoverModeTimeout = useRef<number | undefined>();
+  const disableHoverModeTimeout = useRef<NodeJS.Timeout>();
   const clearDisableTimer = useCallback(() => {
-    window.clearTimeout(disableHoverModeTimeout.current);
+    globalThis.clearTimeout(disableHoverModeTimeout.current);
   }, []);
   const enableHoverMode = useCallback(
     (activeId: string) => {
@@ -292,7 +292,7 @@ export function useHoverModeProvider(
     }
 
     clearDisableTimer();
-    disableHoverModeTimeout.current = window.setTimeout(() => {
+    disableHoverModeTimeout.current = globalThis.setTimeout(() => {
       disableHoverMode();
     }, disableTimeout);
   }, [clearDisableTimer, disableHoverMode, disableTimeout]);
@@ -300,7 +300,7 @@ export function useHoverModeProvider(
   useEffect(() => {
     hoverTimeoutRef.current = hoverTimeout;
     return () => {
-      window.clearTimeout(disableHoverModeTimeout.current);
+      globalThis.clearTimeout(disableHoverModeTimeout.current);
     };
   }, [hoverTimeout]);
 

package/src/icon/config.tsx

@@ -289,13 +289,13 @@ export const ICON_CONFIG: ConfiguredIcons = {
  */
 export function configureIcons(overrides: ConfiguredIcons): void {
   if (process.env.NODE_ENV !== "production") {
-    Object.entries(overrides).forEach(([name, value]) => {
+    for (const [name, value] of Object.entries(overrides)) {
       if (!(name in ICON_CONFIG)) {
         throw new Error(`${name} is an invalid react-md icon name.`);
       }
 
       ICON_CONFIG[name as keyof ConfiguredIcons] = value;
-    });
+    }
   } else {
     Object.assign(ICON_CONFIG, overrides);
   }
@@ -312,7 +312,7 @@ export function getIcon(
   name: ConfigurableIconName,
   override?: ReactNode
 ): ReactNode {
-  if (typeof override !== "undefined") {
+  if (override !== undefined) {
     return override;
   }
 

package/src/icon/materialConfig.ts

@@ -183,7 +183,7 @@ interface ApplyOptions {
 
 const applyVar = (options: ApplyOptions): CSSProperties | undefined => {
   const { name, value, defaultValue, style } = options;
-  if (typeof value !== "undefined" && value !== defaultValue) {
+  if (value !== undefined && value !== defaultValue) {
     const varName = `--rmd-symbol-${name}` as const;
     return {
       ...style,