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

package/src/menu/__tests__/MenuBar.tsx

@@ -4,11 +4,13 @@ import {
   act,
   fireEvent,
   rmdRender,
+  screen,
   userEvent,
   waitFor,
   within,
 } from "../../test-utils/index.js";
 
+import { TRANSITION_CONFIG } from "../../transition/config.js";
 import { DropdownMenu } from "../DropdownMenu.js";
 import { MenuBar } from "../MenuBar.js";
 import { MenuItem } from "../MenuItem.js";
@@ -61,58 +63,63 @@ function Test(props: TestProps): ReactElement {
 describe("MenuBar", () => {
   beforeEach(() => {
     jest.useRealTimers();
+    TRANSITION_CONFIG.disabled = false;
   });
 
   it("should support a click-first hover mode behavior by default", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test />);
+    rmdRender(<Test />);
 
-    const menubar = getByRole("menubar", { name: "Example" });
+    const menubar = screen.getByRole("menubar", { name: "Example" });
     const menubarItems = within(menubar).getAllByRole("menuitem");
     expect(menubarItems).toHaveLength(4);
     expect(menubar).toMatchSnapshot();
 
     await user.hover(menubarItems[0]);
-    expect(() => getByRole("menu")).toThrow();
+    expect(() => screen.getByRole("menu")).toThrow();
 
     await user.unhover(menubarItems[0]);
-    expect(() => getByRole("menu")).toThrow();
+    expect(() => screen.getByRole("menu")).toThrow();
 
     await user.click(menubarItems[1]);
     await waitFor(() => {
-      const menu = getByRole("menu", { name: "Style" });
+      const menu = screen.getByRole("menu", { name: "Style" });
       expect(menu).not.toHaveClass("rmd-scale-transition--enter");
     });
 
     await user.hover(menubarItems[2]);
     await waitFor(() => {
-      expect(() => getByRole("menu", { name: "Style" })).toThrow();
-      expect(() => getByRole("menu", { name: "Text Align" })).not.toThrow();
+      expect(() => screen.getByRole("menu", { name: "Style" })).toThrow();
+    });
+    await waitFor(() => {
+      expect(() =>
+        screen.getByRole("menu", { name: "Text Align" })
+      ).not.toThrow();
     });
 
     await user.click(document.body);
     await waitFor(() => {
-      expect(() => getByRole("menu")).toThrow();
+      expect(() => screen.getByRole("menu")).toThrow();
     });
   });
 
   it("should support immediate hover mode behavior by setting the hoverTimeout to 0", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test hoverTimeout={0} />);
-    const item1 = getByRole("menuitem", { name: "Font" });
-    const item4 = getByRole("menuitem", { name: "Size" });
+    rmdRender(<Test hoverTimeout={0} />);
+    const item1 = screen.getByRole("menuitem", { name: "Font" });
+    const item4 = screen.getByRole("menuitem", { name: "Size" });
 
     await user.hover(item1);
     // added timeouts to these since it might fail when running in watch mode
     // with a lot of tests
     await waitFor(
       () => {
-        expect(() => getByRole("menu", { name: "Font" })).not.toThrow();
+        expect(() => screen.getByRole("menu", { name: "Font" })).not.toThrow();
       },
       { timeout: 10 }
     );
     await waitFor(() => {
-      expect(getByRole("menu", { name: "Font" })).not.toHaveClass(
+      expect(screen.getByRole("menu", { name: "Font" })).not.toHaveClass(
         "rmd-scale-transition--enter"
       );
     });
@@ -120,77 +127,79 @@ describe("MenuBar", () => {
     await user.hover(item4);
     await waitFor(
       () => {
-        expect(() => getByRole("menu", { name: "Size" })).not.toThrow();
+        expect(() => screen.getByRole("menu", { name: "Size" })).not.toThrow();
       },
       { timeout: 10 }
     );
     await user.click(document.body);
     await waitFor(() => {
-      expect(() => getByRole("menu")).toThrow();
+      expect(() => screen.getByRole("menu")).toThrow();
     });
   });
 
   it("should support a custom hover timeout to start the hover mode", () => {
     jest.useFakeTimers();
-    const { getByRole } = rmdRender(<Test hoverTimeout={1000} />);
+    rmdRender(<Test hoverTimeout={1000} />);
 
-    const font = getByRole("menuitem", { name: "Font" });
-    const style = getByRole("menuitem", { name: "Style" });
+    const font = screen.getByRole("menuitem", { name: "Font" });
+    const style = screen.getByRole("menuitem", { name: "Style" });
     fireEvent.mouseEnter(font);
-    expect(() => getByRole("menu")).toThrow();
+    expect(() => screen.getByRole("menu")).toThrow();
 
     act(() => {
       jest.advanceTimersByTime(800);
     });
-    expect(() => getByRole("menu")).toThrow();
+    expect(() => screen.getByRole("menu")).toThrow();
     act(() => {
       jest.advanceTimersByTime(200);
     });
-    expect(() => getByRole("menu")).not.toThrow();
+    expect(() => screen.getByRole("menu")).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByRole("menu")).not.toThrow();
+    expect(() => screen.getByRole("menu")).not.toThrow();
 
     fireEvent.mouseLeave(font);
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByRole("menu")).not.toThrow();
+    expect(() => screen.getByRole("menu")).not.toThrow();
 
     fireEvent.mouseEnter(style);
-    expect(() => getByRole("menu")).not.toThrow();
+    expect(() => screen.getByRole("menu")).not.toThrow();
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByRole("menu")).not.toThrow();
+    expect(() => screen.getByRole("menu")).not.toThrow();
     // animates into the new menu
-    expect(() => getByRole("menuitem", { name: "Bold" })).not.toThrow();
+    expect(() => screen.getByRole("menuitem", { name: "Bold" })).not.toThrow();
   });
 
   it("should open nested dropdown menus immediately on hover", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test />);
