@react-md/core 6.1.0 → 6.2.0

package/src/autocomplete/types.ts

@@ -31,6 +31,7 @@ import { type CircularProgressProps } from "../progress/CircularProgress.js";
 import { type ProgressTheme } from "../progress/types.js";
 import { type BaseSearchOptions } from "../searching/types.js";
 import {
+  type AutomaticTextExtraction,
   type PropsWithRef,
   type TextExtractor,
   type UseStateInitializer,
@@ -43,15 +44,17 @@ import {
  *
  * - `"some value"` -> `"some value"`
  * - `{ label: "Hello, world", value: 300 }` -> `"Hello, world!"`
+ * - `{ name: "Hello, world", value: 300 }` -> `"Hello, world!"`
  *
  * @since 6.0.0
+ * @deprecated @since 6.2.0 Use `AutomaticTextExtraction` instead.
  */
-export type AutocompleteLabeledOption = string | { label: string };
+export type AutocompleteLabeledOption = AutomaticTextExtraction;
 
 /**
  * @since 6.0.0
  */
-export type AutocompleteOption = AutocompleteLabeledOption | object;
+export type AutocompleteOption = AutomaticTextExtraction | object;
 
 /**
  * @since 6.0.0
@@ -268,13 +271,13 @@ export interface AutocompleteUnknownQueryAndValueOptions<
 
 /**
  * A utility type that makes the `getOptionLabel` required when an option is not
- * a {@link AutocompleteLabeledOption}.
+ * a {@link AutomaticTextExtraction}.
  *
  * @since 6.0.0
  */
 export type AutocompleteOptionLabelExtractor<
   Option extends AutocompleteOption,
-> = Option extends AutocompleteLabeledOption
+> = Option extends AutomaticTextExtraction
   ? AutocompleteGetOptionLabel<Option>
   : Required<AutocompleteGetOptionLabel<Option>>;
 
@@ -702,10 +705,7 @@ export interface AutocompleteBaseProps<Option extends AutocompleteOption>
   /**
    * Any additional props that should be passed to the `Listbox` component.
    */
-  listboxProps?: PropsWithRef<
-    ConfigurableAutocompleteListboxProps,
-    HTMLDivElement
-  >;
+  listboxProps?: PropsWithRef<ConfigurableAutocompleteListboxProps>;
 
   /**
    * This can be used to add any custom styling, change the icon, change the
@@ -746,10 +746,7 @@ export interface AutocompleteBaseProps<Option extends AutocompleteOption>
   /**
    * This will do nothing if {@link disableClearButton} is `true`.
    */
-  clearButtonProps?: PropsWithRef<
-    ConfigurableAutocompleteClearButtonProps,
-    HTMLButtonElement
-  >;
+  clearButtonProps?: PropsWithRef<ConfigurableAutocompleteClearButtonProps>;
 
   /**
    * Set to `true` to hide the clear button that appears when hovering an

package/src/avatar/Avatar.tsx

@@ -77,7 +77,7 @@ export interface AvatarProps
    *
    * @since 2.2.0
    */
-  imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;
+  imgProps?: PropsWithRef<AvatarImgAttributes>;
 }
 
 /**
@@ -108,7 +108,7 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
       src,
       alt = "",
       size = "avatar",
-      color = "",
+      color,
       theme,
       imgProps,
       referrerPolicy,

package/src/avatar/styles.ts

@@ -1,10 +1,62 @@
 import { cnb } from "cnbuilder";
 
 import { type ThemeColor, cssUtils } from "../cssUtils.js";
+import { type OverridableStringUnion } from "../types.js";
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-avatar");
 
+/**
+ * @since 6.2.0
+ */
+export interface AvatarColorOverrides {}
+
+/**
+ * @since 6.2.0
+ */
+export type DefaultAvatarColors =
+  | "red"
+  | "pink"
+  | "purple"
+  | "deep-purple"
+  | "indigo"
+  | "blue"
+  | "light-blue"
+  | "cyan"
+  | "teal"
+  | "green"
+  | "light-green"
+  | "lime"
+  | "yellow"
+  | "amber"
+  | "orange"
+  | "deep-orange"
+  | "brown"
+  | "grey"
+  | "blue-grey";
+
+/**
+ * The avatar available colors can be configured using module augmentation:
+ *
+ * ```ts
+ * declare module "@react-md/core/avatar/styles" {
+ *   interface AvatarColorOverrides {
+ *     "light-blue": false;
+ *     brandColor: true;
+ *   }
+ * }
+ * ```
+ *
+ * This would remove the support for the `light-blue` color and enable
+ * `brandColor`.
+ *
+ * @since 6.2.0
+ */
+export type AvatarColor = OverridableStringUnion<
+  DefaultAvatarColors,
+  AvatarColorOverrides
+>;
+
 /** @since 6.0.0 */
 export interface AvatarClassNameOptions {
   className?: string;
@@ -19,7 +71,7 @@ export interface AvatarClassNameOptions {
    * @see {@link theme}
    * @defaultValue `""`
    */
-  color?: string;
+  color?: AvatarColor;
 
   /**
    * @defaultValue `"avatar"`

package/src/box/styles.ts

@@ -2,6 +2,7 @@ import { cnb } from "cnbuilder";
 import { type CSSProperties } from "react";
 
 import { type DefinedCSSVariableName } from "../theme/types.js";
+import { type IsEmptyObject, type OverridableStringUnion } from "../types.js";
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-box");
@@ -23,25 +24,28 @@ declare module "react" {
   }
 }
 
+/** @since 6.2.0 */
+export interface BoxAlignItemsOverrides {}
+/** @since 6.2.0 */
+export interface BoxJustifyContentOverrides {}
+/** @since 6.2.0 */
+export interface BoxGridNameOverrides {}
+
 /**
  * @since 6.0.0
  */
-export type BoxAlignItems =
-  | "start"
-  | "flex-start"
-  | "center"
-  | "end"
-  | "flex-end"
-  | "stretch";
+export type BoxAlignItems = OverridableStringUnion<
+  "start" | "flex-start" | "center" | "end" | "flex-end" | "stretch",
+  BoxAlignItemsOverrides
+>;
 
 /**
  * @since 6.0.0
  */
-export type BoxJustifyContent =
-  | BoxAlignItems
-  | "space-around"
-  | "space-between"
-  | "space-evenly";
+export type BoxJustifyContent = OverridableStringUnion<
+  BoxAlignItems | "space-around" | "space-between" | "space-evenly",
+  BoxJustifyContentOverrides
+>;
 
 /**
  * @since 6.0.0
@@ -53,6 +57,14 @@ export type BoxFlexDirection = "row" | "column";
  */
 export type BoxGridColumns = "fit" | "fill" | number;
 
+/**
+ * @since 6.2.0
+ */
+export type BoxGridName =
+  IsEmptyObject<BoxGridNameOverrides> extends true
+    ? string
+    : OverridableStringUnion<never, BoxGridNameOverrides>;
+
 /**
  * @since 6.0.0
  */
@@ -132,11 +144,20 @@ export interface BoxOptions {
    * );
    * ```
    *
+   * ```ts
+   * declare module "@react-md/core/box/styles" {
+   *   interface BoxGridNameOverrides {
+   *     small: true;
+   *     medium: true;
+   *   }
+   * }
+   * ```
+   *
    * The `gridName` should be `"small" | "medium"`.
    *
    * @defaultValue `""`
    */
-  gridName?: string;
+  gridName?: BoxGridName;
 
   /**
    * The default behavior for a grid is to automatically determine the number

package/src/button/AsyncButton.tsx

@@ -122,13 +122,13 @@ export interface AsyncButtonProps extends ButtonProps {
    * Any additional props to pass to the `CircularProgress` bar when the
    * {@link loadingType} is one of the circular types.
    */
-  linearProgressProps?: PropsWithRef<LinearProgressProps, HTMLDivElement>;
+  linearProgressProps?: PropsWithRef<LinearProgressProps>;
 
   /**
    * Any additional props to pass to the `LinearProgress` bar when the
    * {@link loadingType} is one of the linear types.
    */
-  circularProgressProps?: PropsWithRef<CircularProgressProps, HTMLSpanElement>;
+  circularProgressProps?: PropsWithRef<CircularProgressProps>;
 }
 
 /**

package/src/button/Button.tsx

@@ -30,7 +30,7 @@ export interface ButtonProps
    * Any additional props to provide the to `FAB` container element when the
    * `floating` prop is provided
    */
-  floatingProps?: PropsWithRef<FloatingActionButtonProps, HTMLSpanElement>;
+  floatingProps?: PropsWithRef<FloatingActionButtonProps>;
 }
 
 /**

package/src/card/CardHeader.tsx

@@ -27,7 +27,7 @@ export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
    * Any props to pass to the `<div>` that surrounds the `children`. This is
    * generally used to apply custom `style` or `className`.
    */
-  contentProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+  contentProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
 }
 
 /**

package/src/chip/Chip.tsx

@@ -147,7 +147,7 @@ export interface ChipProps
    *
    * @since 6.0.0
    */
-  contentProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+  contentProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
 
   /**
    * This will be ignored if {@link disableContentWrap} is `true`.

package/src/dialog/Dialog.tsx

@@ -156,10 +156,7 @@ export interface BaseDialogProps
    * Any additional props that should be passed to the container element when
    * the `type !== "custom"`.
    */
-  containerProps?: PropsWithRef<
-    ConfigurableDialogContainerProps,
-    HTMLDivElement
-  >;
+  containerProps?: PropsWithRef<ConfigurableDialogContainerProps>;
 
   /**
    * @see {@link DEFAULT_DIALOG_TIMEOUT}

package/src/expansion-panel/ExpansionPanel.tsx

@@ -128,7 +128,7 @@ export interface ExpansionPanelProps extends CardProps {
    * @see {@link contentClassName}
    * @see {@link disableContentPadding}
    */
-  contentProps?: PropsWithRef<Omit<CardContentProps, "role">, HTMLDivElement>;
+  contentProps?: PropsWithRef<Omit<CardContentProps, "role">>;
 
   /**
    * Convenience prop to apply custom style to the `CardContent` component.

package/src/expansion-panel/ExpansionPanelHeader.tsx

@@ -47,7 +47,7 @@ export interface ExpansionPanelHeaderProps
    * Any additional props to provide to the heading element that wraps the
    * expansion panel button.
    */
-  headingProps?: PropsWithRef<TypographyProps, HTMLHeadingElement>;
+  headingProps?: PropsWithRef<TypographyProps>;
   iconRotatorProps?: Omit<IconRotatorProps, "rotated" | "disableTransition">;
 
   /**

package/src/files/FileInput.tsx

@@ -42,10 +42,7 @@ export interface FileInputProps
    * most props get passed to the `<input type="file">`. So this would be useful
    * for inline style or click handlers.
    */
-  labelProps?: PropsWithRef<
-    LabelHTMLAttributes<HTMLLabelElement>,
-    HTMLLabelElement
-  >;
+  labelProps?: PropsWithRef<LabelHTMLAttributes<HTMLLabelElement>>;
 
   /**
    * An optional icon to display for the file input.

package/src/form/FormMessageContainer.tsx

@@ -15,7 +15,7 @@ export interface FormMessageContainerProps
    * component, these props are optional. It kind of eliminates the whole
    * purpose of this component though.
    */
-  messageProps?: PropsWithRef<FormMessageProps, HTMLDivElement>;
+  messageProps?: PropsWithRef<FormMessageProps>;
 }
 
 /**

package/src/form/InputToggle.tsx

@@ -53,7 +53,7 @@ export interface ConfigurableInputToggleIconProps {
    * Any props that should be passed to the `<span>` that surrounds the current
    * icon element.
    */
-  iconProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+  iconProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
 
   /**
    * Optional style to set on the `<span>` that surrounds the current icon
@@ -101,10 +101,7 @@ export interface InputToggleLabelProps {
    * }}
    * ```
    */
-  labelProps?: PropsWithRef<
-    LabelHTMLAttributes<HTMLLabelElement>,
-    HTMLLabelElement
-  >;
+  labelProps?: PropsWithRef<LabelHTMLAttributes<HTMLLabelElement>>;
 
   /**
    * @see {@link LabelClassNameOptions.gap}

package/src/form/NativeSelect.tsx

@@ -62,7 +62,7 @@ export interface NativeSelectProps
    * There probably isn't any real use for this prop other than if you need to
    * add a `ref` for some DOM behavior.
    */
-  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
 }
 
 /**

package/src/form/OptGroup.tsx

@@ -26,10 +26,7 @@ export interface OptGroupProps extends Omit<ListProps, "role"> {
    * This can be used to apply any additional props to the `ListSubheader` that
    * describes the group of options.
    */
-  labelProps?: PropsWithRef<
-    Omit<ListSubheaderProps, "role" | "children">,
-    HTMLLIElement
-  >;
+  labelProps?: PropsWithRef<Omit<ListSubheaderProps, "role" | "children">>;
 
   /**
    * This should be any `Option`s to display within the group.

package/src/form/Password.tsx

@@ -126,7 +126,7 @@ export interface PasswordProps
    * `id`, `buttonType`, `aria-label`, `aria-pressed`, or `children` are
    * provided here, they will override the default implementation.
    */
-  visibilityProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;
+  visibilityProps?: PropsWithRef<ButtonProps>;
 }
 
 /**

package/src/form/Select.tsx

@@ -141,7 +141,7 @@ export interface SelectProps<Value extends string>
   /**
    * Optional props to pass to the `<span>` that surrounds the {@link label}
    */
-  labelProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+  labelProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
 
   /**
    * An optional ref to pass to the hidden `<input type="text" />` element that
@@ -170,8 +170,7 @@ export interface SelectProps<Value extends string>
    * - `width="min"`
    */
   menuProps?: PropsWithRef<
-    Omit<MenuProps, "visible" | "onRequestClose" | "fixedTo">,
-    HTMLDivElement
+    Omit<MenuProps, "visible" | "onRequestClose" | "fixedTo">
   >;
 
   /**

package/src/form/Slider.tsx

@@ -90,7 +90,7 @@ export interface BaseSliderProps
    * This can be used to apply custom styles or a `ref` to the track element if
    * needed.
    */
-  trackProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+  trackProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
 
   /**
    * This can be used to configure any additional tooltip props like the

package/src/form/Switch.tsx

@@ -35,12 +35,12 @@ export interface SwitchProps
     InputToggleLabelProps,
     FormMessageContainerExtension,
     FormComponentStates {
-  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
+  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
   trackStyle?: CSSProperties;
   trackClassName?: string;
   ballAddon?: ReactNode;
-  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
   ballStyle?: CSSProperties;
   ballClassName?: string;
 }

package/src/form/SwitchTrack.tsx

@@ -12,7 +12,7 @@ export interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {
   active?: boolean;
   disabled?: boolean;
   ballAddon?: ReactNode;
-  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
   ballStyle?: CSSProperties;
   ballClassName?: string;
 }

package/src/form/TextArea.tsx

@@ -92,17 +92,14 @@ export interface TextAreaProps
    *
    * This will only be applied when {@link resize} is set to `"auto"`.
    */
-  resizeContainerProps?: PropsWithRef<
-    HTMLAttributes<HTMLDivElement>,
-    HTMLDivElement
-  >;
+  resizeContainerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
 
   /**
    * Optional props to provide to the {@link TextFieldContainer} component.
    * There probably isn't any real use for this prop other than if you need to
    * add a `ref` for some DOM behavior.
    */
-  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
 }
 
 /**

package/src/form/TextField.tsx

@@ -88,7 +88,7 @@ export interface TextFieldProps
    * There probably isn't any real use for this prop other than if you need to
    * add a `ref` for some DOM behavior.
    */
