@react-md/core 6.5.0 → 6.5.2

package/src/transition/useCollapseTransition.ts

@@ -314,7 +314,7 @@ export function useCollapseTransition<E extends HTMLElement>(
   const [nodeRef, refCallback] = useEnsuredRef(propNodeRef);
   const [style, setStyle] = useState<CSSProperties | undefined>(() => {
     if (transitionIn) {
-      return undefined;
+      return;
     }
 
     return {

package/src/transition/useSkeletonPlaceholder.ts

@@ -238,10 +238,10 @@ export function useSkeletonPlaceholder(
   } = options;
   const ssr = useSsr();
 
-  const isDefinedWidth = typeof propWidth !== "undefined";
-  const isDefinedDelay = typeof propDelay !== "undefined";
+  const isDefinedWidth = propWidth !== undefined;
+  const isDefinedDelay = propDelay !== undefined;
   const [randomStyles, setRandomStyles] = useState<CSSProperties>(() => {
-    if (typeof window === "undefined" || ssr || disabled) {
+    if (globalThis.window === undefined || ssr || disabled) {
       return {};
     }
 
@@ -289,7 +289,7 @@ export function useSkeletonPlaceholder(
   }
 
   let style: CSSProperties | undefined = propStyle;
-  if (!!width || !!animationDelay || typeof height !== "undefined") {
+  if (!!width || !!animationDelay || height !== undefined) {
     style = {
       ...style,
       height: height ?? style?.height,

package/src/transition/useTransition.ts

@@ -271,12 +271,12 @@ export function useTransition<E extends HTMLElement>(
       return;
     }
 
-    const timer = window.setTimeout(() => {
+    const timer = globalThis.setTimeout(() => {
       dispatch(dispatchStage);
     }, duration);
 
     return () => {
-      window.clearTimeout(timer);
+      globalThis.clearTimeout(timer);
     };
   }, [appearing, ref, ssr, stage, temporary, transitionIn]);
 

package/src/transition/utils.ts

@@ -71,24 +71,24 @@ export function getElementSizing(element: HTMLElement | null): CollapseSizing {
     cloned.style.visibility = "hidden";
 
     const container = element.parentElement || document.body;
-    container.appendChild(cloned);
+    container.append(cloned);
     maxHeight = cloned.scrollHeight;
-    const style = window.getComputedStyle(cloned);
+    const style = globalThis.getComputedStyle(cloned);
     const isContentBox = style.boxSizing === "content-box";
     if (style.paddingTop) {
-      paddingTop = parseFloat(style.paddingTop);
+      paddingTop = Number.parseFloat(style.paddingTop);
       if (isContentBox) {
         maxHeight += paddingTop;
       }
     }
 
     if (style.paddingBottom) {
-      paddingBottom = parseFloat(style.paddingBottom);
+      paddingBottom = Number.parseFloat(style.paddingBottom);
       if (isContentBox) {
         maxHeight += paddingBottom;
       }
     }
-    container.removeChild(cloned);
+    cloned.remove();
   }
 
   return { maxHeight, paddingTop, paddingBottom };

package/src/tree/TreeItem.tsx

@@ -225,7 +225,7 @@ export function TreeItem(props: TreeItemProps): ReactElement {
   const leftAddonType =
     (propLeftAddonType ?? (expanderLeft && leftAddon)) ? "media" : undefined;
   const isMediaLeftAddon =
-    typeof propLeftAddonType === "undefined" && leftAddonType === "media";
+    propLeftAddonType === undefined && leftAddonType === "media";
   const disableLeftAddonCenteredMedia =
     propDisableLeftAddonCenteredMedia ?? isMediaLeftAddon;
 

package/src/tree/useTreeItems.ts

@@ -68,19 +68,19 @@ export function buildTree<T extends TreeItemNode>(
     }
   }
 
-  if (!childItems.length) {
+  if (childItems.length === 0) {
     return undefined;
   }
 
   treeItemChildIds.set(parentId, childIds);
-  childItems.forEach((childItem) => {
+  for (const childItem of childItems) {
     childItem.items = buildTree({
       sort,
       nodes,
       parentId: childItem.itemId,
       treeItemChildIds,
     });
-  });
+  }
 
   return sort(childItems);
 }
@@ -125,10 +125,10 @@ export function useTreeItems<T extends TreeItemNode>(
       treeItemChildIds,
     });
 
-    if (process.env.NODE_ENV !== "production" && values.length) {
+    if (process.env.NODE_ENV !== "production" && values.length > 0) {
       /* eslint-disable no-console */
       console.warn("The following tree items are orphaned without a parent:");
-      console.warn(values.slice());
+      console.warn([...values]);
     }
 
     return {

package/src/tree/useTreeMovement.ts

@@ -174,7 +174,7 @@ export function useTreeMovement<T extends TreeItemNode>(
             const expandableIds = [...itemIds].filter(
               (itemId) => expandable[itemId]
             );
-            if (expandableIds.length) {
+            if (expandableIds.length > 0) {
               expandMultipleTreeItems(
                 (prev) => new Set([...prev, ...expandableIds])
               );

package/src/tree/utils.ts

@@ -54,15 +54,15 @@ export function getChildTreeItems<T extends TreeItemNode = DefaultTreeItemNode>(
 ): readonly T[] {
   const items: readonly T[] = Array.isArray(data) ? data : Object.values(data);
 
-  return items.reduce<T[]>((list, item) => {
-    if (parentId !== item.parentId) {
-      return list;
+  const treeItems: T[] = [];
+  for (const item of items) {
+    if (parentId === item.parentId) {
+      treeItems.push(
+        item,
+        ...(recursive ? getChildTreeItems(items, item.itemId, recursive) : [])
+      );
     }
+  }
 
-    return [
-      ...list,
-      item,
-      ...(recursive ? getChildTreeItems(items, item.itemId, recursive) : []),
-    ];
-  }, []);
+  return treeItems;
 }

package/src/typography/HighlightText.tsx

@@ -154,10 +154,11 @@ export function HighlightText(
 
             const parts: ReactNode[] = [];
             const text = removeAccents(child).trim();
-            const regex = new RegExp(
-              "(" + cleanQuery.replace(SPECIAL_CHARACTERS_REGEXP, "\\$&") + ")",
-              "gi"
+            const escapedQuery = cleanQuery.replaceAll(
+              SPECIAL_CHARACTERS_REGEXP,
+              String.raw`\$&`
             );
+            const regex = new RegExp(`(${escapedQuery})`, "gi");
 
             let match: RegExpExecArray | null;
             let lastIndex = 0;

package/src/typography/SrOnly.tsx

@@ -1,6 +1,6 @@
 import { type ElementType, type HTMLAttributes, forwardRef } from "react";
 
-import { cssUtils } from "../cssUtils.js";
+import { type SrOnlyBehavior, cssUtils } from "../cssUtils.js";
 import {
   type CustomTypographyComponent,
   type TypographyHTMLElement,
@@ -67,13 +67,20 @@ export const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(
     // do some type-casting so ref works
     const Component = AsComponent as ElementType;
 
+    let srOnly: SrOnlyBehavior = true;
+    if (focusable) {
+      srOnly = "focusable";
+    } else if (phoneOnly) {
+      srOnly = "phone";
+    }
+
     return (
       <Component
         {...remaining}
         ref={ref}
         tabIndex={tabIndex ?? (focusable ? 0 : undefined)}
         className={cssUtils({
-          srOnly: focusable ? "focusable" : phoneOnly ? "phone" : true,
+          srOnly,
           className,
         })}
       >

package/src/useDebouncedFunction.ts

@@ -87,7 +87,7 @@ export function useDebouncedFunction<F extends AnyFunction>(
   func: F,
   wait: number
 ): DebouncedFunction<F> {
-  const timeout = useRef<number | undefined>();
+  const timeout = useRef<NodeJS.Timeout>();
   const funcRef = useRef(func);
   useIsomorphicLayoutEffect(() => {
     funcRef.current = func;
@@ -95,19 +95,19 @@ export function useDebouncedFunction<F extends AnyFunction>(
 
   useEffect(() => {
     return () => {
-      window.clearTimeout(timeout.current);
+      globalThis.clearTimeout(timeout.current);
     };
   }, []);
 
   return useMemo(() => {
     const debounced: DebouncedFunction<F> = (...args) => {
-      window.clearTimeout(timeout.current);
-      timeout.current = window.setTimeout(() => {
+      globalThis.clearTimeout(timeout.current);
+      timeout.current = globalThis.setTimeout(() => {
         funcRef.current(...args);
       }, wait);
     };
     debounced.cancel = () => {
-      window.clearTimeout(timeout.current);
+      globalThis.clearTimeout(timeout.current);
     };
 
     return debounced;

package/src/useDropzone.ts

@@ -162,15 +162,15 @@ export function useDropzone(options: DropzoneOptions): DropzoneImplementation {
     enable: startDragging,
     disable: stopDragging,
   } = useToggle();
-  const draggingTimeout = useRef<number | undefined>();
+  const draggingTimeout = useRef<NodeJS.Timeout>();
 
   // Browsers sometimes don't trigger a dragleave event for the entire
   // document, so we have to work around that by using the `dragover` event
   // instead. The `dragover` event will continually fire within the window
   // until the user drops the file or moves the file outside of the window.
   const delayedStopDragging = useCallback(() => {
-    window.clearTimeout(draggingTimeout.current);
-    draggingTimeout.current = window.setTimeout(() => {
+    globalThis.clearTimeout(draggingTimeout.current);
+    draggingTimeout.current = globalThis.setTimeout(() => {
       stopDragging();
     }, 100);
   }, [stopDragging]);
@@ -180,12 +180,12 @@ export function useDropzone(options: DropzoneOptions): DropzoneImplementation {
       return;
     }
 
-    window.addEventListener("dragenter", startDragging);
-    window.addEventListener("dragover", delayedStopDragging);
+    globalThis.addEventListener("dragenter", startDragging);
+    globalThis.addEventListener("dragover", delayedStopDragging);
     return () => {
-      window.clearTimeout(draggingTimeout.current);
-      window.removeEventListener("dragenter", startDragging);
-      window.removeEventListener("dragover", delayedStopDragging);
+      globalThis.clearTimeout(draggingTimeout.current);
+      globalThis.removeEventListener("dragenter", startDragging);
+      globalThis.removeEventListener("dragover", delayedStopDragging);
     };
   }, [delayedStopDragging, disableDragging, startDragging]);
 
@@ -204,7 +204,7 @@ export function useDropzone(options: DropzoneOptions): DropzoneImplementation {
         event.preventDefault();
         event.stopPropagation();
 
-        window.clearTimeout(draggingTimeout.current);
+        globalThis.clearTimeout(draggingTimeout.current);
         onDrop(event);
         setOver(false);
         stopDragging();
@@ -213,7 +213,7 @@ export function useDropzone(options: DropzoneOptions): DropzoneImplementation {
         event.preventDefault();
         event.stopPropagation();
 
-        window.clearTimeout(draggingTimeout.current);
+        globalThis.clearTimeout(draggingTimeout.current);
         onDragOver(event);
         setOver(true);
       },

package/src/useEnsuredState.ts

@@ -32,19 +32,19 @@ export function useEnsuredState<
   options: EnsuredStateOptions<V, Setter>
 ): readonly [value: V, setValue: Setter] {
   const { name = "value", value, setValue, defaultValue } = options;
-  if (typeof value !== "undefined" && typeof setValue !== "undefined") {
+  if (value !== undefined && setValue !== undefined) {
     return [value, setValue];
   }
 
-  if (typeof value !== "undefined" || typeof setValue !== "undefined") {
-    const pascalName = name.charAt(0).toUpperCase() + name.substring(1);
+  if (value !== undefined || setValue !== undefined) {
+    const pascalName = name.charAt(0).toUpperCase() + name.slice(1);
     throw new Error(
       `Both a \`${name}\` and \`set${pascalName}\` must be defined for controlled components.`
     );
   }
 
-  if (typeof defaultValue === "undefined") {
-    const pascalName = name.charAt(0).toUpperCase() + name.substring(1);
+  if (defaultValue === undefined) {
+    const pascalName = name.charAt(0).toUpperCase() + name.slice(1);
     throw new Error(
       `A \`default${pascalName}\` must be defined for uncontrolled components.`
     );

package/src/useIntersectionObserver.ts

@@ -277,7 +277,7 @@ export function useIntersectionObserver<E extends HTMLElement>(
       targets = [element];
     }
 
-    if (disabled || !targets.length) {
+    if (disabled || targets.length === 0) {
       return;
     }
 
@@ -303,9 +303,9 @@ export function useIntersectionObserver<E extends HTMLElement>(
     // - when cleaning up, check if there are any other existing callbacks
     //   - disconnect and remove the observer if there are none left
     const observer = new IntersectionObserver(onUpdate, options);
-    targets.forEach((target) => {
+    for (const target of targets) {
       observer.observe(target);
-    });
+    }
 
     return () => {
       observer.disconnect();

package/src/useIsomorphicLayoutEffect.ts

@@ -9,8 +9,8 @@ import { useEffect, useLayoutEffect } from "react";
  * @see {@link https://github.com/reduxjs/react-redux/blob/4c907c0870c6b9a136dd69be294c17d1dc63c8f5/src/utils/useIsomorphicLayoutEffect.js}
  */
 export const useIsomorphicLayoutEffect =
-  typeof window !== "undefined" &&
-  typeof window.document !== "undefined" &&
-  typeof window.document.createElement !== "undefined"
+  globalThis.window !== undefined &&
+  globalThis.document !== undefined &&
+  globalThis.document.createElement !== undefined
     ? useLayoutEffect
     : useEffect;

package/src/useOrientation.ts

@@ -12,7 +12,7 @@ import { useEffect, useState } from "react";
  * @internal
  */
 export const getOrientationType = (): OrientationType => {
-  if (typeof window === "undefined") {
+  if (globalThis.window === undefined) {
     return "landscape-primary";
   }
 

package/src/useReadonlySet.ts

@@ -87,7 +87,9 @@ export function useReadonlySet<T>(
   const { defaultValue, toggleType = "multiple" } = options;
   const [value, setValue] = useState<ReadonlySet<T>>(() => {
     const initial =
-      defaultValue instanceof Function ? defaultValue() : (defaultValue ?? []);
+      typeof defaultValue === "function"
+        ? defaultValue()
+        : (defaultValue ?? []);
 
     return new Set(initial);
   });

package/src/useResizeListener.ts

@@ -95,7 +95,7 @@ export function useResizeListener(options: ResizeListenerOptions): void {
       return;
     }
 
-    const eventHandler = delegateEvent("resize", window, throttle, {
+    const eventHandler = delegateEvent("resize", globalThis.window, throttle, {
       once,
       signal,
       capture,
@@ -103,7 +103,7 @@ export function useResizeListener(options: ResizeListenerOptions): void {
     });
     eventHandler.add(onUpdate);
 
-    window.dispatchEvent(new Event("resize"));
+    globalThis.dispatchEvent(new Event("resize"));
     return () => {
       eventHandler.remove(onUpdate);
     };

package/src/useResizeObserver.ts

@@ -47,7 +47,7 @@ interface SubscribeOptions {
  * `src/tests-utils/ResizeObserver.ts`
  */
 export class ResizeObserverManager {
-  frame: number;
+  frame: number = 0;
   subscriptions: Map<Element, Set<TargetSubscription>>;
 
   /**
@@ -62,7 +62,6 @@ export class ResizeObserverManager {
   sharedObserver: ResizeObserver | undefined;
 
   constructor() {
-    this.frame = 0;
     this.subscriptions = new Map();
   }
 
@@ -74,8 +73,8 @@ export class ResizeObserverManager {
       this.sharedObserver ||
       new ResizeObserver((entries) => {
         // this prevents the `ResizeObserver loop limit exceeded`
-        window.cancelAnimationFrame(this.frame);
-        this.frame = window.requestAnimationFrame(() => {
+        globalThis.cancelAnimationFrame(this.frame);
+        this.frame = globalThis.requestAnimationFrame(() => {
           this.handleResizeEntries(entries);
         });
       });

package/src/useThrottledFunction.ts

@@ -88,7 +88,7 @@ export function useThrottledFunction<F extends AnyFunction>(
 ): ThrottledFunction<F> {
   const args = useRef<Parameters<F>>();
   const result = useRef<ReturnType<F>>();
-  const timeout = useRef<number | undefined>();
+  const timeout = useRef<NodeJS.Timeout>();
   const funcRef = useRef(func);
   const lastCalledTime = useRef(0);
 
@@ -98,7 +98,7 @@ export function useThrottledFunction<F extends AnyFunction>(
 
   useEffect(() => {
     return () => {
-      window.clearTimeout(timeout.current);
+      globalThis.clearTimeout(timeout.current);
     };
   }, []);
 
@@ -113,7 +113,7 @@ export function useThrottledFunction<F extends AnyFunction>(
 
         result.current = funcRef.current(...args.current);
       } else if (!timeout.current) {
-        timeout.current = window.setTimeout(() => {
+        timeout.current = globalThis.setTimeout(() => {
           lastCalledTime.current = Date.now();
           timeout.current = undefined;
           // should exist by this time
@@ -125,7 +125,7 @@ export function useThrottledFunction<F extends AnyFunction>(
       return result.current as ReturnType<F>;
     };
     throttled.cancel = () => {
-      window.clearTimeout(timeout.current);
+      globalThis.clearTimeout(timeout.current);
     };
 
     return throttled;

package/src/useWindowSize.ts

@@ -87,7 +87,7 @@ export function useWindowSize(options: WindowSizeOptions = {}): ElementSize {
 
   const ssr = useSsr();
   const [size, setSize] = useState(() => {
-    if (typeof window === "undefined" || ssr) {
+    if (globalThis.window === undefined || ssr) {
       return {
         height: ssrHeight,
         width: ssrWidth,

package/src/utils/alphaNumericSort.ts

@@ -129,7 +129,7 @@ export function alphaNumericSort<T>(
     descending = false,
   } = options;
 
-  const sorted = list.slice();
+  const sorted = [...list];
   sorted.sort((a, b) => {
     const aValue = extractor(a);
     const bValue = extractor(b);

package/src/utils/bem.ts

@@ -6,13 +6,14 @@ function modify(base: string, modifier?: BEMModifier): string {
   }
 
   const hasOwn = Object.prototype.hasOwnProperty;
-  return Object.keys(modifier).reduce((s, mod) => {
+  let className = base;
+  for (const mod of Object.keys(modifier)) {
     if (hasOwn.call(modifier, mod) && modifier[mod]) {
-      return `${s} ${base}--${mod}`;
+      className += ` ${base}--${mod}`;
     }
+  }
 
-    return s;
-  }, base);
+  return className;
 }
 
 /**
@@ -105,24 +106,22 @@ export interface BEMResult {
  * @returns a function to call that generates the full class name
  */
 export function bem(base: string): BEMResult {
-  if (process.env.NODE_ENV !== "production") {
-    if (!base) {
-      throw new Error(
-        "bem requires a base block class but none were provided."
-      );
-    }
+  if (process.env.NODE_ENV !== "production" && !base) {
+    throw new Error("bem requires a base block class but none were provided.");
   }
 
   function block(
     elementOrModifier?: BEMModifier | string,
     modifier?: BEMModifier
   ): string {
-    if (process.env.NODE_ENV !== "production") {
-      if (typeof elementOrModifier !== "string" && modifier) {
-        throw new TypeError(
-          "bem does not support having two modifier arguments."
-        );
-      }
+    if (
+      process.env.NODE_ENV !== "production" &&
+      typeof elementOrModifier !== "string" &&
+      modifier
+    ) {
+      throw new TypeError(
+        "bem does not support having two modifier arguments."
+      );
     }
 
     if (!elementOrModifier) {

package/src/utils/getNumberOfDigits.ts

@@ -14,5 +14,6 @@ export function getNumberOfDigits(
     return;
   }
 
+  // eslint-disable-next-line unicorn/prefer-math-trunc
   return (Math.log10((value ^ (value >> 31)) - (value >> 31)) | 0) + 1;
 }

package/src/utils/getRangeDefaultValue.ts

@@ -20,7 +20,7 @@ export function getRangeDefaultValue(
   options: RangeDefaultValueOptions
 ): UseStateInitializer<number> {
   const { defaultValue } = options;
-  if (typeof defaultValue !== "undefined") {
+  if (defaultValue !== undefined) {
     return defaultValue;
   }
 

package/src/utils/nearest.ts

@@ -36,10 +36,13 @@ export function nearest(options: NearestOptions): number {
   const step = range / steps;
   const decimals = Number.isInteger(step)
     ? range % steps
-    : getNumberOfDigits(parseInt(`${step}`.split(".")[1]));
+    : getNumberOfDigits(Number.parseInt(`${step}`.split(".")[1]));
 
   return Math.min(
     max,
-    Math.max(min, parseFloat((zeroToOne * range + min).toFixed(decimals)))
+    Math.max(
+      min,
+      Number.parseFloat((zeroToOne * range + min).toFixed(decimals))
+    )
   );
 }

package/src/utils/parseCssLengthUnit.ts

@@ -47,20 +47,21 @@ export function parseCssLengthUnit(options: ParseCssLengthUnitOptions): number {
     throw new Error(`Unable to parse a unit with \`calc\`: "${value}"`);
   }
 
-  const parsed = parseFloat(value);
+  const parsed = Number.parseFloat(value);
   if (/px$/i.test(value)) {
     return parsed;
   }
 
-  if (typeof window === "undefined") {
+  if (globalThis.window === undefined) {
     return parsed * fallbackFontSize;
   }
 
   const styleContainer =
     !container || /rem$/i.test(value) ? document.documentElement : container;
 
-  const fontSize = parseFloat(
-    window.getComputedStyle(styleContainer).fontSize || `${fallbackFontSize}px`
+  const fontSize = Number.parseFloat(
+    globalThis.getComputedStyle(styleContainer).fontSize ||
+      `${fallbackFontSize}px`
   );
 
   return parsed * fontSize;

package/src/utils/trigonometry.ts

@@ -42,5 +42,5 @@ export function isPointInCircle(options: IsPointInCircleOptions): boolean {
 export function calcHypotenuse(point: Point): number {
   const { x, y } = point;
 
-  return Math.sqrt(x * x + y * y);
+  return Math.hypot(x, y);
 }

package/dist/form/defaultGetSelectedOptionChildren.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/form/getSelectedOptionChildren.d.ts

@@ -1 +0,0 @@
-export {};