@react-md/core 1.0.0-next.0 → 1.0.0-next.1

package/src/icon/{MaterialSymbolsProvider.tsx → materialConfig.ts}

@@ -1,13 +1,23 @@
-"use client";
+import { type CSSProperties } from "react";
 import {
-  createContext,
-  useContext,
-  useMemo,
-  type CSSProperties,
-  type ReactElement,
-  type ReactNode,
-} from "react";
-import { type MaterialSymbolFamily } from "./material.js";
+  type MaterialIconFamily,
+  type MaterialSymbolFamily,
+} from "./material.js";
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface MaterialIconCustomization {
+  /**
+   * @defaultValue `"filled"`
+   */
+  iconFamily?: MaterialIconFamily;
+}
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export type MaterialIconConfiguration = Required<MaterialIconCustomization>;
 
 /**
  * Fill gives you the ability to modify the default icon style. A single icon
@@ -137,44 +147,54 @@ export interface MaterialSymbolCustomization {
  */
 export type MaterialSymbolConfiguration = Required<MaterialSymbolCustomization>;
 
-const context = createContext<MaterialSymbolConfiguration>({
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface MaterialConfiguration
+  extends MaterialIconConfiguration,
+    MaterialSymbolConfiguration {}
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export const MATERIAL_CONFIG: MaterialConfiguration = {
   fill: 0,
   weight: 400,
   grade: 0,
-  opticalSize: 24,
+  opticalSize: 48,
+  iconFamily: "filled",
   family: "outlined",
-});
-context.displayName = "MaterialSymbol";
-const { Provider } = context;
+};
 
 /**
  * @remarks \@since 6.0.0
  */
