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

package/src/form/switchStyles.ts

@@ -15,15 +15,15 @@ const styles = bem("rmd-switch");
  */
 export interface SwitchClassNameOptions {
   className?: string;
-
   clickable?: boolean;
+  currentColor?: boolean;
 }
 
 /**
  * @remarks \@since 6.0.0
  */
 export function switchStyles(options: SwitchClassNameOptions = {}): string {
-  const { className, clickable } = options;
+  const { className, clickable, currentColor } = options;
 
-  return cnb(styles({ clickable }), className);
+  return cnb(styles({ "current-color": currentColor, clickable }), className);
 }

package/src/form/textAreaStyles.ts

@@ -8,8 +8,8 @@ import { type TextAreaResize } from "./useResizingTextArea.js";
 
 declare module "react" {
   interface CSSProperties {
-    "--rmd-form-textarea-height"?: string | number;
-    "--rmd-form-textarea-padding"?: string | number;
+    "--rmd-textarea-height"?: string | number;
+    "--rmd-textarea-padding"?: string | number;
   }
 }
 

package/src/form/types.ts

@@ -9,10 +9,8 @@ import { type PropsWithRef } from "../types.js";
 
 declare module "react" {
   interface CSSProperties {
-    "--rmd-form-error-color"?: string;
     "--rmd-form-active-color"?: string;
     "--rmd-form-focus-color"?: string;
-    "--rmd-form-disabled-color"?: string;
   }
 }
 

package/src/hoverMode/useHoverMode.ts

@@ -14,12 +14,12 @@ export interface HoverModeConfigurationOptions extends SimpleHoverModeContext {
   /**
    * This can be used to override the `HoverModeContext`'s hover time.
    */
-  hoverTime?: number;
+  hoverTimeout?: number;
 
   /**
    * This can be used to override the `HoverModeContext`'s leave time.
    */
-  leaveTime?: number;
+  leaveTimeout?: number;
 }
 
 /**
@@ -84,9 +84,9 @@ export function useHoverMode(
 ): HoverModeImplementation {
   const {
     disabled,
-    hoverTime,
+    hoverTimeout: hoverTime,
     hoverTimeoutRef,
-    leaveTime,
+    leaveTimeout: leaveTime,
     leaveTimeoutRef,
     enableHoverMode,
     disableHoverMode,

package/src/icon/FontIcon.tsx

@@ -22,7 +22,8 @@ export interface FontIconProps
  * with a perfect 1:1 scale (such as font awesome), it is recommended to use the
  * `forceSize` and `forceFontSize` props to fix the sizing issues.
  *
- * \@remarks \@since 6.0.0 Switched from `<i>` to `<span>` element.
+ * \@remarks \@since 6.0.0 Switched from `<i>` to `<span>` element and removed
+ * the `forceSize`/`forceFontSize` props.
  */
 export const FontIcon = forwardRef<HTMLElement, FontIconProps>(
   function FontIcon(props, ref) {
@@ -33,8 +34,6 @@ export const FontIcon = forwardRef<HTMLElement, FontIconProps>(
       dense = false,
       theme,
       iconClassName = "material-icons",
-      forceSize = false,
-      forceFontSize = false,
       ...remaining
     } = props;
 
@@ -49,8 +48,6 @@ export const FontIcon = forwardRef<HTMLElement, FontIconProps>(
           theme,
           className,
           iconClassName,
-          forceSize,
-          forceFontSize,
         })}
       >
         {children}

package/src/icon/MaterialIcon.tsx

@@ -1,7 +1,6 @@
-"use client";
 import { forwardRef, type AriaAttributes, type HTMLAttributes } from "react";
-import { useMaterialIconsFamily } from "./MaterialIconsProvider.js";
 import { type MaterialIconName } from "./material.js";
+import { MATERIAL_CONFIG } from "./materialConfig.js";
 import { icon, type MaterialIconClassNameOptions } from "./styles.js";
 
 /** @remarks \@since 6.0.0 */
@@ -11,11 +10,11 @@ export interface MaterialIconProps
   /** @defaultValue `true` */
   "aria-hidden"?: AriaAttributes["aria-hidden"];
   name: MaterialIconName;