-  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
 }
 
 /**

package/src/form/types.ts

@@ -335,8 +335,7 @@ export interface FormMessageContainerExtension {
    * purpose of this component though.
    */
   messageProps?: PropsWithRef<
-    FormMessageProps & Partial<FormMessageInputLengthCounterProps>,
-    HTMLDivElement
+    FormMessageProps & Partial<FormMessageInputLengthCounterProps>
   >;
 
   /**
@@ -346,10 +345,7 @@ export interface FormMessageContainerExtension {
    * Note: This will not be used if the `messageProps` are not provided since
    * only the `children` will be returned without the container.
    */
-  messageContainerProps?: PropsWithRef<
-    HTMLAttributes<HTMLDivElement>,
-    HTMLDivElement
-  >;
+  messageContainerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
 }
 
 /** @since 6.0.0 */
@@ -507,10 +503,7 @@ export interface TextFieldContainerOptions
    *
    * @since 6.0.0
    */
-  leftAddonProps?: PropsWithRef<
-    ConfigurableTextFieldAddonProps,
-    HTMLSpanElement
-  >;
+  leftAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps>;
 
   /**
    * @see {@link TextFieldAddonProps.disabled}
@@ -530,10 +523,7 @@ export interface TextFieldContainerOptions
    *
    * @since 6.0.0
    */
