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

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/interaction/_interaction.scss

@@ -117,55 +117,19 @@ $selected-background-color: theme.get-default-color(
   $dark-surface-selected-background-color
 ) !default;
 
-$var-lookup: (
-  ripple-background-color: (
-    var: --rmd-ripple-background-color,
-    value: $ripple-background-color,
-  ),
-  background-color: (
-    var: --rmd-interaction-background-color,
-    value: null,
-  ),
-  hover-background-color: (
-    var: --rmd-hover-background-color,
-    value: $hover-background-color,
-  ),
-  focus-background-color: (
-    var: --rmd-focus-background-color,
-    value: $focus-background-color,
-  ),
-  press-background-color: (
-    var: --rmd-press-background-color,
-    value: $press-background-color,
-  ),
-  selected-background-color: (
-    var: --rmd-selected-background-color,
-    value: $selected-background-color,
-  ),
-  focus-color: (
-    var: --rmd-focus-color,
-    value: $focus-color,
-  ),
-  focus-width: (
-    var: --rmd-focus-width,
-    value: $focus-width,
-  ),
-  ripple-inset: (
-    var: --rmd-ripple-inset,
-    value: 0,
-  ),
-  ripple-border-radius: (
-    var: --rmd-ripple-border-radius,
-    value: inherit,
-  ),
-  surface-inset: (
-    var: --rmd-surface-inset,
-    value: 0,
-  ),
-  surface-border-radius: (
-    var: --rmd-surface-border-radius,
-    value: inherit,
-  ),
+$variables: (
+  background-color,
+  hover-background-color,
+  focus-background-color,
+  press-background-color,
+  selected-background-color,
+  focus-color,
+  focus-width,
+  ripple-inset,
+  ripple-border-radius,
+  ripple-background-color,
+  surface-inset,
+  surface-border-radius
 );
 
 @function _is-var-disabled($name) {
@@ -189,27 +153,35 @@ $var-lookup: (
 }
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "interaction var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
+  // cannot set a custom property to `inherit` for some reason. It will not be parsed.
+  @if not
+    $fallback and
+    ($name == ripple-border-radius or $name == surface-border-radius)
+  {
+    $fallback: inherit;
+  }
+
   @if _is-var-disabled($name) {
-    @return $value;
+    @return $fallback;
   }
 
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "interaction");
+
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "interaction var"), var);
   @if _is-var-disabled($name) {
     @error '"#{$name}" is currently disabled and cannot be changed. Set "$disable-#{$name}-var" to `true` or remove it from the Sass module overrides.';
   }
 
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "interaction")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -382,6 +354,24 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @include set-var(focus-color, $focus-color);
+  @include set-var(focus-width, $focus-width);
+  @include set-var(hover-background-color, $hover-background-color);
+  @include set-var(focus-background-color, $focus-background-color);
+  @include set-var(press-background-color, $press-background-color);
+  @include set-var(selected-background-color, $selected-background-color);
+
+  @if not $_disable-ripple {
+    @include set-var(ripple-background-color, $ripple-background-color);
+    @include set-var(ripple-inset, 0);
+  }
+
+  @if not $disable-surface-inset-var {
+    @include set-var(surface-inset, 0);
+  }
+}
+
 @mixin styles {
   @if not $_disable-ripple {
     .rmd-ripple-container {

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/layout/_layout.scss

@@ -29,39 +29,34 @@ $enter-timing-function: sheet.$enter-timing-function !default;
 $leave-duration: sheet.$leave-duration !default;
 $leave-timing-function: sheet.$leave-timing-function !default;
 
-$var-lookup: (
-  size: (
-    var: --rmd-layout-size,
-    value: $navigation-static-width,
-  ),
-  header-height: (
-    var: --rmd-layout-header-height,
-    value: $header-height,
-  ),
-);
+$variables: (size, header-height);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "layout var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "layout");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "layout var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "layout")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(size, $navigation-static-width);
+    @include set-var(header-height, $header-height);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-layout-main {

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();