+    rmdRender(<Test />);
 
-    const menubar = getByRole("menubar", { name: "Example" });
+    const menubar = screen.getByRole("menubar", { name: "Example" });
     const menubarItems = within(menubar).getAllByRole("menuitem");
 
     await user.click(menubarItems[3]);
     await waitFor(() => {
-      const menu = getByRole("menu", { name: "Size" });
+      const menu = screen.getByRole("menu", { name: "Size" });
       expect(menu).not.toHaveClass("rmd-scale-transition--enter");
     });
 
-    await user.hover(getByRole("menuitem", { name: "Submenu" }));
+    await user.hover(screen.getByRole("menuitem", { name: "Submenu" }));
     await waitFor(() => {
-      expect(getByRole("menuitem", { name: "Item 1" })).toBeInTheDocument();
+      expect(
+        screen.getByRole("menuitem", { name: "Item 1" })
+      ).toBeInTheDocument();
     });
   });
 
   it("should support keyboard movement correctly", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(
+    rmdRender(
       <>
         <button>before</button>
         <Test />
@@ -198,10 +207,10 @@ describe("MenuBar", () => {
       </>
     );
 
-    const menubar = getByRole("menubar", { name: "Example" });
+    const menubar = screen.getByRole("menubar", { name: "Example" });
     const menubarItems = within(menubar).getAllByRole("menuitem");
-    const before = getByRole("button", { name: "before" });
-    const after = getByRole("button", { name: "after" });
+    const before = screen.getByRole("button", { name: "before" });
+    const after = screen.getByRole("button", { name: "after" });
 
     await user.tab();
     expect(document.activeElement).toBe(before);
@@ -240,24 +249,24 @@ describe("MenuBar", () => {
     });
 
     await user.keyboard("{Enter}");
-    const sizeMenu = getByRole("menu", { name: "Size" });
+    const sizeMenu = screen.getByRole("menu", { name: "Size" });
     await waitFor(() => {
       expect(sizeMenu).not.toHaveClass("rmd-scale-transition--enter");
     });
     expect(document.activeElement).toBe(
-      getByRole("menuitem", { name: "Normal" })
+      screen.getByRole("menuitem", { name: "Normal" })
     );
 
     await user.keyboard("{End}");
     expect(document.activeElement).toBe(
-      getByRole("menuitem", { name: "Submenu" })
+      screen.getByRole("menuitem", { name: "Submenu" })
     );
 
     // arrow right should open nested dropdown menus
     await user.keyboard("{ArrowRight}");
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Item 1" })
+        screen.getByRole("menuitem", { name: "Item 1" })
       );
     });
 
@@ -265,7 +274,7 @@ describe("MenuBar", () => {
     await user.keyboard("{ArrowLeft}");
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Submenu" })
+        screen.getByRole("menuitem", { name: "Submenu" })
       );
     });
 