-export function useMaterialSymbolConfiguration(): MaterialSymbolConfiguration {
-  return useContext(context);
+export interface MaterialSymbolFontVariationSettings {
+  style?: CSSProperties;
+  family: MaterialSymbolFamily;
 }
 
 /**
  * @remarks \@since 6.0.0
+ * @internal
  */
-export function useFontVariationSettings(
+export function getFontVariationSettings(
   options: MaterialSymbolCustomization & { style?: CSSProperties }
-): { style?: CSSProperties; family: MaterialSymbolFamily } {
-  const configuration = useMaterialSymbolConfiguration();
+): MaterialSymbolFontVariationSettings {
   let { style } = options;
   const {
-    fill = configuration.fill,
-    grade = configuration.grade,
-    opticalSize = configuration.opticalSize,
-    weight = configuration.weight,
-    family = configuration.family,
+    fill = MATERIAL_CONFIG.fill,
+    grade = MATERIAL_CONFIG.grade,
+    opticalSize = MATERIAL_CONFIG.opticalSize,
+    weight = MATERIAL_CONFIG.weight,
+    family: symbolFamily = MATERIAL_CONFIG.family,
   } = options;
   if (
     !style?.fontVariationSettings &&
-    (fill !== configuration.fill ||
-      grade !== configuration.grade ||
-      opticalSize !== configuration.opticalSize ||
-      weight !== configuration.weight)
+    (fill !== MATERIAL_CONFIG.fill ||
+      grade !== MATERIAL_CONFIG.grade ||
+      opticalSize !== MATERIAL_CONFIG.opticalSize ||
+      weight !== MATERIAL_CONFIG.weight)
   ) {
     style = {
       ...style,
@@ -182,43 +202,5 @@ export function useFontVariationSettings(
     };
   }
 
-  return { family, style };
-}
-
-/**
- * @remarks \@since 6.0.0
- */
-export interface MaterialSymbolsProviderProps
-  extends MaterialSymbolCustomization {
-  children: ReactNode;
-}
-
-/**
- * **Client Component**
- *
- * @remarks \@since 6.0.0
- */
-export function MaterialSymbolsProvider(
-  props: MaterialSymbolsProviderProps
-): ReactElement {
-  const {
-    fill = 0,
-    weight = 400,
-    grade = 0,
-    family: type = "outlined",
-    opticalSize = 48,
-    children,
-  } = props;
-  const value = useMemo<MaterialSymbolConfiguration>(
-    () => ({
-      fill,
-      weight,
-      grade,
-      family: type,
-      opticalSize,
-    }),
-    [fill, grade, opticalSize, type, weight]
-  );
-
-  return <Provider value={value}>{children}</Provider>;
+  return { family: symbolFamily, style };
 }

package/src/icon/styles.ts

@@ -68,23 +68,6 @@ export interface FontIconClassNameOptions extends SVGIconClassNameOptions {
    * @defaultValue `"material-icons"`
    */
   iconClassName?: string;
-
-  /**
-   * Either a boolean that will enforce the 24x24 size of the font icon or a
-   * number of the size to enforce. This is useful when using other font icon
-   * libraries that do not have a consistent size.
-   *
-   * @defaultValue `false`
-   */
-  forceSize?: boolean;
-
-  /**
-   * Boolean if the `forceSize` prop should also force the `font-size` instead
-   * of only `width` and `height`.
-   *
-   * @defaultValue `false`
-   */
-  forceFontSize?: boolean;
 }
 
 /** @remarks \@since 6.0.0 */
@@ -117,8 +100,6 @@ export function icon(options: IconClassNameOptions): string {
     family = "",
     dense = false,
     inline = false,
-    forceSize = false,
-    forceFontSize = false,
     iconClassName,
   } = options as FontIconClassNameOptions &
     SVGIconClassNameOptions & {
@@ -138,8 +119,6 @@ export function icon(options: IconClassNameOptions): string {
       symbol: isSymbol,
       vab: inline,
       dense,
-      "forced-font": forceFontSize,
-      "forced-size": forceSize,
     }),
     isSymbol && `material-symbols-${family}`,
     isMaterial &&

package/src/index.ts

@@ -36,9 +36,7 @@ export * from "./dialog/FixedDialog.js";
 export * from "./dialog/NestedDialogProvider.js";
 export * from "./dialog/styles.js";
 export * from "./divider/Divider.js";
-export * from "./divider/VerticalDivider.js";
 export * from "./divider/styles.js";
-export * from "./divider/useVerticalDividerHeight.js";
 export * from "./draggable/useDraggable.js";
 export * from "./expansion-panel/ExpansionList.js";
 export * from "./expansion-panel/ExpansionPanel.js";
@@ -106,13 +104,12 @@ export * from "./hoverMode/useHoverModeProvider.js";
 export * from "./icon/FontIcon.js";
 export * from "./icon/IconRotator.js";
 export * from "./icon/MaterialIcon.js";
-export * from "./icon/MaterialIconsProvider.js";
 export * from "./icon/MaterialSymbol.js";
-export * from "./icon/MaterialSymbolsProvider.js";
 export * from "./icon/SVGIcon.js";
 export * from "./icon/TextIconSpacing.js";
 export * from "./icon/iconConfig.js";
 export * from "./icon/material.js";
+export * from "./icon/materialConfig.js";
 export * from "./icon/styles.js";
 export * from "./interaction/Ripple.js";
 export * from "./interaction/RippleContainer.js";
@@ -137,7 +134,6 @@ export * from "./layout/useMainTabIndex.js";
 export * from "./layout/useResizableLayout.js";
 export * from "./layout/useTemporaryLayout.js";
 export * from "./link/Link.js";
-export * from "./link/LinkProvider.js";
 export * from "./link/SkipToMainContent.js";
 export * from "./link/styles.js";
 export * from "./list/List.js";
@@ -219,7 +215,13 @@ export * from "./table/TableContainer.js";
 export * from "./table/TableContainerProvider.js";
 export * from "./table/TableFooter.js";
 export * from "./table/TableHeader.js";
+export * from "./table/TableRadio.js";
 export * from "./table/TableRow.js";
+export * from "./table/tableCellStyles.js";
+export * from "./table/tableFooterStyles.js";
+export * from "./table/tableHeaderStyles.js";
+export * from "./table/tableRowStyles.js";
+export * from "./table/tableStyles.js";
 export * from "./table/types.js";
 export * from "./tabs/Tab.js";
 export * from "./tabs/TabList.js";
@@ -248,7 +250,6 @@ export * from "./theme/utils.js";
 export * from "./tooltip/Tooltip.js";
 export * from "./tooltip/TooltipHoverModeProvider.js";
 export * from "./tooltip/constants.js";
-export * from "./tooltip/useOverflowTooltip.js";
 export * from "./tooltip/useTooltip.js";
 export * from "./transition/CSSTransition.js";
 export * from "./transition/Collapse.js";
@@ -257,6 +258,7 @@ export * from "./transition/ScaleTransition.js";
 export * from "./transition/SkeletonPlaceholder.js";
 export * from "./transition/Slide.js";
 export * from "./transition/SlideContainer.js";
+export * from "./transition/config.js";
 export * from "./transition/maxWidthTransition.js";
 export * from "./transition/types.js";
 export * from "./transition/useCSSTransition.js";

package/src/interaction/__tests__/UserInteractionModeProvider.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, jest } from "@jest/globals";
 import { type ReactElement } from "react";
-import { fireEvent, render } from "../../test-utils/index.js";
+import { fireEvent, render, screen } from "../../test-utils/index.js";
 
 import {
   UserInteractionModeProvider,
@@ -103,13 +103,13 @@ describe("UserInteractionModeProvider", () => {
       return <span data-testid="mode">{mode}</span>;
     }
 
-    const { getByTestId } = render(
+    render(
       <UserInteractionModeProvider>
         <Test />
       </UserInteractionModeProvider>
     );
 
-    const mode = getByTestId("mode");
+    const mode = screen.getByTestId("mode");
     expect(mode.textContent).toBe("mouse");
 
     fireEvent.keyDown(window);

package/src/layout/__tests__/useExpandableLayout.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "@jest/globals";
+import { beforeEach, describe, expect, it } from "@jest/globals";
 import { type ReactNode } from "react";
 import { AppBar } from "../../app-bar/AppBar.js";
 import { AppBarTitle } from "../../app-bar/AppBarTitle.js";
@@ -19,6 +19,7 @@ import {
   within,
 } from "../../test-utils/index.js";
 import { matchTablet } from "../../test-utils/matchMedia.js";
+import { TRANSITION_CONFIG } from "../../transition/config.js";
 import { isElementVisible } from "../../utils/isElementVisible.js";
 import { LayoutNav } from "../LayoutNav.js";
 import { Main } from "../Main.js";
@@ -96,6 +97,10 @@ function Layout(props: LayoutProps) {
 }
 
 describe("useExpandableLayout", () => {
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   it("should allow you to create an expandable layout quickly", async () => {
     const user = userEvent.setup();
     rmdRender(<Layout />);
@@ -145,6 +150,8 @@ describe("useExpandableLayout", () => {
     await user.click(navToggle);
     await waitFor(() => {
       expect(isElementVisible(expandableNav)).toBe(true);
+    });
+    await waitFor(() => {
       expect(expandableNav).not.toHaveClass(OFFSCREEN_CLASS);
     });
 
@@ -221,6 +228,8 @@ describe("useExpandableLayout", () => {
     expect(main).toHaveClass(ENTER_H_CLASS);
     await waitFor(() => {
       expect(appBar).not.toHaveClass(ENTER_H_CLASS);
+    });
+    await waitFor(() => {
       expect(main).not.toHaveClass(ENTER_H_CLASS);
     });
     expect(appBar).toHaveClass(ENTER_H_DONE_CLASS);
@@ -233,6 +242,8 @@ describe("useExpandableLayout", () => {
     expect(main).toHaveClass(EXIT_H_CLASS);
     await waitFor(() => {
       expect(appBar).not.toHaveClass(EXIT_H_CLASS);
+    });
+    await waitFor(() => {
       expect(main).not.toHaveClass(EXIT_H_CLASS);
     });
   });

package/src/layout/__tests__/useLayoutTree.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "@jest/globals";
+import { beforeEach, describe, expect, it } from "@jest/globals";
 import {
   createContext,
   forwardRef,
@@ -11,6 +11,7 @@ import {
 
 import { FontIcon } from "../../icon/FontIcon.js";
 import { rmdRender, screen, userEvent } from "../../test-utils/index.js";
+import { TRANSITION_CONFIG } from "../../transition/config.js";
 import { Tree } from "../../tree/Tree.js";
 import { type TreeData } from "../../tree/types.js";
 import { isElementVisible } from "../../utils/isElementVisible.js";
@@ -126,6 +127,10 @@ function Test() {
 }
 
 describe("useLayoutTree", () => {
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   it("should allow you to create a layout tree quickly", async () => {
     const user = userEvent.setup();
     rmdRender(<Test />, { wrapper: Wrapper });

package/src/layout/__tests__/useResizableLayout.tsx

@@ -1,4 +1,11 @@
-import { afterEach, describe, expect, it, jest } from "@jest/globals";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from "@jest/globals";
 import { type ReactNode } from "react";
 import { AppBar } from "../../app-bar/AppBar.js";
 import { AppBarTitle } from "../../app-bar/AppBarTitle.js";
@@ -15,6 +22,7 @@ import {
   userEvent,
   waitFor,
 } from "../../test-utils/index.js";
+import { TRANSITION_CONFIG } from "../../transition/config.js";
 import { removeItemFromStorage } from "../../useLocalStorage.js";
 import { isElementVisible } from "../../utils/isElementVisible.js";
 import { LayoutNav } from "../LayoutNav.js";
@@ -96,6 +104,10 @@ function Layout(props: LayoutProps) {
 }
 
 describe("useResizableLayout", () => {
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   afterEach(() => {
     removeItemFromStorage({ key: "navWidth" });
   });

package/src/layout/__tests__/useTemporaryLayout.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "@jest/globals";
+import { beforeEach, describe, expect, it } from "@jest/globals";
 import { type ReactNode } from "react";
 import { AppBar } from "../../app-bar/AppBar.js";
 import { AppBarTitle } from "../../app-bar/AppBarTitle.js";
@@ -13,6 +13,7 @@ import {
   userEvent,
   waitFor,
 } from "../../test-utils/index.js";
+import { TRANSITION_CONFIG } from "../../transition/config.js";
 import { Main } from "../Main.js";
 import {
   useTemporaryLayout,
@@ -53,6 +54,10 @@ function Layout(props: LayoutProps) {
 }
 
 describe("useTemporaryLayout", () => {
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   it("should allow you to create a temporary layout quickly", async () => {
     const user = userEvent.setup();
     rmdRender(<Layout />);

package/src/link/Link.tsx

@@ -1,4 +1,8 @@
-import { forwardRef, type AnchorHTMLAttributes } from "react";
+import {
+  forwardRef,
+  type AnchorHTMLAttributes,
+  type ForwardRefExoticComponent,
+} from "react";
 import { link, type LinkClassNameOptions } from "./styles.js";
 
 declare module "react" {
@@ -9,13 +13,20 @@ declare module "react" {
   }
 }
 
+/**
+ * @remarks \@since 6.0.0
+ */
+export type CustomLinkComponent =
+  | ForwardRefExoticComponent<{ href: string }>
+  | ForwardRefExoticComponent<{ to: string }>
+  | "a";
+
 /**
  * @remarks
  * \@since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers
  * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.
  * \@since 6.0.0 Removed the `component` prop since all you need for link
- * behavior is `className="rmd-link"` and the new `LinkProvider` handles custom
- * `Link` components throughout your app.
+ * behavior is `className="rmd-link"`.
  * \@since 6.0.0 The `href` prop is required.
  * \@since 6.0.0 Removed the `flexCentered` prop since it is now the default
  * styles.
@@ -62,8 +73,7 @@ export interface LinkProps
  * \@since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers
  * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.
  * \@since 6.0.0 Removed the `component` prop since all you need for link
- * behavior is `className="rmd-link"` and the new `LinkProvider` handles custom
- * `Link` components throughout your app.
+ * behavior is `className="rmd-link"`.
  * \@since 6.0.0 The `href` prop is required.
  * \@since 6.0.0 Removed the `flexCentered` prop since it is now the default
  * styles.

package/src/link/__tests__/Link.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
-import { render } from "../../test-utils/index.js";
 import { createRef } from "react";
+import { render, screen } from "../../test-utils/index.js";
 
 import { Link } from "../Link.js";
 
@@ -13,8 +13,8 @@ describe("Link", () => {
       children: "Content",
     } as const;
 
-    const { getByRole, rerender } = render(<Link {...props} />);
-    const link = getByRole("link", { name: "Content" });
+    const { rerender } = render(<Link {...props} />);
+    const link = screen.getByRole("link", { name: "Content" });
     expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
     expect(ref.current).toBe(link);
     expect(link).toMatchSnapshot();

package/src/link/__tests__/SkipToMainContent.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, jest } from "@jest/globals";
 import { createRef, type FC, type ReactNode } from "react";
-import { fireEvent, render } from "../../test-utils/index.js";
+import { fireEvent, render, screen } from "../../test-utils/index.js";
 
 import { SkipToMainContent } from "../SkipToMainContent.js";
 
@@ -18,11 +18,11 @@ describe("SkipToMainContent", () => {
       ref,
       mainId: "main-id",
     } as const;
-    const { getByRole, rerender } = render(<SkipToMainContent {...props} />, {
+    const { rerender } = render(<SkipToMainContent {...props} />, {
       wrapper: MainIdWrapper,
     });
 
-    const link = getByRole("link", { name: "Skip to main content" });
+    const link = screen.getByRole("link", { name: "Skip to main content" });
     expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
     expect(ref.current).toBe(link);
     expect(link).toMatchSnapshot();
@@ -77,15 +77,12 @@ describe("SkipToMainContent", () => {
   });
 
   it("should focus the main element when clicked unless the provided onClick prop calls event.stopPropagation()", () => {
-    const { getByRole, rerender } = render(
-      <SkipToMainContent mainId="main-id" />,
-      {
-        wrapper: MainIdWrapper,
-      }
-    );
+    const { rerender } = render(<SkipToMainContent mainId="main-id" />, {
+      wrapper: MainIdWrapper,
+    });
 
-    const link = getByRole("link", { name: "Skip to main content" });
-    const main = getByRole("main");
+    const link = screen.getByRole("link", { name: "Skip to main content" });
+    const main = screen.getByRole("main");
     expect(document.activeElement).toBe(document.body);
 
     fireEvent.click(link);
@@ -110,13 +107,13 @@ describe("SkipToMainContent", () => {
     process.env.NODE_ENV = "production";
 
     const querySelector = jest.spyOn(document, "querySelector");
-    const { getByRole } = render(<SkipToMainContent />, {
+    render(<SkipToMainContent />, {
       wrapper: MainIdWrapper,
     });
     expect(querySelector).not.toHaveBeenCalled();
 
-    const link = getByRole("link", { name: "Skip to main content" });
-    const main = getByRole("main");
+    const link = screen.getByRole("link", { name: "Skip to main content" });
+    const main = screen.getByRole("main");
     expect(document.activeElement).toBe(document.body);
 
     fireEvent.click(link);

package/src/list/ListItemLink.tsx

@@ -6,7 +6,7 @@ import {
 } from "react";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
-import { type CustomLinkComponent } from "../link/LinkProvider.js";
+import { type CustomLinkComponent } from "../link/Link.js";
 import { type PropsWithRef } from "../types.js";
 import { ListItemChildren } from "./ListItemChildren.js";
 import { getListItemHeight } from "./getListItemHeight.js";

package/src/list/__tests__/List.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { createRef } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { type PropsWithRef } from "../../types.js";
 import { List, list, type ListElement, type ListProps } from "../List.js";
@@ -8,9 +8,9 @@ import { List, list, type ListElement, type ListProps } from "../List.js";
 describe("List", () => {
   it("should apply the correct styling, HTML attributes, and allow a ref", () => {
     const ref = createRef<ListElement>();
-    const { getByRole, rerender } = render(<List ref={ref} />);
+    const { rerender } = render(<List ref={ref} />);
 
-    const unorderedList = getByRole("none");
+    const unorderedList = screen.getByRole("none");
     expect(ref.current).toBeInstanceOf(HTMLUListElement);
     expect(ref.current).toBe(unorderedList);
     expect(unorderedList).toMatchSnapshot();
@@ -33,7 +33,7 @@ describe("List", () => {
     rerender(<List ref={ref} ordered />);
     expect(unorderedList).not.toBeInTheDocument();
 
-    const orderedList = getByRole("none");
+    const orderedList = screen.getByRole("none");
     expect(ref.current).toBeInstanceOf(HTMLOListElement);
     expect(ref.current).toBe(orderedList);
     expect(orderedList).toMatchSnapshot();
@@ -44,10 +44,10 @@ describe("List", () => {
   });
 
   it("should allow the role to be overridden", () => {
-    const { getByRole } = render(<List role="menu" />);
+    render(<List role="menu" />);
 
-    expect(() => getByRole("none")).toThrow();
-    expect(() => getByRole("menu")).not.toThrow();
+    expect(() => screen.getByRole("none")).toThrow();
+    expect(() => screen.getByRole("menu")).not.toThrow();
   });
 
   describe("styling utility class", () => {