@react-md/core 6.5.2 → 7.0.0

package/src/menu/MenuItemCircularProgress.tsx

@@ -1,5 +1,10 @@
 import { cnb } from "cnbuilder";
-import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+import {
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
 
 import { ListItemChildren } from "../list/ListItemChildren.js";
 import { listItem } from "../list/listItemStyles.js";
@@ -16,6 +21,8 @@ import {
  * @since 6.0.0
  */
 export interface MenuItemCircularProgressProps extends CircularProgressProps {
+  ref?: Ref<HTMLLIElement>;
+
   /** @defaultValue `"Loading"` */
   "aria-label"?: string;
 
@@ -69,11 +76,11 @@ export interface MenuItemCircularProgressProps extends CircularProgressProps {
  *
  * @since 6.0.0
  */
-export const MenuItemCircularProgress = forwardRef<
-  HTMLLIElement,
-  MenuItemCircularProgressProps
->(function MenuItemCircularProgress(props, ref) {
+export function MenuItemCircularProgress(
+  props: MenuItemCircularProgressProps
+): ReactElement {
   const {
+    ref,
     "aria-label": propAriaLabel,
     "aria-labelledby": ariaLabelledBy,
     role = "none",
@@ -111,4 +118,4 @@ export const MenuItemCircularProgress = forwardRef<
       </ListItemChildren>
     </li>
   );
-});
+}

package/src/menu/MenuItemFileInput.tsx

@@ -3,7 +3,7 @@
 import {
   type ChangeEventHandler,
   type InputHTMLAttributes,
-  forwardRef,
+  type ReactElement,
 } from "react";
 
 import { getIcon } from "../icon/config.js";
@@ -63,11 +63,9 @@ export interface MenuItemFileInputProps
  * menu item. This allows the menu to be closed immediately when this menu item
  * is clicked.
  */
-export const MenuItemFileInput = forwardRef<
-  HTMLLIElement,
-  MenuItemFileInputProps
->(function MenuItemFileInput(props, ref) {
+export function MenuItemFileInput(props: MenuItemFileInputProps): ReactElement {
   const {
+    ref,
     id: propId,
     onClick = noop,
     onChange,
@@ -122,4 +120,4 @@ export const MenuItemFileInput = forwardRef<
       {children}
     </MenuItem>
   );
-});
+}

package/src/menu/MenuItemGroup.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { cnb } from "cnbuilder";
-import { type ReactNode, forwardRef } from "react";
+import { type ReactElement, type ReactNode } from "react";
 
-import { List, type ListElement, type ListProps } from "../list/List.js";
+import { List, type ListProps } from "../list/List.js";
 import { type LabelRequiredForA11y } from "../types.js";
 import { useMenuConfiguration } from "./MenuConfigurationProvider.js";
 
@@ -79,19 +79,19 @@ export type MenuItemGroupProps = LabelRequiredForA11y<
  * @see {@link https://react-md.dev/components/menu | Menu Demos}
  * @since 5.0.0
  */
-export const MenuItemGroup = forwardRef<ListElement, MenuItemGroupProps>(
-  function MenuItemGroup({ children, className, ...props }, ref) {
-    const { horizontal } = useMenuConfiguration(props);
-    return (
-      <List
-        {...props}
-        ref={ref}
-        role="group"
-        className={cnb("rmd-menu-item-group", className)}
-        horizontal={horizontal}
-      >
-        {children}
-      </List>
-    );
-  }
-);
+export function MenuItemGroup(props: MenuItemGroupProps): ReactElement {
+  const { ref, children, className, ...remaining } = props;
+  const { horizontal } = useMenuConfiguration(props);
+
+  return (
+    <List
+      {...remaining}
+      ref={ref}
+      role="group"
+      className={cnb("rmd-menu-item-group", className)}
+      horizontal={horizontal}
+    >
+      {children}
+    </List>
+  );
+}

package/src/menu/MenuItemInputToggle.tsx

@@ -5,8 +5,9 @@ import {
   type CSSProperties,
   type HTMLAttributes,
   type MouseEvent,
+  type ReactElement,
   type ReactNode,
-  forwardRef,
+  type Ref,
 } from "react";
 
 import {
@@ -50,6 +51,7 @@ export interface BaseMenuItemInputToggleProps
     HTMLAttributes<HTMLLIElement>,
     ConfigurableInputToggleIconProps,
     ListItemChildrenTextProps {
+  ref?: Ref<HTMLLIElement>;
   checked: boolean;
   onCheckedChange: MenuItemInputToggleCheckedCallback;
 
@@ -139,11 +141,11 @@ export type MenuItemInputToggleProps =
  * @see {@link MenuItemSwitch} for switch examples
  * @since 2.8.0
  */
-export const MenuItemInputToggle = forwardRef<
-  HTMLLIElement,
-  MenuItemInputToggleProps
->(function MenuItemInputToggle(props, ref) {
+export function MenuItemInputToggle(
+  props: MenuItemInputToggleProps
+): ReactElement {
   const {
+    ref,
     id: propId,
     type,
     disabled = false,
@@ -278,4 +280,4 @@ export const MenuItemInputToggle = forwardRef<
       {children}
     </ListItem>
   );
-});
+}

package/src/menu/MenuItemRadio.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";
@@ -110,8 +110,8 @@ import {
  * @see {@link https://react-md.dev/components/menu#menuitemradio-example | DropdownMenu Demos}
  * @since 2.8.0
  */
-export const MenuItemRadio = forwardRef<HTMLLIElement, MenuItemRadioProps>(
-  function MenuItemRadio(props, ref) {
-    return <MenuItemInputToggle {...props} ref={ref} type="radio" />;
-  }
-);
+export function MenuItemRadio(props: MenuItemRadioProps): ReactElement {
+  const { ref, ...remaining } = props;
+
+  return <MenuItemInputToggle {...remaining} ref={ref} type="radio" />;
+}

package/src/menu/MenuItemSeparator.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { type DividerProps } from "../divider/Divider.js";
 import { divider } from "../divider/styles.js";
@@ -10,7 +10,9 @@ import { useMenuConfiguration } from "./MenuConfigurationProvider.js";
 export interface MenuItemSeparatorProps
   extends
     HTMLAttributes<HTMLLIElement>,
-    Pick<DividerProps, "inset" | "vertical"> {}
+    Pick<DividerProps, "inset" | "vertical"> {
+  ref?: Ref<HTMLLIElement>;
+}
 
 /**
  * **Client Component**
@@ -22,11 +24,9 @@ export interface MenuItemSeparatorProps
  * @see {@link https://react-md.dev/components/menu | Menu Demos}
  * @since 5.0.0 Renders as an `<li>` instead of a `<div>` or `<hr />`.
  */
-export const MenuItemSeparator = forwardRef<
-  HTMLLIElement,
-  MenuItemSeparatorProps
->(function MenuItemSeparator(props, ref) {
+export function MenuItemSeparator(props: MenuItemSeparatorProps): ReactElement {
   const {
+    ref,
     className,
     inset,
     vertical: propVertical,
@@ -48,4 +48,4 @@ export const MenuItemSeparator = forwardRef<
       {children}
     </li>
   );
-});
+}

package/src/menu/MenuItemSwitch.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef } from "react";
+import { type ReactElement } from "react";
 
 import {
   MenuItemInputToggle,
@@ -38,8 +38,8 @@ import {
  * @see {@link https://react-md.dev/components/menu#menuitemswitch-example | DropdownMenu Demos}
  * @since 2.8.0
  */
-export const MenuItemSwitch = forwardRef<HTMLLIElement, MenuItemSwitchProps>(
-  function MenuItemSwitch(props, ref) {
-    return <MenuItemInputToggle {...props} ref={ref} type="switch" />;
-  }
-);
+export function MenuItemSwitch(props: MenuItemSwitchProps): ReactElement {
+  const { ref, ...remaining } = props;
+
+  return <MenuItemInputToggle {...remaining} ref={ref} type="switch" />;
+}

package/src/menu/MenuItemTextField.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cnb } from "cnbuilder";
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement } from "react";
 
 import { TextField, type TextFieldProps } from "../form/TextField.js";
 import { type PropsWithRef } from "../types.js";
@@ -30,11 +30,9 @@ export interface MenuItemTextFieldProps extends TextFieldProps {
  * @see {@link https://react-md.dev/components/menu#menuitemtextfield-example | DropdownMenu Demos}
  * @since 5.0.0
  */
-export const MenuItemTextField = forwardRef<
-  HTMLInputElement,
-  MenuItemTextFieldProps
->(function MenuItemTextField(props, ref) {
-  const { liProps, onKeyDown, ...remaining } = props;
+export function MenuItemTextField(props: MenuItemTextFieldProps): ReactElement {
+  const { ref, liProps, onKeyDown, ...remaining } = props;
+
   return (
     <li
       role="none"
@@ -65,4 +63,4 @@ export const MenuItemTextField = forwardRef<
       />
     </li>
   );
-});
+}

package/src/menu/MenuVisibilityProvider.tsx

@@ -3,12 +3,13 @@
 import {
   type ReactElement,
   type ReactNode,
+  type RefObject,
   createContext,
   useContext,
   useMemo,
 } from "react";
 
-import { type NonNullMutableRef, type UseStateObject } from "../types.js";
+import { type UseStateObject } from "../types.js";
 
 /**
  * @since 5.0.0
@@ -18,7 +19,7 @@ export interface MenuVisibilityContext extends UseStateObject<
   "visible",
   boolean
 > {
-  defaultFocusIndex: NonNullMutableRef<number>;
+  defaultFocusIndex: RefObject<number>;
 }
 
 /**

package/src/menu/MenuWidget.tsx

@@ -1,11 +1,17 @@
 "use client";
 
-import { type HTMLAttributes, forwardRef, useRef, useState } from "react";
+import {
+  type HTMLAttributes,
+  type ReactElement,
+  type Ref,
+  type RefObject,
+  useRef,
+  useState,
+} from "react";
 
 import { List } from "../list/List.js";
 import { type GetDefaultFocusedIndex } from "../movement/types.js";
 import { useKeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
-import { type NonNullMutableRef } from "../types.js";
 import { type MenuListConvenienceProps } from "./Menu.js";
 import { MenuWidgetKeyboardProvider } from "./MenuWidgetKeyboardProvider.js";
 import { menu } from "./styles.js";
@@ -24,10 +30,11 @@ const noop = (): void => {
  */
 export interface MenuWidgetProps
   extends HTMLAttributes<HTMLDivElement>, MenuListConvenienceProps {
+  ref?: Ref<HTMLDivElement>;
   isSheet: boolean;
   horizontal: boolean;
   disableElevation?: boolean;
-  cancelUnmountFocus: NonNullMutableRef<boolean>;
+  cancelUnmountFocus: RefObject<boolean>;
   getDefaultFocusedIndex?: GetDefaultFocusedIndex;
 }
 
@@ -41,127 +48,124 @@ export interface MenuWidgetProps
  *
  * @internal
  */
-export const MenuWidget = forwardRef<HTMLDivElement, MenuWidgetProps>(
-  function MenuWidget(props, ref) {
-    const {
-      id,
-      role = "menu",
-      className,
-      listStyle,
-      listClassName,
-      listProps,
-      children,
-      onClick,
-      onBlur = noop,
-      onFocus = noop,
-      onKeyDown = noop,
-      tabIndex = -1,
-      isSheet,
-      horizontal,
-      disableElevation,
-      cancelUnmountFocus,
-      getDefaultFocusedIndex,
-      ...remaining
-    } = props;
-    const isListbox = role === "listbox";
-    const { menubar } = useMenuBarContext();
+export function MenuWidget(props: MenuWidgetProps): ReactElement {
+  const {
+    ref,
+    id,
+    role = "menu",
+    className,
+    listStyle,
+    listClassName,
+    listProps,
+    children,
+    onClick,
+    onBlur = noop,
+    onFocus = noop,
+    onKeyDown = noop,
+    tabIndex = -1,
+    isSheet,
+    horizontal,
+    disableElevation,
+    cancelUnmountFocus,
+    getDefaultFocusedIndex,
+    ...remaining
+  } = props;
+  const isListbox = role === "listbox";
+  const { menubar } = useMenuBarContext();
+
+  // Since there is the possibility of other tab focusable elements within the
+  // sheet and the menu items are programmatically focused, the menu's
+  // tabIndex needs to be set to `-1` while one of the child menu items are
+  // focused. This allows Shift+Tab correctly focuses the previous focusable
+  // element within the sheet. Since `onFocus` and `onBlur` will be bubbled up
+  // to the menu widget each time a new MenuItem is focused, only disable the
+  // focused state if the blur event is fired without another focus event
+  // within an animation frame.
+  const [sheetMenuFocused, setSheetMenuFocused] = useState(false);
+  const sheetBlurredFame = useRef(0);
+  const menuBarContext = useMenuBarProvider({
+    root: false,
+    menubar,
+    hoverTimeout: menubar ? 0 : undefined,
+    defaultActiveId: id,
+  });
+  const { movementProps, movementContext } = useKeyboardMovementProvider({
+    ref,
+    onClick,
+    onFocus(event) {
+      onFocus(event);
 
-    // Since there is the possibility of other tab focusable elements within the
-    // sheet and the menu items are programmatically focused, the menu's
-    // tabIndex needs to be set to `-1` while one of the child menu items are
-    // focused. This allows Shift+Tab correctly focuses the previous focusable
-    // element within the sheet. Since `onFocus` and `onBlur` will be bubbled up
-    // to the menu widget each time a new MenuItem is focused, only disable the
-    // focused state if the blur event is fired without another focus event
-    // within an animation frame.
-    const [sheetMenuFocused, setSheetMenuFocused] = useState(false);
-    const sheetBlurredFame = useRef(0);
-    const menuBarContext = useMenuBarProvider({
-      root: false,
-      menubar,
-      hoverTimeout: menubar ? 0 : undefined,
-      defaultActiveId: id,
-    });
-    const { movementProps, movementContext } = useKeyboardMovementProvider({
-      ref,
-      onClick,
-      onFocus(event) {
-        onFocus(event);
+      if (!isSheet) {
+        return;
+      }
 
-        if (!isSheet) {
-          return;
-        }
+      globalThis.cancelAnimationFrame(sheetBlurredFame.current);
+      setSheetMenuFocused(true);
+    },
+    onKeyDown,
+    horizontal,
+    loopable: true,
+    searchable: true,
+    programmatic: true,
+    includeDisabled: true,
+    getDefaultFocusedIndex,
+  });
 
-        globalThis.cancelAnimationFrame(sheetBlurredFame.current);
-        setSheetMenuFocused(true);
-      },
-      onKeyDown,
-      horizontal,
-      loopable: true,
-      searchable: true,
-      programmatic: true,
-      includeDisabled: true,
-      getDefaultFocusedIndex,
-    });
+  return (
+    <MenuWidgetKeyboardProvider disabled={isListbox} value={movementContext}>
+      <MenuBarProvider value={menuBarContext}>
+        <div
+          aria-orientation={horizontal ? "horizontal" : undefined}
+          {...remaining}
+          {...(isListbox
+            ? { onClick, onFocus, onKeyDown, ref }
+            : movementProps)}
+          id={id}
+          role={role}
+          className={menu({
+            className,
+            elevated: !disableElevation && !isSheet,
+            horizontal,
+          })}
+          tabIndex={isSheet && !sheetMenuFocused ? 0 : tabIndex}
+          onBlur={(event) => {
+            onBlur(event);
+            if (!isSheet) {
+              return;
+            }
 
-    return (
-      <MenuWidgetKeyboardProvider disabled={isListbox} value={movementContext}>
-        <MenuBarProvider value={menuBarContext}>
-          <div
-            aria-orientation={horizontal ? "horizontal" : undefined}
-            {...remaining}
-            {...(isListbox
-              ? { onClick, onFocus, onKeyDown, ref }
-              : movementProps)}
-            id={id}
-            role={role}
-            className={menu({
-              className,
-              elevated: !disableElevation && !isSheet,
-              horizontal,
-            })}
-            tabIndex={isSheet && !sheetMenuFocused ? 0 : tabIndex}
-            onBlur={(event) => {
-              onBlur(event);
-              if (!isSheet) {
-                return;
+            sheetBlurredFame.current = globalThis.requestAnimationFrame(() => {
+              setSheetMenuFocused(false);
+            });
+          }}
+        >
+          <List
+            {...listProps}
+            style={listStyle ?? listProps?.style}
+            className={listClassName || listProps?.className}
+            horizontal={horizontal}
+            onClick={(event) => {
+              listProps?.onClick?.(event);
+
+              // this makes it so you can click on the menu/list without
+              // closing the menu
+              if (event.target === event.currentTarget) {
+                event.stopPropagation();
               }
 
-              sheetBlurredFame.current = globalThis.requestAnimationFrame(
-                () => {
-                  setSheetMenuFocused(false);
-                }
-              );
+              // This might be a test only workaround since clicking links move focus
+              // somewhere else
+              if (event.target instanceof HTMLElement) {
+                cancelUnmountFocus.current = event.currentTarget.contains(
+                  event.target.closest("a")
+                );
+              }
             }}
           >
-            <List
-              {...listProps}
-              style={listStyle ?? listProps?.style}
-              className={listClassName || listProps?.className}
-              horizontal={horizontal}
-              onClick={(event) => {
-                listProps?.onClick?.(event);
-
-                // this makes it so you can click on the menu/list without
-                // closing the menu
-                if (event.target === event.currentTarget) {
-                  event.stopPropagation();
-                }
-
-                // This might be a test only workaround since clicking links move focus
-                // somewhere else
-                if (event.target instanceof HTMLElement) {
-                  cancelUnmountFocus.current = event.currentTarget.contains(
-                    event.target.closest("a")
-                  );
-                }
-              }}
-            >
-              {children}
-            </List>
-          </div>
-        </MenuBarProvider>
-      </MenuWidgetKeyboardProvider>
-    );
-  }
-);
+            {children}
+          </List>
+        </div>
+      </MenuBarProvider>
+    </MenuWidgetKeyboardProvider>
+  );
+}

package/src/menu/useContextMenu.ts

@@ -1,17 +1,20 @@
 "use client";
 
-import type { MouseEvent, RefObject } from "react";
+import { type MouseEvent, type RefObject } from "react";
 import { useCallback, useRef, useState } from "react";
 
 import { BELOW_INNER_LEFT_ANCHOR } from "../positioning/constants.js";
-import type { InitialCoords, PositionAnchor } from "../positioning/types.js";
-import type { UseStateObject } from "../types.js";
+import {
+  type InitialCoords,
+  type PositionAnchor,
+} from "../positioning/types.js";
+import { type UseStateObject } from "../types.js";
 
 /** @since 6.0.0 */
 export interface ContextMenuProps extends InitialCoords {
   "aria-label": string;
   anchor: PositionAnchor;
-  fixedTo: RefObject<HTMLElement>;
+  fixedTo: RefObject<HTMLElement | null>;
   visible: boolean;
   preventScroll: boolean;
   onRequestClose: () => void;

package/src/movement/types.ts

@@ -6,11 +6,7 @@ import {
   type RefObject,
 } from "react";
 
-import {
-  type NonNullMutableRef,
-  type NonNullRef,
-  type UseStateSetter,
-} from "../types.js";
+import { type UseStateSetter } from "../types.js";
 
 /**
  * Set this to `"roving"` when:
@@ -182,7 +178,7 @@ export interface KeyboardMovementUpdateFocusIndexOptions {
  */
 export interface KeyboardMovementContext extends Required<KeyboardMovementBehavior> {
   /** {@inheritDoc KeyboardMovementConfig} */
-  config: NonNullRef<KeyboardMovementConfig>;
+  config: RefObject<KeyboardMovementConfig>;
 
   /** @see {@link TabIndexBehavior} */
   tabIndexBehavior: TabIndexBehavior | undefined;
@@ -280,7 +276,7 @@ export interface KeyboardMovementExtensionData<
   E extends HTMLElement,
 > extends KeyboardMovementContext {
   event: KeyboardEvent<E>;
-  currentFocusIndex: NonNullMutableRef<number>;
+  currentFocusIndex: RefObject<number>;
   setFocusIndex: (index: number, focusables: readonly HTMLElement[]) => void;
   setActiveDescendantId: (id: string) => void;
 }
@@ -398,10 +394,10 @@ export interface KeyboardMovementProps<E extends HTMLElement> extends Required<
  * @internal
  */
 export interface KeyboardMovementProviderImplementation<E extends HTMLElement> {
-  nodeRef: RefObject<E>;
+  nodeRef: RefObject<E | null>;
   movementProps: Readonly<KeyboardMovementProps<E>>;
   movementContext: Readonly<KeyboardMovementContext>;
-  currentFocusIndex: NonNullMutableRef<number>;
+  currentFocusIndex: RefObject<number>;
   activeDescendantId: string;
   setActiveDescendantId: UseStateSetter<string>;
 }

package/src/navigation/CollapsibleNavGroup.tsx

@@ -1,6 +1,10 @@
 "use client";
 
-import { type LiHTMLAttributes, type ReactNode, forwardRef } from "react";
+import {
+  type LiHTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
 
 import { type ButtonProps } from "../button/Button.js";
 import {
@@ -52,11 +56,11 @@ export interface CollapsibleNavGroupProps
  * @see {@link https://react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */
-export const CollapsibleNavGroup = forwardRef<
-  HTMLUListElement,
-  CollapsibleNavGroupProps
->(function CollapsibleNavGroup(props, ref) {
+export function CollapsibleNavGroup(
+  props: CollapsibleNavGroupProps
+): ReactElement {
   const {
+    ref,
     liProps,
     buttonProps,
     buttonChildren,
@@ -101,4 +105,4 @@ export const CollapsibleNavGroup = forwardRef<
       )}
     </NavItem>
   );
-});
+}