@react-md/core 1.0.0-next.15 → 1.0.0-next.17

package/src/list/ListItem.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { forwardRef, type HTMLAttributes } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
 import { getListItemHeight } from "./getListItemHeight.js";
@@ -7,30 +8,14 @@ import { ListItemChildren } from "./ListItemChildren.js";
 import { listItem } from "./listItemStyles.js";
 import { type ListItemChildrenProps, type ListItemHeight } from "./types.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-list-item-keyline"?: string | number;
-    "--rmd-list-item-padding-h"?: string | number;
-    "--rmd-list-item-padding-v"?: string | number;
-    "--rmd-list-item-height"?: string | number;
-    "--rmd-list-item-medium-height"?: string | number;
-    "--rmd-list-item-large-height"?: string | number;
-    "--rmd-list-item-extra-large-height"?: string | number;
-    "--rmd-list-item-multiline-clamp"?: string | number;
-    "--rmd-list-item-multiline-height"?: string | number;
-    "--rmd-list-item-media-size"?: string | number;
-    "--rmd-list-item-media-spacing"?: string | number;
-    "--rmd-list-item-text-multiline-height"?: string | number;
-  }
-}
-
 /**
  * @since 6.0.0 Renamed `threeLines` to `multiline` since it can
  * support more than three lines of text.
  */
 export interface ListItemProps
   extends HTMLAttributes<HTMLLIElement>,