@@ -273,7 +282,7 @@ describe("MenuBar", () => {
     await user.keyboard("{ArrowLeft}");
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Left" })
+        screen.getByRole("menuitem", { name: "Left" })
       );
     });
 
@@ -281,7 +290,7 @@ describe("MenuBar", () => {
     await user.keyboard("{ArrowRight}");
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Normal" })
+        screen.getByRole("menuitem", { name: "Normal" })
       );
     });
 
@@ -289,14 +298,14 @@ describe("MenuBar", () => {
     await user.keyboard("{ArrowRight}");
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Roboto" })
+        screen.getByRole("menuitem", { name: "Roboto" })
       );
     });
 
     await user.keyboard("{ArrowLeft}");
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Normal" })
+        screen.getByRole("menuitem", { name: "Normal" })
       );
     });
 
@@ -318,27 +327,27 @@ describe("MenuBar", () => {
 
   it("should refocus the top-level menuitem when the tab key is pressed", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test />);
+    rmdRender(<Test />);
 
     await user.tab();
     await user.keyboard("[End][Space]");
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Normal" })
+        screen.getByRole("menuitem", { name: "Normal" })
       );
     });
 
     await user.keyboard("[End][Enter]");
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Item 1" })
+        screen.getByRole("menuitem", { name: "Item 1" })
       );
     });
 
     await user.tab();
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Size" })
+        screen.getByRole("menuitem", { name: "Size" })
       );
     });
   });

package/src/menu/__tests__/MenuVisibilityProvider.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "@jest/globals";
-import { fireEvent, render } from "../../test-utils/index.js";
+import { fireEvent, render, screen } from "../../test-utils/index.js";
 
 import { Button } from "../../button/Button.js";
 import { useMenuVisibility } from "../MenuVisibilityProvider.js";
@@ -24,8 +24,8 @@ describe("MenuVisibilityProvider", () => {
       );
     }
 
-    const { getByRole } = render(<Test />);
-    const button = getByRole("button", { name: "Button" });
+    render(<Test />);
+    const button = screen.getByRole("button", { name: "Button" });
     fireEvent.click(button);
     expect(error instanceof Error && error.message).toBe(
       '"MenuVisibilityProvider" must be a parent component'

package/src/menu/_menu.scss

@@ -20,41 +20,21 @@ $min-width: 7rem !default;
 
 $spacing: 1rem !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-menu-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-menu-color,
-    value: $color,
-  ),
-  min-width: (
-    var: --rmd-menu-min-width,
-    value: $min-width,
-  ),
-  spacing: (
-    var: --rmd-menu-spacing,
-    value: $spacing,
-  ),
-);
+$variables: (background-color, color, min-width, spacing);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "dialog 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, "menu");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "dialog var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "menu")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -122,6 +102,15 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+    @include set-var(min-width, $min-width);
+    @include set-var(spacing, $spacing);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include menu-styles;

