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

package/src/form/useCombobox.ts

@@ -1,5 +1,6 @@
 "use client";
 import {
+  useCallback,
   useRef,
   type FocusEventHandler,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -38,7 +39,7 @@ import {
 } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
-import { useToggle } from "../useToggle.js";
+import { useEnsuredState } from "../useEnsuredState.js";
 import { tryToSubmitRelatedForm } from "./utils.js";
 
 const noop = (): void => {
@@ -67,8 +68,8 @@ export type SupportedComboboxPopup = "listbox" | "grid" | "dialog";
 export interface ComboboxKeyboardMovementData<
   E extends HTMLElement = HTMLInputElement,
 > extends KeyboardMovementExtensionData<E> {
-  show(): void;
-  hide(): void;
+  show: () => void;
+  hide: () => void;
   visible: boolean;
   focusLast: NonNullMutableRef<boolean>;
 }
@@ -100,10 +101,45 @@ export type ComboboxKeyboardMovementOptions<
 /**
  * @since 6.0.0
  */
-export interface BaseComboboxOptions<
+export interface ComboboxVisibilityOptions {
+  /**
+   * This can be used to control the popup's visibility and **must** be used
+   * along with {@link setVisible}.
+   */
+  visible?: boolean;
+
+  /**
+   * Used to control the popup's visibility and should generally be a `useState`
+   * setter.
+   *
+   * @example Controlling the Visibility
+   * ```tsx
+   * const [visible, setVisible] = useState(false);
+   *
+   * useCombobox({
+   *   visible,
+   *   setVisible,
+   * });
+   * ```
+   */
+  setVisible?: UseStateSetter<boolean>;
+
+  /**
+   * Set this to `true` to have the combobox's popup visible by default.
+   *
+   * @defaultValue `false`
+   */
+  defaultVisible?: UseStateInitializer<boolean>;
+}
+
+/**
+ * @since 6.0.0
+ */
+export interface ConfigurableComboboxOptions<
   ComboboxEl extends HTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends ComboboxKeyboardMovementOptions<ComboboxEl> {
+> extends ComboboxKeyboardMovementOptions<ComboboxEl>,
+    ComboboxVisibilityOptions {
   /**
    * This is the {@link InputHTMLAttributes.form} attribute and is used to
    * attempt submitting a form when the enter key is pressed.
@@ -130,7 +166,7 @@ export interface BaseComboboxOptions<
   /**
    * @defaultValue `false`
    */
-  defaultVisible?: UseStateInitializer<boolean>;
+  multiselect?: boolean;
 
   extendKeyDown?: ExtendComboboxKeyDown<ComboboxEl>;
 
@@ -142,18 +178,25 @@ export interface BaseComboboxOptions<
   getDefaultFocusedIndex?: GetDefaultFocusedIndex;
 }
 
+/**
+ * @since 6.0.0
+ */
+export interface ComboboxGetEnterDefaultFocusedIndexOptions {
+  focusLast: boolean;
+  focusables: readonly HTMLElement[];
+  currentFocusIndex: number;
+}
+
 /**
  * @since 6.0.0
  */
 export interface ComboboxOptions<
   ComboboxEl extends HTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends BaseComboboxOptions<ComboboxEl, PopupEl> {
-  getEnterDefaultFocusedIndex(options: {
-    focusLast: boolean;
-    focusables: readonly HTMLElement[];
-    currentFocusIndex: number;
-  }): number;
+> extends ConfigurableComboboxOptions<ComboboxEl, PopupEl> {
+  getEnterDefaultFocusedIndex: (
+    options: ComboboxGetEnterDefaultFocusedIndexOptions
+  ) => number;
 }
 
 /**
@@ -180,6 +223,7 @@ export interface ComboboxWidgetProps<
 export interface ComboboxWidgetPopupProps<
   PopupEl extends HTMLElement = HTMLElement,
 > {
+  "aria-multiselectable": true | undefined;
   id: string;
   ref: RefCallback<PopupEl>;
   role: "listbox" | "dialog" | "grid";
@@ -215,16 +259,12 @@ export interface ProvidedComboboxMenuProps<
 > extends Required<ComboboxTransitionCallbacks>,
     ComboboxWidgetPopupProps<PopupEl> {
   visible: boolean;
-  onRequestClose(): void;
-
+  onRequestClose: () => void;
   /** @defaultValue `"min"` */
   width: PositionWidth;
-
   /** @defaultValue `BELOW_CENTER_ANCHOR` */
   anchor: PositionAnchor;
-
   fixedTo: RefObject<HTMLElement>;
-
   sheetProps: MenuSheetConfigurableProps &
     Required<ComboboxTransitionCallbacks>;
 }
@@ -236,14 +276,6 @@ export interface ComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement>
   extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>,
     ProvidedComboboxMenuProps<PopupEl> {}
 
-/**
- * Since the combobox usually uses the `Menu` as a popup element, this is a
- * helper util to create the required props and merge any additional props
- * with reasonable defaults.
- */
-export type ComboboxGetMenuProps<PopupEl extends HTMLElement = HTMLDivElement> =
-  (props?: ConfigurableComboboxMenuProps) => ComboboxMenuProps<PopupEl>;
-
 /**
  * @since 6.0.0
  */
@@ -251,8 +283,8 @@ export interface ComboboxImplementation<
   ComboboxEl extends HTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
 > extends KeyboardMovementProviderImplementation<ComboboxEl> {
-  show(): void;
-  hide(): void;
+  show: () => void;
+  hide: () => void;
   visible: boolean;
   setVisible: UseStateSetter<boolean>;
   focusLast: NonNullMutableRef<boolean>;
@@ -260,11 +292,17 @@ export interface ComboboxImplementation<
   popupProps: ComboboxWidgetPopupProps<PopupEl>;
   comboboxRef: RefObject<ComboboxEl>;
   comboboxProps: ComboboxWidgetProps<ComboboxEl>;
-
-  getMenuProps: ComboboxGetMenuProps<PopupEl>;
-  getTransitionCallbacks(
+  /**
+   * Since the combobox usually uses the `Menu` as a popup element, this is a
+   * helper util to create the required props and merge any additional props
+   * with reasonable defaults.
+   */
+  getMenuProps: (
+    overrides?: ConfigurableComboboxMenuProps
+  ) => ComboboxMenuProps<PopupEl>;
+  getTransitionCallbacks: (
     options: ComboboxTransitionOptions
-  ): Required<ComboboxTransitionCallbacks>;
+  ) => Required<ComboboxTransitionCallbacks>;
 }
 
 /**
@@ -283,14 +321,17 @@ export function useCombobox<
     onFocus,
     onKeyDown,
     searchable,
+    multiselect,
     isNegativeOneAllowed,
     loopable,
     disabled,
+    visible: propVisible,
+    setVisible: propSetVisible,
+    defaultVisible = false,
     comboboxId: propComboboxId,
     comboboxRef: propComboboxRef,
     popupId: propPopupId,
     popupRef: propPopupRef,
-    defaultVisible = false,
     onFocusChange = noop,
     extendKeyDown = noop,
     getFocusableElements = getNonDisabledOptions,
@@ -298,12 +339,18 @@ export function useCombobox<
     getDefaultFocusedIndex,
   } = options;
 
-  const {
-    toggled: visible,
-    enable: show,
-    disable: hide,
-    setToggled: setVisible,
-  } = useToggle(defaultVisible);
+  const [visible, setVisible] = useEnsuredState({
+    value: propVisible,
+    setValue: propSetVisible,
+    defaultValue: defaultVisible,
+  });
+  const show = useCallback(() => {
+    setVisible(true);
+  }, [setVisible]);
+  const hide = useCallback(() => {
+    setVisible(false);
+  }, [setVisible]);
+
   const popupId = useEnsuredId(propPopupId, "combobox-popup");
   const comboboxId = useEnsuredId(propComboboxId, "combobox");
   const [comboboxRef, comboboxRefCallback] = useEnsuredRef(propComboboxRef);
@@ -460,6 +507,7 @@ export function useCombobox<
   };
 
   const popupProps: ComboboxWidgetPopupProps<PopupEl> = {
+    "aria-multiselectable": multiselect || undefined,
     id: popupId,
     ref: popupRefCallback,
     role: popup,

package/src/form/useEditableCombobox.ts

@@ -2,33 +2,63 @@
 import { useRef } from "react";
 import { isTypeEvent } from "../movement/utils.js";
 import {
-  useCombobox,
-  type BaseComboboxOptions,
   type ComboboxImplementation,
+  type ComboboxWidgetProps,
+  type ConfigurableComboboxOptions,
+  useCombobox,
 } from "./useCombobox.js";
-import { isChangeableHTMLElement, triggerManualChangeEvent } from "./utils.js";
+import {
+  type EditableHTMLElement,
+  isChangeableHTMLElement,
+  triggerManualChangeEvent,
+} from "./utils.js";
 
 /**
  * @since 6.0.0
  */
-export interface EditableComboboxOptions<
+export type EditableComboboxOptions<
   ComboboxEl extends HTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends BaseComboboxOptions<ComboboxEl, PopupEl> {}
+> = ConfigurableComboboxOptions<ComboboxEl, PopupEl>;
+
+/**
+ * @since 6.0.0
+ */
+export interface EditableComboboxWidgetProps<
+  ComboboxEl extends EditableHTMLElement = HTMLInputElement,
+> extends ComboboxWidgetProps<ComboboxEl> {
+  /**
+   * This is set to `off` to prevent browser from providing their own
+   * suggestions.
+   *
+   * @defaultValue `"off"`
+   */
+  autoComplete: string;
+
+  /**
+   * This is set to `"none"` to prevent browsers from automatically capitalizing
+   * the first letter.
+   *
+   * @defaultValue `"none"`
+   */
+  autoCapitalize: string;
+}
 
 /**
  * @since 6.0.0
  */
 export interface EditableComboboxImplementation<
-  ComboboxEl extends HTMLElement = HTMLInputElement,
+  ComboboxEl extends EditableHTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends ComboboxImplementation<ComboboxEl, PopupEl> {}
+> extends ComboboxImplementation<ComboboxEl, PopupEl> {
+  comboboxProps: EditableComboboxWidgetProps<ComboboxEl>;
+}
 
 /**
  * @since 6.0.0
  */
 export function useEditableCombobox<
-  ComboboxEl extends HTMLElement = HTMLInputElement,
+  ComboboxEl extends EditableHTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
 >(
   options: EditableComboboxOptions<ComboboxEl, PopupEl> = {}
@@ -129,6 +159,11 @@ export function useEditableCombobox<
 
   return {
     ...combobox,
+    comboboxProps: {
+      ...combobox.comboboxProps,
+      autoCapitalize: "none",
+      autoComplete: "off",
+    },
     getMenuProps(props) {
       return {
         // override the inherited renderAsSheet context since the sheet makes it

package/src/form/useRadioGroup.ts

@@ -91,7 +91,7 @@ export type GetRadioGroupProps<V extends string | number> = (
 
 /** @since 6.0.0 */
 export interface RadioGroupImplementation<V extends string | number> {
-  reset(): void;
+  reset: () => void;
   value: V;
   setValue: UseStateSetter<V>;
   getRadioProps: GetRadioGroupProps<V>;
@@ -99,11 +99,11 @@ export interface RadioGroupImplementation<V extends string | number> {
 
 export type GetMenuItemRadioGroupProps<V extends string | number> = (
   value: V
-) => Readonly<{ checked: boolean; onCheckedChange(): void }>;
+) => Readonly<{ checked: boolean; onCheckedChange: () => void }>;
 
 /** @since 6.0.0 */
 export interface MenuItemRadioGroupImplementation<V extends string | number> {
-  reset(): void;
+  reset: () => void;
   value: V;
   setValue: UseStateSetter<V>;
   getRadioProps: GetMenuItemRadioGroupProps<V>;
@@ -111,17 +111,17 @@ export interface MenuItemRadioGroupImplementation<V extends string | number> {
 
 /** @since 6.0.0 */
 export interface CombinedRadioGroupReturnValue<V extends string | number> {
-  reset(): void;
+  reset: () => void;
   value: V;
   setValue: UseStateSetter<V>;
-  getRadioProps?(value: V): {
+  getRadioProps?: (value: V) => {
     name?: string;
     value?: V;
     checked: boolean;
     error?: boolean;
     required?: boolean;
     onChange?: ChangeEventHandler<HTMLInputElement>;
-    onCheckedChange?(): void;
+    onCheckedChange?: () => void;
     onInvalid?: FormEventHandler<HTMLInputElement>;
   };
 }

package/src/form/useSelectCombobox.ts

@@ -1,8 +1,8 @@
 "use client";
 import {
   useCombobox,
-  type BaseComboboxOptions,
   type ComboboxImplementation,
+  type ConfigurableComboboxOptions,
 } from "./useCombobox.js";
 
 /**
@@ -11,7 +11,7 @@ import {
 export interface SelectComboboxOptions<
   ComboboxEl extends HTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends BaseComboboxOptions<ComboboxEl, PopupEl> {
+> extends ConfigurableComboboxOptions<ComboboxEl, PopupEl> {
   value: string;
   values: readonly string[];
 }
@@ -19,10 +19,10 @@ export interface SelectComboboxOptions<
 /**
  * @since 6.0.0
  */
-export interface SelectComboboxImplementation<
+export type SelectComboboxImplementation<
   ComboboxEl extends HTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends ComboboxImplementation<ComboboxEl, PopupEl> {}
+> = ComboboxImplementation<ComboboxEl, PopupEl>;
 
 /**
  * @since 6.0.0

package/src/form/useTextField.ts

@@ -317,7 +317,7 @@ export interface TextFieldImplementation<
   E extends HTMLInputElement | HTMLTextAreaElement,
 > extends TextFieldHookState {
   fieldRef: RefObject<E>;
-  reset(): void;
+  reset: () => void;
   setState: UseStateSetter<Readonly<TextFieldHookState>>;
   fieldProps: ProvidedTextFieldProps<E>;
 }

package/src/hoverMode/useHoverMode.ts

@@ -34,9 +34,9 @@ export interface ControlledHoverModeOptions
  * @since 6.0.0
  */
 export interface ControlledHoverModeImplementation {
-  startShowFlow(id?: string | MouseEvent): void;
-  startHideFlow(): void;
-  clearVisibilityTimeout(): void;
+  startShowFlow: (id?: string | MouseEvent) => void;
+  startHideFlow: () => void;
+  clearVisibilityTimeout: () => void;
 }
 
 /**

package/src/hoverMode/useHoverModeProvider.ts

@@ -53,23 +53,23 @@ export interface SimpleHoverModeContext {
    *
    * @see {@link hoverTimeoutRef} for an example.
    */
-  enableHoverMode(activeId: string): void;
+  enableHoverMode: (activeId: string) => void;
 
   /**
    * Disables all hover mode behavior by clearing all timeouts and resetting
    * internal state.
    */
-  disableHoverMode(): void;
+  disableHoverMode: () => void;
 
   /**
    * @see {@link leaveTimeoutRef} for an example.
    */
-  startDisableTimer(): void;
+  startDisableTimer: () => void;
 
   /**
    * @see {@link hoverTimeoutRef} for an example.
    */
-  clearDisableTimer(): void;
+  clearDisableTimer: () => void;
 }
 
 /**

package/src/icon/FontIcon.tsx

@@ -18,9 +18,11 @@ export interface FontIconProps
 
   /**
    * Any children to render to create the font icon. This is required for
-   * material-icons.
+   * material-icons. For example:
    *
-   * @example `<FontIcon>clear</FontIcon>`
+   * ```tsx
+   * <FontIcon>clear</FontIcon>
+   * ```
    */
   children?: ReactNode;
 }

package/src/icon/TextIconSpacing.tsx

@@ -26,7 +26,7 @@ export interface TextIconSpacingProps {
    * If this is not a valid react element, the icon will be wrapped in a
    * `<span>` instead with the class names applied.
    */
-  icon?: ReactElement | ReactNode;
+  icon?: ReactElement<{ className?: string }> | ReactNode;
 
   /**
    * Boolean if the icon should appear after the text instead of before.

package/src/icon/iconConfig.tsx

@@ -122,6 +122,13 @@ export interface ConfigurableIcons {
    */
   radioChecked?: ReactNode;
 
+  /**
+   * The icon to use when removing elements.
+   *
+   * @defaultValue `<FontIcon>cancel</FontIcon>`
+   */
+  remove?: ReactNode;
+
   /**
    * The icon to use for showing that something has been selected that is not a
    * radio or checkbox. This is used internally for the `Chip` in the
@@ -168,6 +175,7 @@ export type ConfigurableIconName = keyof ConfigurableIcons;
  * import { ICON_CONFIG } from "@react-md/core";
  * import ArrowDropDownIcon from "@react-md/material-icons/ArrowDropDownIcon";
  * import ArrowUpwardIcon from "@react-md/material-icons/ArrowUpwardIcon";
+ * import CancelIcon from "@react-md/material-icons/CancelIcon";
  * import CheckBoxIcon from "@react-md/material-icons/CheckBoxIcon";
  * import CheckBoxOutlineBlankIcon from "@react-md/material-icons/CheckBoxOutlineBlankIcon";
  * import CheckIcon from "@react-md/material-icons/CheckIcon";
@@ -198,6 +206,7 @@ export type ConfigurableIconName = keyof ConfigurableIcons;
  * ICON_CONFIG.password = <RemoveRedEyeIcon />;
  * ICON_CONFIG.radio = <RadioButtonUncheckedIcon />;
  * ICON_CONFIG.radioChecked = <RadioButtonCheckedIcon />;
+ * ICON_CONFIG.remove = <CancelIcon />;
  * ICON_CONFIG.selected = <CheckIcon />;
  * ICON_CONFIG.sort = <ArrowUpwardIcon />;
  * ICON_CONFIG.upload = <FileUploadIcon />;
@@ -222,6 +231,7 @@ export const ICON_CONFIG: ConfiguredIcons = {
   password: <FontIcon>remove_red_eye</FontIcon>,
   radio: <FontIcon>radio_button_unchecked</FontIcon>,
   radioChecked: <FontIcon>radio_button_checked</FontIcon>,
+  remove: <FontIcon>cancel</FontIcon>,
   selected: <FontIcon>check</FontIcon>,
   sort: <FontIcon>arrow_upward</FontIcon>,
   upload: <FontIcon>file_upload</FontIcon>,
@@ -236,6 +246,7 @@ export const ICON_CONFIG: ConfiguredIcons = {
  * import { configureIcons } from "@react-md/core";
  * import ArrowDropDownIcon from "@react-md/material-icons/ArrowDropDownIcon";
  * import ArrowUpwardIcon from "@react-md/material-icons/ArrowUpwardIcon";
+ * import CancelIcon from "@react-md/material-icons/CancelIcon";
  * import CheckBoxIcon from "@react-md/material-icons/CheckBoxIcon";
  * import CheckBoxOutlineBlankIcon from "@react-md/material-icons/CheckBoxOutlineBlankIcon";
  * import CheckIcon from "@react-md/material-icons/CheckIcon";
@@ -267,6 +278,7 @@ export const ICON_CONFIG: ConfiguredIcons = {
  *   password: <RemoveRedEyeIcon />,
  *   radio: <RadioButtonUncheckedIcon />,
  *   radioChecked: <RadioButtonCheckedIcon />,
+ *   remove: <CancelIcon />,
  *   selected: <CheckIcon />,
  *   sort: <ArrowUpwardIcon />,
  *   upload: <FileUploadIcon />,

package/src/interaction/UserInteractionModeProvider.tsx

@@ -53,13 +53,13 @@ export interface UserInteractionModeProviderProps {
  * to update component functionality and applying the following class names to
  * the `document.body`:
  *
- * - `"mouse-mode"`
- * - `"keyboard-mode"`
- * - `"touch-mode"`
+ * - `"rmd-mouse-mode"`
+ * - `"rmd-keyboard-mode"`
+ * - `"rmd-touch-mode"`
  *
  * Within `react-md`, these classes are used for the following behavior:
- * - only display `:focus` outlines while in `"keyboard-mode"`
- * - do not display `:hover` effects while in `"touch-mode"`
+ * - only display `:focus` outlines while in `"rmd-keyboard-mode"`
+ * - do not display `:hover` effects while in `"rmd-touch-mode"`
  *
  * @example Mount at the root of your app
  * ```tsx
@@ -136,8 +136,12 @@ export function UserInteractionModeProvider(
    * and I have no experience using them.
    */
   useEffect(() => {
-    const enableMouseMode = (): void => setMode("mouse");
-    const enableKeyboardMode = (): void => setMode("keyboard");
+    const enableMouseMode = (): void => {
+      setMode("mouse");
+    };
+    const enableKeyboardMode = (): void => {
+      setMode("keyboard");
+    };
 
     const handleTouchStart = (): void => {
       lastTouchTime.current = Date.now();
@@ -160,7 +164,7 @@ export function UserInteractionModeProvider(
       isTouchContextMenu.current = true;
     };
 
-    const className = `${mode}-mode`;
+    const className = `rmd-${mode}-mode`;
     document.body.classList.add(className);
     window.addEventListener("touchstart", handleTouchStart, true);
     if (mode === "mouse") {

package/src/interaction/types.ts

@@ -19,6 +19,25 @@ declare module "react" {
   }
 }
 
+/**
+ * @since 6.0.0
+ */
+export interface ComponentWithRippleProps {
+  /**
+   * Set this to `true` to disable the ripple behavior for this single component
+   * only. If all components should have the ripple disabled:
+   *
+   * ```ts
+   * INTERACTION_CONFIG.mode = "none";
+   * // or
+   * INTERACTION_CONFIG.mode = "press";
+   * ```
+   *
+   * @defaultValue `false`
+   */
+  disableRipple?: boolean;
+}
+
 /**
  * This is used to provide feedback to the user that they are interacting with
  * elements on the page. It is recommended to not set this to `"none"` unless
@@ -156,8 +175,8 @@ export type RippleStateList = readonly RippleState[];
  * @internal
  */
 export interface RippleTransitionCallbacks {
-  onEntered(ripple: RippleState): void;
-  onExited(ripple: RippleState): void;
+  onEntered: (ripple: RippleState) => void;
+  onExited: (ripple: RippleState) => void;
 }
 
 /**

package/src/interaction/useElementInteraction.tsx

@@ -12,6 +12,7 @@ import { useUserInteractionMode } from "./UserInteractionModeProvider.js";
 import { INTERACTION_CONFIG } from "./config.js";
 import type {
   ElementInteractionHandlers,
+  ElementInteractionMode,
   ElementInteractionState,
   RippleState,
   RippleStyle,
@@ -31,6 +32,13 @@ export const PRESSED_CLASS_NAME = "rmd-pressed";
 /** @since 6.0.0 */
 export interface ElementInteractionOptions<E extends HTMLElement>
   extends Partial<ElementInteractionHandlers<E>> {
+  /**
+   * This can be used to override the {@link INTERACTION_CONFIG.mode}
+   *
+   * @defaultValue `INTERACTION_CONFIG.mode`
+   */
+  mode?: ElementInteractionMode;
+
   /**
    * Boolean if the element is currently disabled which will prevent any of the
    * element interaction states from happening.
@@ -165,11 +173,10 @@ export function useElementInteraction<E extends HTMLElement>(
     onTouchEnd = noop,
     onTouchMove = noop,
     onDragStart = noop,
+    mode = INTERACTION_CONFIG.mode,
     disabled = false,
   } = options;
 
-  const { mode } = INTERACTION_CONFIG;
-
   const holding = useRef(false);
   const disableClick = useRef(false);
   const userMode = useUserInteractionMode();

package/src/interaction/utils.ts

@@ -1,9 +1,9 @@
-import type { KeyboardEvent, MouseEvent, TouchEvent } from "react";
+import { type KeyboardEvent, type MouseEvent, type TouchEvent } from "react";
 import { findSizingContainer } from "../positioning/utils.js";
-import type {
-  ElementInteractionState,
-  RippleState,
-  RippleStyle,
+import {
+  type ElementInteractionState,
+  type RippleState,
+  type RippleStyle,
 } from "./types.js";
 
 /** @internal */
@@ -61,8 +61,8 @@ export function getRippleStyle(
       ({ pageX, pageY } = event);
     }
 
-    x = pageX - (left + window.pageXOffset);
-    y = pageY - (top + window.pageYOffset);
+    x = pageX - (left + window.scrollX);
+    y = pageY - (top + window.scrollY);
   }
 
   const radius = getRadius(x, y, width, height);

package/src/layout/useExpandableLayout.ts

@@ -94,9 +94,9 @@ export interface ExpandableLayoutImplementation
   temporary: boolean;
   persistent: boolean;
   expanded: boolean;
-  expandNavigation(): void;
-  collapseNavigation(): void;
-  toggleNavigation(): void;
+  expandNavigation: () => void;
+  collapseNavigation: () => void;
+  toggleNavigation: () => void;
   appBarProps: ProvidedLayoutAppBarProps;
   mainProps: ProvidedLayoutMainProps;
   navToggleProps: ProvidedExpandableLayoutNavToggleProps;