+  children?: never;
 }
 
 /**
- * **Client Component**
- * Might be able to become a server component if I remove the useMaterialIconsFamily hook
+ * **Server Component**
  *
  * @remarks \@since 6.0.0
  */
@@ -24,13 +23,12 @@ export const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(
     const {
       "aria-hidden": ariaHidden = true,
       name,
-      family: propFamily,
+      family = MATERIAL_CONFIG.iconFamily,
       theme,
       dense,
       className,
       ...remaining
     } = props;
-    const family = useMaterialIconsFamily(propFamily);
 
     return (
       <span

package/src/icon/MaterialSymbol.tsx

@@ -1,14 +1,13 @@
-"use client";
-import { forwardRef, type HTMLAttributes } from "react";
+import { forwardRef, type AriaAttributes, type HTMLAttributes } from "react";
 import { type MaterialSymbolName } from "./material.js";
 import {
-  useFontVariationSettings,
+  getFontVariationSettings,
   type MaterialSymbolCustomization,
   type MaterialSymbolFill,
   type MaterialSymbolGrade,
   type MaterialSymbolOpticalSize,
   type MaterialSymbolWeight,
-} from "./MaterialSymbolsProvider.js";
+} from "./materialConfig.js";
 import { icon, type MaterialSymbolClassNameOptions } from "./styles.js";
 
 declare module "react" {
@@ -27,13 +26,20 @@ export interface MaterialSymbolProps
   extends HTMLAttributes<HTMLSpanElement>,
     MaterialSymbolCustomization,
     Partial<MaterialSymbolClassNameOptions> {
+  /** @defaultValue `true` */
+  "aria-hidden"?: AriaAttributes["aria-hidden"];
   name: MaterialSymbolName;
   children?: never;
 }
 
 /**
- * **Client Component**
- * Might be able to become a server component if I remove the useFontVariationSettings hook
+ * **Server Component**
+ * This is a convenience component that provides autocomplete for all the
+ * available material symbols via the `name` prop.
+ *
+ * Note: You might notice IDE slowdowns for files that use this component since
+ * there are so many icons available. If it becomes an issue, just stop using
+ * this component and define the icons inline instead.
  *
  * @example
  * Simple Example
@@ -45,11 +51,11 @@ export interface MaterialSymbolProps
  * function Example(): ReactElement {
  *   return (
  *     <>
- *       <MaterialSymbol symbol="" />
- *       <MaterialSymbol symbol="" type="outline" />
+ *       <MaterialSymbol symbol="close" />
+ *       <MaterialSymbol symbol="tune" type="outline" />
  *
- *       <MaterialSymbol symbol="" type="round" />
- *       <MaterialSymbol symbol="" type="sharp" />
+ *       <MaterialSymbol symbol="add" type="round" />
+ *       <MaterialSymbol symbol="air" type="sharp" />
  *     </>
  *   );
  * }
@@ -76,13 +82,13 @@ export const MaterialSymbol = forwardRef<HTMLSpanElement, MaterialSymbolProps>(
       dense,
       ...remaining
     } = props;
-    const { style, family } = useFontVariationSettings({
+    const { style, family } = getFontVariationSettings({
       style: propStyle,
-      family: propFamily,
       fill,
       weight,
       grade,
       opticalSize,
+      family: propFamily,
     });
 
     return (

package/src/icon/__tests__/FontIcon.tsx

@@ -1,29 +1,25 @@
 import { describe, expect, it } from "@jest/globals";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { FontIcon } from "../FontIcon.js";
 
 describe("FontIcon", () => {
   it("should render as an <i> element", () => {
-    const { getByTestId } = render(
-      <FontIcon data-testid="icon">home</FontIcon>
-    );
-    expect(getByTestId("icon")).toBeInstanceOf(HTMLSpanElement);
+    render(<FontIcon data-testid="icon">home</FontIcon>);
+    expect(screen.getByTestId("icon")).toBeInstanceOf(HTMLSpanElement);
   });
 
   it("should render correctly", () => {
-    const { getByTestId, rerender } = render(
-      <FontIcon data-testid="icon">home</FontIcon>
-    );
-    const icon = getByTestId("icon");
+    const { rerender } = render(<FontIcon data-testid="icon">home</FontIcon>);
+    const icon = screen.getByTestId("icon");
     expect(icon).toMatchSnapshot();
 
     rerender(<FontIcon data-testid="icon" iconClassName="fa fa-github" />);
   });
 
   it("should apply the correct classNames", () => {
-    const { getByTestId, rerender } = render(<FontIcon data-testid="icon" />);
-    const icon = getByTestId("icon");
+    const { rerender } = render(<FontIcon data-testid="icon" />);
+    const icon = screen.getByTestId("icon");
     expect(icon.className).toBe("rmd-icon rmd-icon--font material-icons");
     expect(icon).toMatchSnapshot();
 

package/src/icon/__tests__/IconRotator.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { cnb } from "cnbuilder";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { FontIcon } from "../FontIcon.js";
 import { IconRotator } from "../IconRotator.js";
@@ -12,12 +12,12 @@ function Icon({ className }: { className?: string }) {
 
 describe("IconRotator", () => {
   it("should default to cloning the icon rotator class names into the child element", () => {
-    const { container, getByTestId, rerender } = render(
+    const { container, rerender } = render(
       <IconRotator data-testid="rotator" rotated={false}>
         <Icon />
       </IconRotator>
     );
-    const icon = getByTestId("icon");
+    const icon = screen.getByTestId("icon");
     expect(icon.className).toBe(
       "custom-icon rmd-icon-rotator rmd-icon-rotator--animate"
     );
@@ -70,7 +70,7 @@ describe("IconRotator", () => {
     expect(container).toMatchSnapshot();
   });
 
-  it("should wrapp the children with a span if the forceIconWrap prop is enabled", () => {
+  it("should wrap the children with a span if the forceIconWrap prop is enabled", () => {
     const { container, rerender } = render(
       <IconRotator rotated={false} forceIconWrap>
         <Icon />

package/src/icon/__tests__/MaterialIcon.tsx

@@ -0,0 +1,79 @@
+import { beforeEach, describe, expect, it } from "@jest/globals";
+import { rmdRender, screen } from "../../test-utils/index.js";
+import { MaterialIcon } from "../MaterialIcon.js";
+import { createRef } from "react";
+import { MATERIAL_CONFIG } from "../materialConfig.js";
+
+describe("MaterialIcon", () => {
+  beforeEach(() => {
+    MATERIAL_CONFIG.iconFamily = "filled";
+  });
+
+  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
+    const ref = createRef<HTMLSpanElement>();
+    const props = {
+      "data-testid": "icon",
+      ref,
+      name: "air",
+    } as const;
+
+    const { rerender } = rmdRender(<MaterialIcon {...props} />);
+
+    const icon = screen.getByTestId("icon");
+    expect(ref.current).toBeInstanceOf(HTMLSpanElement);
+    expect(ref.current).toBe(icon);
+    expect(icon).toMatchSnapshot();
+
+    rerender(
+      <MaterialIcon
+        {...props}
+        style={{ color: "white" }}
+        className="custom-class-name"
+      />
+    );
+    expect(icon).toMatchSnapshot();
+  });
+
+  it("should support overriding the icon family through the MATERIAL_CONFIG", () => {
+    const props = {
+      "data-testid": "icon",
+      name: "air",
+    } as const;
+    const { rerender } = rmdRender(<MaterialIcon {...props} />);
+    const icon = screen.getByTestId("icon");
+    expect(icon).toHaveClass("material-icons");
+    expect(icon).toMatchSnapshot();
+
+    MATERIAL_CONFIG.iconFamily = "rounded";
+
+    rerender(<MaterialIcon {...props} />);
+    expect(icon).toHaveClass("material-icons-round");
+    expect(icon).toMatchSnapshot();
+
+    MATERIAL_CONFIG.iconFamily = "two-tone";
+
+    rerender(<MaterialIcon {...props} />);
+    expect(icon).toHaveClass("material-icons-two-tone");
+    expect(icon).toMatchSnapshot();
+  });
+
+  it("should support overriding the icon family through the family prop", () => {
+    const props = {
+      "data-testid": "icon",
+      name: "air",
+      family: "filled",
+    } as const;
+    const { rerender } = rmdRender(<MaterialIcon {...props} />);
+    const icon = screen.getByTestId("icon");
+    expect(icon).toHaveClass("material-icons");
+    expect(icon).toMatchSnapshot();
+
+    rerender(<MaterialIcon {...props} family="rounded" />);
+    expect(icon).toHaveClass("material-icons-round");
+    expect(icon).toMatchSnapshot();
+
+    rerender(<MaterialIcon {...props} family="two-tone" />);
+    expect(icon).toHaveClass("material-icons-two-tone");
+    expect(icon).toMatchSnapshot();
+  });
+});

package/src/icon/__tests__/MaterialSymbol.tsx

@@ -0,0 +1,100 @@
+import { beforeEach, describe, expect, it } from "@jest/globals";
+import { createRef } from "react";
+import { render, screen } from "../../test-utils/index.js";
+import { MaterialSymbol } from "../MaterialSymbol.js";
+import { MATERIAL_CONFIG } from "../materialConfig.js";
+
+describe("MaterialSymbol", () => {
+  beforeEach(() => {
+    MATERIAL_CONFIG.fill = 0;
+    MATERIAL_CONFIG.weight = 400;
+    MATERIAL_CONFIG.grade = 0;
+    MATERIAL_CONFIG.opticalSize = 24;
+    MATERIAL_CONFIG.family = "outlined";
+  });
+
+  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
+    const ref = createRef<HTMLSpanElement>();
+    const props = {
+      "data-testid": "icon",
+      ref,
+      name: "air",
+    } as const;
+
+    const { rerender } = render(<MaterialSymbol {...props} />);
+
+    const icon = screen.getByTestId("icon");
+    expect(ref.current).toBeInstanceOf(HTMLSpanElement);
+    expect(ref.current).toBe(icon);
+    expect(icon).toMatchSnapshot();
+
+    rerender(
+      <MaterialSymbol
+        {...props}
+        style={{ color: "white" }}
+        className="custom-class-name"
+      />
+    );
+    expect(icon).toMatchSnapshot();
+  });
+
+  it("should support overriding the symbol configuration through the MATERIAL_CONFIG object", () => {
+    const props = {
+      "data-testid": "icon",
+      name: "air",
+    } as const;
+    const { rerender } = render(<MaterialSymbol {...props} />);
+    const icon = screen.getByTestId("icon");
+    expect(icon).toHaveClass("material-symbols-outlined");
+    expect(icon).toMatchSnapshot();
+
+    MATERIAL_CONFIG.fill = 1;
+    MATERIAL_CONFIG.grade = -25;
+    MATERIAL_CONFIG.family = "rounded";
+    MATERIAL_CONFIG.opticalSize = 48;
+    MATERIAL_CONFIG.weight = 100;
+
+    rerender(<MaterialSymbol {...props} />);
+    expect(icon).toHaveClass("material-symbols-rounded");
+    expect(icon).toMatchSnapshot();
+  });
+
+  it("should use inline styles for font variation settings when they do not match the MATERIAL_CONFIG", () => {
+    const props = {
+      "data-testid": "icon",
+      name: "air",
+    } as const;
+    const { rerender } = render(<MaterialSymbol {...props} />);
+    const icon = screen.getByTestId("icon");
+    expect(icon).toHaveClass("material-symbols-outlined");
+    expect(icon.style.fontVariationSettings).toBe("");
+
+    rerender(<MaterialSymbol {...props} fill={1} />);
+    expect(icon.style.fontVariationSettings).toBe(
+      '"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24'
+    );
+
+    rerender(
+      <MaterialSymbol {...props} fill={1} grade={-25} opticalSize={48} />
+    );
+    expect(icon.style.fontVariationSettings).toBe(
+      '"FILL" 1, "wght" 400, "GRAD" -25, "opsz" 48'
+    );
+  });
+
+  it("should use the prop style fontVariationSettings if it exists", () => {
+    const props = {
+      "data-testid": "icon",
+      name: "air",
+      style: {
+        fontVariationSettings: '"FILL" 1, "wght" 400, "GRAD" -25, "opsz" 48',
+      },
+    } as const;
+    render(<MaterialSymbol {...props} />);
+    const icon = screen.getByTestId("icon");
+
+    expect(icon.style.fontVariationSettings).toBe(
+      '"FILL" 1, "wght" 400, "GRAD" -25, "opsz" 48'
+    );
+  });
+});

package/src/icon/__tests__/SVGIcon.tsx

@@ -1,17 +1,17 @@
 import { describe, expect, it } from "@jest/globals";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { SVGIcon } from "../SVGIcon.js";
 
 describe("SVGIcon", () => {
   it("should default to setting aria-hidden", () => {
-    const { getByTestId } = render(<SVGIcon data-testid="icon" />);
-    expect(getByTestId("icon").getAttribute("aria-hidden")).toBe("true");
+    render(<SVGIcon data-testid="icon" />);
+    expect(screen.getByTestId("icon").getAttribute("aria-hidden")).toBe("true");
   });
 
   it("should default to setting focusable false to fix IE bugs of custom focus", () => {
-    const { getByTestId } = render(<SVGIcon data-testid="icon" />);
-    expect(getByTestId("icon").getAttribute("focusable")).toBe("false");
+    render(<SVGIcon data-testid="icon" />);
+    expect(screen.getByTestId("icon").getAttribute("focusable")).toBe("false");
   });
 
   it("should render correctly", () => {
@@ -34,6 +34,7 @@ describe("SVGIcon", () => {
     const { container } = render(<SVGIcon use="#some-sprite" />);
     expect(container).toMatchSnapshot();
 
+    // eslint-disable-next-line testing-library/no-container
     expect(container.querySelector("use")).not.toBeNull();
   });
 });

package/src/icon/__tests__/TextIconSpacing.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "@jest/globals";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { TextIconSpacing } from "../TextIconSpacing.js";
 
@@ -19,41 +19,41 @@ describe("TextIconSpacing", () => {
   });
 
   it("should render the icon before the children by default", () => {
-    const { container, getByTestId } = render(
+    const { container } = render(
       <TextIconSpacing icon={<i data-testid="icon" />}>
         <span data-testid="span" />
       </TextIconSpacing>
     );
 
-    const icon = getByTestId("icon");
-    const span = getByTestId("span");
+    const icon = screen.getByTestId("icon");
+    const span = screen.getByTestId("span");
     expect(container).toMatchSnapshot();
     expect(container.firstChild).toBe(icon);
     expect(container.lastChild).toBe(span);
   });
 
   it("should render the icon after the children if the iconAfter prop is enabled", () => {
-    const { container, getByTestId } = render(
+    const { container } = render(
       <TextIconSpacing icon={<i data-testid="icon" />} iconAfter>
         <span data-testid="span" />
       </TextIconSpacing>
     );
 
-    const icon = getByTestId("icon");
-    const span = getByTestId("span");
+    const icon = screen.getByTestId("icon");
+    const span = screen.getByTestId("span");
     expect(container).toMatchSnapshot();
     expect(container.firstChild).toBe(span);
     expect(container.lastChild).toBe(icon);
   });
 
   it("should clone the default class names into the icon element", () => {
-    const { rerender, getByTestId } = render(
+    const { rerender } = render(
       <TextIconSpacing icon={<i data-testid="icon" />}>
         <span />
       </TextIconSpacing>
     );
 
-    let icon = getByTestId("icon");
+    let icon = screen.getByTestId("icon");
     expect(icon.className).toBe("rmd-icon--before");
 
     rerender(
@@ -61,7 +61,7 @@ describe("TextIconSpacing", () => {
         <span />
       </TextIconSpacing>
     );
-    icon = getByTestId("icon");
+    icon = screen.getByTestId("icon");
     expect(icon.className).toBe("rmd-icon--after");
   });
 
@@ -88,23 +88,21 @@ describe("TextIconSpacing", () => {
       children: <span>children</span>,
       flexReverse: true,
     };
-    const { container, getByTestId, rerender } = render(
-      <TextIconSpacing {...props} />
-    );
+    const { container, rerender } = render(<TextIconSpacing {...props} />);
     expect(container).toMatchSnapshot();
 
-    expect(getByTestId("icon").className).toContain("rmd-icon--after");
+    expect(screen.getByTestId("icon").className).toContain("rmd-icon--after");
 
     rerender(<TextIconSpacing {...props} iconAfter />);
     expect(container).toMatchSnapshot();
-    expect(getByTestId("icon").className).toContain("rmd-icon--before");
+    expect(screen.getByTestId("icon").className).toContain("rmd-icon--before");
 
     rerender(<TextIconSpacing {...props} stacked />);
     expect(container).toMatchSnapshot();
-    expect(getByTestId("icon").className).toContain("rmd-icon--below");
+    expect(screen.getByTestId("icon").className).toContain("rmd-icon--below");
 
     rerender(<TextIconSpacing {...props} stacked iconAfter />);
     expect(container).toMatchSnapshot();
-    expect(getByTestId("icon").className).toContain("rmd-icon--above");
+    expect(screen.getByTestId("icon").className).toContain("rmd-icon--above");
   });
 });

package/src/icon/__tests__/__snapshots__/IconRotator.tsx.snap

@@ -70,7 +70,7 @@ exports[`IconRotator should work automatically with the SVGIcon component 2`] =
 </div>
 `;
 
-exports[`IconRotator should wrapp the children with a span if the forceIconWrap prop is enabled 1`] = `
+exports[`IconRotator should wrap the children with a span if the forceIconWrap prop is enabled 1`] = `
 <div>
   <span
     class="rmd-icon-rotator rmd-icon-rotator--animate"
@@ -83,7 +83,7 @@ exports[`IconRotator should wrapp the children with a span if the forceIconWrap
 </div>
 `;
 
-exports[`IconRotator should wrapp the children with a span if the forceIconWrap prop is enabled 2`] = `
+exports[`IconRotator should wrap the children with a span if the forceIconWrap prop is enabled 2`] = `
 <div>
   <span
     class="rmd-icon-rotator rmd-icon-rotator--animate rmd-icon-rotator--rotated"
@@ -96,7 +96,7 @@ exports[`IconRotator should wrapp the children with a span if the forceIconWrap
 </div>
 `;
 
-exports[`IconRotator should wrapp the children with a span if the forceIconWrap prop is enabled 3`] = `
+exports[`IconRotator should wrap the children with a span if the forceIconWrap prop is enabled 3`] = `
 <div>
   <span
     class="rmd-icon-rotator rmd-icon-rotator--animate"
@@ -111,7 +111,7 @@ exports[`IconRotator should wrapp the children with a span if the forceIconWrap
 </div>
 `;
 
-exports[`IconRotator should wrapp the children with a span if the forceIconWrap prop is enabled 4`] = `
+exports[`IconRotator should wrap the children with a span if the forceIconWrap prop is enabled 4`] = `
 <div>
   <span
     class="rmd-icon-rotator rmd-icon-rotator--animate rmd-icon-rotator--rotated"
@@ -126,7 +126,7 @@ exports[`IconRotator should wrapp the children with a span if the forceIconWrap
 </div>
 `;
 
-exports[`IconRotator should wrapp the children with a span if the forceIconWrap prop is enabled 5`] = `
+exports[`IconRotator should wrap the children with a span if the forceIconWrap prop is enabled 5`] = `
 <div>
   <span
     class="rmd-icon-rotator rmd-icon-rotator--animate"
@@ -145,7 +145,7 @@ exports[`IconRotator should wrapp the children with a span if the forceIconWrap
 </div>
 `;
 
-exports[`IconRotator should wrapp the children with a span if the forceIconWrap prop is enabled 6`] = `
+exports[`IconRotator should wrap the children with a span if the forceIconWrap prop is enabled 6`] = `
 <div>
   <span
     class="rmd-icon-rotator rmd-icon-rotator--animate rmd-icon-rotator--rotated"