@react-md/core 6.5.1 → 7.0.0

package/src/navigation/NavGroup.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, forwardRef } from "react";
+import { type ReactElement, type ReactNode, type Ref } from "react";
 
 import { List, type ListProps } from "../list/List.js";
 import { navGroup } from "./navGroupStyles.js";
@@ -7,6 +7,7 @@ import { navGroup } from "./navGroupStyles.js";
  * @since 6.0.0
  */
 export interface NavGroupProps extends ListProps {
+  ref?: Ref<HTMLUListElement>;
   depth: number;
   children: ReactNode;
 }
@@ -18,22 +19,20 @@ export interface NavGroupProps extends ListProps {
  * @see {@link https://react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */
-export const NavGroup = forwardRef<HTMLUListElement, NavGroupProps>(
-  function NavGroup(props, ref) {
-    const { style, depth, className, children, ...remaining } = props;
+export function NavGroup(props: NavGroupProps): ReactElement {
+  const { ref, style, depth, className, children, ...remaining } = props;
 
-    return (
-      <List
-        {...remaining}
-        ref={ref}
-        style={{ ...style, "--rmd-tree-depth": depth }}
-        className={navGroup({
-          className,
-          disablePadding: depth > 0,
-        })}
-      >
-        {children}
-      </List>
-    );
-  }
-);
+  return (
+    <List
+      {...remaining}
+      ref={ref}
+      style={{ ...style, "--rmd-tree-depth": depth }}
+      className={navGroup({
+        className,
+        disablePadding: depth > 0,
+      })}
+    >
+      {children}
+    </List>
+  );
+}

package/src/navigation/NavItem.tsx

@@ -1,4 +1,9 @@
-import { type LiHTMLAttributes, type ReactNode, forwardRef } from "react";
+import {
+  type LiHTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
 
 import { type NavItemClassNameOptions, navItem } from "./navItemStyles.js";
 
@@ -9,6 +14,7 @@ import { type NavItemClassNameOptions, navItem } from "./navItemStyles.js";
  */
 export interface NavItemProps
   extends LiHTMLAttributes<HTMLLIElement>, NavItemClassNameOptions {
+  ref?: Ref<HTMLLIElement>;
   children: ReactNode;
 }
 
@@ -20,13 +26,12 @@ export interface NavItemProps
  * @see {@link https://react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */
-export const NavItem = forwardRef<HTMLLIElement, NavItemProps>(
-  function NavItem(props, ref) {
-    const { className, children, ...remaining } = props;
-    return (
-      <li {...remaining} ref={ref} className={navItem({ className })}>
-        {children}
-      </li>
-    );
-  }
-);
+export function NavItem(props: NavItemProps): ReactElement {
+  const { ref, className, children, ...remaining } = props;
+
+  return (
+    <li {...remaining} ref={ref} className={navItem({ className })}>
+      {children}
+    </li>
+  );
+}

package/src/navigation/NavItemButton.tsx

@@ -1,6 +1,10 @@
 "use client";
 
-import { type MouseEventHandler, type ReactNode, forwardRef } from "react";
+import {
+  type MouseEventHandler,
+  type ReactElement,
+  type ReactNode,
+} from "react";
 
 import { Button, type ButtonProps } from "../button/Button.js";
 import { cssUtils } from "../cssUtils.js";
@@ -39,71 +43,70 @@ export interface NavItemButtonProps
  * @see {@link https://react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */
-export const NavItemButton = forwardRef<HTMLButtonElement, NavItemButtonProps>(
-  function NavItemButton(props, ref) {
-    const {
-      className,
-      collapsed,
-      icon,
-      iconRotatorProps,
-      disableIconRotator,
-      children,
-      beforeAddon,
-      afterAddon,
-      spanProps,
-      onBlur,
-      onContextMenu,
-      onFocus,
-      onMouseEnter,
-      onMouseLeave,
-      onTouchEnd,
-      onTouchStart,
-      tooltipOptions,
-      ...remaining
-    } = props;
+export function NavItemButton(props: NavItemButtonProps): ReactElement {
+  const {
+    ref,
+    className,
+    collapsed,
+    icon,
+    iconRotatorProps,
+    disableIconRotator,
+    children,
+    beforeAddon,
+    afterAddon,
+    spanProps,
+    onBlur,
+    onContextMenu,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onTouchEnd,
+    onTouchStart,
+    tooltipOptions,
+    ...remaining
+  } = props;
 
-    const { elementProps, tooltipProps, overflowRef } = useTooltip({
-      overflowOnly: true,
-      defaultPosition: "right",
-      ...tooltipOptions,
-      onBlur,
-      onContextMenu,
-      onFocus,
-      onMouseEnter,
-      onMouseLeave,
-      onTouchEnd,
-      onTouchStart,
-    });
+  const { elementProps, tooltipProps, overflowRef } = useTooltip({
+    overflowOnly: true,
+    defaultPosition: "right",
+    ...tooltipOptions,
+    onBlur,
+    onContextMenu,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onTouchEnd,
+    onTouchStart,
+  });
 
-    return (
-      <>
-        <Button
-          aria-expanded={!collapsed}
-          {...remaining}
-          {...elementProps}
-          ref={ref}
-          className={navItemContent({ className })}
+  return (
+    <>
+      <Button
+        aria-expanded={!collapsed}
+        {...remaining}
+        {...elementProps}
+        ref={ref}
+        className={navItemContent({ className })}
+      >
+        {beforeAddon}
+        <span
+          {...spanProps}
+          ref={overflowRef}
+          className={cssUtils({
+            className: spanProps?.className,
+            textOverflow: "ellipsis",
+          })}
         >
-          {beforeAddon}
-          <span
-            {...spanProps}
-            ref={overflowRef}
-            className={cssUtils({
-              className: spanProps?.className,
-              textOverflow: "ellipsis",
-            })}
-          >
-            {children}
-          </span>
-          {afterAddon}
-          {!disableIconRotator && (
-            <IconRotator {...iconRotatorProps} rotated={!collapsed}>
-              {getIcon("dropdown", icon)}
-            </IconRotator>
-          )}
-        </Button>
-        <Tooltip {...tooltipProps}>{children}</Tooltip>
-      </>
-    );
-  }
-);
+          {children}
+        </span>
+        {afterAddon}
+        {!disableIconRotator && (
+          <IconRotator {...iconRotatorProps} rotated={!collapsed}>
+            {getIcon("dropdown", icon)}
+          </IconRotator>
+        )}
+      </Button>
+      <Tooltip {...tooltipProps}>{children}</Tooltip>
+    </>
+  );
+}

package/src/navigation/NavItemLink.tsx

@@ -3,7 +3,8 @@
 import {
   type AnchorHTMLAttributes,
   type LiHTMLAttributes,
-  forwardRef,
+  type ReactElement,
+  type Ref,
   useEffect,
 } from "react";
 
@@ -29,6 +30,8 @@ export interface NavItemLinkProps
     Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children">,
     NavItemContentProps,
     ComponentWithRippleProps {
+  ref?: Ref<HTMLAnchorElement>;
+
   /** @defaultValue `"a"` */
   as?: NavigationLinkComponent;
   href: string;
@@ -68,108 +71,107 @@ export interface NavItemLinkProps
  * @see {@link https://react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */
-export const NavItemLink = forwardRef<HTMLAnchorElement, NavItemLinkProps>(
-  function NavItemLink(props, propRef) {
-    const {
-      as: Component = "a",
-      href,
-      active,
-      activeClassName,
-      beforeAddon,
-      afterAddon,
-      className,
-      children,
-      liProps,
-      spanProps,
-      disabled = !href,
-      onClick,
-      onBlur,
-      onDragStart,
-      onKeyDown,
-      onKeyUp,
-      onMouseDown,
-      onMouseLeave,
-      onMouseUp,
-      onTouchMove,
-      onTouchEnd,
-      onTouchStart,
-      tooltipOptions,
-      disableRipple,
-      disableScrollIntoView,
-      ...remaining
-    } = props;
+export function NavItemLink(props: NavItemLinkProps): ReactElement {
+  const {
+    ref: propRef,
+    as: Component = "a",
+    href,
+    active,
+    activeClassName,
+    beforeAddon,
+    afterAddon,
+    className,
+    children,
+    liProps,
+    spanProps,
+    disabled = !href,
+    onClick,
+    onBlur,
+    onDragStart,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseLeave,
+    onMouseUp,
+    onTouchMove,
+    onTouchEnd,
+    onTouchStart,
+    tooltipOptions,
+    disableRipple,
+    disableScrollIntoView,
+    ...remaining
+  } = props;
 
-    const [linkRef, linkRefCallback] = useEnsuredRef(propRef);
-    const { handlers, ripples } = useElementInteraction({
-      mode: disableRipple ? "none" : undefined,
-      disabled,
-      onClick,
-      onBlur,
-      onDragStart,
-      onKeyDown,
-      onKeyUp,
-      onMouseDown,
-      onMouseLeave,
-      onMouseUp,
-      onTouchMove,
-      onTouchEnd,
-      onTouchStart,
-    });
+  const [linkRef, linkRefCallback] = useEnsuredRef(propRef);
+  const { handlers, ripples } = useElementInteraction({
+    mode: disableRipple ? "none" : undefined,
+    disabled,
+    onClick,
+    onBlur,
+    onDragStart,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseLeave,
+    onMouseUp,
+    onTouchMove,
+    onTouchEnd,
+    onTouchStart,
+  });
 
-    const { elementProps, tooltipProps, overflowRef } = useTooltip({
-      overflowOnly: true,
-      defaultPosition: "right",
-      ...tooltipOptions,
-      ...handlers,
-    });
-    useEffect(() => {
-      const link = linkRef.current;
-      if (
-        !active ||
-        !link ||
-        disableScrollIntoView ||
-        document.activeElement === link ||
-        // do not scroll into view if the collapse transition is occurring since
-        // it makes it animate weirdly
-        link.closest(".rmd-collapse--enter")
-      ) {
-        return;
-      }
+  const { elementProps, tooltipProps, overflowRef } = useTooltip({
+    overflowOnly: true,
+    defaultPosition: "right",
+    ...tooltipOptions,
+    ...handlers,
+  });
+  useEffect(() => {
+    const link = linkRef.current;
+    if (
+      !active ||
+      !link ||
+      disableScrollIntoView ||
+      document.activeElement === link ||
+      // do not scroll into view if the collapse transition is occurring since
+      // it makes it animate weirdly
+      link.closest(".rmd-collapse--enter")
+    ) {
+      return;
+    }
 
-      link.scrollIntoView({ block: "center" });
-    }, [active, disableScrollIntoView, linkRef]);
+    link.scrollIntoView({ block: "center" });
+  }, [active, disableScrollIntoView, linkRef]);
 
-    return (
-      <NavItem {...liProps}>
-        <Component
-          aria-current={active ? "page" : undefined}
-          {...remaining}
-          {...handlers}
-          {...elementProps}
-          ref={linkRefCallback}
-          href={href}
-          className={navItemLink({
-            active,
-            activeClassName,
-            className,
+  return (
+    <NavItem {...liProps}>
+      <Component
+        aria-current={active ? "page" : undefined}
+        {...remaining}
+        {...handlers}
+        {...elementProps}
+        ref={linkRefCallback}
+        href={href}
+        className={navItemLink({
+          active,
+          activeClassName,
+          className,
+        })}
+      >
+        {beforeAddon}
+        <span
+          {...spanProps}
+          ref={overflowRef}
+          className={cssUtils({
+            className: spanProps?.className,
+            textOverflow: "ellipsis",
           })}
         >
-          {beforeAddon}
-          <span
-            {...spanProps}
-            ref={overflowRef}
-            className={cssUtils({
-              className: spanProps?.className,
-              textOverflow: "ellipsis",
-            })}
-          >
-            {children}
-          </span>
-          {afterAddon}
-          {ripples}
-        </Component>
-        <Tooltip {...tooltipProps}>{children}</Tooltip>
-      </NavItem>
-    );
-  }
-);
+          {children}
+        </span>
+        {afterAddon}
+        {ripples}
+      </Component>
+      <Tooltip {...tooltipProps}>{children}</Tooltip>
+    </NavItem>
+  );
+}

package/src/navigation/NavSubheader.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { type ReactElement } from "react";
 
 import {
   ListSubheader,
@@ -18,19 +18,17 @@ export type NavSubheaderProps = ListSubheaderProps;
  * @see {@link https://react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */
-export const NavSubheader = forwardRef<HTMLLIElement, NavSubheaderProps>(
-  function NavSubheader(props, ref) {
-    const { textProps, ...remaining } = props;
+export function NavSubheader(props: NavSubheaderProps): ReactElement {
+  const { ref, textProps, ...remaining } = props;
 
-    return (
-      <ListSubheader
-        {...remaining}
-        ref={ref}
-        textProps={{
-          ...textProps,
-          className: navItem({ className: textProps?.className }),
-        }}
-      />
-    );
-  }
-);
+  return (
+    <ListSubheader
+      {...remaining}
+      ref={ref}
+      textProps={{
+        ...textProps,
+        className: navItem({ className: textProps?.className }),
+      }}
+    />
+  );
+}

package/src/navigation/Navigation.tsx

@@ -79,7 +79,7 @@ export interface NavigationProps<
  * import { usePathname } from "next/navigation.js";
  * import { type ReactElement } from "react";
  *
- * import { LinkUnstyled } from "@/components/LinkUnstyled.jsx";
+ * import { LinkUnstyled } from "@/components/LinkUnstyled.js";
  *
  * const items: readonly NavigationItem[] = [
  *   {

package/src/navigation/types.ts

@@ -1,8 +1,10 @@
 import {
   type AnchorHTMLAttributes,
+  type ComponentType,
   type ForwardRefExoticComponent,
   type HTMLAttributes,
   type ReactNode,
+  type Ref,
 } from "react";
 
 import { type DividerProps } from "../divider/Divider.js";
@@ -135,14 +137,21 @@ export type NavigationItem =
 /**
  * @since 6.0.0
  */
-export type CustomNavigationLinkComponent = ForwardRefExoticComponent<
-  AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }
->;
+export type CustomNavigationLinkComponent =
+  | ForwardRefExoticComponent<
+      AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }
+    >
+  | ComponentType<
+      AnchorHTMLAttributes<HTMLAnchorElement> & {
+        ref?: Ref<HTMLAnchorElement>;
+        href: string;
+      }
+    >;
 
 /**
  * @since 6.0.0
  */
-export type NavigationLinkComponent = "a" | CustomNavigationLinkComponent;
+export type NavigationLinkComponent = CustomNavigationLinkComponent | "a";
 
 /**
  * @since 6.0.0

package/src/navigation/useActiveHeadingId.ts

@@ -125,7 +125,7 @@ export function useActiveHeadingId(options: ActiveHeadingIdOptions): string {
     defaultActiveId = headings[0]?.id ?? "",
     scrollBottomThreshold = 0.8,
   } = options;
-  const elements = useRef<Map<string, boolean>>();
+  const elements = useRef<Map<string, boolean>>(null);
   const isFirstRender = useRef(true);
   const [activeHeadingId, setActiveHeadingId] = useState(defaultActiveId);
   useIntersectionObserver({