@react-md/core 6.3.4 → 6.5.0

package/src/link/Link.tsx

@@ -23,8 +23,7 @@ export type CustomLinkComponent =
  * @since 6.0.0 Renamed `flexCentered` to `flex`.
  */
 export interface LinkProps
-  extends AnchorHTMLAttributes<HTMLAnchorElement>,
-    LinkClassNameOptions {
+  extends AnchorHTMLAttributes<HTMLAnchorElement>, LinkClassNameOptions {
   /**
    * All links **must** have a valid href.
    */

package/src/link/SkipToMainContent.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { type ReactNode, forwardRef, useEffect, useRef } from "react";
+import { type ReactNode, forwardRef, useRef } from "react";
 
+import { useDevEffect } from "../utils/useDevEffect.js";
 import { Link, type LinkProps } from "./Link.js";
 import {
   type SkipToMainContentClassNameOptions,
@@ -21,8 +22,7 @@ const getMainElement = (mainId: string): HTMLElement | null =>
  * @since 6.0.0 The `mainId` is optional
  */
 export interface SkipToMainContentProps
-  extends Omit<LinkProps, "href">,
-    SkipToMainContentClassNameOptions {
+  extends Omit<LinkProps, "href">, SkipToMainContentClassNameOptions {
   /**
    * @since 6.0.0 Changed default value from `"skip-to-main-content"`
    * @defaultValue `"skip-to-main"`
@@ -95,30 +95,27 @@ export const SkipToMainContent = forwardRef<
   // want to warn the developer about missing main element in development
   // immediately to help prevent errors, but in production this can be lazy
   // initialized only once a keyboard user focuses and clicks this element
-  if (process.env.NODE_ENV !== "production") {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-      mainNodeRef.current = getMainElement(mainId);
+  useDevEffect(() => {
+    mainNodeRef.current = getMainElement(mainId);
 
-      if (!mainNodeRef.current) {
-        const foundMainId = document.querySelector('main,[role="main"]')?.id;
-        let message = `Unable to find a main element to focus`;
-        if (mainId) {
-          message += ` with an id of "${mainId}"`;
+    if (!mainNodeRef.current) {
+      const foundMainId = document.querySelector('main,[role="main"]')?.id;
+      let message = `Unable to find a main element to focus`;
+      if (mainId) {
+        message += ` with an id of "${mainId}"`;
 
-          if (foundMainId) {
-            message += ` but a main element was found with an id of "${foundMainId}".`;
-          }
+        if (foundMainId) {
+          message += ` but a main element was found with an id of "${foundMainId}".`;
         }
-        if (!foundMainId) {
-          message +=
-            '. There should be at least one <main> element or an element with role="main" on the page for accessibility.';
-        }
-
-        throw new Error(message);
       }
-    }, [mainId]);
-  }
+      if (!foundMainId) {
+        message +=
+          '. There should be at least one <main> element or an element with role="main" on the page for accessibility.';
+      }
+
+      throw new Error(message);
+    }
+  }, [mainId]);
 
   return (
     <Link

package/src/list/List.tsx

@@ -8,8 +8,7 @@ export type ListElement = HTMLUListElement | HTMLOListElement;
  * @since 6.3.1 Extends the ListClassNameOptions
  */
 export interface ListProps
-  extends HTMLAttributes<ListElement>,
-    ListClassNameOptions {
+  extends HTMLAttributes<ListElement>, ListClassNameOptions {
   /**
    * @defaultValue `"none"`
    */

package/src/list/ListItem.tsx

@@ -19,7 +19,8 @@ import { type ListItemChildrenProps } from "./types.js";
  * @since 6.3.1 Extends the BaseListItemClassNameOptions
  */
 export interface ListItemProps
-  extends HTMLAttributes<HTMLLIElement>,
+  extends
+    HTMLAttributes<HTMLLIElement>,
     ListItemChildrenProps,
     BaseListItemClassNameOptions,
     ComponentWithRippleProps {

package/src/list/ListItemAddon.tsx

@@ -10,7 +10,8 @@ import {
 } from "./listItemStyles.js";
 
 export interface ListItemAddonProps
-  extends Omit<TextIconSpacingProps, "icon" | "iconAfter" | "forceIconWrap">,
+  extends
+    Omit<TextIconSpacingProps, "icon" | "iconAfter" | "forceIconWrap">,
     ListItemAddonClassNameOptions {
   /**
    * The addon that should be rendered.

package/src/list/ListItemLink.tsx

@@ -17,7 +17,8 @@ import { type ListItemClassNameOptions, listItem } from "./listItemStyles.js";
 import { type ListItemChildrenProps } from "./types.js";
 
 export interface ListItemLinkProps
-  extends AnchorHTMLAttributes<HTMLAnchorElement>,
+  extends
+    AnchorHTMLAttributes<HTMLAnchorElement>,
     ListItemClassNameOptions,
     ListItemChildrenProps,
     ComponentWithRippleProps {

package/src/list/ListSubheader.tsx

@@ -35,8 +35,7 @@ export function listSubheader(
  * @since 6.0.0 The `role` prop defaults to `"presentation"`
  */
 export interface ListSubheaderProps
-  extends HTMLAttributes<HTMLLIElement>,
-    ListSubheaderClassNameOptions {
+  extends HTMLAttributes<HTMLLIElement>, ListSubheaderClassNameOptions {
   /**
    * @defaultValue `"presentation"`
    */

package/src/list/getListItemHeight.ts

@@ -4,15 +4,14 @@ import type { ListItemChildrenProps, ListItemHeight } from "./types.js";
  * @since 6.0.0
  * @internal
  */
-export interface ListItemHeightOptions
-  extends Pick<
-    ListItemChildrenProps,
-    | "leftAddon"
-    | "rightAddon"
-    | "leftAddonType"
-    | "rightAddonType"
-    | "secondaryText"
-  > {
+export interface ListItemHeightOptions extends Pick<
+  ListItemChildrenProps,
+  | "leftAddon"
+  | "rightAddon"
+  | "leftAddonType"
+  | "rightAddonType"
+  | "secondaryText"
+> {
   /**
    * @see {@link ListItemHeight}
    */

package/src/list/listItemStyles.ts

@@ -72,8 +72,7 @@ export interface ListItemClassNameOptions extends BaseListItemClassNameOptions {
 }
 
 /** @since 6.0.0 */
-export interface InternalListItemClassNameOptions
-  extends ListItemClassNameOptions {
+export interface InternalListItemClassNameOptions extends ListItemClassNameOptions {
   /**
    * @defaultValue `false`
    */

package/src/list/types.ts

@@ -227,5 +227,4 @@ export interface ListItemChildrenTextProps {
  * @since 6.0.0 Renamed `textChildren` to `disableTextChildren`
  */
 export interface ListItemChildrenProps
-  extends ListItemChildrenTextProps,
-    ListItemChildrenAddonProps {}
+  extends ListItemChildrenTextProps, ListItemChildrenAddonProps {}

package/src/media-queries/AppSizeProvider.tsx

@@ -14,12 +14,8 @@ import {
   type AppSize,
   type AppSizeQueries,
   DEFAULT_APP_SIZE,
-  DEFAULT_DESKTOP_LARGE_MIN_WIDTH,
-  DEFAULT_DESKTOP_MIN_WIDTH,
-  DEFAULT_PHONE_MAX_WIDTH,
-  DEFAULT_TABLET_MAX_WIDTH,
-  DEFAULT_TABLET_MIN_WIDTH,
 } from "./appSize.js";
+import { MEDIA_QUERY_CONFIG } from "./config.js";
 import { useMediaQuery } from "./useMediaQuery.js";
 
 /** @internal */
@@ -71,6 +67,8 @@ export function useAppSize(): Readonly<AppSize> {
  * @since 6.0.0 Renamed from `AppSizeListenerProps`.
  * @since 6.0.0 Removed the `onChange` prop
  * @since 6.0.0 Renamed `defaultSize` to `ssrSize`
+ * @since 6.4.0 Deprecated the `AppSizeQueries` in favor
+ * of the `MEDIA_QUERY_CONFIG`
  */
 export interface AppSizeProviderProps extends AppSizeQueries {
   /**
@@ -95,11 +93,11 @@ export interface AppSizeProviderProps extends AppSizeQueries {
 export function AppSizeProvider(props: AppSizeProviderProps): ReactElement {
   const {
     ssrSize = DEFAULT_APP_SIZE,
-    phoneMaxWidth = DEFAULT_PHONE_MAX_WIDTH,
-    tabletMinWidth = DEFAULT_TABLET_MIN_WIDTH,
-    tabletMaxWidth = DEFAULT_TABLET_MAX_WIDTH,
-    desktopMinWidth = DEFAULT_DESKTOP_MIN_WIDTH,
-    desktopLargeMinWidth = DEFAULT_DESKTOP_LARGE_MIN_WIDTH,
+    phoneMaxWidth = MEDIA_QUERY_CONFIG.phoneMaxWidth,
+    tabletMinWidth = MEDIA_QUERY_CONFIG.tabletMinWidth,
+    tabletMaxWidth = MEDIA_QUERY_CONFIG.tabletMaxWidth,
+    desktopMinWidth = MEDIA_QUERY_CONFIG.desktopMinWidth,
+    desktopLargeMinWidth = MEDIA_QUERY_CONFIG.desktopLargeMinWidth,
     children,
   } = props;
   const { __root } = useContext(context);

package/src/media-queries/appSize.ts

@@ -62,6 +62,9 @@ export interface AppSizeQueries {
   desktopLargeMinWidth?: QuerySize;
 }
 
+/**
+ * @deprecated Use `MEDIA_QUERY_CONFIG` instead.
+ */
 export const DEFAULT_APP_SIZE_QUERIES: Readonly<AppSizeQueries> = {
   phoneMaxWidth: DEFAULT_PHONE_MAX_WIDTH,
   tabletMinWidth: DEFAULT_TABLET_MIN_WIDTH,

package/src/media-queries/config.ts

@@ -0,0 +1,41 @@
+import {
+  type AppSizeQueries,
+  DEFAULT_DESKTOP_LARGE_MIN_WIDTH,
+  DEFAULT_DESKTOP_MIN_WIDTH,
+  DEFAULT_PHONE_MAX_WIDTH,
+  DEFAULT_TABLET_MAX_WIDTH,
+  DEFAULT_TABLET_MIN_WIDTH,
+} from "./appSize.js";
+
+/** @since 6.4.0 */
+export type MediaQueryConfig = Required<AppSizeQueries>;
+
+/**
+ * @since 6.4.0
+ */
+export const MEDIA_QUERY_CONFIG: MediaQueryConfig = {
+  phoneMaxWidth: DEFAULT_PHONE_MAX_WIDTH,
+  tabletMinWidth: DEFAULT_TABLET_MIN_WIDTH,
+  tabletMaxWidth: DEFAULT_TABLET_MAX_WIDTH,
+  desktopMinWidth: DEFAULT_DESKTOP_MIN_WIDTH,
+  desktopLargeMinWidth: DEFAULT_DESKTOP_LARGE_MIN_WIDTH,
+};
+
+/**
+ * @since 6.4.0
+ */
+export function configureMediaQueries(
+  queries: Readonly<Partial<MediaQueryConfig>>
+): void {
+  if (process.env.NODE_ENV !== "production") {
+    Object.entries(queries).forEach(([name, value]) => {
+      if (!(name in MEDIA_QUERY_CONFIG)) {
+        throw new Error(`${name} is an invalid react-md media query.`);
+      }
+
+      MEDIA_QUERY_CONFIG[name as keyof MediaQueryConfig] = value;
+    });
+  } else {
+    Object.assign(MEDIA_QUERY_CONFIG, queries);
+  }
+}

package/src/menu/DropdownMenu.tsx

@@ -29,7 +29,8 @@ import { MenuVisibilityProvider } from "./MenuVisibilityProvider.js";
 import { useMenuBarContext } from "./useMenuBarProvider.js";
 
 export interface BaseDropdownMenuProps
-  extends MenuConfiguration,
+  extends
+    MenuConfiguration,
     MenuListConvenienceProps,
     MenuSheetConvenienceProps,
     MenuConvenienceProps {
@@ -37,12 +38,10 @@ export interface BaseDropdownMenuProps
 }
 
 export interface DropdownMenuButtonProps
-  extends MenuButtonProps,
-    BaseDropdownMenuProps {}
+  extends MenuButtonProps, BaseDropdownMenuProps {}
 
 export interface DropdownMenuItemButtonProps
-  extends MenuItemButtonProps,
-    BaseDropdownMenuProps {}
+  extends MenuItemButtonProps, BaseDropdownMenuProps {}
 
 /**
  * @since 6.0.0

package/src/menu/Menu.tsx

@@ -215,7 +215,8 @@ export type MenuFixedPositioningOptions = Omit<
  * @since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.
  */
 export interface MenuProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends
+    HTMLAttributes<HTMLDivElement>,
     MenuConfiguration,
     MenuConfigurationProps,
     MenuFixedPositioningOptions,

package/src/menu/MenuItemButton.tsx

@@ -23,8 +23,7 @@ const noop = (): void => {
  * @since 5.0.0
  */
 export interface MenuItemButtonProps
-  extends BaseMenuButtonProps,
-    MenuItemProps {}
+  extends BaseMenuButtonProps, MenuItemProps {}
 
 /**
  * **Client Component**

package/src/menu/MenuItemFileInput.tsx

@@ -19,7 +19,8 @@ const noop = (): void => {
  * implementation.
  */
 export interface MenuItemFileInputProps
-  extends Omit<MenuItemProps, "onChange">,
+  extends
+    Omit<MenuItemProps, "onChange">,
     Pick<
       InputHTMLAttributes<HTMLInputElement>,
       "accept" | "capture" | "multiple"

package/src/menu/MenuItemInputToggle.tsx

@@ -46,7 +46,8 @@ export type MenuItemInputToggleCheckedCallback = (
 
 /** @since 2.8.0 */
 export interface BaseMenuItemInputToggleProps
-  extends HTMLAttributes<HTMLLIElement>,
+  extends
+    HTMLAttributes<HTMLLIElement>,
     ConfigurableInputToggleIconProps,
     ListItemChildrenTextProps {
   checked: boolean;
@@ -98,8 +99,7 @@ export interface BaseMenuItemInputToggleProps
 }
 
 export interface MenuItemCheckboxProps
-  extends BaseMenuItemInputToggleProps,
-    IndeterminateCheckboxProps {}
+  extends BaseMenuItemInputToggleProps, IndeterminateCheckboxProps {}
 
 export type MenuItemRadioProps = BaseMenuItemInputToggleProps;
 

package/src/menu/MenuItemSeparator.tsx

@@ -8,7 +8,8 @@ import { useMenuConfiguration } from "./MenuConfigurationProvider.js";
 
 /** @since 5.0.0 */
 export interface MenuItemSeparatorProps
-  extends HTMLAttributes<HTMLLIElement>,
+  extends
+    HTMLAttributes<HTMLLIElement>,
     Pick<DividerProps, "inset" | "vertical"> {}
 
 /**

package/src/menu/MenuVisibilityProvider.tsx

@@ -14,8 +14,10 @@ import { type NonNullMutableRef, type UseStateObject } from "../types.js";
  * @since 5.0.0
  * @since 6.0.0 Added the `defaultFocusIndex` ref.
  */
-export interface MenuVisibilityContext
-  extends UseStateObject<"visible", boolean> {
+export interface MenuVisibilityContext extends UseStateObject<
+  "visible",
+  boolean
+> {
   defaultFocusIndex: NonNullMutableRef<number>;
 }
 

package/src/menu/MenuWidget.tsx

@@ -23,8 +23,7 @@ const noop = (): void => {
  * @internal
  */
 export interface MenuWidgetProps
-  extends HTMLAttributes<HTMLDivElement>,
-    MenuListConvenienceProps {
+  extends HTMLAttributes<HTMLDivElement>, MenuListConvenienceProps {
   isSheet: boolean;
   horizontal: boolean;
   disableElevation?: boolean;

package/src/menu/useContextMenu.ts

@@ -48,8 +48,10 @@ export interface ContextMenuHookOptions {
  * `ContextMenuImplementation` and dropped the `menuRef` and `menuNodeRef`
  * fields.
  */
-export interface ContextMenuImplementation
-  extends UseStateObject<"visible", boolean> {
+export interface ContextMenuImplementation extends UseStateObject<
+  "visible",
+  boolean
+> {
   menuProps: ContextMenuProps;
   onContextMenu: <E extends HTMLElement>(event: MouseEvent<E>) => void;
 }

package/src/movement/types.ts

@@ -137,9 +137,17 @@ export interface KeyboardMovementBehavior {
 
 /**
  * @since 6.3.0
+ * @since 6.4.0 Added `force` option.
  */
 export interface KeyboardFocusFromKeyOptions {
   key: string;
+
+  /**
+   * @since 6.4.0
+   * @defaultValue `false`
+   */
+  force?: boolean;
+
   /** @defaultValue `false` */
   reversed?: boolean;
 
@@ -150,15 +158,29 @@ export interface KeyboardFocusFromKeyOptions {
 /**
  * @since 6.3.0
  */
-export type KeyboardFocusAction = (focusables?: readonly HTMLElement[]) => void;
+export type KeyboardFocusAction = (
+  focusables?: readonly HTMLElement[],
+  force?: boolean
+) => void;
+
+/**
+ * @since 6.4.0
+ */
+export interface KeyboardMovementUpdateFocusIndexOptions {
+  index: number;
+  force?: boolean;
+  focusables?: readonly HTMLElement[];
+}
 
 /**
  * @since 5.0.0
  * @since 6.0.0 Removed `attach`, `detach` and `watching`
+ * @since 6.3.0 Added `focusFirst`, `focusLast`, `focusNext`, `focusPrevious`
+ * and `focusFromKey`.
+ * @since 6.4.0 Added `focusCurrent` and `updateFocusIndex`
  * @internal
  */
-export interface KeyboardMovementContext
-  extends Required<KeyboardMovementBehavior> {
+export interface KeyboardMovementContext extends Required<KeyboardMovementBehavior> {
   /** {@inheritDoc KeyboardMovementConfig} */
   config: NonNullRef<KeyboardMovementConfig>;
 
@@ -195,6 +217,19 @@ export interface KeyboardMovementContext
    * @since 6.3.0
    */
   focusFromKey: (options: KeyboardFocusFromKeyOptions) => void;
+
+  /**
+   * @since 6.4.0
+   */
+  focusCurrent: (
+    focusables?: readonly HTMLElement[],
+    force?: boolean
+  ) => HTMLElement | undefined;
+
+  /**
+   * @since 6.4.0
+   */
+  updateFocusIndex: (options: KeyboardMovementUpdateFocusIndexOptions) => void;
 }
 
 /**
@@ -241,8 +276,9 @@ export type KeyboardMovementFocusChangeEventHandler = (
  * @since 6.0.0
  * @internal
  */
-export interface KeyboardMovementExtensionData<E extends HTMLElement>
-  extends KeyboardMovementContext {
+export interface KeyboardMovementExtensionData<
+  E extends HTMLElement,
+> extends KeyboardMovementContext {
   event: KeyboardEvent<E>;
   currentFocusIndex: NonNullMutableRef<number>;
   setFocusIndex: (index: number, focusables: readonly HTMLElement[]) => void;
@@ -260,9 +296,13 @@ export type KeyboardMovementEventHandlers<E extends HTMLElement> = Pick<
 /**
  * @since 6.3.0
  */
-export interface SimpleKeyboardMovementWrapperOptions<E extends HTMLElement>
-  extends KeyboardMovementEventHandlers<E> {
+export interface SimpleKeyboardMovementWrapperOptions<
+  E extends HTMLElement,
+> extends KeyboardMovementEventHandlers<E> {
   ref?: Ref<E>;
+
+  /** @defaultValue `false` */
+  disabled?: boolean;
 }
 
 /**
@@ -270,15 +310,13 @@ export interface SimpleKeyboardMovementWrapperOptions<E extends HTMLElement>
  * @internal
  */
 export interface KeyboardMovementProviderOptions<E extends HTMLElement>
-  extends KeyboardMovementBehavior,
+  extends
+    KeyboardMovementBehavior,
     SimpleKeyboardMovementWrapperOptions<E>,
     KeyboardMovementConfiguration {
   /** @see {@link TabIndexBehavior} */
   tabIndexBehavior?: TabIndexBehavior;
 
-  /** @defaultValue `false` */
-  disabled?: boolean;
-
   /**
    * This is used to implement custom keyboard movement for the `keydown` event.
    */
@@ -332,8 +370,9 @@ export interface KeyboardMovementProviderOptions<E extends HTMLElement>
  * @since 6.0.0
  * @internal
  */
-export interface KeyboardMovementProps<E extends HTMLElement>
-  extends Required<KeyboardMovementEventHandlers<E>> {
+export interface KeyboardMovementProps<E extends HTMLElement> extends Required<
+  KeyboardMovementEventHandlers<E>
+> {
   /**
    * This will only be provided if the {@link KeyboardMovementContext.tabIndexBehavior}
    * is set to `"virtual"`.