-    ListItemChildrenProps {
+    ListItemChildrenProps,
+    ComponentWithRippleProps {
   /**
    * @defaultValue `"button"`
    */
@@ -165,6 +150,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
       disableRightAddonCenteredMedia,
       multiline = false,
       disabled = false,
+      disableRipple,
       disabledOpacity = false,
       role = "button",
       onBlur,
@@ -190,6 +176,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
     }
 
     const { pressedClassName, ripples, handlers } = useElementInteraction({
+      mode: disableRipple ? "none" : undefined,
       onBlur,
       onClick,
       onKeyDown,

package/src/list/ListItemAddon.tsx

@@ -23,8 +23,6 @@ export interface ListItemAddonProps
 }
 
 /**
- * **Server Component**
- *
  * The `ListItemAddon` is used to create an addon to the left or right of the
  * text/children of a `ListItem`.
  *

package/src/list/ListItemChildren.tsx

@@ -4,8 +4,6 @@ import { ListItemText } from "./ListItemText.js";
 import { type ListItemChildrenProps } from "./types.js";
 
 /**
- * **Server Component**
- *
  * The `ListItemChildren` component is used to create a styled list item that
  * can have optional addons to the left or right of the children in the form of
  * icons, avatars, or media. The `children` can be replaced by the `primaryText`

package/src/list/ListItemLink.tsx

@@ -4,6 +4,7 @@ import {
   type AnchorHTMLAttributes,
   type HTMLAttributes,
 } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
 import { type CustomLinkComponent } from "../link/Link.js";
@@ -16,7 +17,8 @@ import { type ListItemChildrenProps } from "./types.js";
 export interface ListItemLinkProps
   extends AnchorHTMLAttributes<HTMLAnchorElement>,
     ListItemClassNameOptions,
-    ListItemChildrenProps {
+    ListItemChildrenProps,
+    ComponentWithRippleProps {
   /** @defaultValue `"a"` */
   as?: CustomLinkComponent;
 
@@ -93,10 +95,12 @@ export const ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(
       role,
       tabIndex = disabled || role === "menuitem" ? -1 : undefined,
       children: propChildren,
+      disableRipple,
       ...remaining
     } = props;
 
     const { pressedClassName, ripples, handlers } = useElementInteraction({
+      mode: disableRipple ? "none" : undefined,
       onBlur,
       onClick,
       onKeyDown,

package/src/list/ListItemText.tsx

@@ -18,8 +18,6 @@ export interface ListItemTextProps extends HTMLAttributes<HTMLSpanElement> {
 }
 
 /**
- * **Server Component**
- *
  * This is mostly an internal component that can conditionally render secondary
  * text within list items.
  *

package/src/list/ListSubheader.tsx

@@ -30,6 +30,9 @@ export function listSubheader(
   return cnb(styles({ inset }), className);
 }
 
+/**
+ * @since 6.0.0 The `role` prop defaults to `"presentation"`
+ */
 export interface ListSubheaderProps
   extends HTMLAttributes<HTMLLIElement>,
     ListSubheaderClassNameOptions {
@@ -45,8 +48,6 @@ export interface ListSubheaderProps
 }
 
 /**
- * **Server Component**
- *
  * The `ListSubheader` is a wrapper for the `<li>` element to apply subheader
  * typography styles and {@link ListItemText} layout.
  */

package/src/list/getListItemHeight.ts

@@ -20,8 +20,8 @@ export interface ListItemHeightOptions
 }
 
 /**
- * Gets the expected height for the `ListItem` or `SimpleListItem` based on the
- * addons and `secondaryText` props.
+ * Gets the expected height for the `ListItem` based on the addons and
+ * `secondaryText` props.
  *
  * @see {@link ListItemHeight}
  * @internal

package/src/list/listItemStyles.ts

@@ -1,12 +1,29 @@
 import { cnb } from "cnbuilder";
 import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
-import type {
-  ListItemAddonPosition,
-  ListItemAddonType,
-  ListItemHeight,
+import {
+  type ListItemAddonPosition,
+  type ListItemAddonType,
+  type ListItemHeight,
 } from "./types.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-list-item-keyline"?: string | number;
+    "--rmd-list-item-padding-h"?: string | number;
+    "--rmd-list-item-padding-v"?: string | number;
+    "--rmd-list-item-height"?: string | number;
+    "--rmd-list-item-medium-height"?: string | number;
+    "--rmd-list-item-large-height"?: string | number;
+    "--rmd-list-item-extra-large-height"?: string | number;
+    "--rmd-list-item-multiline-clamp"?: string | number;
+    "--rmd-list-item-multiline-height"?: string | number;
+    "--rmd-list-item-media-size"?: string | number;
+    "--rmd-list-item-media-spacing"?: string | number;
+    "--rmd-list-item-text-multiline-height"?: string | number;
+  }
+}
+
 const styles = bem("rmd-list-item");
 
 /** @since 6.0.0 */

package/src/list/listStyles.ts

@@ -0,0 +1,31 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-list-padding-h"?: string | number;
+    "--rmd-list-padding-v"?: string | number;
+  }
+}
+
+const styles = bem("rmd-list");
+
+/** @since 6.0.0 */
+export interface ListClassNameOptions {
+  className?: string;
+
+  /** @defaultValue `false` */
+  dense?: boolean;
+
+  /** @defaultValue `false` */
+  horizontal?: boolean;
+}
+
+/**
+ * @since 6.0.0
+ */
+export function list(options: ListClassNameOptions = {}): string {
+  const { dense = false, horizontal = false, className } = options;
+
+  return cnb(styles({ dense, horizontal }), className);
+}

package/src/list/types.ts

@@ -147,9 +147,9 @@ export interface ListItemChildrenAddonProps {
  */
 export interface ListItemChildrenTextProps {
   /**
-   * The main content to display. When the `textChildren` prop is enabled and
-   * there is child content, it will be treated as primary text and update the
-   * styles automatically.
+   * The main content to display that defaults to being wrapped in the
+   * `ListItemText` component. Enable the {@link disableTextChildren} prop to
+   * render without the additional `ListItemText` wrapper.
    */
   children?: ReactNode;
 
@@ -222,6 +222,12 @@ export interface ListItemChildrenTextProps {
   multiline?: boolean;
 }
 
+/**
+ * @since 6.0.0 Extends the `ListItemChildrenTextProps` and
+ * `ListItemChildrenAddonProps` interfaces.
+ * @since 6.0.0 Added `textProps` and `secondaryTextClassName`
+ * @since 6.0.0 Renamed `textChildren` to `disableTextChildren`
+ */
 export interface ListItemChildrenProps
   extends ListItemChildrenTextProps,
     ListItemChildrenAddonProps {}

package/src/media-queries/AppSizeProvider.tsx

@@ -65,10 +65,16 @@ export function useAppSize(): Readonly<AppSize> {
   return appSize;
 }
 
+/**
+ * @since 6.0.0 Renamed from `AppSizeListenerProps`.
+ * @since 6.0.0 Removed the `onChange` prop
+ * @since 6.0.0 Renamed `defaultSize` to `ssrSize`
+ */
 export interface AppSizeProviderProps extends AppSizeQueries {
   /**
    * @defaultValue `DEFAULT_APP_SIZE`
    * @see {@link DEFAULT_APP_SIZE}
+   * @since 6.0.0
    */
   ssrSize?: Readonly<AppSize>;
   children: ReactNode;
@@ -79,6 +85,8 @@ export interface AppSizeProviderProps extends AppSizeQueries {
  *
  * This component should be mounted near the root of your app to determine the
  * current app size based on different media queries.
+ *
+ * @since 6.0.0 Renamed from `AppSizeListener`
  */
 export function AppSizeProvider(props: AppSizeProviderProps): ReactElement {
   const {

package/src/media-queries/useMediaQuery.ts

@@ -19,7 +19,7 @@ import { useSsr } from "../SsrProvider.js";
  * @param disabled - When `true`, the `window.matchMedia` API will not be
  * activated and the hook will always return `false`.
  * @returns `true` if the media query matches
- * @since 6.0.0
+ * @since 6.0.0 Removed the `defaultValue` and `checkImmediately` options.
  */
 export function useMediaQuery(query: string, disabled = false): boolean {
   const ssr = useSsr();
@@ -39,8 +39,9 @@ export function useMediaQuery(query: string, disabled = false): boolean {
     const result = window.matchMedia(query);
     setMatches(result.matches);
 
-    const updater = ({ matches }: MediaQueryListEvent): void =>
+    const updater = ({ matches }: MediaQueryListEvent): void => {
       setMatches(matches);
+    };
 
     result.addEventListener("change", updater);
     return () => {

package/src/menu/Menu.tsx

@@ -117,7 +117,13 @@ export interface MenuConfigurationProps extends CalculateFixedPositionOptions {
   closeOnResize?: boolean;
 
   /** @see {@link FixedPositioningOptions.getFixedPositionOptions} */
-  getFixedPositionOptions?(): CalculateFixedPositionOptions;
+  getFixedPositionOptions?: () => CalculateFixedPositionOptions;
+
+  /**
+   * @defaultValue `false`
+   * @see {@link FixedPositioningOptions.disabled}
+   */
+  disableFixedPositioning?: boolean;
 }
 
 /**
@@ -198,7 +204,7 @@ export interface MenuConvenienceProps extends MenuConfigurationProps {
  */
 export type MenuFixedPositioningOptions = Omit<
   FixedPositioningOptions<HTMLElement, HTMLDivElement>,
-  "onScroll" | "onResize"
+  "onScroll" | "onResize" | "nodeRef" | "disabled"
 >;
 
 /**
@@ -215,7 +221,7 @@ export interface MenuProps
     MenuListConvenienceProps,
     MenuSheetConvenienceProps {
   visible: boolean;
-  onRequestClose(): void;
+  onRequestClose: () => void;
 
   /**
    * @defaultValue `"menu-" + useId()`
@@ -322,6 +328,7 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
       disableVHBounds,
       initialX,
       initialY,
+      disableFixedPositioning,
       getFixedPositionOptions,
       disablePortal: propDisablePortal,
       disableTransition,
@@ -449,6 +456,7 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
 
     const { ref, style, callbacks, updateStyle } = useFixedPositioning({
       ...transitionOptions,
+      disabled: disableFixedPositioning,
       onEnter,
       style: isSheet ? propStyle : menuStyle,
       fixedTo,

package/src/menu/MenuConfigurationProvider.tsx

@@ -127,9 +127,9 @@ export function useMenuConfiguration(
     horizontal: horizontal ?? inherited.horizontal,
     renderAsSheet: renderAsSheet ?? inherited.renderAsSheet,
     sheetHeader:
-      sheetHeader === null ? null : sheetHeader ?? inherited.sheetHeader,
+      sheetHeader === null ? null : (sheetHeader ?? inherited.sheetHeader),
     sheetFooter:
-      sheetFooter === null ? null : sheetFooter ?? inherited.sheetFooter,
+      sheetFooter === null ? null : (sheetFooter ?? inherited.sheetFooter),
     sheetPosition: sheetPosition ?? inherited.sheetPosition,
     sheetVerticalSize: sheetVerticalSize ?? inherited.sheetVerticalSize,
   };

package/src/menu/MenuItemButton.tsx

@@ -38,6 +38,7 @@ export const MenuItemButton = forwardRef<HTMLLIElement, MenuItemButtonProps>(
     const {
       id: propId,
       children,
+      height: propHeight,
       onClick = noop,
       onKeyDown = noop,
       onMouseEnter = noop,
@@ -82,9 +83,14 @@ export const MenuItemButton = forwardRef<HTMLLIElement, MenuItemButtonProps>(
       setVisible(id === activeId);
     }, [activeId, defaultFocusIndex, id, menubar, setVisible]);
 
-    const dropdownIcon = getIcon(root ? "dropdown" : "forward");
+    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}

package/src/menu/useContextMenu.ts

@@ -12,7 +12,7 @@ export interface ContextMenuProps extends InitialCoords {
   fixedTo: RefObject<HTMLElement>;
   visible: boolean;
   preventScroll: boolean;
-  onRequestClose(): void;
+  onRequestClose: () => void;
 }
 
 /**
@@ -37,7 +37,7 @@ export interface ContextMenuHookOptions {
    * @defaultValue `true`
    */
   preventScroll?: boolean;
-  onContextMenu?<E extends HTMLElement>(event: MouseEvent<E>): void;
+  onContextMenu?: <E extends HTMLElement>(event: MouseEvent<E>) => void;
 }
 
 /**
@@ -49,7 +49,7 @@ export interface ContextMenuHookOptions {
 export interface ContextMenuImplementation
   extends UseStateObject<"visible", boolean> {
   menuProps: ContextMenuProps;
-  onContextMenu<E extends HTMLElement>(event: MouseEvent<E>): void;
+  onContextMenu: <E extends HTMLElement>(event: MouseEvent<E>) => void;
 }
 
 const noop = (): void => {

package/src/movement/types.ts

@@ -203,8 +203,8 @@ export interface KeyboardMovementExtensionData<E extends HTMLElement>
   extends KeyboardMovementContext {
   event: KeyboardEvent<E>;
   currentFocusIndex: NonNullMutableRef<number>;
-  setFocusIndex(index: number, focusables: readonly HTMLElement[]): void;
-  setActiveDescendantId(id: string): void;
+  setFocusIndex: (index: number, focusables: readonly HTMLElement[]) => void;
+  setActiveDescendantId: (id: string) => void;
 }
 
 /**
@@ -217,9 +217,9 @@ export interface KeyboardMovementProviderOptions<E extends HTMLElement>
   /** @see {@link TabIndexBehavior} */
   tabIndexBehavior?: TabIndexBehavior;
 
-  onClick?(event: MouseEvent<E>): void;
-  onFocus?(event: FocusEvent<E>): void;
-  onKeyDown?(event: KeyboardEvent<E>): void;
+  onClick?: (event: MouseEvent<E>) => void;
+  onFocus?: (event: FocusEvent<E>) => void;
+  onKeyDown?: (event: KeyboardEvent<E>) => void;
 
   /** @defaultValue `false` */
   disabled?: boolean;

package/src/navigation/CollapsibleNavGroup.tsx

@@ -1,9 +1,11 @@
 "use client";
 import { forwardRef, type LiHTMLAttributes, type ReactNode } from "react";
 import { type ButtonProps } from "../button/Button.js";
-import { useCollapseTransition } from "../transition/useCollapseTransition.js";
-import { type PropsWithRef, type UseStateInitializer } from "../types.js";
-import { useToggle } from "../useToggle.js";
+import {
+  type CollapseTransitionHookOptions,
+  useCollapseTransition,
+} from "../transition/useCollapseTransition.js";
+import { type PropsWithRef } from "../types.js";
 import { NavGroup, type NavGroupProps } from "./NavGroup.js";
 import { NavItem } from "./NavItem.js";
 import {
@@ -23,6 +25,10 @@ export interface CollapsibleNavGroupProps
     NavItemButtonRotatorProps {
   liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
   buttonProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;
+  collapseOptions?: Omit<
+    CollapseTransitionHookOptions<HTMLUListElement>,
+    "nodeRef" | "className" | "transitionIn"
+  >;
 
   /**
    * The children to render in the {@link NavItemButton} that toggles the
@@ -35,8 +41,8 @@ export interface CollapsibleNavGroupProps
    */
   children: ReactNode;
 
-  /** @defaultValue `false` */
-  defaultCollapsed?: UseStateInitializer<boolean>;
+  collapsed: boolean;
+  toggleCollapsed: () => void;
 }
 
 /**
@@ -57,12 +63,14 @@ export const CollapsibleNavGroup = forwardRef<
     disableIconRotator,
     className,
     children,
-    defaultCollapsed,
+    collapsed,
+    toggleCollapsed,
+    collapseOptions,
     ...remaining
   } = props;
 
-  const { toggled: collapsed, toggle } = useToggle(defaultCollapsed);
   const { rendered, elementProps } = useCollapseTransition({
+    ...collapseOptions,
     nodeRef: ref,
     className,
     transitionIn: !collapsed,
@@ -75,7 +83,7 @@ export const CollapsibleNavGroup = forwardRef<
         {...buttonProps}
         onClick={(event) => {
           onButtonClick(event);
-          toggle();
+          toggleCollapsed();
         }}
         collapsed={collapsed}
         icon={icon}

package/src/navigation/DefaultNavigationRenderer.tsx

@@ -4,16 +4,16 @@ import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.js";
 import { CollapsibleNavGroup } from "./CollapsibleNavGroup.js";
 import { NavItemLink } from "./NavItemLink.js";
 import { NavSubheader } from "./NavSubheader.js";
-import { getHrefFromParents } from "./getHrefFromParents.js";
 import { type NavigationItem, type NavigationRenderData } from "./types.js";
+import { getHrefFromParents, getNavigationGroupId } from "./utils.js";
 
 /**
  * @since 6.0.0
  */
-export interface DefaultNavigationRendererProps<
+export type DefaultNavigationRendererProps<
   Item extends NavigationItem = NavigationItem,
   Data extends NavigationRenderData = NavigationRenderData,
-> extends RenderRecursiveItemsProps<Item, Data> {}
+> = RenderRecursiveItemsProps<Item, Data>;
 
 /**
  * **Client Component**
@@ -46,13 +46,15 @@ export function DefaultNavigationRenderer<
 
   if (item.items) {
     const nextParents = [item, ...parents];
+    const id = getNavigationGroupId(item, nextParents);
     return (
       <CollapsibleNavGroup
         depth={nextParents.length}
-        defaultCollapsed={() =>
-          !data?.pathname.includes(getHrefFromParents(nextParents))
-        }
+        collapsed={!data?.expandedItems.has(id)}
         buttonChildren={item.children}
+        toggleCollapsed={() => {
+          data?.toggleExpandedItem(id);
+        }}
       >
         {children}
       </CollapsibleNavGroup>

package/src/navigation/NavGroup.tsx

@@ -11,8 +11,6 @@ export interface NavGroupProps extends ListProps {
 }
 
 /**
- * **Server Component**
- *
  * A simple wrapper around the {@link Link} component that ads the
  * `--rmd-tree-depth: depth` custom property to allow for incremented padding.
  *

package/src/navigation/NavItem.tsx

@@ -9,8 +9,6 @@ export interface NavItemProps extends LiHTMLAttributes<HTMLLIElement> {
 }
 
 /**
- * **Server Component**
- *
  * This component is just used to add padding based on the depth of the nav item
  * and should not be used on its own. See the `CollapsibleNavGroup` and
  * `NavItemLink` instead.

package/src/navigation/NavItemButton.tsx

@@ -15,7 +15,7 @@ import { type NavItemContentProps } from "./types.js";
 export interface NavItemButtonRotatorProps {
   /** @defaultValue `getIcon("dropdown")` */
   icon?: ReactNode;
-  iconRotatorProps?: IconRotatorBaseProps;
+  iconRotatorProps?: Omit<IconRotatorBaseProps, "rotated">;
   disableIconRotator?: boolean;
 }
 
@@ -74,6 +74,7 @@ export const NavItemButton = forwardRef<HTMLButtonElement, NavItemButtonProps>(
     return (
       <>
         <Button
+          aria-expanded={!collapsed}
           {...remaining}
           {...elementProps}
           ref={ref}

package/src/navigation/NavItemLink.tsx

@@ -6,6 +6,7 @@ import {
   type LiHTMLAttributes,
 } from "react";
 import { cssUtils } from "../cssUtils.js";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { Tooltip } from "../tooltip/Tooltip.js";
 import { useTooltip } from "../tooltip/useTooltip.js";
@@ -23,7 +24,8 @@ import {
  */
 export interface NavItemLinkProps
   extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children">,
-    NavItemContentProps {
+    NavItemContentProps,
+    ComponentWithRippleProps {
   /** @defaultValue `"a"` */
   as?: NavigationLinkComponent;
   href: string;
@@ -48,7 +50,7 @@ export interface NavItemLinkProps
 
   /**
    * Set this to `true` to prevent this item from scrolling into view when it
-   * becomes active. It is generally recommended to keep this `true` unless a
+   * becomes active. It is generally recommended to keep this `false` unless a
    * custom implementation has been added so that when the temporary navigation
    * will show the active route.
    *
@@ -88,12 +90,14 @@ export const NavItemLink = forwardRef<HTMLAnchorElement, NavItemLinkProps>(
       onTouchEnd,
       onTouchStart,
       tooltipOptions,
+      disableRipple,
       disableScrollIntoView,
       ...remaining
     } = props;
 
     const [linkRef, linkRefCallback] = useEnsuredRef(propRef);
     const { handlers, ripples } = useElementInteraction({
+      mode: disableRipple ? "none" : undefined,
       disabled,
       onClick,
       onBlur,
@@ -120,7 +124,10 @@ export const NavItemLink = forwardRef<HTMLAnchorElement, NavItemLinkProps>(
         !active ||
         !link ||
         disableScrollIntoView ||
-        document.activeElement === link
+        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;
       }
@@ -131,6 +138,7 @@ export const NavItemLink = forwardRef<HTMLAnchorElement, NavItemLinkProps>(
     return (
       <NavItem {...liProps}>
         <Component
+          aria-current={active ? "page" : undefined}
           {...remaining}
           {...handlers}
           {...elementProps}

package/src/navigation/NavSubheader.tsx

@@ -8,11 +8,9 @@ import { navItem } from "./navItemStyles.js";
 /**
  * @since 6.0.0
  */
-export interface NavSubheaderProps extends ListSubheaderProps {}
+export type NavSubheaderProps = ListSubheaderProps;
 
 /**
- * **Server Component**
- *
  * A simple wrapper around the {@Link ListSubheader} that updates the padding
  * based on the current navigation item depth to match the other items.
  *

package/src/navigation/Navigation.tsx

@@ -58,7 +58,7 @@ export interface NavigationProps<
   render?: ComponentType<RenderRecursiveItemsProps<Item, Data>>;
 
   /** @see {@link getRecursiveNavItemKey} */
-  getItemKey?(options: RecursiveItemKeyOptions<Item>): string;
+  getItemKey?: (options: RecursiveItemKeyOptions<Item>) => string;
 }
 
 /**