@react-md/core 6.4.0 → 6.5.1

package/src/layout/useMainTabIndex.ts

@@ -10,7 +10,7 @@ import { useUserInteractionMode } from "../interaction/UserInteractionModeProvid
  */
 export function useMainTabIndex(tabIndex?: number): number | undefined {
   const keyboard = useUserInteractionMode() === "keyboard";
-  if (keyboard && typeof tabIndex === "undefined") {
+  if (keyboard && tabIndex === undefined) {
     // eslint-disable-next-line no-param-reassign
     tabIndex = -1;
   }

package/src/list/ListItem.tsx

@@ -159,7 +159,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
     } = props;
 
     let tabIndex = propTabIndex;
-    if (!presentational && typeof tabIndex === "undefined") {
+    if (!presentational && tabIndex === undefined) {
       tabIndex = disabled ? -1 : 0;
     }
 

package/src/media-queries/AppSizeProvider.tsx

@@ -137,7 +137,7 @@ export function AppSizeProvider(props: AppSizeProviderProps): ReactElement {
   );
 
   let value = appSize;
-  if (ssr || typeof window === "undefined") {
+  if (ssr || globalThis.window === undefined) {
     value = {
       __root: true,
       ...ssrSize,

package/src/media-queries/config.ts

@@ -28,13 +28,13 @@ export function configureMediaQueries(
   queries: Readonly<Partial<MediaQueryConfig>>
 ): void {
   if (process.env.NODE_ENV !== "production") {
-    Object.entries(queries).forEach(([name, value]) => {
+    for (const [name, value] of Object.entries(queries)) {
       if (!(name in MEDIA_QUERY_CONFIG)) {
         throw new Error(`${name} is an invalid react-md media query.`);
       }
 
       MEDIA_QUERY_CONFIG[name as keyof MediaQueryConfig] = value;
-    });
+    }
   } else {
     Object.assign(MEDIA_QUERY_CONFIG, queries);
   }

package/src/media-queries/useMediaQuery.ts

@@ -28,11 +28,11 @@ import { useSsr } from "../SsrProvider.js";
 export function useMediaQuery(query: string, disabled = false): boolean {
   const ssr = useSsr();
   const [matches, setMatches] = useState(() => {
-    if (typeof window === "undefined" || disabled || ssr) {
+    if (globalThis.window === undefined || disabled || ssr) {
       return false;
     }
 
-    return window.matchMedia(query).matches;
+    return globalThis.matchMedia(query).matches;
   });
 
   useEffect(() => {
@@ -40,7 +40,7 @@ export function useMediaQuery(query: string, disabled = false): boolean {
       return;
     }
 
-    const result = window.matchMedia(query);
+    const result = globalThis.matchMedia(query);
     setMatches(result.matches);
 
     const updater = ({ matches }: MediaQueryListEvent): void => {

package/src/menu/Menu.tsx

@@ -543,13 +543,13 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
 
       // wait an animation frame so the initial click event that caused the menu
       // to become visible does not immediately close the menu
-      const frame = window.requestAnimationFrame(() => {
-        window.addEventListener("click", callback);
+      const frame = globalThis.requestAnimationFrame(() => {
+        globalThis.addEventListener("click", callback);
       });
 
       return () => {
-        window.cancelAnimationFrame(frame);
-        window.removeEventListener("click", callback);
+        globalThis.cancelAnimationFrame(frame);
+        globalThis.removeEventListener("click", callback);
       };
     }, [disableHoverMode, role, visible]);
     useIsomorphicLayoutEffect(() => {

package/src/menu/MenuItemButton.tsx

@@ -46,7 +46,7 @@ export const MenuItemButton = forwardRef<HTMLLIElement, MenuItemButtonProps>(
       onMouseLeave = noop,
       rightAddon: propRightAddon,
       iconRotatorProps,
-      disableDropdownIcon = typeof propRightAddon !== "undefined",
+      disableDropdownIcon = propRightAddon !== undefined,
       ...remaining
     } = props;
     const { disabled } = props;

package/src/menu/MenuItemFileInput.tsx

@@ -114,7 +114,7 @@ export const MenuItemFileInput = forwardRef<
 
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
-        input.onchange = onChange;
+        input.addEventListener("change", onChange);
         input.click();
         input = null;
       }}

package/src/menu/MenuWidget.tsx

@@ -92,7 +92,7 @@ export const MenuWidget = forwardRef<HTMLDivElement, MenuWidgetProps>(
           return;
         }
 
-        window.cancelAnimationFrame(sheetBlurredFame.current);
+        globalThis.cancelAnimationFrame(sheetBlurredFame.current);
         setSheetMenuFocused(true);
       },
       onKeyDown,
@@ -127,9 +127,11 @@ export const MenuWidget = forwardRef<HTMLDivElement, MenuWidgetProps>(
                 return;
               }
 
-              sheetBlurredFame.current = window.requestAnimationFrame(() => {
-                setSheetMenuFocused(false);
-              });
+              sheetBlurredFame.current = globalThis.requestAnimationFrame(
+                () => {
+                  setSheetMenuFocused(false);
+                }
+              );
             }}
           >
             <List

package/src/movement/findMatchIndex.ts

@@ -36,7 +36,7 @@ export interface MatchInRangeOptions extends BaseOptions {
  */
 export function findMatchInRange(options: MatchInRangeOptions): number {
   const { values, startIndex, endIndex } = options;
-  if (!values.length) {
+  if (values.length === 0) {
     return -1;
   }
 
@@ -76,7 +76,7 @@ export interface MatchIndexOptions extends BaseOptions {
 export function findMatchIndex(options: MatchIndexOptions): number {
   const { value, values, startIndex, isSelfMatchable = true } = options;
   // this was added to support comboboxes when there are no options available
-  if (!values.length) {
+  if (values.length === 0) {
     return -1;
   }
 

package/src/movement/useKeyboardMovementProvider.ts

@@ -490,7 +490,7 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
         const focusedIndex = focusables.findIndex(
           (element) => element === target || element.contains(target)
         );
-        if (focusedIndex === -1 || !focusables.length) {
+        if (focusedIndex === -1 || focusables.length === 0) {
           return;
         }
 
@@ -530,7 +530,7 @@ export function useKeyboardMovementProvider<E extends HTMLElement>(
           event.currentTarget,
           programmatic
         );
-        if (!focusables.length) {
+        if (focusables.length === 0) {
           return;
         }
 

package/src/movement/utils.ts

@@ -48,7 +48,7 @@ export const getVirtualFocusDefaultIndex = (
   options: VirtualFocusableIndexOptions
 ): number => {
   const { focusables, includeDisabled, activeDescendantId } = options;
-  if (!focusables.length || (!activeDescendantId && includeDisabled)) {
+  if (focusables.length === 0 || (!activeDescendantId && includeDisabled)) {
     return 0;
   }
 
@@ -71,7 +71,7 @@ export const getFirstFocusableIndex = (
 ): number => {
   const { focusables, includeDisabled } = options;
 
-  if (!focusables.length) {
+  if (focusables.length === 0) {
     return -1;
   }
 
@@ -99,7 +99,7 @@ export const getLastFocusableIndex = (
 ): number => {
   const { focusables, includeDisabled } = options;
 
-  if (!focusables.length) {
+  if (focusables.length === 0) {
     return -1;
   }
 
@@ -142,7 +142,7 @@ export const getNextFocusableIndex = (
     includeDisabled,
     currentFocusIndex,
   } = options;
-  if (!focusables.length) {
+  if (focusables.length === 0) {
     return currentFocusIndex;
   }
 
@@ -186,14 +186,14 @@ export function getSearchText(
   }
 
   const cloned = element.cloneNode(true) as HTMLElement;
-  cloned
-    .querySelectorAll(
-      // Note: do not include DISPLAY_NONE_CLASS since it is presentational only
-      ".rmd-icon--font,[aria-hidden=true],[hidden],[role=presentation]"
-    )
-    .forEach((element) => {
-      element.parentNode?.removeChild(element);
-    });
+
+  const invisibleElements = cloned.querySelectorAll(
+    // Note: do not include DISPLAY_NONE_CLASS since it is presentational only
+    ".rmd-icon--font,[aria-hidden=true],[hidden],[role=presentation]"
+  );
+  for (const element of invisibleElements) {
+    element.remove();
+  }
 
   // Note: It would be good to use `cloned.innerText` (maybe?) at some point,
   // but it returns `undefined` in jsdom. It also does cause a reflow, so maybe
@@ -232,8 +232,9 @@ export function recalculateFocusIndex(options: RecalculateOptions): number {
     });
   }
 
-  const { activeElement } = document;
-  return focusables.findIndex((element) => element === activeElement);
+  // do type-casting since the types don't matter much here
+  const activeElement = document.activeElement as HTMLElement;
+  return focusables.indexOf(activeElement);
 }
 
 /**

package/src/navigation/getTableOfContentsHeadings.ts

@@ -28,7 +28,7 @@ export function getTableOfContentsHeadings(
 ): TableOfContentsHeadings {
   const { ssr, selector, getDepth, getHeadingText } = options;
 
-  if (ssr || typeof window === "undefined") {
+  if (ssr || globalThis.window === undefined) {
     return [];
   }
 
@@ -41,7 +41,7 @@ export function getTableOfContentsHeadings(
   let previous: TableOfContentsHeadingItem = root;
   const parents: TableOfContentsHeadingItem[] = [];
   const headings = document.querySelectorAll(selector);
-  headings.forEach((heading) => {
+  for (const heading of headings) {
     const depth = getDepth(heading);
     const item: TableOfContentsHeadingItem = {
       id: heading.id,
@@ -56,6 +56,7 @@ export function getTableOfContentsHeadings(
 
       parents.push(previous);
     } else if (depth < previous.depth) {
+      // eslint-disable-next-line unicorn/prefer-at
       while (parents[parents.length - 1].depth >= depth) {
         parents.pop();
       }
@@ -63,7 +64,7 @@ export function getTableOfContentsHeadings(
     const i = parents.length - 1;
     parents[i].items = [...(parents[i].items ?? []), item];
     previous = item;
-  });
+  }
 
   return root.items;
 }

package/src/navigation/useActiveHeadingId.ts

@@ -16,7 +16,7 @@ import { type HeadingReferenceWithChildren } from "./types.js";
  * @since 6.0.0
  */
 export const DEFAULT_ACTIVE_HEADING_THRESHOLD: IntersectionObserverThreshold = [
-  0.0, 1.0,
+  0, 1,
 ];
 
 /**
@@ -33,7 +33,7 @@ export const DEFAULT_ACTIVE_HEADING_THRESHOLD: IntersectionObserverThreshold = [
  * @since 6.0.0
  */
 export const DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN = (): string => {
-  const headerHeightVar = window
+  const headerHeightVar = globalThis
     .getComputedStyle(document.documentElement)
     .getPropertyValue("--rmd-layout-header-height");
   const headerHeight = parseCssLengthUnit({
@@ -51,7 +51,7 @@ function getHeadingElements(
   items: readonly HeadingReferenceWithChildren[]
 ): readonly HTMLElement[] {
   const headings: HTMLElement[] = [];
-  items.forEach((item) => {
+  for (const item of items) {
     const heading = document.getElementById(item.id);
     if (heading) {
       headings.push(heading);
@@ -60,7 +60,7 @@ function getHeadingElements(
     if (item.items) {
       headings.push(...getHeadingElements(item.items));
     }
-  });
+  }
 
   return headings;
 }
@@ -134,9 +134,9 @@ export function useActiveHeadingId(options: ActiveHeadingIdOptions): string {
     getTargets: useCallback(() => {
       const headingElements = getHeadingElements(headings);
       const lookup = new Map<string, boolean>();
-      headingElements.forEach((heading) => {
+      for (const heading of headingElements) {
         lookup.set(heading.id, false);
-      });
+      }
       elements.current = lookup;
 
       return headingElements;
@@ -148,9 +148,9 @@ export function useActiveHeadingId(options: ActiveHeadingIdOptions): string {
           return;
         }
 
-        entries.forEach((entry) => {
+        for (const entry of entries) {
           lookup.set(entry.target.id, entry.isIntersecting);
-        });
+        }
 
         // get the first visible/intersecting item and set it
         let foundId = [...lookup.entries()].find(

package/src/navigation/useTableOfContentsHeadings.ts

@@ -25,7 +25,7 @@ export const DEFAULT_HEADING_SELECTOR =
  * @since 6.0.0
  */
 export const DEFAULT_GET_HEADING_DEPTH = (element: Element): number => {
-  const depth = parseInt(element.tagName.substring(1));
+  const depth = Number.parseInt(element.tagName.slice(1));
   return Number.isNaN(depth) ? 0 : depth;
 };
 

package/src/navigation/utils.ts

@@ -4,14 +4,15 @@ import { type NavigationItem } from "./types.js";
  * @since 6.0.0
  */
 export function getHrefFromParents(parents: readonly NavigationItem[]): string {
-  return parents.reduce<string>((result, parent) => {
+  let result = "";
+  for (const parent of parents) {
     if ("href" in parent && parent.href) {
       const { href } = parent;
-      return result + href;
+      result += href;
     }
+  }
 
-    return result;
-  }, "");
+  return result;
 }
 
 /**
@@ -33,7 +34,7 @@ export function getNavigationGroupId(
  */
 export function getPartsFromPathname(pathname: string): ReadonlySet<string> {
   // remove trailing slashes just in case there aren't rewrites in place
-  const href = pathname.replace(/\/{2,}/g, "/").replace(/\/+$/, "");
+  const href = pathname.replaceAll(/\/{2,}/g, "/").replace(/\/+$/, "");
   const parts = href.split("/");
   const set = new Set<string>();
   let prefix = "";

package/src/portal/PortalContainerProvider.tsx

@@ -29,7 +29,7 @@ export const PORTAL_CONTAINER_ID = "rmd-portal-container";
 let portalContainer: PortalContainerNode = null;
 
 const getPortalContainer = (): PortalContainerNode =>
-  typeof window === "undefined" ? null : document.body;
+  globalThis.window === undefined ? null : document.body;
 
 const context = createContext<PortalContainerNode>(getPortalContainer());
 context.displayName = "PortalContainer";
@@ -77,7 +77,7 @@ export function PortalContainerProvider(
       return;
     }
 
-    if (typeof container !== "undefined") {
+    if (container !== undefined) {
       setValue(container);
       return;
     }
@@ -87,13 +87,15 @@ export function PortalContainerProvider(
       portalContainer.id = PORTAL_CONTAINER_ID;
     }
     if (!document.body.contains(portalContainer)) {
-      document.body.appendChild(portalContainer);
+      document.body.append(portalContainer);
     }
 
     setValue(portalContainer);
 
     return () => {
       if (portalContainer && document.body.contains(portalContainer)) {
+        // can't use `portalContainer.remove()` since `DocumentFragment` does not have `.remove()`
+        // eslint-disable-next-line unicorn/prefer-dom-node-remove
         document.body.removeChild(portalContainer);
       }
     };

package/src/positioning/getFixedPosition.ts

@@ -80,12 +80,15 @@ export function getFixedPosition(options: FixedPositionOptions): FixedPosition {
   let { initialY } = options;
   const container = findSizingContainer(options.container);
 
-  if (process.env.NODE_ENV !== "production") {
-    if (preventOverlap && anchor.y !== "above" && anchor.y !== "below") {
-      throw new Error(
-        'Unable to prevent overlap when the vertical anchor is not `"above"` or `"below"`'
-      );
-    }
+  if (
+    process.env.NODE_ENV !== "production" &&
+    preventOverlap &&
+    anchor.y !== "above" &&
+    anchor.y !== "below"
+  ) {
+    throw new Error(
+      'Unable to prevent overlap when the vertical anchor is not `"above"` or `"below"`'
+    );
   }
 
   if (!element) {

package/src/positioning/useFixedPositioning.ts

@@ -407,8 +407,8 @@ export function useFixedPositioning<
       updateStyle();
     };
 
-    const resizeHandler = delegateEvent("resize", window, true);
-    const scrollHandler = delegateEvent("scroll", window, true, {
+    const resizeHandler = delegateEvent("resize", globalThis.window, true);
+    const scrollHandler = delegateEvent("scroll", globalThis.window, true, {
       passive: true,
     });
     resizeHandler.add(resizeCallback);

package/src/positioning/utils.ts

@@ -294,7 +294,7 @@ export function findSizingContainer(
     }
   }
 
-  const data = el.getAttribute("data-sizing-selector");
+  const data = el.dataset.sizingSelector;
   if (data) {
     const content = el.querySelector(data) as HTMLElement;
     if (content) {
@@ -344,10 +344,10 @@ export function getElementRect(element: HTMLElement): DOMRect {
   cloned.style.transform = "none";
 
   const parent = element.parentElement || document.body;
-  parent.appendChild(cloned);
+  parent.append(cloned);
 
   const rect = cloned.getBoundingClientRect();
-  parent.removeChild(cloned);
+  cloned.remove();
 
   return rect;
 }

package/src/scroll/getScrollbarWidth.ts

@@ -5,7 +5,7 @@ let cache: number | undefined;
  */
 export function getScrollbarWidth(force = false): number {
   /* istanbul ignore if */
-  if (typeof window === "undefined") {
+  if (globalThis.window === undefined) {
     return 0;
   }
 
@@ -17,16 +17,16 @@ export function getScrollbarWidth(force = false): number {
   const outer = document.createElement("div");
   outer.style.visibility = "hidden";
   outer.style.overflow = "scroll";
-  document.body.appendChild(outer);
+  document.body.append(outer);
 
   const inner = document.createElement("div");
-  outer.appendChild(inner);
+  outer.append(inner);
 
   // the scrollbar width can be determined by comparing the width of the parent
   // element that has scrollbars to the child element that does not.
   value = outer.offsetWidth - inner.offsetWidth;
   cache = value;
-  document.body.removeChild(outer);
+  outer.remove();
 
   return value;
 }

package/src/searching/fuzzy.ts

@@ -42,11 +42,15 @@ const DEFAULT_EXTRACTOR = defaultExtractor("fuzzySearch");
 export function createFuzzyRegExp(query: string): RegExp {
   return new RegExp(
     query
+      // eslint-disable-next-line unicorn/prefer-spread
       .split("")
-      .join("\\w*")
-      .replace(/(\(|\||\)|\\(?!w\*)|\[|\|-|\.|\^|\+|\$|\?|^(?!w)\*)/g, "\\$1")
+      .join(String.raw`\w*`)
+      .replaceAll(
+        /(\(|\||\)|\\(?!w\*)|\[|\|-|\.|\^|\+|\$|\?|^(?!w)\*)/g,
+        String.raw`\$1`
+      )
       // Couldn't get the matching of two '*' working, so replace them here..
-      .replace(/\*\*/g, "*\\*"),
+      .replaceAll("**", String.raw`*\*`),
     "i"
   );
 }

package/src/searching/toSearchQuery.ts

@@ -11,7 +11,7 @@ export function toSearchQuery(
 ): string {
   let q = s.toLowerCase();
   if (whitespace === "ignore") {
-    q = q.replace(/\s/g, "");
+    q = q.replaceAll(/\s/g, "");
   } else if (whitespace === "trim") {
     q = q.trim();
   }

package/src/searching/utils.ts

@@ -48,7 +48,7 @@ export function search<T>(
 ): readonly T[] | T | undefined {
   const { list, type, query, filter, extractor, whitespace = "keep" } = options;
   const fallback = type === "search" ? undefined : list;
-  if (!list.length) {
+  if (list.length === 0) {
     return fallback;
   }
 

package/src/snackbar/Toast.tsx

@@ -190,7 +190,7 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
     }
 
     let closeIcon = propCloseIcon;
-    if (typeof closeButtonProps?.children !== "undefined") {
+    if (closeButtonProps?.children !== undefined) {
       closeIcon = closeButtonProps.children;
     }
 

package/src/snackbar/ToastContent.tsx

@@ -62,8 +62,8 @@ export const ToastContent = forwardRef<HTMLDivElement, ToastContentProps>(
       disableWidth: true,
       onUpdate: useCallback((entry) => {
         const element = entry.target;
-        const style = window.getComputedStyle(element);
-        const lineHeight = parseFloat(style.lineHeight);
+        const style = globalThis.getComputedStyle(element);
+        const lineHeight = Number.parseFloat(style.lineHeight);
         if (Number.isNaN(lineHeight)) {
           return;
         }

package/src/snackbar/ToastManager.ts

@@ -121,7 +121,7 @@ export interface ToastVisibilityTimers {
   inactive: boolean;
   startTime: number;
   elapsedTime: number;
-  exitTimeout?: number;
+  exitTimeout?: NodeJS.Timeout;
 }
 
 /**
@@ -154,9 +154,9 @@ export class ToastManager {
   #emit = (): void => {
     // shallow clone to ensure react updates
     this.#queue = [...this.#queue];
-    this.#listeners.forEach((callback) => {
+    for (const callback of this.#listeners) {
       callback(this.#queue);
-    });
+    }
   };
 
   #getToastIndex = (toastId: string | undefined): number => {
@@ -404,7 +404,7 @@ export class ToastManager {
       startTime: Date.now(),
       elapsedTime: 0,
     };
-    window.clearTimeout(timers.exitTimeout);
+    globalThis.clearTimeout(timers.exitTimeout);
 
     let duration = visibleTime;
     if (timers.elapsedTime) {
@@ -412,7 +412,7 @@ export class ToastManager {
     }
 
     timers.inactive = false;
-    timers.exitTimeout = window.setTimeout(() => {
+    timers.exitTimeout = globalThis.setTimeout(() => {
       this.removeToast(toastId, true);
     }, duration);
     this.#timers.set(toastId, timers);
@@ -431,9 +431,8 @@ export class ToastManager {
       return;
     }
 
-    window.clearTimeout(cached.exitTimeout);
-    const timers = { ...cached };
-    timers.inactive = true;
+    globalThis.clearTimeout(cached.exitTimeout);
+    const timers = { ...cached, inactive: true };
     timers.elapsedTime = Date.now() - timers.startTime + timers.elapsedTime;
     this.#timers.set(toastId, timers);
     this.#updateToast(toastId, { paused: true });
@@ -499,7 +498,7 @@ export class ToastManager {
    */
   clearTimer = (toastId: string): void => {
     const timer = this.#timers.get(toastId);
-    window.clearTimeout(timer?.exitTimeout);
+    globalThis.clearTimeout(timer?.exitTimeout);
     this.#timers.delete(toastId);
   };
 
@@ -520,9 +519,9 @@ export class ToastManager {
    */
   clearToasts = (disableEmit = false): void => {
     this.#queue = [];
-    this.#timers.forEach((meta) => {
-      window.clearTimeout(meta.exitTimeout);
-    });
+    for (const [, meta] of this.#timers) {
+      globalThis.clearTimeout(meta.exitTimeout);
+    }
     this.#timers.clear();
     if (!disableEmit) {
       this.#emit();

package/src/spinbutton/useSpinButton.ts

@@ -70,7 +70,7 @@ export function useSpinButton<E extends HTMLElement = HTMLDivElement>(
   // trigger a noop setValue when `value` and `onValueChange` are provided
   // since `onValueChange is always called with  `setValue
   let propSetValue: Dispatch<SpinButtonValue> | undefined;
-  if (typeof propValue !== "undefined" && options.onValueChange) {
+  if (propValue !== undefined && options.onValueChange) {
     propSetValue = noop;
   }
 

package/src/spinbutton/utils/deselectNode.ts

@@ -3,7 +3,7 @@
  * @internal
  */
 export function deselectNode(node: Node): void {
-  const selection = window.getSelection();
+  const selection = globalThis.getSelection();
   if (!selection) {
     return;
   }