@react-md/core 1.0.0-next.16 → 1.0.0-next.17

package/src/tabs/getTabListScrollToOptions.ts

@@ -0,0 +1,37 @@
+/**
+ * @since 6.0.0
+ */
+export interface TabListScrollToOptions {
+  isRTL: boolean;
+  animate: boolean;
+  vertical: boolean;
+  increment: boolean;
+  container: HTMLElement;
+}
+
+/**
+ * @since 6.0.0
+ */
+export type GetTabListScrollToOptions = (
+  options: TabListScrollToOptions
+) => ScrollToOptions | undefined;
+
+/**
+ * @since 6.0.0
+ */
+export const getTabListScrollToOptions: GetTabListScrollToOptions = (
+  options
+) => {
+  const { isRTL, animate, vertical, increment, container } = options;
+  const { scrollLeft, scrollTop, scrollWidth, scrollHeight } = container;
+  const currentScroll = vertical ? scrollTop : scrollLeft;
+  const scrollDistance = vertical ? scrollHeight : scrollWidth;
+  const amount = (scrollDistance / 10) * (increment ? 1 : -1);
+  const distance = currentScroll + amount * (vertical || !isRTL ? 1 : -1);
+
+  return {
+    left: vertical ? undefined : distance,
+    top: vertical ? distance : undefined,
+    behavior: animate ? "smooth" : "auto",
+  };
+};

package/src/tabs/tabStyles.ts

@@ -9,6 +9,10 @@ declare module "react" {
     "--rmd-tab-active-color"?: string;
     "--rmd-tab-inactive-color"?: string;
     "--rmd-tab-disabled-color"?: string;
+
+    "--rmd-tab-size"?: string;
+    "--rmd-tab-offset"?: string | number;
+    "--rmd-tab-indicator-background"?: string;
   }
 }
 

package/src/tabs/useTabList.ts

@@ -18,14 +18,6 @@ import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useResizeObserver } from "../useResizeObserver.js";
 import { getTabRoleOnly, scrollTabIntoView } from "./utils.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-tab-size"?: string;
-    "--rmd-tab-offset"?: string | number;
-    "--rmd-tab-indicator-background"?: string;
-  }
-}
-
 const TAB_SIZE_VAR = "--rmd-tab-size";
 const TAB_OFFSET_VAR = "--rmd-tab-offset";
 
