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

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/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;

package/src/layout/useLayoutAppBarHeight.ts

@@ -1,7 +1,6 @@
 "use client";
 import { useMemo, type Ref, type RefCallback } from "react";
-import { type DefinedCSSVariableName } from "../theme/types.js";
-import { type CSSVariable } from "../theme/useCSSVariables.js";
+import { type CSSVariable } from "../theme/types.js";
 import { useElementSize } from "../useElementSize.js";
 
 declare module "react" {
@@ -16,7 +15,7 @@ declare module "react" {
  */
 export interface LayoutAppBarHeightResult {
   height: number | undefined;
-  variables: readonly CSSVariable<DefinedCSSVariableName>[];
+  variables: readonly CSSVariable[];
   appBarRef: RefCallback<HTMLDivElement>;
 }
 
@@ -75,7 +74,7 @@ export function useLayoutAppBarHeight(
     ref,
     disableWidth: true,
   });
-  const variables = useMemo<CSSVariable<DefinedCSSVariableName>[]>(() => {
+  const variables = useMemo<CSSVariable[]>(() => {
     if (Number.isNaN(height) || !observedOnce) {
       return [];
     }

package/src/layout/useTemporaryLayout.ts

@@ -56,8 +56,8 @@ export type ProvidedTemporaryLayoutAppBarProps = Required<
  */
 export interface TemporaryLayoutImplementation {
   visible: boolean;
-  showTemporaryNav(): void;
-  hideTemporaryNav(): void;
+  showTemporaryNav: () => void;
+  hideTemporaryNav: () => void;
   appBarProps: ProvidedTemporaryLayoutAppBarProps;
   mainProps: ProvidedTemporaryLayoutMainProps;
   navToggleProps: ProvidedLayoutNavToggleProps;

package/src/list/ListItem.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { forwardRef, type HTMLAttributes } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
 import { getListItemHeight } from "./getListItemHeight.js";
@@ -13,7 +14,8 @@ import { type ListItemChildrenProps, type ListItemHeight } from "./types.js";
  */
 export interface ListItemProps
   extends HTMLAttributes<HTMLLIElement>,
-    ListItemChildrenProps {
+    ListItemChildrenProps,
+    ComponentWithRippleProps {
   /**
    * @defaultValue `"button"`
    */
@@ -148,6 +150,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
       disableRightAddonCenteredMedia,
       multiline = false,
       disabled = false,
+      disableRipple,
       disabledOpacity = false,
       role = "button",
       onBlur,
@@ -173,6 +176,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
     }
 
     const { pressedClassName, ripples, handlers } = useElementInteraction({
+      mode: disableRipple ? "none" : undefined,
       onBlur,
       onClick,
       onKeyDown,

package/src/list/ListItemLink.tsx

@@ -4,6 +4,7 @@ import {
   type AnchorHTMLAttributes,
   type HTMLAttributes,
 } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
 import { type CustomLinkComponent } from "../link/Link.js";
@@ -16,7 +17,8 @@ import { type ListItemChildrenProps } from "./types.js";
 export interface ListItemLinkProps
   extends AnchorHTMLAttributes<HTMLAnchorElement>,
     ListItemClassNameOptions,
-    ListItemChildrenProps {
+    ListItemChildrenProps,
+    ComponentWithRippleProps {
   /** @defaultValue `"a"` */
   as?: CustomLinkComponent;
 
@@ -93,10 +95,12 @@ export const ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(
       role,
       tabIndex = disabled || role === "menuitem" ? -1 : undefined,
       children: propChildren,
+      disableRipple,
       ...remaining
     } = props;
 
     const { pressedClassName, ripples, handlers } = useElementInteraction({
+      mode: disableRipple ? "none" : undefined,
       onBlur,
       onClick,
       onKeyDown,

package/src/media-queries/useMediaQuery.ts

@@ -39,8 +39,9 @@ export function useMediaQuery(query: string, disabled = false): boolean {
     const result = window.matchMedia(query);
     setMatches(result.matches);
 
-    const updater = ({ matches }: MediaQueryListEvent): void =>
+    const updater = ({ matches }: MediaQueryListEvent): void => {
       setMatches(matches);
+    };
 
     result.addEventListener("change", updater);
     return () => {

package/src/menu/Menu.tsx

@@ -117,7 +117,13 @@ export interface MenuConfigurationProps extends CalculateFixedPositionOptions {
   closeOnResize?: boolean;
 
   /** @see {@link FixedPositioningOptions.getFixedPositionOptions} */
-  getFixedPositionOptions?(): CalculateFixedPositionOptions;
+  getFixedPositionOptions?: () => CalculateFixedPositionOptions;
+
+  /**
+   * @defaultValue `false`
+   * @see {@link FixedPositioningOptions.disabled}
+   */
+  disableFixedPositioning?: boolean;
 }
 
 /**
@@ -198,7 +204,7 @@ export interface MenuConvenienceProps extends MenuConfigurationProps {
  */
 export type MenuFixedPositioningOptions = Omit<
   FixedPositioningOptions<HTMLElement, HTMLDivElement>,
-  "onScroll" | "onResize"
+  "onScroll" | "onResize" | "nodeRef" | "disabled"
 >;
 
 /**
@@ -215,7 +221,7 @@ export interface MenuProps
     MenuListConvenienceProps,
     MenuSheetConvenienceProps {
   visible: boolean;
-  onRequestClose(): void;
+  onRequestClose: () => void;
 
   /**
    * @defaultValue `"menu-" + useId()`
@@ -322,6 +328,7 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
       disableVHBounds,
       initialX,
       initialY,
+      disableFixedPositioning,
       getFixedPositionOptions,
       disablePortal: propDisablePortal,
       disableTransition,
@@ -449,6 +456,7 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
 
     const { ref, style, callbacks, updateStyle } = useFixedPositioning({
       ...transitionOptions,
+      disabled: disableFixedPositioning,
       onEnter,
       style: isSheet ? propStyle : menuStyle,
       fixedTo,

package/src/menu/MenuItemButton.tsx

@@ -38,6 +38,7 @@ export const MenuItemButton = forwardRef<HTMLLIElement, MenuItemButtonProps>(
     const {
       id: propId,
       children,
+      height: propHeight,
       onClick = noop,
       onKeyDown = noop,
       onMouseEnter = noop,
@@ -82,9 +83,14 @@ export const MenuItemButton = forwardRef<HTMLLIElement, MenuItemButtonProps>(
       setVisible(id === activeId);
     }, [activeId, defaultFocusIndex, id, menubar, setVisible]);
 
-    const dropdownIcon = getIcon(root ? "dropdown" : "forward");
+    let height = propHeight;
     let rightAddon = propRightAddon;
+    const dropdownIcon = getIcon(root ? "dropdown" : "forward");
     if (!disableDropdownIcon) {
+      if (!height && !props.leftAddon) {
+        height = "normal";
+      }
+
       rightAddon = (
         <IconRotator {...iconRotatorProps} rotated={visible}>
           {dropdownIcon}

package/src/menu/useContextMenu.ts

@@ -12,7 +12,7 @@ export interface ContextMenuProps extends InitialCoords {
   fixedTo: RefObject<HTMLElement>;
   visible: boolean;
   preventScroll: boolean;
-  onRequestClose(): void;
+  onRequestClose: () => void;
 }
 
 /**
@@ -37,7 +37,7 @@ export interface ContextMenuHookOptions {
    * @defaultValue `true`
    */
   preventScroll?: boolean;
-  onContextMenu?<E extends HTMLElement>(event: MouseEvent<E>): void;
+  onContextMenu?: <E extends HTMLElement>(event: MouseEvent<E>) => void;
 }
 
 /**
@@ -49,7 +49,7 @@ export interface ContextMenuHookOptions {
 export interface ContextMenuImplementation
   extends UseStateObject<"visible", boolean> {
   menuProps: ContextMenuProps;
-  onContextMenu<E extends HTMLElement>(event: MouseEvent<E>): void;
+  onContextMenu: <E extends HTMLElement>(event: MouseEvent<E>) => void;
 }
 
 const noop = (): void => {

package/src/movement/types.ts

@@ -203,8 +203,8 @@ export interface KeyboardMovementExtensionData<E extends HTMLElement>
   extends KeyboardMovementContext {
   event: KeyboardEvent<E>;
   currentFocusIndex: NonNullMutableRef<number>;
-  setFocusIndex(index: number, focusables: readonly HTMLElement[]): void;
-  setActiveDescendantId(id: string): void;
+  setFocusIndex: (index: number, focusables: readonly HTMLElement[]) => void;
+  setActiveDescendantId: (id: string) => void;
 }
 
 /**
@@ -217,9 +217,9 @@ export interface KeyboardMovementProviderOptions<E extends HTMLElement>
   /** @see {@link TabIndexBehavior} */
   tabIndexBehavior?: TabIndexBehavior;
 
-  onClick?(event: MouseEvent<E>): void;
-  onFocus?(event: FocusEvent<E>): void;
-  onKeyDown?(event: KeyboardEvent<E>): void;
+  onClick?: (event: MouseEvent<E>) => void;
+  onFocus?: (event: FocusEvent<E>) => void;
+  onKeyDown?: (event: KeyboardEvent<E>) => void;
 
   /** @defaultValue `false` */
   disabled?: boolean;