@react-md/core 6.3.4 → 6.4.0

package/src/form/useTextField.ts

@@ -125,7 +125,8 @@ export interface TextFieldHookState {
  * @since 2.5.0
  */
 export interface ProvidedFormMessageProps
-  extends Pick<FormMessageProps, "id" | "theme" | "children">,
+  extends
+    Pick<FormMessageProps, "id" | "theme" | "children">,
     Required<Pick<TextFieldProps, "error">>,
     Partial<Pick<FormMessageInputLengthCounterProps, "length" | "maxLength">> {}
 
@@ -137,7 +138,9 @@ export interface ProvidedFormMessageProps
  */
 export interface ProvidedTextFieldProps<
   E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,
-> extends TextFieldValidationOptions,
+>
+  extends
+    TextFieldValidationOptions,
     Required<TextFieldChangeHandlers<E>>,
     Required<Pick<TextFieldProps, "id" | "name" | "value" | "error">>,
     Pick<TextFieldProps, "aria-describedby" | "rightAddon"> {
@@ -288,7 +291,9 @@ export interface TextFieldHookComponentOptions<
 /** @since 2.5.6 */
 export interface TextFieldHookOptions<
   E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,
-> extends TextFieldValidationOptions,
+>
+  extends
+    TextFieldValidationOptions,
     TextFieldHookComponentOptions<E>,
     TextFieldChangeHandlers<E> {
   /**

package/src/hoverMode/useHoverMode.ts

@@ -36,8 +36,7 @@ export interface HoverModeConfigurationOptions extends SimpleHoverModeContext {
 /**
  * @since 6.0.0
  */
-export interface ControlledHoverModeOptions
-  extends HoverModeConfigurationOptions {
+export interface ControlledHoverModeOptions extends HoverModeConfigurationOptions {
   setVisible: UseStateSetter<boolean>;
 }
 
@@ -53,16 +52,14 @@ export interface ControlledHoverModeImplementation {
 /**
  * @since 6.0.0
  */
-export interface UncontrolledHoverModeOptions
-  extends HoverModeConfigurationOptions {
+export interface UncontrolledHoverModeOptions extends HoverModeConfigurationOptions {
   defaultVisible?: UseStateInitializer<boolean>;
 }
 
 /**
  * @since 6.0.0
  */
-export interface UncontrolledHoverModeImplementation
-  extends ControlledHoverModeImplementation {
+export interface UncontrolledHoverModeImplementation extends ControlledHoverModeImplementation {
   visible: boolean;
   setVisible: UseStateSetter<boolean>;
 }
@@ -70,8 +67,7 @@ export interface UncontrolledHoverModeImplementation
 /**
  * @since 6.0.0
  */
-export interface HoverModeImplementation
-  extends ControlledHoverModeImplementation {
+export interface HoverModeImplementation extends ControlledHoverModeImplementation {
   visible?: boolean;
   setVisible?: UseStateSetter<boolean>;
 }

package/src/icon/FontIcon.tsx

@@ -12,8 +12,7 @@ import { type FontIconClassNameOptions, icon } from "./styles.js";
  * `inline` and `theme` props.
  */
 export interface FontIconProps
-  extends HTMLAttributes<HTMLSpanElement>,
-    FontIconClassNameOptions {
+  extends HTMLAttributes<HTMLSpanElement>, FontIconClassNameOptions {
   /** @defaultValue `true` */
   "aria-hidden"?: AriaAttributes["aria-hidden"];
 

package/src/icon/IconRotator.tsx

@@ -15,8 +15,7 @@ import { type IconRotatorClassNameOptions, iconRotator } from "./styles.js";
  * @since 6.0.0 Removed `animate` prop and added `disableTransition`
  */
 export interface IconRotatorBaseProps
-  extends HTMLAttributes<HTMLSpanElement>,
-    IconRotatorClassNameOptions {
+  extends HTMLAttributes<HTMLSpanElement>, IconRotatorClassNameOptions {
   /**
    * An optional style to apply to the surrounding span when the `forceIconWrap`
    * prop is enabled or the children is not a single react element.

package/src/icon/MaterialIcon.tsx

@@ -6,7 +6,8 @@ import { type MaterialIconClassNameOptions, icon } from "./styles.js";
 
 /** @since 6.0.0 */
 export interface MaterialIconProps
-  extends HTMLAttributes<HTMLSpanElement>,
+  extends
+    HTMLAttributes<HTMLSpanElement>,
     Partial<MaterialIconClassNameOptions> {
   /**
    * The icon name to use

package/src/icon/MaterialSymbol.tsx

@@ -24,7 +24,8 @@ declare module "react" {
  * @since 6.0.0
  */
 export interface MaterialSymbolProps
-  extends HTMLAttributes<HTMLSpanElement>,
+  extends
+    HTMLAttributes<HTMLSpanElement>,
     MaterialSymbolCustomization,
     Partial<MaterialSymbolClassNameOptions> {
   /** @defaultValue `true` */

package/src/icon/SVGIcon.tsx

@@ -6,8 +6,7 @@ import { type SVGIconClassNameOptions, icon } from "./styles.js";
  * @since 6.0.0 Added the `inline` and `theme` props.
  */
 export interface SVGIconProps
-  extends HTMLAttributes<SVGSVGElement>,
-    SVGIconClassNameOptions {
+  extends HTMLAttributes<SVGSVGElement>, SVGIconClassNameOptions {
   /**
    * Boolean if the SVG should gain the `focusable` attribute. This is disabled
    * by default since IE11 and Edge actually default this to true and keyboard's

package/src/icon/config.tsx

@@ -213,7 +213,6 @@ export type ConfigurableIconName = keyof ConfigurableIcons;
  * ICON_CONFIG.upload = <FileUploadIcon />;
  * ```
  *
- *
  * @since 6.0.0
  */
 export const ICON_CONFIG: ConfiguredIcons = {
@@ -289,13 +288,17 @@ export const ICON_CONFIG: ConfiguredIcons = {
  * @since 6.0.0
  */
 export function configureIcons(overrides: ConfiguredIcons): void {
-  Object.entries(overrides).forEach(([name, value]) => {
-    if (process.env.NODE_ENV !== "production" && !(name in ICON_CONFIG)) {
-      throw new Error(`${name} is an invalid react-md icon name.`);
-    }
+  if (process.env.NODE_ENV !== "production") {
+    Object.entries(overrides).forEach(([name, value]) => {
+      if (!(name in ICON_CONFIG)) {
+        throw new Error(`${name} is an invalid react-md icon name.`);
+      }
 
-    ICON_CONFIG[name as keyof ConfiguredIcons] = value;
-  });
+      ICON_CONFIG[name as keyof ConfiguredIcons] = value;
+    });
+  } else {
+    Object.assign(ICON_CONFIG, overrides);
+  }
 }
 
 /**

package/src/icon/materialConfig.ts

@@ -152,8 +152,7 @@ export type MaterialSymbolConfiguration = Required<MaterialSymbolCustomization>;
  * @since 6.0.0
  */
 export interface MaterialConfiguration
-  extends MaterialIconConfiguration,
-    MaterialSymbolConfiguration {}
+  extends MaterialIconConfiguration, MaterialSymbolConfiguration {}
 
 /**
  * @since 6.0.0

package/src/icon/styles.ts

@@ -87,8 +87,7 @@ export interface MaterialIconClassNameOptions extends SVGIconClassNameOptions {
 }
 
 /** @since 6.0.0 */
-export interface MaterialSymbolClassNameOptions
-  extends SVGIconClassNameOptions {
+export interface MaterialSymbolClassNameOptions extends SVGIconClassNameOptions {
   family: MaterialSymbolFamily;
 }
 

package/src/interaction/UserInteractionModeProvider.tsx

@@ -43,6 +43,8 @@ export function useUserInteractionMode(): UserInteractionMode {
 /** @internal */
 const TOUCH_TIMEOUT = 1200;
 
+const DATE_NOW = (): number => Date.now();
+
 export interface UserInteractionModeProviderProps {
   children: ReactNode;
 }
@@ -84,7 +86,10 @@ export interface UserInteractionModeProviderProps {
 export function UserInteractionModeProvider(
   props: UserInteractionModeProviderProps
 ): ReactElement {
-  const { children } = props;
+  const { children, now = DATE_NOW } =
+    props as UserInteractionModeProviderProps & {
+      now?: () => number;
+    };
   const { __root } = useContext(context);
   if (__root) {
     throw new Error(
@@ -145,7 +150,7 @@ export function UserInteractionModeProvider(
     };
 
     const handleTouchStart = (): void => {
-      lastTouchTime.current = Date.now();
+      lastTouchTime.current = now();
       isTouchContextMenu.current = false;
       setMode("touch");
     };
@@ -153,7 +158,7 @@ export function UserInteractionModeProvider(
     const handleMouseMove = (): void => {
       if (
         isTouchContextMenu.current ||
-        Date.now() - lastTouchTime.current < TOUCH_TIMEOUT
+        now() - lastTouchTime.current < TOUCH_TIMEOUT
       ) {
         isTouchContextMenu.current = false;
         return;
@@ -189,7 +194,7 @@ export function UserInteractionModeProvider(
         window.removeEventListener("contextmenu", handleContextMenu, true);
       }
     };
-  }, [mode]);
+  }, [mode, now]);
 
   const value = useMemo<UserInteractionModeContext>(
     () => ({

package/src/interaction/types.ts

@@ -187,8 +187,7 @@ export interface RippleTransitionCallbacks {
  * @since 6.0.0
  * @internal
  */
-export interface ProvidedRippleContainerProps
-  extends RippleTransitionCallbacks {
+export interface ProvidedRippleContainerProps extends RippleTransitionCallbacks {
   ripples: RippleStateList;
 }
 

package/src/interaction/useElementInteraction.tsx

@@ -34,8 +34,9 @@ declare module "react" {
 export const PRESSED_CLASS_NAME = "rmd-pressed";
 
 /** @since 6.0.0 */
-export interface ElementInteractionOptions<E extends HTMLElement>
-  extends Partial<ElementInteractionHandlers<E>> {
+export interface ElementInteractionOptions<
+  E extends HTMLElement,
+> extends Partial<ElementInteractionHandlers<E>> {
   /**
    * This can be used to override the {@link INTERACTION_CONFIG.mode}
    *

package/src/layout/LayoutAppBar.tsx

@@ -42,21 +42,21 @@ export interface LayoutAppBarProps extends AppBarProps {
  *
  * @example Static Height
  * ```scss
- * @use "everything";
+ * @use "everything" as *;
  *
  * :root {
- *   @include everything.layout-set-var(header-height, everything.$app-bar-height);
+ *   @include layout-set-var(header-height, $app-bar-height);
  * }
  * ```
  *
  * @example Media Query Height Changes
  * ```scss
- * @use "everything";
+ * @use "everything" as *;
  *
  * :root {
- *   @include everything.layout-set-var(header-height, everything.$app-bar-height);
- *   @include everything.tablet-media {
- *     @include everything.layout-set-var(header-height, everything.$app-bar-dense-height);
+ *   @include layout-set-var(header-height, $app-bar-height);
+ *   @include tablet-media {
+ *     @include layout-set-var(header-height, $app-bar-dense-height);
  *   }
  * }
  * ```

package/src/layout/LayoutNav.tsx

@@ -22,7 +22,8 @@ import { layoutNav } from "./layoutNavStyles.js";
  * @since 6.0.0
  */
 export interface LayoutNavProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends
+    HTMLAttributes<HTMLDivElement>,
     BaseSheetClassNameOptions,
     TransitionCallbacks,
     TransitionActions {

package/src/layout/LayoutWindowSplitter.tsx

@@ -18,7 +18,8 @@ import {
  * @since 6.0.0
  */
 export interface LayoutWindowSplitterProps
-  extends WindowSplitterWidgetProps<HTMLButtonElement>,
+  extends
+    WindowSplitterWidgetProps<HTMLButtonElement>,
     Omit<
       BaseWindowSplitterProps,
       keyof WindowSplitterWidgetProps<HTMLButtonElement>

package/src/layout/Main.tsx

@@ -27,8 +27,7 @@ export type CustomMainElement = ElementType<
  * @since 6.0.0
  */
 export interface MainProps
-  extends HTMLAttributes<HTMLElement>,
-    MainClassNameOptions {
+  extends HTMLAttributes<HTMLElement>, MainClassNameOptions {
   /**
    * @defaultValue `"main"`
    */

package/src/layout/useExpandableLayout.ts

@@ -6,10 +6,12 @@ import { useSsr } from "../SsrProvider.js";
 import { useAppSize } from "../media-queries/AppSizeProvider.js";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { type AppSize } from "../media-queries/appSize.js";
+import { MEDIA_QUERY_CONFIG } from "../media-queries/config.js";
 import { useMediaQuery } from "../media-queries/useMediaQuery.js";
 import { type CSSTransitionElementProps } from "../transition/types.js";
 import { type CssPosition, type UseStateInitializer } from "../types.js";
 import { useToggle } from "../useToggle.js";
+import { useDevEffect } from "../utils/useDevEffect.js";
 import { type LayoutNavProps } from "./LayoutNav.js";
 import {
   type HorizontalLayoutTransitionOptions,
@@ -26,6 +28,8 @@ import {
   useTemporaryLayout,
 } from "./useTemporaryLayout.js";
 
+let loggedOnce = false;
+
 /**
  * @since 6.0.0
  */
@@ -78,7 +82,8 @@ export interface ExpandableLayoutOptions extends TemporaryLayoutOptions {
  * @since 6.0.0
  */
 export interface ProvidedLayoutMainProps
-  extends ProvidedTemporaryLayoutMainProps,
+  extends
+    ProvidedTemporaryLayoutMainProps,
     CSSTransitionElementProps<HTMLElement> {}
 
 /**
@@ -98,16 +103,14 @@ export type ProvidedLayoutAppBarProps = ProvidedTemporaryLayoutAppBarProps &
 /**
  * @since 6.0.0
  */
-export interface ProvidedExpandableLayoutNavToggleProps
-  extends ProvidedLayoutNavToggleProps {
+export interface ProvidedExpandableLayoutNavToggleProps extends ProvidedLayoutNavToggleProps {
   className: string;
 }
 
 /**
  * @since 6.0.0
  */
-export interface ExpandableLayoutImplementation
-  extends TemporaryLayoutImplementation {
+export interface ExpandableLayoutImplementation extends TemporaryLayoutImplementation {
   temporary: boolean;
   persistent: boolean;
   expanded: boolean;
@@ -264,6 +267,61 @@ export function useExpandableLayout(
     ? isPhone || (temporaryUntil === "desktop" && !isDesktop)
     : !matches;
 
+  useDevEffect(() => {
+    if (process.env.NODE_ENV === "test") {
+      return;
+    }
+
+    let query: string;
+    if (temporaryUntil === "tablet" || temporaryUntil === "desktop") {
+      const minWidth =
+        temporaryUntil === "tablet"
+          ? MEDIA_QUERY_CONFIG.tabletMinWidth
+          : MEDIA_QUERY_CONFIG.desktopMinWidth;
+      query = `screen and (min-width: ${minWidth})`;
+    } else {
+      query = temporaryUntil;
+    }
+
+    const timeout = window.setTimeout(() => {
+      let found = false;
+      for (let i = 0; i < document.styleSheets.length; i++) {
+        const sheet = document.styleSheets[i];
+
+        try {
+          const rules = sheet.cssRules;
+          for (let j = 0; j < rules.length; j++) {
+            const rule = rules[j];
+            if (
+              rule.cssText.includes(".rmd-layout") &&
+              rule.cssText.includes(`@media ${query}`)
+            ) {
+              found = true;
+              return;
+            }
+          }
+        } catch {
+          //
+        }
+      }
+
+      if (!found && !loggedOnce) {
+        loggedOnce = true;
+        // eslint-disable-next-line no-console
+        console.error(
+          `The react-md expandable layout has set \`temporaryUntil: "${temporaryUntil}"\` but the corresponding styles have not been found.` +
+            " This usually  means the `$layout-navigation-breakpoint` or `temporaryUntil` value should be updated match.\n\n" +
+            "See https://react-md.dev/getting-started/layout#updating-the-layout-to-be-temporary-until-a-specific-breakpoint-optional " +
+            "for more information."
+        );
+      }
+    }, 3000);
+
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [temporaryUntil]);
+
   return {
     visible,
     temporary,

package/src/layout/useHorizontalLayoutTransition.ts

@@ -25,8 +25,7 @@ export const DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES = {
 /**
  * @since 6.0.0
  */
-export interface HorizontalLayoutTransitionOptions
-  extends PreconfiguredCSSTransitionOptions<HTMLElement> {
+export interface HorizontalLayoutTransitionOptions extends PreconfiguredCSSTransitionOptions<HTMLElement> {
   /**
    * @see {@link DEFAULT_SHEET_TIMEOUT}
    * @defaultValue `DEFAULT_SHEET_TIMEOUT`

package/src/layout/useLayoutTree.ts

@@ -87,8 +87,8 @@ export interface LayoutTreeOptions<
  */
 export interface LayoutTreeImplementation<
   T extends TreeItemNode = DefaultTreeItemNode,
-> extends Pick<TreeProps<T>, "data">,
-    TreeImplementation {}
+>
+  extends Pick<TreeProps<T>, "data">, TreeImplementation {}
 
 /**
  * Before considering to use a `Tree` for site navigation, it is important to

package/src/layout/useLayoutWindowSplitter.ts

@@ -13,8 +13,10 @@ import {
 /**
  * @since 6.0.0
  */
-export interface LayoutWindowSplitterOptions
-  extends Omit<WindowSplitterOptions, "min" | "max"> {
+export interface LayoutWindowSplitterOptions extends Omit<
+  WindowSplitterOptions,
+  "min" | "max"
+> {
   /**
    * @see {@link WindowSplitterOptions.min}
    * @defaultValue `96`
@@ -51,8 +53,7 @@ export interface LayoutWindowSplitterOptions
 /**
  * @since 6.0.0
  */
-export interface ProvidedLayoutWindowSplitterProps
-  extends WindowSplitterWidgetProps<HTMLButtonElement> {
+export interface ProvidedLayoutWindowSplitterProps extends WindowSplitterWidgetProps<HTMLButtonElement> {
   /** @defaultValue {@link WindowSplitterImplementation.value} */
   navWidth: number;
 }
@@ -60,8 +61,7 @@ export interface ProvidedLayoutWindowSplitterProps
 /**
  * @since 6.0.0
  */
-export interface LayoutWindowSplitterImplementation
-  extends WindowSplitterImplementation {
+export interface LayoutWindowSplitterImplementation extends WindowSplitterImplementation {
   splitterProps: ProvidedLayoutWindowSplitterProps;
 }
 

package/src/layout/useResizableLayout.ts

@@ -16,8 +16,7 @@ import {
  * @since 6.0.0
  */
 export interface ResizableLayoutOptions
-  extends ExpandableLayoutOptions,
-    LayoutWindowSplitterOptions {
+  extends ExpandableLayoutOptions, LayoutWindowSplitterOptions {
   /**
    * This id will be used as the `aria-controls` prop for the
    * `LayoutWindowSplitter` and should be applied to the `LayoutNav` as an `id`.
@@ -30,16 +29,14 @@ export interface ResizableLayoutOptions
 /**
  * @since 6.0.0
  */
-export interface ProvidedResizableLayoutNavProps
-  extends ProvidedLayoutNavProps {
+export interface ProvidedResizableLayoutNavProps extends ProvidedLayoutNavProps {
   id: string;
 }
 
 /**
  * @since 6.0.0
  */
-export interface ResizableLayoutImplementation
-  extends ExpandableLayoutImplementation {
+export interface ResizableLayoutImplementation extends ExpandableLayoutImplementation {
   expandableNavProps: ProvidedResizableLayoutNavProps;
   windowSplitterProps: LayoutWindowSplitterProps;
 }

package/src/link/Link.tsx

@@ -23,8 +23,7 @@ export type CustomLinkComponent =
  * @since 6.0.0 Renamed `flexCentered` to `flex`.
  */
 export interface LinkProps
-  extends AnchorHTMLAttributes<HTMLAnchorElement>,
-    LinkClassNameOptions {
+  extends AnchorHTMLAttributes<HTMLAnchorElement>, LinkClassNameOptions {
   /**
    * All links **must** have a valid href.
    */

package/src/link/SkipToMainContent.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { type ReactNode, forwardRef, useEffect, useRef } from "react";
+import { type ReactNode, forwardRef, useRef } from "react";
 
+import { useDevEffect } from "../utils/useDevEffect.js";
 import { Link, type LinkProps } from "./Link.js";
 import {
   type SkipToMainContentClassNameOptions,
@@ -21,8 +22,7 @@ const getMainElement = (mainId: string): HTMLElement | null =>
  * @since 6.0.0 The `mainId` is optional
  */
 export interface SkipToMainContentProps
-  extends Omit<LinkProps, "href">,
-    SkipToMainContentClassNameOptions {
+  extends Omit<LinkProps, "href">, SkipToMainContentClassNameOptions {
   /**
    * @since 6.0.0 Changed default value from `"skip-to-main-content"`
    * @defaultValue `"skip-to-main"`
@@ -95,30 +95,27 @@ export const SkipToMainContent = forwardRef<
   // want to warn the developer about missing main element in development
   // immediately to help prevent errors, but in production this can be lazy
   // initialized only once a keyboard user focuses and clicks this element
-  if (process.env.NODE_ENV !== "production") {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-      mainNodeRef.current = getMainElement(mainId);
+  useDevEffect(() => {
+    mainNodeRef.current = getMainElement(mainId);
 
-      if (!mainNodeRef.current) {
-        const foundMainId = document.querySelector('main,[role="main"]')?.id;
-        let message = `Unable to find a main element to focus`;
-        if (mainId) {
-          message += ` with an id of "${mainId}"`;
+    if (!mainNodeRef.current) {
+      const foundMainId = document.querySelector('main,[role="main"]')?.id;
+      let message = `Unable to find a main element to focus`;
+      if (mainId) {
+        message += ` with an id of "${mainId}"`;
 
-          if (foundMainId) {
-            message += ` but a main element was found with an id of "${foundMainId}".`;
-          }
+        if (foundMainId) {
+          message += ` but a main element was found with an id of "${foundMainId}".`;
         }
-        if (!foundMainId) {
-          message +=
-            '. There should be at least one <main> element or an element with role="main" on the page for accessibility.';
-        }
-
-        throw new Error(message);
       }
-    }, [mainId]);
-  }
+      if (!foundMainId) {
+        message +=
+          '. There should be at least one <main> element or an element with role="main" on the page for accessibility.';
+      }
+
+      throw new Error(message);
+    }
+  }, [mainId]);
 
   return (
     <Link

package/src/list/List.tsx

@@ -8,8 +8,7 @@ export type ListElement = HTMLUListElement | HTMLOListElement;
  * @since 6.3.1 Extends the ListClassNameOptions
  */
 export interface ListProps
-  extends HTMLAttributes<ListElement>,
-    ListClassNameOptions {
+  extends HTMLAttributes<ListElement>, ListClassNameOptions {
   /**
    * @defaultValue `"none"`
    */

package/src/list/ListItem.tsx

@@ -19,7 +19,8 @@ import { type ListItemChildrenProps } from "./types.js";
  * @since 6.3.1 Extends the BaseListItemClassNameOptions
  */
 export interface ListItemProps
-  extends HTMLAttributes<HTMLLIElement>,
+  extends
+    HTMLAttributes<HTMLLIElement>,
     ListItemChildrenProps,
     BaseListItemClassNameOptions,
     ComponentWithRippleProps {

package/src/list/ListItemAddon.tsx

@@ -10,7 +10,8 @@ import {
 } from "./listItemStyles.js";
 
 export interface ListItemAddonProps
-  extends Omit<TextIconSpacingProps, "icon" | "iconAfter" | "forceIconWrap">,
+  extends
+    Omit<TextIconSpacingProps, "icon" | "iconAfter" | "forceIconWrap">,
     ListItemAddonClassNameOptions {
   /**
    * The addon that should be rendered.

package/src/list/ListItemLink.tsx

@@ -17,7 +17,8 @@ import { type ListItemClassNameOptions, listItem } from "./listItemStyles.js";
 import { type ListItemChildrenProps } from "./types.js";
 
 export interface ListItemLinkProps
-  extends AnchorHTMLAttributes<HTMLAnchorElement>,
+  extends
+    AnchorHTMLAttributes<HTMLAnchorElement>,
     ListItemClassNameOptions,
     ListItemChildrenProps,
     ComponentWithRippleProps {

package/src/list/ListSubheader.tsx

@@ -35,8 +35,7 @@ export function listSubheader(
  * @since 6.0.0 The `role` prop defaults to `"presentation"`
  */
 export interface ListSubheaderProps
-  extends HTMLAttributes<HTMLLIElement>,
-    ListSubheaderClassNameOptions {
+  extends HTMLAttributes<HTMLLIElement>, ListSubheaderClassNameOptions {
   /**
    * @defaultValue `"presentation"`
    */