@@ -43,7 +35,7 @@ export interface TabListHookOptions {
   ref: Ref<HTMLDivElement> | undefined;
   style: CSSProperties | undefined;
   activeIndex: number;
-  setActiveIndex(nextActiveIndex: number): void;
+  setActiveIndex: (nextActiveIndex: number) => void;
   scrollButtons: boolean;
   activationMode: "manual" | "automatic";
   vertical: boolean;
@@ -115,6 +107,7 @@ export function useTabList(
         // this is kind of hacky -- the styles should update when switching between
         // RTL, but the RTL state isn't required for any styles. Just reference it
         // so that the hooks eslint rule doesn't show a warning...
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         isRTL;
 
         const activeTab = getTabRoleOnly(entry.target)[activeIndex];

package/src/tabs/useTabs.ts

@@ -136,11 +136,11 @@ export interface TabsImplementation<TabValue extends string | number = number> {
   direction: SlideDirection;
   setDirection: UseStateSetter<SlideDirection>;
   activeTab?: TabValue;
-  setActiveTab?(nextActiveTab: TabValue): void;
-  getTabProps(tabValue: TabValue): ProvidedTabProps;
-  getTabListProps(): ProvidedTabListProps;
-  getTabPanelProps(tabValue: TabValue): ProvidedTabPanelProps;
-  getTabPanelsProps<E extends HTMLElement>(): ProvidedTabPanelsProps<E>;
+  setActiveTab?: (nextActiveTab: TabValue) => void;
+  getTabProps: (tabValue: TabValue) => ProvidedTabProps;
+  getTabListProps: () => ProvidedTabListProps;
+  getTabPanelProps: (tabValue: TabValue) => ProvidedTabPanelProps;
+  getTabPanelsProps: <E extends HTMLElement>() => ProvidedTabPanelsProps<E>;
 }
 
 /**
@@ -180,7 +180,7 @@ export interface TabsImplementation<TabValue extends string | number = number> {
  *
  * @since 6.0.0
  */
-export function useTabs(): TabsImplementation<number> & {
+export function useTabs(): TabsImplementation & {
   activeTab: number;
   setActiveTab: number;
 };

package/src/tabs/utils.ts

@@ -44,41 +44,3 @@ export const scrollTabIntoView = (options: ScrollOptions): void => {
     container[scrollAttribute] = elementStart - firstOffset;
   }
 };
-
-/**
- * @since 6.0.0
- */
-export interface TabListScrollToOptions {
-  isRTL: boolean;
-  animate: boolean;
-  vertical: boolean;
-  increment: boolean;
-  container: HTMLElement;
-}
-
-/**
- * @since 6.0.0
- */
-export type GetTabListScrollToOptions = (
-  options: TabListScrollToOptions
-) => ScrollToOptions | undefined;
-
-/**
- * @since 6.0.0
- */
-export const getTabListScrollToOptions: GetTabListScrollToOptions = (
-  options
-) => {
-  const { isRTL, animate, vertical, increment, container } = options;
-  const { scrollLeft, scrollTop, scrollWidth, scrollHeight } = container;
-  const currentScroll = vertical ? scrollTop : scrollLeft;
-  const scrollDistance = vertical ? scrollHeight : scrollWidth;
-  const amount = (scrollDistance / 10) * (increment ? 1 : -1);
-  const distance = currentScroll + amount * (vertical || !isRTL ? 1 : -1);
-
-  return {
-    left: vertical ? undefined : distance,
-    top: vertical ? distance : undefined,
-    behavior: animate ? "smooth" : "auto",
-  };
-};

package/src/test-utils/matchMedia.ts

@@ -36,7 +36,7 @@ export type MatchMediaMatcher = (query: string) => boolean;
  * @returns `true` for phone media queries
  */
 export const matchPhone: MatchMediaMatcher = (query) =>
-  query.includes(`${DEFAULT_PHONE_MAX_WIDTH}`);
+  query.includes(DEFAULT_PHONE_MAX_WIDTH);
 
 /**
  * @see {@link spyOnMatchMedia} for usage
@@ -44,7 +44,7 @@ export const matchPhone: MatchMediaMatcher = (query) =>
  * @returns `true` for tablet media queries
  */
 export const matchTablet: MatchMediaMatcher = (query) =>
-  query.includes(`${DEFAULT_TABLET_MIN_WIDTH}`);
+  query.includes(DEFAULT_TABLET_MIN_WIDTH);
 
 /**
  * @see {@link spyOnMatchMedia} for usage
@@ -52,7 +52,7 @@ export const matchTablet: MatchMediaMatcher = (query) =>
  * @returns `true` for desktop media queries
  */
 export const matchDesktop: MatchMediaMatcher = (query) =>
-  query.includes(`${DEFAULT_DESKTOP_MIN_WIDTH}`);
+  query.includes(DEFAULT_DESKTOP_MIN_WIDTH);
 
 /**
  * @see {@link spyOnMatchMedia} for usage
@@ -60,7 +60,7 @@ export const matchDesktop: MatchMediaMatcher = (query) =>
  * @returns `true` for large desktop media queries
  */
 export const matchLargeDesktop: MatchMediaMatcher = (query) =>
-  query.includes(`${DEFAULT_DESKTOP_LARGE_MIN_WIDTH}`);
+  query.includes(DEFAULT_DESKTOP_LARGE_MIN_WIDTH);
 
 /**
  * @see {@link spyOnMatchMedia} for usage
@@ -101,7 +101,7 @@ export type MatchMediaSpiedFunction = jest.SpiedFunction<
    * // expect phone results
    * ```
    */
-  changeViewport(matcher: MatchMediaMatcher, disableAct?: boolean): void;
+  changeViewport: (matcher: MatchMediaMatcher, disableAct?: boolean) => void;
 };
 
 /**

package/src/test-utils/polyfills/TextDecoder.ts

@@ -1,7 +1,6 @@
 import { TextDecoder } from "node:util";
 
 if (typeof global.TextDecoder === "undefined") {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-expect-error browser TextDecoder does not support `null` while `node:util` does
   global.TextDecoder = TextDecoder;
 }

package/src/test-utils/timers.ts

@@ -1,13 +1,18 @@
 import { jest } from "@jest/globals";
 
+/**
+ * @since 6.0.0
+ */
+export type RafSpy = jest.SpiedFunction<typeof requestAnimationFrame>;
+
 /**
  * @example
  * ```ts
- * import { useImmediateRaf } from "@react-md/core/test-utils";
+ * import { testImmediateRaf } from "@react-md/core/test-utils";
  *
  * describe("some test suite", () => {
  *   it("should test something with requestAnimationFrame", () => {
- *     const raf = useImmediateRaf();
+ *     const raf = testImmediateRaf();
  *
  *     // do some testing with requestAnimationFrame
  *
@@ -19,7 +24,7 @@ import { jest } from "@jest/globals";
  *
  * @example Automatic Cleanup
  * ```ts
- * import { useImmediateRaf } from "@react-md/core/test-utils";
+ * import { testImmediateRaf } from "@react-md/core/test-utils";
  *
  * afterEach(() => {
  *   jest.restoreAllMocks();
@@ -27,7 +32,7 @@ import { jest } from "@jest/globals";
  *
  * describe("some test suite", () => {
  *   it("should test something with requestAnimationFrame", () => {
- *     const raf = useImmediateRaf();
+ *     const raf = testImmediateRaf();
  *
  *     // do some testing with requestAnimationFrame
  *   });
@@ -36,9 +41,7 @@ import { jest } from "@jest/globals";
  *
  * @since 6.0.0
  */
-export const useImmediateRaf = (): jest.SpiedFunction<
-  typeof requestAnimationFrame
-> =>
+export const testImmediateRaf = (): RafSpy =>
   jest.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
     cb(0);
     return 0;

package/src/theme/LocalStorageColorSchemeProvider.tsx

@@ -1,8 +1,10 @@
 "use client";
 import { type ReactElement, type ReactNode } from "react";
 import { useLocalStorage } from "../useLocalStorage.js";
-import { ColorSchemeProvider, type ColorSchemeMode } from "./useColorScheme.js";
+import { type ColorSchemeMode } from "./types.js";
+import { ColorSchemeProvider } from "./useColorScheme.js";
 import { useColorSchemeProvider } from "./useColorSchemeProvider.js";
+import { isColorSchemeMode } from "./isColorScheme.js";
 
 /**
  * @since 6.0.0
@@ -115,9 +117,7 @@ export function LocalStorageColorSchemeProvider(
       key: localStorageKey,
       defaultValue: defaultColorSchemeMode,
       deserializer: (item) =>
-        item === "light" || item === "dark" || item === "system"
-          ? item
-          : defaultColorSchemeMode,
+        isColorSchemeMode(item) ? item : defaultColorSchemeMode,
     });
 
   const value = useColorSchemeProvider({

package/src/theme/ThemeProvider.tsx

@@ -384,9 +384,9 @@ export function ThemeProvider(props: ThemeProviderProps): ReactElement {
     // NOTE: This will not be correct the first time a new theme is lazy-loaded
     // and applied. It might be good to have a way to manually force this flow
     // again?
-    const frame = window.requestAnimationFrame(() =>
-      setDerivedTheme(getDerivedTheme(document.documentElement))
-    );
+    const frame = window.requestAnimationFrame(() => {
+      setDerivedTheme(getDerivedTheme(document.documentElement));
+    });
 
     return () => {
       window.cancelAnimationFrame(frame);

package/src/theme/isColorScheme.ts

@@ -0,0 +1,22 @@
+import { type ColorSchemeMode, type ColorScheme } from "./types.js";
+
+/**
+ * A type assertion helper to check if a value is a valid {@link ColorScheme}
+ * when it is pulled from unknown sources (like local storage).
+ *
+ * @since 6.0.0
+ */
+export function isColorScheme(value: unknown): value is ColorScheme {
+  return value === "light" || value === "dark";
+}
+
+/**
+ * A type assertion helper to check if a value is a valid
+ * {@link ColorSchemeMode} when it is pulled from unknown sources (like local
+ * storage).
+ *
+ * @since 6.0.0
+ */
+export function isColorSchemeMode(value: unknown): value is ColorSchemeMode {
+  return isColorScheme(value) || value === "system";
+}

package/src/theme/types.ts

@@ -1,4 +1,5 @@
-import type { CSSProperties } from "react";
+import { type CSSProperties } from "react";
+import { type UseStateSetter } from "../types.js";
 
 /**
  * @since 6.0.0
@@ -36,3 +37,68 @@ export type DefinedCustomProperty<Property = keyof CSSProperties> =
  * @since 6.0.0
  */
 export type DefinedCSSVariableName = DefinedCustomProperty;
+
+/**
+ * @since 6.0.0
+ */
+export interface CSSVariable<
+  Name extends CSSVariableName = DefinedCSSVariableName,
+> {
+  name: Name;
+  value: string | number;
+}
+
+/**
+ * @since 6.0.0
+ */
+export type CSSVariablesProperties<
+  Name extends CSSVariableName = DefinedCSSVariableName,
+> = {
+  [key in Name]?: string | number;
+};
+
+/**
+ * @since 6.0.0
+ */
+export type ReadonlyCSSVariableList<
+  Name extends CSSVariableName = DefinedCSSVariableName,
+> = readonly Readonly<CSSVariable<Name>>[];
+
+/** @since 6.0.0 */
+export type ColorScheme = "light" | "dark";
+
+/** @since 6.0.0 */
+export type ColorSchemeMode = ColorScheme | "system";
+
+/**
+ * @since 6.0.0
+ */
+export interface ColorSchemeModeBehavior {
+  /**
+   * The current color scheme mode that is being used by your app that should
+   * default to the `$color-scheme` SCSS variable. If the
+   * {@link setColorSchemeMode} is called, this will update to that new value.
+   *
+   * TODO: Figure out how to document this
+   *
+   * - `colorScheme` - only `light` or `dark` -- only useful when the `colorSchemeMode` is set to `system`
+   * - `colorSchemeMode` - current **user** defined color scheme behavior? should default to `$color-scheme`, but will change based on `setColorSchemeMode`
+   */
+  colorSchemeMode: ColorSchemeMode;
+
+  /**
+   * A function to update the color scheme.
+   *
+   * @see {@link useColorScheme} for an example usage
+   */
+  setColorSchemeMode: UseStateSetter<ColorSchemeMode>;
+}
+
+/** @since 6.0.0 */
+export interface ColorSchemeContext extends ColorSchemeModeBehavior {
+  /**
+   * The current color scheme that is being used. This is only useful when the
+   * {@link colorSchemeMode} is set to `"system"`.
+   */
+  colorScheme: ColorScheme;
+}

package/src/theme/useCSSVariables.ts

@@ -1,33 +1,10 @@
 "use client";
-import type { RefObject } from "react";
-import { useEffect, useMemo } from "react";
-import type { CSSVariableName, DefinedCSSVariableName } from "./types.js";
-
-/**
- * @since 6.0.0
- */
-export interface CSSVariable<
-  Name extends CSSVariableName = DefinedCSSVariableName,
-> {
-  name: Name;
-  value: string | number;
-}
-
-/**
- * @since 6.0.0
- */
-export type CSSVariablesProperties<
-  Name extends CSSVariableName = DefinedCSSVariableName,
-> = {
-  [key in Name]?: string | number;
-};
-
-/**
- * @since 6.0.0
- */
-export type ReadonlyCSSVariableList<
-  Name extends CSSVariableName = DefinedCSSVariableName,
-> = readonly Readonly<CSSVariable<Name>>[];
+import { type RefObject, useEffect, useMemo } from "react";
+import {
+  type CSSVariableName,
+  type CSSVariablesProperties,
+  type ReadonlyCSSVariableList,
+} from "./types.js";
 
 /**
  * @example Applying Variables the root html element
@@ -110,7 +87,7 @@ export function useCSSVariables<Name extends CSSVariableName>(
 export function useCSSVariables<Name extends CSSVariableName>(
   variables: ReadonlyCSSVariableList<Name>,
   rootNodeOrInlineStyle?: RefObject<HTMLElement> | HTMLElement | boolean
-): CSSVariablesProperties<Name> | void {
+): CSSVariablesProperties<Name> | undefined {
   useEffect(() => {
     if (rootNodeOrInlineStyle === true || !variables.length) {
       return;

package/src/theme/useColorScheme.ts

@@ -1,45 +1,6 @@
 "use client";
 import { createContext, useContext } from "react";
-import type { UseStateSetter } from "../types.js";
-
-/** @since 6.0.0 */
-export type ColorScheme = "light" | "dark";
-
-/** @since 6.0.0 */
-export type ColorSchemeMode = ColorScheme | "system";
-
-/**
- * @since 6.0.0
- */
-export interface ColorSchemeModeBehavior {
-  /**
-   * The current color scheme mode that is being used by your app that should
-   * default to the `$color-scheme` SCSS variable. If the
-   * {@link setColorSchemeMode} is called, this will update to that new value.
-   *
-   * TODO: Figure out how to document this
-   *
-   * - `colorScheme` - only `light` or `dark` -- only useful when the `colorSchemeMode` is set to `system`
-   * - `colorSchemeMode` - current **user** defined color scheme behavior? should default to `$color-scheme`, but will change based on `setColorSchemeMode`
-   */
-  colorSchemeMode: ColorSchemeMode;
-
-  /**
-   * A function to update the color scheme.
-   *
-   * @see {@link useColorScheme} for an example usage
-   */
-  setColorSchemeMode: UseStateSetter<ColorSchemeMode>;
-}
-
-/** @since 6.0.0 */
-export interface ColorSchemeContext extends ColorSchemeModeBehavior {
-  /**
-   * The current color scheme that is being used. This is only useful when the
-   * {@link colorSchemeMode} is set to `"system"`.
-   */
-  colorScheme: ColorScheme;
-}
+import { type ColorSchemeContext } from "./types.js";
 
 const context = createContext<ColorSchemeContext>({
   colorScheme: "light",

package/src/theme/useColorSchemeMetaTag.ts

@@ -1,6 +1,6 @@
 "use client";
 import { useEffect } from "react";
-import { type ColorScheme } from "./useColorScheme.js";
+import { type ColorScheme } from "./types.js";
 
 /**
  * @since 6.0.0

package/src/theme/useColorSchemeProvider.ts

@@ -6,9 +6,9 @@ import {
   type ColorSchemeContext,
   type ColorSchemeMode,
   type ColorSchemeModeBehavior,
-} from "./useColorScheme.js";
+} from "./types.js";
 import { useColorSchemeMetaTag } from "./useColorSchemeMetaTag.js";
-import { usePrefersDarkTheme } from "./usePrefersColorScheme.js";
+import { usePrefersDarkTheme } from "./usePrefersDarkScheme.js";
 
 /**
  * @since 6.0.0

package/src/tooltip/useTooltip.ts

@@ -122,13 +122,13 @@ export interface TooltipPositioningOptions {
 export interface TooltippedElementEventHandlers<
   E extends HTMLElement = HTMLButtonElement,
 > {
-  onBlur?(event: FocusEvent<E>): void;
-  onFocus?(event: FocusEvent<E>): void;
-  onMouseEnter?(event: MouseEvent<E>): void;
-  onMouseLeave?(event: MouseEvent<E>): void;
-  onTouchStart?(event: TouchEvent<E>): void;
-  onTouchEnd?(event: TouchEvent<E>): void;
-  onContextMenu?(event: MouseEvent<E>): void;
+  onBlur?: (event: FocusEvent<E>) => void;
+  onFocus?: (event: FocusEvent<E>) => void;
+  onMouseEnter?: (event: MouseEvent<E>) => void;
+  onMouseLeave?: (event: MouseEvent<E>) => void;
+  onTouchStart?: (event: TouchEvent<E>) => void;
+  onTouchEnd?: (event: TouchEvent<E>) => void;
+  onContextMenu?: (event: MouseEvent<E>) => void;
 }
 
 /**
@@ -254,6 +254,12 @@ export interface TooltipOptions<
    * @since 6.0.0
    */
   overflowOnly?: boolean;
+
+  /**
+   * @see {@link FixedPositioningOptions.disabled}
+   * @defaultValue `false`
+   */
+  disableFixedPositioning?: boolean;
 }
 
 /**
@@ -265,7 +271,7 @@ export interface ProvidedTooltipProps<E extends HTMLElement = HTMLSpanElement>
   id: string;
   ref: Ref<E>;
   dense: boolean;
-  style: CSSProperties;
+  style: CSSProperties | undefined;
   visible: boolean;
   position: SimplePosition;
 }
@@ -292,7 +298,7 @@ export interface TooltipImplementation<
    * This is a wrapper around the {@link setVisible} behavior that will also
    * clear any pending timeouts.
    */
-  hideTooltip(): void;
+  hideTooltip: () => void;
 
   /**
    * @since 6.0.0
@@ -422,6 +428,7 @@ export function useTooltip<
     onEntered = noop,
     onExited,
     overflowOnly,
+    disableFixedPositioning,
   } = options;
 
   const fallbackId = useId();
@@ -469,6 +476,7 @@ export function useTooltip<
     fixedTo: elementRef,
     anchor: getAnchor(position),
     disableSwapping: disableSwapping ?? !!determinedPosition,
+    disabled: disableFixedPositioning,
     getFixedPositionOptions() {
       let tooltipSpacing = dense ? denseSpacing : spacing;
       const tooltip = tooltipRef.current;

package/src/transition/types.ts

@@ -478,7 +478,7 @@ export interface TransitionHookReturnValue<E extends HTMLElement>
    *
    * @param stage - The {@link TransitionStage} to set to
    */
-  transitionTo(stage: TransitionStage): void;
+  transitionTo: (stage: TransitionStage) => void;
 }
 
 /**

package/src/transition/useCarousel.ts

@@ -22,13 +22,13 @@ export interface CarouselImplementation extends CarouselState {
    * Increments the carousel slide active index by 1 ensuring it does not
    * advance past the {@link CarouselOptions.totalSlides} index.
    */
-  increment(): void;
+  increment: () => void;
 
   /**
    * Decrements the carousel slide active index by 1 and prevents decrementing
    * past 0.
    */
-  decrement(): void;
+  decrement: () => void;
 
   /**
    * This can be used to manually control the {@link paused} state.
@@ -38,7 +38,7 @@ export interface CarouselImplementation extends CarouselState {
   /**
    * Toggles the {@link paused} state.
    */
-  togglePaused(): void;
+  togglePaused: () => void;
 
   /**
    * A convenience wrapper for the {@link setCarouselSlideState} that will

package/src/transition/useTransition.ts

@@ -206,6 +206,7 @@ export function useTransition<E extends HTMLElement>(
 
     if (reflow && ref.current && stage !== "exited" && stage !== "entered") {
       // force reflow by accessing scrollTop
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
       ref.current.scrollTop;
     }
 

package/src/tree/TreeItem.tsx

@@ -6,6 +6,7 @@ import {
   type ReactNode,
   type Ref,
 } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
 import { ListItemChildren } from "../list/ListItemChildren.js";
@@ -27,7 +28,8 @@ import { type DefaultTreeItemNode } from "./types.js";
  */
 export interface TreeItemProps
   extends Omit<DefaultTreeItemNode, "parentId">,
-    HTMLAttributes<HTMLLIElement> {
+    HTMLAttributes<HTMLLIElement>,
+    ComponentWithRippleProps {
   /**
    * @defaultValue `"tree-item-" + useId()`
    */
@@ -140,6 +142,7 @@ export function TreeItem(props: TreeItemProps): ReactElement {
     onTouchEnd,
     onTouchMove,
     contentRef,
+    disableRipple,
     ...remaining
   } = props;
 
@@ -179,15 +182,18 @@ export function TreeItem(props: TreeItemProps): ReactElement {
     lookup.itemToElement[itemId] = id;
 
     return () => {
+      /* eslint-disable @typescript-eslint/no-dynamic-delete */
       delete lookup.disabledItems[itemId];
       delete lookup.expandable[itemId];
       delete lookup.elementToItem[id];
       delete lookup.itemToElement[itemId];
+      /* eslint-enable @typescript-eslint/no-dynamic-delete */
     };
   }, [id, metadataLookup, itemId, isLeafNode, disabled, depth]);
 
   const { pressedClassName, ripples, handlers } =
     useElementInteraction<HTMLLIElement>({
+      mode: disableRipple ? "none" : undefined,
       onBlur,
       onClick(event) {
         onClick?.(event);

package/src/tree/TreeItemExpander.tsx

@@ -60,7 +60,7 @@ export function TreeItemExpander(props: TreeItemExpanderProps): ReactElement {
   }
 
   const isCloneable = isValidElement(icon);
-  let clickProps: { onClick: MouseEventHandler<Element> } | undefined;
+  let clickProps: { onClick: MouseEventHandler } | undefined;
   if (expansionMode === "manual" && !disabled) {
     clickProps = {
       onClick(event) {