@react-md/core 6.4.0 → 6.5.1

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

@@ -26,6 +26,7 @@ import {
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { Listbox } from "./Listbox.js";
+import { type OptionProps } from "./Option.js";
 import { SelectedOption } from "./SelectedOption.js";
 import {
   TextFieldContainer,
@@ -46,6 +47,41 @@ const noop = (): void => {
   // do nothing
 };
 
+/**
+ * @since 6.5.0
+ */
+export interface GetSelectedOptionChildrenOptions<
+  Value extends string = string,
+> {
+  value: "" | Value;
+
+  /**
+   * The option will be undefined if there is no value or matching option.
+   */
+  option: OptionProps | undefined;
+
+  /**
+   * This is a pass-through of the {@link SelectProps.placeholder}
+   */
+  placeholder?: ReactNode;
+
+  /**
+   * This is a pass-through of the {@link SelectProps.selectedOptionProps}
+   */
+  children?: ReactNode;
+}
+
+/**
+ * @since 6.5.0
+ */
+const defaultGetSelectedOptionChildren = (
+  options: GetSelectedOptionChildrenOptions
+): ReactNode => {
+  const { children, option, placeholder } = options;
+
+  return children ?? (option?.children || placeholder);
+};
+
 /**
  * This is a convenience type for casting the `event.currentTarget.value` of a
  * `Select`'s change event to be union of available values.
@@ -206,6 +242,14 @@ export interface SelectProps<Value extends string>
    */
   disableSelectedIcon?: boolean;
 
+  /**
+   * @since 6.5.0
+   * @defaultValue `({ children, option, placeholder }) => children ?? (option?.children || placeholder)`
+   */
+  getSelectedOptionChildren?: (
+    options: GetSelectedOptionChildrenOptions<Value>
+  ) => ReactNode;
+
   /**
    * This should be the available `Option`s for the select to choose from. It
    * can also contain `OptGroup` or any other elements but only clicking on an
@@ -266,6 +310,7 @@ export function Select<Value extends string>(
     label,
     labelProps = {},
     selectedOptionProps,
+    getSelectedOptionChildren = defaultGetSelectedOptionChildren,
     icon: propIcon,
     value,
     defaultValue,
@@ -288,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,
@@ -326,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>;
   }
 
@@ -351,10 +396,16 @@ export function Select<Value extends string>(
       >
         <SelectedOption
           option={currentOption}
-          placeholder={placeholder}
           disableAddon={disableOptionAddon}
           {...selectedOptionProps}
-        />
+        >
+          {getSelectedOptionChildren({
+            value: currentValue,
+            option: currentOption,
+            placeholder,
+            children: selectedOptionProps?.children,
+          })}
+        </SelectedOption>
         <input
           aria-hidden
           id={inputId}
@@ -372,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/SelectedOption.tsx

@@ -1,5 +1,5 @@
 import { cnb } from "cnbuilder";
-import { type ReactElement, type ReactNode } from "react";
+import { type ReactElement } from "react";
 
 import { Box, type BoxProps } from "../box/Box.js";
 import { cssUtils } from "../cssUtils.js";
@@ -12,7 +12,6 @@ import { textField } from "./textFieldStyles.js";
  */
 export interface SelectedOptionProps extends BoxProps {
   option: OptionProps | undefined;
-  placeholder?: ReactNode;
   disableAddon: boolean;
 }
 
@@ -29,11 +28,10 @@ export function SelectedOption(props: SelectedOptionProps): ReactElement {
     className,
     disableWrap = true,
     disablePadding = true,
-    placeholder,
     ...remaining
   } = props;
 
-  let children = option?.children || placeholder;
+  let { children } = remaining;
   // when the children are a string or number, wrap it in additional span so
   // that overflow can be ellipsis-ed
   if (typeof children === "string" || typeof children === "number") {

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/legendStyles.ts

@@ -13,7 +13,7 @@ const styles = bem("rmd-legend");
  */
 export type LegendLabelClassNameOptions = Pick<
   LabelClassNameOptions,
-  "active" | "gap" | "dense" | "error" | "stacked" | "disabled" | "reversed"
+  "active" | "gap" | "error" | "stacked" | "disabled" | "reversed"
 >;
 
 /**

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,

package/src/interaction/UserInteractionModeProvider.tsx

@@ -86,6 +86,7 @@ export interface UserInteractionModeProviderProps {
 export function UserInteractionModeProvider(
   props: UserInteractionModeProviderProps
 ): ReactElement {
+  // eslint-disable-next-line react/prop-types
   const { children, now = DATE_NOW } =
     props as UserInteractionModeProviderProps & {
       now?: () => number;
@@ -172,26 +173,26 @@ export function UserInteractionModeProvider(
 
     const className = `rmd-${mode}-mode`;
     document.body.classList.add(className);
-    window.addEventListener("touchstart", handleTouchStart, true);
+    globalThis.addEventListener("touchstart", handleTouchStart, true);
     if (mode === "mouse") {
-      window.addEventListener("keydown", enableKeyboardMode, true);
+      globalThis.addEventListener("keydown", enableKeyboardMode, true);
     } else if (mode === "keyboard") {
-      window.addEventListener("mousedown", enableMouseMode, true);
+      globalThis.addEventListener("mousedown", enableMouseMode, true);
     } else {
-      window.addEventListener("mousemove", handleMouseMove, true);
-      window.addEventListener("contextmenu", handleContextMenu, true);
+      globalThis.addEventListener("mousemove", handleMouseMove, true);
+      globalThis.addEventListener("contextmenu", handleContextMenu, true);
     }
 
     return () => {
       document.body.classList.remove(className);
-      window.removeEventListener("touchstart", handleTouchStart, true);
+      globalThis.removeEventListener("touchstart", handleTouchStart, true);
       if (mode === "mouse") {
-        window.removeEventListener("keydown", enableKeyboardMode, true);
+        globalThis.removeEventListener("keydown", enableKeyboardMode, true);
       } else if (mode === "keyboard") {
-        window.removeEventListener("mousedown", enableMouseMode, true);
+        globalThis.removeEventListener("mousedown", enableMouseMode, true);
       } else {
-        window.removeEventListener("mousemove", handleMouseMove, true);
-        window.removeEventListener("contextmenu", handleContextMenu, true);
+        globalThis.removeEventListener("mousemove", handleMouseMove, true);
+        globalThis.removeEventListener("contextmenu", handleContextMenu, true);
       }
     };
   }, [mode, now]);

package/src/interaction/utils.ts

@@ -92,7 +92,7 @@ export function releaseRipple(
     return state;
   }
 
-  const ripples = state.ripples.slice();
+  const ripples = [...state.ripples];
   const ripple = ripples[i];
   ripples[i] = {
     ...ripple,
@@ -115,12 +115,12 @@ export function updateRipplesState(
 ): ElementInteractionState {
   const { type, ripple, state, holding } = options;
 
-  const rippleIndex = state.ripples.findIndex((r) => r === ripple);
+  const rippleIndex = state.ripples.indexOf(ripple);
   if (rippleIndex === -1) {
     return state;
   }
 
-  const ripples = state.ripples.slice();
+  const ripples = [...state.ripples];
   if (type === "exited") {
     ripples.splice(rippleIndex, 1);
   } else {

package/src/layout/useExpandableLayout.ts

@@ -283,15 +283,14 @@ export function useExpandableLayout(
       query = temporaryUntil;
     }
 
-    const timeout = window.setTimeout(() => {
+    const timeout = globalThis.setTimeout(() => {
       let found = false;
       for (let i = 0; i < document.styleSheets.length; i++) {
         const sheet = document.styleSheets[i];
 
         try {
           const rules = sheet.cssRules;
-          for (let j = 0; j < rules.length; j++) {
-            const rule = rules[j];
+          for (const rule of rules) {
             if (
               rule.cssText.includes(".rmd-layout") &&
               rule.cssText.includes(`@media ${query}`)
@@ -318,7 +317,7 @@ export function useExpandableLayout(
     }, 3000);
 
     return () => {
-      window.clearTimeout(timeout);
+      globalThis.clearTimeout(timeout);
     };
   }, [temporaryUntil]);