-  rightAddonProps?: PropsWithRef<
-    ConfigurableTextFieldAddonProps,
-    HTMLSpanElement
-  >;
+  rightAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps>;
 
   /**
    * @see {@link TextFieldAddonProps.disabled}
@@ -569,7 +559,7 @@ export interface FormFieldOptions
    * }}
    * ```
    */
-  labelProps?: PropsWithRef<LabelProps, HTMLLabelElement>;
+  labelProps?: PropsWithRef<LabelProps>;
 
   /**
    * A convenience prop to apply a custom style to a label. This is equivalent

package/src/layout/LayoutAppBar.tsx

@@ -29,7 +29,7 @@ export interface LayoutAppBarProps extends AppBarProps {
   /**
    * Any additional props to pass to the {@link SkipToMainContent} component.
    */
-  skipProps?: PropsWithRef<SkipToMainContentProps, HTMLAnchorElement>;
+  skipProps?: PropsWithRef<SkipToMainContentProps>;
 }
 
 /**

package/src/list/ListItemLink.tsx

@@ -39,7 +39,7 @@ export interface ListItemLinkProps
    * Any additional props to provide the wrapping `<li>` element such as
    * `style`, `className`, and `ref`.
    */
-  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>>;
 
   /**
    * @defaultValue `disabled ? -1 : undefined`

package/src/list/ListItemText.tsx

@@ -8,10 +8,7 @@ import { listItemText } from "./listItemStyles.js";
  */
 export interface ListItemTextProps extends HTMLAttributes<HTMLSpanElement> {
   secondaryText?: ReactNode;
-  secondaryTextProps?: PropsWithRef<
-    HTMLAttributes<HTMLSpanElement>,
-    HTMLSpanElement
-  >;
+  secondaryTextProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
 
   /** @defaultValue `false` */
   secondaryTextClamped?: boolean;

package/src/list/ListSubheader.tsx

@@ -45,7 +45,7 @@ export interface ListSubheaderProps
   /**
    * @since 6.0.0
    */
-  textProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+  textProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
 }
 
 /**

package/src/list/types.ts

@@ -160,7 +160,7 @@ export interface ListItemChildrenTextProps {
    *
    * @since 6.0.0
    */
