@react-md/core 1.0.0-next.16 → 1.0.0-next.18

package/src/layout/useLayoutAppBarHeight.ts

@@ -1,7 +1,6 @@
 "use client";
 import { useMemo, type Ref, type RefCallback } from "react";
-import { type DefinedCSSVariableName } from "../theme/types.js";
-import { type CSSVariable } from "../theme/useCSSVariables.js";
+import { type CSSVariable } from "../theme/types.js";
 import { useElementSize } from "../useElementSize.js";
 
 declare module "react" {
@@ -16,7 +15,7 @@ declare module "react" {
  */
 export interface LayoutAppBarHeightResult {
   height: number | undefined;
-  variables: readonly CSSVariable<DefinedCSSVariableName>[];
+  variables: readonly CSSVariable[];
   appBarRef: RefCallback<HTMLDivElement>;
 }
 
@@ -75,7 +74,7 @@ export function useLayoutAppBarHeight(
     ref,
     disableWidth: true,
   });
-  const variables = useMemo<CSSVariable<DefinedCSSVariableName>[]>(() => {
+  const variables = useMemo<CSSVariable[]>(() => {
     if (Number.isNaN(height) || !observedOnce) {
       return [];
     }

package/src/layout/useTemporaryLayout.ts

@@ -56,8 +56,8 @@ export type ProvidedTemporaryLayoutAppBarProps = Required<
  */
 export interface TemporaryLayoutImplementation {
   visible: boolean;
-  showTemporaryNav(): void;
-  hideTemporaryNav(): void;
+  showTemporaryNav: () => void;
+  hideTemporaryNav: () => void;
   appBarProps: ProvidedTemporaryLayoutAppBarProps;
   mainProps: ProvidedTemporaryLayoutMainProps;
   navToggleProps: ProvidedLayoutNavToggleProps;

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";
@@ -13,7 +14,8 @@ import { type ListItemChildrenProps, type ListItemHeight } from "./types.js";
  */
 export interface ListItemProps
   extends HTMLAttributes<HTMLLIElement>,
-    ListItemChildrenProps {
+    ListItemChildrenProps,
+    ComponentWithRippleProps {
   /**
    * @defaultValue `"button"`
    */
@@ -148,6 +150,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
       disableRightAddonCenteredMedia,
       multiline = false,
       disabled = false,
+      disableRipple,
       disabledOpacity = false,
       role = "button",
       onBlur,
@@ -173,6 +176,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
     }
 
     const { pressedClassName, ripples, handlers } = useElementInteraction({
+      mode: disableRipple ? "none" : undefined,
       onBlur,
       onClick,
       onKeyDown,

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/media-queries/useMediaQuery.ts

@@ -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/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/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,7 +8,7 @@ import { navItem } from "./navItemStyles.js";
 /**
  * @since 6.0.0
  */
-export interface NavSubheaderProps extends ListSubheaderProps {}
+export type NavSubheaderProps = ListSubheaderProps;
 
 /**
  * A simple wrapper around the {@Link ListSubheader} that updates the padding

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;
 }
 
 /**

package/src/navigation/types.ts

@@ -47,13 +47,15 @@ export interface NavigationItemSubheader extends ListSubheaderProps {
  * @example Route Group Output
  * ```tsx
  * const nextParents = [item, ...parents];
+ * const id = getNavigationGroupId(item, nextParents);
  * return (
  *   <CollapsibleNavGroup
- *     depth={nextParents.length})
- *     defaultCollapsed={() =>
- *       !data.pathname.includes(getHrefFromParents(nextParents))
- *     }
+ *     depth={nextParents.length}
+ *     collapsed={!data?.expandedItems.has(id)}
  *     buttonChildren={item.children}
+ *     toggleCollapsed={() => {
+ *       data?.toggleExpandedItem(id);
+ *     }}
  *   >
  *     {children}
  *   </CollapsibleNavGroup>
@@ -66,6 +68,43 @@ export interface NavigationItemSubheader extends ListSubheaderProps {
  */
 export interface NavigationItemGroup {
   type: "group";
+
+  /**
+   * An optional unique id to identify the group used for handling the expanded
+   * state when the `href` can't be used.
+   */
+  id?: string;
+
+  /**
+   * An optional href to prefix all child routes with and can be used instead of
+   * the {@link id} for handling the expanded state.
+   *
+   * @example
+   * ```ts
+   * {
+   *   type: "group",
+   *   href: "/some-path",
+   *   children: "Some Name",
+   *   items: [
+   *     {
+   *       type: "route",
+   *       href: "/page-1",
+   *       children: "Page 1",
+   *     },
+   *     {
+   *       type: "route",
+   *       href: "/page-2",
+   *       children: "Page 2",
+   *     },
+   *   ],
+   * }
+   * ```
+   *
+   * Would result in:
+   *
+   * - Page 1 - `/some-path/page-1`
+   * - Page 2 - `/some-path/page-2`
+   */
   href?: string;
   children: ReactNode;
   items: readonly NavigationItem[];
@@ -95,16 +134,27 @@ export type NavigationItem =
 /**
  * @since 6.0.0
  */
-export type NavigationLinkComponent =
-  | "a"
-  | ForwardRefExoticComponent<
-      AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }
-    >;
+export type CustomNavigationLinkComponent = ForwardRefExoticComponent<
+  AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }
+>;
+
+/**
+ * @since 6.0.0
+ */
+export type NavigationLinkComponent = "a" | CustomNavigationLinkComponent;
+
+/**
+ * @since 6.0.0
+ */
+export interface NavigationExpansion {
+  expandedItems: ReadonlySet<string>;
+  toggleExpandedItem: (id: string) => void;
+}
 
 /**
  * @since 6.0.0
  */
-export interface NavigationRenderData {
+export interface NavigationRenderData extends NavigationExpansion {
   /**
    * This is used to set the `active` state on a `NavItemLink`
    */

package/src/navigation/useActiveHeadingId.ts

@@ -112,7 +112,7 @@ export interface ActiveHeadingIdOptions {
   threshold?: IntersectionObserverThreshold;
 
   /** @see {@link DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN} */
-  getRootMargin?(): IntersectionObserverRootMargin;
+  getRootMargin?: () => IntersectionObserverRootMargin;
 
   /** @defaultValue `headings[0]?.id ?? ""` */
   defaultActiveId?: UseStateInitializer<string>;