package/src/overlay/__tests__/Overlay.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, it, jest } from "@jest/globals";
+import { beforeEach, describe, expect, it, jest } from "@jest/globals";
 import { createRef, type ReactElement } from "react";
 import {
   fireEvent,
@@ -10,6 +10,7 @@ import {
 
 import { SsrProvider } from "../../SsrProvider.js";
 import { Button } from "../../button/Button.js";
+import { TRANSITION_CONFIG } from "../../transition/config.js";
 import { useToggle } from "../../useToggle.js";
 import { DISPLAY_NONE_CLASS } from "../../utils/isElementVisible.js";
 import { Overlay, type OverlayProps } from "../Overlay.js";
@@ -30,6 +31,10 @@ function Test({ defaultVisible = false }: TestProps): ReactElement {
 }
 
 describe("Overlay", () => {
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
     const ref = createRef<HTMLSpanElement>();
     const props = {
@@ -56,25 +61,22 @@ describe("Overlay", () => {
   });
 
   it("should support rendering inline if disablePortal prop is true", () => {
-    const { container, getByTestId } = render(
+    const { container } = render(
       <Overlay data-testid="overlay" visible disablePortal />
     );
 
-    const overlay = getByTestId("overlay");
+    const overlay = screen.getByTestId("overlay");
     expect(container.firstElementChild).toBe(overlay);
     expect(container).toMatchSnapshot();
   });
 
   it("should support rendering inline if it was visible by default and rendered through ssr", async () => {
-    const { container, getByRole, getByTestId } = render(
-      <Test defaultVisible />,
-      {
-        wrapper: ({ children }) => <SsrProvider ssr>{children}</SsrProvider>,
-      }
-    );
+    const { container } = render(<Test defaultVisible />, {
+      wrapper: ({ children }) => <SsrProvider ssr>{children}</SsrProvider>,
+    });
 
-    const button = getByRole("button", { name: "Toggle" });
-    const overlay = getByTestId("overlay");
+    const button = screen.getByRole("button", { name: "Toggle" });
+    const overlay = screen.getByTestId("overlay");
     expect(button.nextElementSibling).toBe(overlay);
     expect(container).toMatchSnapshot();
 
@@ -85,7 +87,9 @@ describe("Overlay", () => {
 
     fireEvent.click(button);
     await waitFor(() => {
-      expect(() => getByTestId("overlay")).not.toThrow();
+      expect(() => screen.getByTestId("overlay")).not.toThrow();
+    });
+    await waitFor(() => {
       expect(() => within(container).getByTestId("overlay")).toThrow();
     });
   });
@@ -98,7 +102,7 @@ describe("Overlay", () => {
     const onExiting = jest.fn();
     const onExited = jest.fn();
 
-    const props: Partial<OverlayProps> & { "data-testid": string } = {
+    const props: Partial<OverlayProps> = {
       "data-testid": "overlay",
       onEnter,
       onEntering,
@@ -109,11 +113,9 @@ describe("Overlay", () => {
       temporary: false,
     };
 
-    const { getByTestId, rerender } = render(
-      <Overlay {...props} visible={false} />
-    );
+    const { rerender } = render(<Overlay {...props} visible={false} />);
 
-    const overlay = getByTestId("overlay");
+    const overlay = screen.getByTestId("overlay");
     expect(overlay).toHaveClass(DISPLAY_NONE_CLASS);
     expect(overlay).toMatchSnapshot();
 
@@ -126,25 +128,25 @@ describe("Overlay", () => {
 
     rerender(<Overlay {...props} visible />);
     await waitFor(() => {
-      expect(onEnter).toHaveBeenCalledTimes(1);
-      expect(onEntering).toHaveBeenCalledTimes(1);
       expect(onEntered).toHaveBeenCalledTimes(1);
-      expect(onExit).not.toHaveBeenCalled();
-      expect(onExiting).not.toHaveBeenCalled();
-      expect(onExited).not.toHaveBeenCalled();
     });
+    expect(onEnter).toHaveBeenCalledTimes(1);
+    expect(onEntering).toHaveBeenCalledTimes(1);
+    expect(onExit).not.toHaveBeenCalled();
+    expect(onExiting).not.toHaveBeenCalled();
+    expect(onExited).not.toHaveBeenCalled();
     expect(overlay).not.toHaveClass(DISPLAY_NONE_CLASS);
     expect(overlay).toMatchSnapshot();
 
     rerender(<Overlay {...props} visible={false} />);
     await waitFor(() => {
-      expect(onEnter).toHaveBeenCalledTimes(1);
-      expect(onEntering).toHaveBeenCalledTimes(1);
-      expect(onEntered).toHaveBeenCalledTimes(1);
-      expect(onExit).toHaveBeenCalledTimes(1);
-      expect(onExiting).toHaveBeenCalledTimes(1);
       expect(onExited).toHaveBeenCalledTimes(1);
     });
+    expect(onEnter).toHaveBeenCalledTimes(1);
+    expect(onEntering).toHaveBeenCalledTimes(1);
+    expect(onEntered).toHaveBeenCalledTimes(1);
+    expect(onExit).toHaveBeenCalledTimes(1);
+    expect(onExiting).toHaveBeenCalledTimes(1);
     expect(overlay).toHaveClass(DISPLAY_NONE_CLASS);
     expect(overlay).toMatchSnapshot();
   });
@@ -168,20 +170,20 @@ describe("Overlay", () => {
       onExited,
     } as const;
 
-    const { getByTestId, rerender } = render(<Overlay {...props} />);
-    expect(() => getByTestId("overlay")).toThrow();
+    const { rerender } = render(<Overlay {...props} />);
+    expect(() => screen.getByTestId("overlay")).toThrow();
 
     rerender(<Overlay {...props} visible />);
     await waitFor(() => {
-      expect(onEnter).not.toHaveBeenCalled();
-      expect(onEntering).not.toHaveBeenCalled();
       expect(onEntered).toHaveBeenCalledTimes(1);
-      expect(onExit).not.toHaveBeenCalled();
-      expect(onExiting).not.toHaveBeenCalled();
-      expect(onExited).not.toHaveBeenCalled();
     });
+    expect(onEnter).not.toHaveBeenCalled();
+    expect(onEntering).not.toHaveBeenCalled();
+    expect(onExit).not.toHaveBeenCalled();
+    expect(onExiting).not.toHaveBeenCalled();
+    expect(onExited).not.toHaveBeenCalled();
 
-    const overlay = getByTestId("overlay");
+    const overlay = screen.getByTestId("overlay");
     expect(overlay).toMatchSnapshot();
   });
 

package/src/overlay/_overlay.scss

@@ -9,39 +9,34 @@ $z-index: utils.$temporary-element-z-index !default;
 $transition-duration: transition.$linear-duration !default;
 $transition-timing-function: transition.$linear-timing-function !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-overlay-background-color,
-    value: $background-color,
-  ),
-  z-index: (
-    var: --rmd-overlay-z-index,
-    value: $z-index,
-  ),
-);
+$variables: (background-color, z-index);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "overlay 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, "overlay");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "overlay var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "overlay")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(z-index, $z-index);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-overlay {

package/src/portal/__tests__/PortalContainerProvider.node.tsx

@@ -9,6 +9,7 @@ describe("PortalContainerProvider", () => {
   it("should not render portals server side", () => {
     expect(typeof document).toBe("undefined");
 
+    // eslint-disable-next-line testing-library/render-result-naming-convention
     const result = renderToString(
       <PortalContainerProvider>
         <Portal>

package/src/portal/__tests__/PortalContainerProvider.tsx

@@ -1,15 +1,15 @@
 import { describe, expect, it } from "@jest/globals";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
+import { Portal } from "../Portal.js";
 import {
-  PortalContainerProvider,
   PORTAL_CONTAINER_ID,
+  PortalContainerProvider,
 } from "../PortalContainerProvider.js";
-import { Portal } from "../Portal.js";
 
 describe("PortalContainerProvider", () => {
   it("should portal all child portals to a div that was created as the last child in the document.body", () => {
-    const { container, getByTestId, unmount } = render(
+    const { container, unmount } = render(
       <PortalContainerProvider>
         <Portal>
           <div data-testid="div-1" />
@@ -21,8 +21,8 @@ describe("PortalContainerProvider", () => {
     );
 
     const portalRoot = document.getElementById(PORTAL_CONTAINER_ID);
-    const div1 = getByTestId("div-1");
-    const div2 = getByTestId("div-2");
+    const div1 = screen.getByTestId("div-1");
+    const div2 = screen.getByTestId("div-2");
 
     expect(document.body).toContainElement(portalRoot);
     expect(portalRoot).toContainElement(div1);
@@ -40,7 +40,7 @@ describe("PortalContainerProvider", () => {
   it("should allow for a custom container element", () => {
     const container = document.createElement("div");
     document.body.appendChild(container);
-    const { getByTestId } = render(
+    render(
       <PortalContainerProvider container={container}>
         <Portal>
           <div data-testid="div-1" />
@@ -51,8 +51,8 @@ describe("PortalContainerProvider", () => {
       </PortalContainerProvider>
     );
 
-    const div1 = getByTestId("div-1");
-    const div2 = getByTestId("div-2");
+    const div1 = screen.getByTestId("div-1");
+    const div2 = screen.getByTestId("div-2");
     expect(document.getElementById(PORTAL_CONTAINER_ID)).toBe(null);
     expect(container).toContainElement(div1);
     expect(container).toContainElement(div2);