-  textProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+  textProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
 
   /**
    * An optional className to apply to the `<span>` that surrounds the
@@ -206,10 +206,7 @@ export interface ListItemChildrenTextProps {
    *
    * @since 6.0.0
    */
-  secondaryTextProps?: PropsWithRef<
-    HTMLAttributes<HTMLSpanElement>,
-    HTMLSpanElement
-  >;
+  secondaryTextProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
 
   /**
    * Set this to `true` to allow the {@link secondaryText} to span multiple

package/src/menu/Menu.tsx

@@ -12,7 +12,7 @@ import {
 import { type FloatingActionButtonPosition } from "../button/FloatingActionButton.js";
 import { useFocusContainer } from "../focus/useFocusContainer.js";
 import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
-import { type ListElement, type ListProps } from "../list/List.js";
+import { type ListProps } from "../list/List.js";
 import { useAppSize } from "../media-queries/AppSizeProvider.js";
 import { type GetDefaultFocusedIndex } from "../movement/types.js";
 import { Portal } from "../portal/Portal.js";
@@ -149,7 +149,7 @@ export interface MenuListConvenienceProps {
    * Any additional props to pass to the `List` component that surrounds the
    * `Menu`'s `MenuItem`s.
    */
-  listProps?: PropsWithRef<Omit<ListProps, "horizontal">, ListElement>;
+  listProps?: PropsWithRef<Omit<ListProps, "horizontal">>;
 }
 
 /**
@@ -186,8 +186,7 @@ export interface MenuConvenienceProps extends MenuConfigurationProps {
       | "visible"
       | "onRequestClose"
       | "getDefaultFocusedIndex"
-    >,
-    HTMLDivElement
+    >
   >;
 
   /**

package/src/menu/MenuItemInputToggle.tsx

@@ -108,10 +108,10 @@ export type MenuItemRadioProps = BaseMenuItemInputToggleProps;
  * @since 6.0.0 Added additional props for styling the track and ball.
  */
 export interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {
-  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
   trackStyle?: CSSProperties;
   trackClassName?: string;
-  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
   ballStyle?: CSSProperties;
   ballClassName?: string;
 }

package/src/menu/MenuItemTextField.tsx

@@ -13,7 +13,7 @@ export interface MenuItemTextFieldProps extends TextFieldProps {
   /**
    * Any additional props or a `ref` to apply to the surrounding `<li>` element.
    */
-  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>>;
 
   /** @defaultValue `true` */
   stretch?: boolean;