@react-md/core 6.3.3 → 6.4.0

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"`
    */

package/src/list/getListItemHeight.ts

@@ -4,15 +4,14 @@ import type { ListItemChildrenProps, ListItemHeight } from "./types.js";
  * @since 6.0.0
  * @internal
  */
-export interface ListItemHeightOptions
-  extends Pick<
-    ListItemChildrenProps,
-    | "leftAddon"
-    | "rightAddon"
-    | "leftAddonType"
-    | "rightAddonType"
-    | "secondaryText"
-  > {
+export interface ListItemHeightOptions extends Pick<
+  ListItemChildrenProps,
+  | "leftAddon"
+  | "rightAddon"
+  | "leftAddonType"
+  | "rightAddonType"
+  | "secondaryText"
+> {
   /**
    * @see {@link ListItemHeight}
    */

package/src/list/listItemStyles.ts

@@ -72,8 +72,7 @@ export interface ListItemClassNameOptions extends BaseListItemClassNameOptions {
 }
 
 /** @since 6.0.0 */
-export interface InternalListItemClassNameOptions
-  extends ListItemClassNameOptions {
+export interface InternalListItemClassNameOptions extends ListItemClassNameOptions {
   /**
    * @defaultValue `false`
    */

package/src/list/types.ts

@@ -227,5 +227,4 @@ export interface ListItemChildrenTextProps {
  * @since 6.0.0 Renamed `textChildren` to `disableTextChildren`
  */
 export interface ListItemChildrenProps
-  extends ListItemChildrenTextProps,
-    ListItemChildrenAddonProps {}
+  extends ListItemChildrenTextProps, ListItemChildrenAddonProps {}

package/src/media-queries/AppSizeProvider.tsx

@@ -14,12 +14,8 @@ import {
   type AppSize,
   type AppSizeQueries,
   DEFAULT_APP_SIZE,
-  DEFAULT_DESKTOP_LARGE_MIN_WIDTH,
-  DEFAULT_DESKTOP_MIN_WIDTH,
-  DEFAULT_PHONE_MAX_WIDTH,
-  DEFAULT_TABLET_MAX_WIDTH,
-  DEFAULT_TABLET_MIN_WIDTH,
 } from "./appSize.js";
+import { MEDIA_QUERY_CONFIG } from "./config.js";
 import { useMediaQuery } from "./useMediaQuery.js";
 
 /** @internal */
@@ -71,6 +67,8 @@ export function useAppSize(): Readonly<AppSize> {
  * @since 6.0.0 Renamed from `AppSizeListenerProps`.
  * @since 6.0.0 Removed the `onChange` prop
  * @since 6.0.0 Renamed `defaultSize` to `ssrSize`
+ * @since 6.4.0 Deprecated the `AppSizeQueries` in favor
+ * of the `MEDIA_QUERY_CONFIG`
  */
 export interface AppSizeProviderProps extends AppSizeQueries {
   /**
@@ -95,11 +93,11 @@ export interface AppSizeProviderProps extends AppSizeQueries {
 export function AppSizeProvider(props: AppSizeProviderProps): ReactElement {
   const {
     ssrSize = DEFAULT_APP_SIZE,
-    phoneMaxWidth = DEFAULT_PHONE_MAX_WIDTH,
-    tabletMinWidth = DEFAULT_TABLET_MIN_WIDTH,
-    tabletMaxWidth = DEFAULT_TABLET_MAX_WIDTH,
-    desktopMinWidth = DEFAULT_DESKTOP_MIN_WIDTH,
-    desktopLargeMinWidth = DEFAULT_DESKTOP_LARGE_MIN_WIDTH,
+    phoneMaxWidth = MEDIA_QUERY_CONFIG.phoneMaxWidth,
+    tabletMinWidth = MEDIA_QUERY_CONFIG.tabletMinWidth,
+    tabletMaxWidth = MEDIA_QUERY_CONFIG.tabletMaxWidth,
+    desktopMinWidth = MEDIA_QUERY_CONFIG.desktopMinWidth,
+    desktopLargeMinWidth = MEDIA_QUERY_CONFIG.desktopLargeMinWidth,
     children,
   } = props;
   const { __root } = useContext(context);

package/src/media-queries/appSize.ts

@@ -62,6 +62,9 @@ export interface AppSizeQueries {
   desktopLargeMinWidth?: QuerySize;
 }
 
+/**
+ * @deprecated Use `MEDIA_QUERY_CONFIG` instead.
+ */
 export const DEFAULT_APP_SIZE_QUERIES: Readonly<AppSizeQueries> = {
   phoneMaxWidth: DEFAULT_PHONE_MAX_WIDTH,
   tabletMinWidth: DEFAULT_TABLET_MIN_WIDTH,

package/src/media-queries/config.ts

@@ -0,0 +1,41 @@
+import {
+  type AppSizeQueries,
+  DEFAULT_DESKTOP_LARGE_MIN_WIDTH,
+  DEFAULT_DESKTOP_MIN_WIDTH,
+  DEFAULT_PHONE_MAX_WIDTH,
+  DEFAULT_TABLET_MAX_WIDTH,
+  DEFAULT_TABLET_MIN_WIDTH,
+} from "./appSize.js";
+
+/** @since 6.4.0 */
+export type MediaQueryConfig = Required<AppSizeQueries>;
+
+/**
+ * @since 6.4.0
+ */
+export const MEDIA_QUERY_CONFIG: MediaQueryConfig = {
+  phoneMaxWidth: DEFAULT_PHONE_MAX_WIDTH,
+  tabletMinWidth: DEFAULT_TABLET_MIN_WIDTH,
+  tabletMaxWidth: DEFAULT_TABLET_MAX_WIDTH,
+  desktopMinWidth: DEFAULT_DESKTOP_MIN_WIDTH,
+  desktopLargeMinWidth: DEFAULT_DESKTOP_LARGE_MIN_WIDTH,
+};
+
+/**
+ * @since 6.4.0
+ */
+export function configureMediaQueries(
+  queries: Readonly<Partial<MediaQueryConfig>>
+): void {
+  if (process.env.NODE_ENV !== "production") {
+    Object.entries(queries).forEach(([name, value]) => {
+      if (!(name in MEDIA_QUERY_CONFIG)) {
+        throw new Error(`${name} is an invalid react-md media query.`);
+      }
+
+      MEDIA_QUERY_CONFIG[name as keyof MediaQueryConfig] = value;
+    });
+  } else {
+    Object.assign(MEDIA_QUERY_CONFIG, queries);
+  }
+}

package/src/menu/DropdownMenu.tsx

@@ -29,7 +29,8 @@ import { MenuVisibilityProvider } from "./MenuVisibilityProvider.js";
 import { useMenuBarContext } from "./useMenuBarProvider.js";
 
 export interface BaseDropdownMenuProps
-  extends MenuConfiguration,
+  extends
+    MenuConfiguration,
     MenuListConvenienceProps,
     MenuSheetConvenienceProps,
     MenuConvenienceProps {
@@ -37,12 +38,10 @@ export interface BaseDropdownMenuProps
 }
 
 export interface DropdownMenuButtonProps
-  extends MenuButtonProps,
-    BaseDropdownMenuProps {}
+  extends MenuButtonProps, BaseDropdownMenuProps {}
 
 export interface DropdownMenuItemButtonProps
-  extends MenuItemButtonProps,
-    BaseDropdownMenuProps {}
+  extends MenuItemButtonProps, BaseDropdownMenuProps {}
 
 /**
  * @since 6.0.0

package/src/menu/Menu.tsx

@@ -215,7 +215,8 @@ export type MenuFixedPositioningOptions = Omit<
  * @since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.
  */
 export interface MenuProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends
+    HTMLAttributes<HTMLDivElement>,
     MenuConfiguration,
     MenuConfigurationProps,
     MenuFixedPositioningOptions,

package/src/menu/MenuItemButton.tsx

@@ -23,8 +23,7 @@ const noop = (): void => {
  * @since 5.0.0
  */
 export interface MenuItemButtonProps
-  extends BaseMenuButtonProps,
-    MenuItemProps {}
+  extends BaseMenuButtonProps, MenuItemProps {}
 
 /**
  * **Client Component**

package/src/menu/MenuItemFileInput.tsx

@@ -19,7 +19,8 @@ const noop = (): void => {
  * implementation.
  */
 export interface MenuItemFileInputProps
-  extends Omit<MenuItemProps, "onChange">,
+  extends
+    Omit<MenuItemProps, "onChange">,
     Pick<
       InputHTMLAttributes<HTMLInputElement>,
       "accept" | "capture" | "multiple"