@react-md/core 6.5.2 → 7.0.0

package/src/menu/MenuBar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef } from "react";
+import { type ReactElement, type Ref } from "react";
 
 import { List, type ListProps } from "../list/List.js";
 import {
@@ -10,6 +10,8 @@ import {
 import { MenuBarProvider, useMenuBarProvider } from "./useMenuBarProvider.js";
 
 export interface MenuBarProps extends Omit<ListProps, "role"> {
+  ref?: Ref<HTMLUListElement>;
+
   /**
    * @defaultValue `true`
    */
@@ -71,53 +73,52 @@ export interface MenuBarProps extends Omit<ListProps, "role"> {
  * @since 5.0.0
  * @since 6.0.0 Combined with the previous `MenuBarWidget`
  */
-export const MenuBar = forwardRef<HTMLUListElement, MenuBarProps>(
-  function MenuBar(props, ref) {
-    const {
-      onClick,
-      onFocus,
-      onKeyDown,
-      horizontal = true,
-      hoverTimeout,
-      children,
-      ...remaining
-    } = props;
-    const menuBarContext = useMenuBarProvider({
-      root: true,
-      menubar: true,
-      hoverTimeout,
-    });
-    const { activeId, enableHoverMode } = menuBarContext;
-    const { movementProps, movementContext } = useKeyboardMovementProvider({
-      ref,
-      onClick,
-      onFocus,
-      onKeyDown,
-      loopable: true,
-      searchable: true,
-      horizontal,
-      includeDisabled: true,
-      tabIndexBehavior: "roving",
-      onFocusChange(event) {
-        if (activeId) {
-          enableHoverMode(event.element.id);
-        }
-      },
-    });
+export function MenuBar(props: MenuBarProps): ReactElement {
+  const {
+    ref,
+    onClick,
+    onFocus,
+    onKeyDown,
+    horizontal = true,
+    hoverTimeout,
+    children,
+    ...remaining
+  } = props;
+  const menuBarContext = useMenuBarProvider({
+    root: true,
+    menubar: true,
+    hoverTimeout,
+  });
+  const { activeId, enableHoverMode } = menuBarContext;
+  const { movementProps, movementContext } = useKeyboardMovementProvider({
+    ref,
+    onClick,
+    onFocus,
+    onKeyDown,
+    loopable: true,
+    searchable: true,
+    horizontal,
+    includeDisabled: true,
+    tabIndexBehavior: "roving",
+    onFocusChange(event) {
+      if (activeId) {
+        enableHoverMode(event.element.id);
+      }
+    },
+  });
 
-    return (
-      <KeyboardMovementProvider value={movementContext}>
-        <MenuBarProvider value={menuBarContext}>
-          <List
-            {...remaining}
-            {...movementProps}
-            role="menubar"
-            horizontal={horizontal}
-          >
-            {children}
-          </List>
-        </MenuBarProvider>
-      </KeyboardMovementProvider>
-    );
-  }
-);
+  return (
+    <KeyboardMovementProvider value={movementContext}>
+      <MenuBarProvider value={menuBarContext}>
+        <List
+          {...remaining}
+          {...movementProps}
+          role="menubar"
+          horizontal={horizontal}
+        >
+          {children}
+        </List>
+      </MenuBarProvider>
+    </KeyboardMovementProvider>
+  );
+}

package/src/menu/MenuButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef } from "react";
+import { type ReactElement } from "react";
 
 import { Button, type ButtonProps } from "../button/Button.js";
 import { IconRotator, type IconRotatorProps } from "../icon/IconRotator.js";
@@ -63,76 +63,75 @@ export interface MenuButtonProps extends ButtonProps, BaseMenuButtonProps {}
  * @since 5.0.0
  * @since 6.0.0 See {@link BaseMenuButtonProps} for breaking changes.
  */
-export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
-  function MenuButton(props, ref) {
-    const {
-      id: propId,
-      onClick = noop,
-      onKeyDown = noop,
-      icon: propIcon,
-      iconAfter = true,
-      iconRotatorProps,
-      floating,
-      buttonType = floating ? "icon" : "text",
-      disableDropdownIcon = buttonType === "icon",
-      children,
-      ...remaining
-    } = props;
-    const id = useEnsuredId(propId, "menubutton");
-    const { visible, setVisible, defaultFocusIndex } = useMenuVisibility();
-    const { renderAsSheet } = useMenuConfiguration();
-    const { isPhone } = useAppSize();
-    const isSheet =
-      renderAsSheet === true || (renderAsSheet === "phone" && isPhone);
+export function MenuButton(props: MenuButtonProps): ReactElement {
+  const {
+    ref,
+    id: propId,
+    onClick = noop,
+    onKeyDown = noop,
+    icon: propIcon,
+    iconAfter = true,
+    iconRotatorProps,
+    floating,
+    buttonType = floating ? "icon" : "text",
+    disableDropdownIcon = buttonType === "icon",
+    children,
+    ...remaining
+  } = props;
+  const id = useEnsuredId(propId, "menubutton");
+  const { visible, setVisible, defaultFocusIndex } = useMenuVisibility();
+  const { renderAsSheet } = useMenuConfiguration();
+  const { isPhone } = useAppSize();
+  const isSheet =
+    renderAsSheet === true || (renderAsSheet === "phone" && isPhone);
 
-    const dropdownIcon = getIcon("dropdown", propIcon);
-    let icon = propIcon;
-    if (!disableDropdownIcon) {
-      icon = (
-        <IconRotator {...iconRotatorProps} rotated={visible}>
-          {dropdownIcon}
-        </IconRotator>
-      );
-    }
+  const dropdownIcon = getIcon("dropdown", propIcon);
+  let icon = propIcon;
+  if (!disableDropdownIcon) {
+    icon = (
+      <IconRotator {...iconRotatorProps} rotated={visible}>
+        {dropdownIcon}
+      </IconRotator>
+    );
+  }
 
-    return (
-      <Button
-        {...remaining}
-        aria-haspopup={isSheet ? "dialog" : "menu"}
-        aria-expanded={visible || undefined}
-        id={id}
-        ref={ref}
-        floating={floating}
-        buttonType={buttonType}
-        onClick={(event) => {
-          onClick(event);
+  return (
+    <Button
+      {...remaining}
+      aria-haspopup={isSheet ? "dialog" : "menu"}
+      aria-expanded={visible || undefined}
+      id={id}
+      ref={ref}
+      floating={floating}
+      buttonType={buttonType}
+      onClick={(event) => {
+        onClick(event);
 
-          defaultFocusIndex.current = 0;
-          setVisible((prevVisible) => !prevVisible);
-        }}
-        onKeyDown={(event) => {
-          onKeyDown(event);
+        defaultFocusIndex.current = 0;
+        setVisible((prevVisible) => !prevVisible);
+      }}
+      onKeyDown={(event) => {
+        onKeyDown(event);
 
-          switch (event.key) {
-            case "ArrowDown":
-              event.preventDefault();
-              event.stopPropagation();
-              defaultFocusIndex.current = 0;
-              setVisible(true);
-              break;
-            case "ArrowUp":
-              event.preventDefault();
-              event.stopPropagation();
-              defaultFocusIndex.current = -1;
-              setVisible(true);
-              break;
-          }
-        }}
-      >
-        {!iconAfter && icon}
-        {children}
-        {iconAfter && icon}
-      </Button>
-    );
-  }
-);
+        switch (event.key) {
+          case "ArrowDown":
+            event.preventDefault();
+            event.stopPropagation();
+            defaultFocusIndex.current = 0;
+            setVisible(true);
+            break;
+          case "ArrowUp":
+            event.preventDefault();
+            event.stopPropagation();
+            defaultFocusIndex.current = -1;
+            setVisible(true);
+            break;
+        }
+      }}
+    >
+      {!iconAfter && icon}
+      {children}
+      {iconAfter && icon}
+    </Button>
+  );
+}

package/src/menu/MenuItem.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cnb } from "cnbuilder";
-import { forwardRef } from "react";
+import { type ReactElement, type Ref } from "react";
 
 import { ListItem, type ListItemProps } from "../list/ListItem.js";
 import { useKeyboardMovementContext } from "../movement/useKeyboardMovementProvider.js";
@@ -11,6 +11,8 @@ import { useEnsuredId } from "../useEnsuredId.js";
  * @since 5.0.0
  */
 export interface MenuItemProps extends Omit<ListItemProps, "role"> {
+  ref?: Ref<HTMLLIElement>;
+
   /**
    * @defaultValue `"menuitem"`
    */
@@ -32,41 +34,39 @@ export interface MenuItemProps extends Omit<ListItemProps, "role"> {
  * @see {@link https://react-md.dev/components/menu | Menu Demos}
  * @since 5.0.0
  */
-export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
-  function MenuItem(props, ref) {
-    const {
-      id: propId,
-      role = "menuitem",
-      tabIndex: propTabIndex,
-      children,
-      className,
-      ...remaining
-    } = props;
-
-    const id = useEnsuredId(propId, "menuitem");
-    const { tabIndexBehavior, activeDescendantId } =
-      useKeyboardMovementContext();
-    const focused = id === activeDescendantId;
-    let tabIndex = propTabIndex ?? -1;
-    if (tabIndexBehavior === "roving" && focused) {
-      tabIndex = 0;
-    }
+export function MenuItem(props: MenuItemProps): ReactElement {
+  const {
+    ref,
+    id: propId,
+    role = "menuitem",
+    tabIndex: propTabIndex,
+    children,
+    className,
+    ...remaining
+  } = props;
 
-    return (
-      <ListItem
-        {...remaining}
-        id={id}
-        ref={ref}
-        role={role}
-        tabIndex={tabIndex}
-        className={cnb(
-          "rmd-menu-item",
-          tabIndexBehavior === "virtual" && focused && "rmd-menu-item--focused",
-          className
-        )}
-      >
-        {children}
-      </ListItem>
-    );
+  const id = useEnsuredId(propId, "menuitem");
+  const { tabIndexBehavior, activeDescendantId } = useKeyboardMovementContext();
+  const focused = id === activeDescendantId;
+  let tabIndex = propTabIndex ?? -1;
+  if (tabIndexBehavior === "roving" && focused) {
+    tabIndex = 0;
   }
-);
+
+  return (
+    <ListItem
+      {...remaining}
+      id={id}
+      ref={ref}
+      role={role}
+      tabIndex={tabIndex}
+      className={cnb(
+        "rmd-menu-item",
+        tabIndexBehavior === "virtual" && focused && "rmd-menu-item--focused",
+        className
+      )}
+    >
+      {children}
+    </ListItem>
+  );
+}

package/src/menu/MenuItemButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useEffect } from "react";
+import { type ReactElement, useEffect } from "react";
 
 import { useHoverMode } from "../hoverMode/useHoverMode.js";
 import { IconRotator } from "../icon/IconRotator.js";
@@ -34,139 +34,138 @@ export interface MenuItemButtonProps
  * @internal
  * @since 5.0.0
  */
-export const MenuItemButton = forwardRef<HTMLLIElement, MenuItemButtonProps>(
-  function MenuItemButton(props, ref) {
-    const {
-      id: propId,
-      children,
-      height: propHeight,
-      onClick = noop,
-      onKeyDown = noop,
-      onMouseEnter = noop,
-      onMouseLeave = noop,
-      rightAddon: propRightAddon,
-      iconRotatorProps,
-      disableDropdownIcon = propRightAddon !== undefined,
-      ...remaining
-    } = props;
-    const { disabled } = props;
-
-    const id = useEnsuredId(propId, "menuitem");
-    const mode = useUserInteractionMode();
-    const { renderAsSheet } = useMenuConfiguration();
-    const { isPhone } = useAppSize();
-    const isSheet =
-      renderAsSheet === true || (renderAsSheet === "phone" && isPhone);
-    const {
-      root,
-      menubar,
-      activeId,
-      enableHoverMode,
-      disableHoverMode,
-      startDisableTimer,
-      clearDisableTimer,
-      leaveTimeoutRef,
-      hoverTimeoutRef,
-    } = useMenuBarContext();
-    const { visible, setVisible, defaultFocusIndex } = useMenuVisibility();
-    const { startShowFlow, clearVisibilityTimeout } = useHoverMode({
-      setVisible,
-      enableHoverMode,
-      disableHoverMode,
-      startDisableTimer,
-      leaveTimeoutRef,
-      hoverTimeoutRef,
-      clearDisableTimer,
-    });
-    const { horizontal } = useMenuConfiguration();
-
-    useEffect(() => {
-      setVisible(id === activeId);
-    }, [activeId, defaultFocusIndex, id, menubar, setVisible]);
-
-    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}
-        </IconRotator>
-      );
+export function MenuItemButton(props: MenuItemButtonProps): ReactElement {
+  const {
+    ref,
+    id: propId,
+    children,
+    height: propHeight,
+    onClick = noop,
+    onKeyDown = noop,
+    onMouseEnter = noop,
+    onMouseLeave = noop,
+    rightAddon: propRightAddon,
+    iconRotatorProps,
+    disableDropdownIcon = propRightAddon !== undefined,
+    ...remaining
+  } = props;
+  const { disabled } = props;
+
+  const id = useEnsuredId(propId, "menuitem");
+  const mode = useUserInteractionMode();
+  const { renderAsSheet } = useMenuConfiguration();
+  const { isPhone } = useAppSize();
+  const isSheet =
+    renderAsSheet === true || (renderAsSheet === "phone" && isPhone);
+  const {
+    root,
+    menubar,
+    activeId,
+    enableHoverMode,
+    disableHoverMode,
+    startDisableTimer,
+    clearDisableTimer,
+    leaveTimeoutRef,
+    hoverTimeoutRef,
+  } = useMenuBarContext();
+  const { visible, setVisible, defaultFocusIndex } = useMenuVisibility();
+  const { startShowFlow, clearVisibilityTimeout } = useHoverMode({
+    setVisible,
+    enableHoverMode,
+    disableHoverMode,
+    startDisableTimer,
+    leaveTimeoutRef,
+    hoverTimeoutRef,
+    clearDisableTimer,
+  });
+  const { horizontal } = useMenuConfiguration();
+
+  useEffect(() => {
+    setVisible(id === activeId);
+  }, [activeId, defaultFocusIndex, id, menubar, setVisible]);
+
+  let height = propHeight;
+  let rightAddon = propRightAddon;
+  const dropdownIcon = getIcon(root ? "dropdown" : "forward");
+  if (!disableDropdownIcon) {
+    if (!height && !props.leftAddon) {
+      height = "normal";
     }
 
-    const updateVisibility = (nextVisible: boolean, focusIndex = 0): void => {
-      defaultFocusIndex.current = focusIndex;
-      setVisible(nextVisible);
-      if (!menubar) {
-        return;
-      }
-
-      if (nextVisible) {
-        enableHoverMode(id);
-      } else {
-        disableHoverMode();
-      }
-    };
-
-    return (
-      <MenuItem
-        {...remaining}
-        aria-haspopup={isSheet ? "dialog" : "menu"}
-        aria-expanded={visible || undefined}
-        id={id}
-        ref={ref}
-        rightAddon={rightAddon}
-        onClick={(event) => {
-          onClick(event);
-
-          event.stopPropagation();
-          updateVisibility(!visible);
-        }}
-        onKeyDown={(event) => {
-          onKeyDown(event);
-
-          switch (event.key) {
-            case "ArrowDown":
-              if (horizontal || root) {
-                event.preventDefault();
-                event.stopPropagation();
-                updateVisibility(true);
-              }
-              break;
-            case "ArrowRight":
-              if (!horizontal && !root) {
-                event.preventDefault();
-                event.stopPropagation();
-                updateVisibility(true);
-              }
-              break;
-          }
-        }}
-        onMouseEnter={(event) => {
-          onMouseEnter(event);
-          if (mode === "touch" || disabled || !menubar) {
-            return;
-          }
-
-          defaultFocusIndex.current = 0;
-          startShowFlow(id);
-        }}
-        onMouseLeave={(event) => {
-          onMouseLeave(event);
-          if (mode === "touch" || disabled || !menubar) {
-            return;
-          }
-
-          clearVisibilityTimeout();
-        }}
-      >
-        {children}
-      </MenuItem>
+    rightAddon = (
+      <IconRotator {...iconRotatorProps} rotated={visible}>
+        {dropdownIcon}
+      </IconRotator>
     );
   }
-);
+
+  const updateVisibility = (nextVisible: boolean, focusIndex = 0): void => {
+    defaultFocusIndex.current = focusIndex;
+    setVisible(nextVisible);
+    if (!menubar) {
+      return;
+    }
+
+    if (nextVisible) {
+      enableHoverMode(id);
+    } else {
+      disableHoverMode();
+    }
+  };
+
+  return (
+    <MenuItem
+      {...remaining}
+      aria-haspopup={isSheet ? "dialog" : "menu"}
+      aria-expanded={visible || undefined}
+      id={id}
+      ref={ref}
+      rightAddon={rightAddon}
+      onClick={(event) => {
+        onClick(event);
+
+        event.stopPropagation();
+        updateVisibility(!visible);
+      }}
+      onKeyDown={(event) => {
+        onKeyDown(event);
+
+        switch (event.key) {
+          case "ArrowDown":
+            if (horizontal || root) {
+              event.preventDefault();
+              event.stopPropagation();
+              updateVisibility(true);
+            }
+            break;
+          case "ArrowRight":
+            if (!horizontal && !root) {
+              event.preventDefault();
+              event.stopPropagation();
+              updateVisibility(true);
+            }
+            break;
+        }
+      }}
+      onMouseEnter={(event) => {
+        onMouseEnter(event);
+        if (mode === "touch" || disabled || !menubar) {
+          return;
+        }
+
+        defaultFocusIndex.current = 0;
+        startShowFlow(id);
+      }}
+      onMouseLeave={(event) => {
+        onMouseLeave(event);
+        if (mode === "touch" || disabled || !menubar) {
+          return;
+        }
+
+        clearVisibilityTimeout();
+      }}
+    >
+      {children}
+    </MenuItem>
+  );
+}

package/src/menu/MenuItemCheckbox.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef } from "react";
+import { type ReactElement } from "react";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { type ICON_CONFIG } from "../icon/config.js";
@@ -41,9 +41,8 @@ import {
  * @see {@link https://react-md.dev/components/menu#menuitemcheckbox-example | DropdownMenu Demos}
  * @since 2.8.0
  */
-export const MenuItemCheckbox = forwardRef<
-  HTMLLIElement,
-  MenuItemCheckboxProps
->(function MenuItemCheckbox(props, ref) {
-  return <MenuItemInputToggle {...props} ref={ref} type="checkbox" />;
-});
+export function MenuItemCheckbox(props: MenuItemCheckboxProps): ReactElement {
+  const { ref, ...remaining } = props;
+
+  return <MenuItemInputToggle {...remaining} ref={ref} type="checkbox" />;
+}