@react-md/core 1.0.0-next.15 → 1.0.0-next.16

package/src/layout/__tests__/LayoutAppBar.tsx

@@ -1,117 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { createRef, type ReactElement, type Ref } from "react";
-import {
-  act,
-  cleanupResizeObserverAfterEach,
-  rmdRender,
-  screen,
-  setupResizeObserverMock,
-} from "../../test-utils/index.js";
-import { LayoutAppBar, type LayoutAppBarProps } from "../LayoutAppBar.js";
-import { Main } from "../Main.js";
-
-const getVar = () =>
-  window
-    .getComputedStyle(document.documentElement)
-    .getPropertyValue("--rmd-layout-header-height");
-
-function Test(
-  props: LayoutAppBarProps & { nodeRef?: Ref<HTMLDivElement> }
-): ReactElement {
-  const { nodeRef, ...remaining } = props;
-  return (
-    <>
-      <LayoutAppBar {...remaining} ref={nodeRef} />
-      <Main>Hello, world!</Main>
-    </>
-  );
-}
-
-cleanupResizeObserverAfterEach();
-
-describe("LayoutAppBar", () => {
-  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
-    const ref = createRef<HTMLDivElement>();
-    const props = {
-      nodeRef: ref,
-      children: "Content",
-    } as const;
-
-    const { rerender } = rmdRender(<Test {...props} />);
-
-    const appBar = screen.getByRole("banner");
-    expect(ref.current).toBeInstanceOf(HTMLElement);
-    expect(ref.current).toBe(appBar);
-    expect(appBar).toMatchSnapshot();
-
-    rerender(
-      <Test
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(appBar).toMatchSnapshot();
-
-    rerender(<Test {...props} position="sticky" />);
-    expect(appBar).toMatchSnapshot();
-
-    rerender(<Test {...props} as="div" data-testid="div" />);
-    const divAppBar = screen.getByTestId("div");
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current).toBe(divAppBar);
-    expect(divAppBar).toMatchSnapshot();
-  });
-
-  it("should automatically apply the app bar height as css variables", () => {
-    const observer = setupResizeObserverMock();
-    rmdRender(<Test />);
-
-    expect(getVar()).toBe("0px");
-
-    const appBar = screen.getByRole("banner");
-    act(() => {
-      observer.resizeElement(appBar, {
-        height: 96,
-      });
-    });
-    expect(getVar()).toBe("96px");
-  });
-
-  it("should automatically apply the app bar height as css variables while waiting for the first observer event to prevent layout shifts", () => {
-    const observer = setupResizeObserverMock();
-    // pretend it was set in CSS
-    const getComputedStyle = jest
-      .spyOn(window, "getComputedStyle")
-      .mockReturnValue({
-        getPropertyValue: () => "3.5rem",
-      } as unknown as CSSStyleDeclaration);
-    rmdRender(<Test />);
-
-    expect(getVar()).toBe("3.5rem");
-
-    const appBar = screen.getByRole("banner");
-    getComputedStyle.mockRestore();
-    act(() => {
-      observer.resizeElement(appBar, {
-        height: 96,
-      });
-    });
-    expect(getVar()).toBe("96px");
-  });
-
-  it("should throw an if there is no main element since it renders the SkipToMainContent component", () => {
-    const error = jest.spyOn(console, "error").mockImplementation(() => {});
-    expect(() => rmdRender(<LayoutAppBar />)).toThrow();
-    error.mockRestore();
-  });
-
-  it("should allow props to be passed to the SkipToMainContent component", () => {
-    rmdRender(
-      <Test skipProps={{ children: "Main", className: "custom-link-class" }} />
-    );
-
-    const link = screen.getByRole("link");
-    expect(link).toMatchSnapshot();
-  });
-});

package/src/layout/__tests__/LayoutNav.tsx

@@ -1,78 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { rmdRender, screen } from "../../test-utils/index.js";
-import { LayoutNav, type LayoutNavProps } from "../LayoutNav.js";
-import { layoutNav } from "../layoutNavStyles.js";
-
-describe("LayoutNav", () => {
-  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
-    const ref = createRef<HTMLDivElement>();
-    const props = {
-      ref,
-      children: "Content",
-      expanded: true,
-    } as const;
-
-    const { rerender } = rmdRender(<LayoutNav {...props} />);
-
-    const nav = screen.getByRole("navigation", { name: "Navigation" });
-    expect(ref.current).toBeInstanceOf(HTMLElement);
-    expect(ref.current).toBe(nav);
-    expect(nav).toMatchSnapshot();
-
-    rerender(
-      <LayoutNav
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(nav).toMatchSnapshot();
-
-    rerender(<LayoutNav {...props} as="div" data-testid="div" />);
-    expect(nav).not.toBeInTheDocument();
-    const div = screen.getByTestId("div");
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current).toBe(div);
-    expect(div).toMatchSnapshot();
-  });
-
-  it("should apply an aria label while rendered as a nav", () => {
-    const props: LayoutNavProps = {
-      expanded: true,
-      children: "Content",
-    };
-    const { rerender } = rmdRender(<LayoutNav {...props} />);
-
-    const nav = screen.getByRole("navigation", { name: "Navigation" });
-    expect(nav).toBeInTheDocument();
-
-    rerender(<LayoutNav {...props} aria-label="Custom" />);
-    expect(nav).toBeInTheDocument();
-    expect(nav).toHaveAttribute("aria-label", "Custom");
-
-    rerender(<LayoutNav {...props} aria-labelledby="another-id" />);
-    expect(nav).toBeInTheDocument();
-    expect(nav).not.toHaveAttribute("aria-label");
-
-    const divProps = {
-      ...props,
-      as: "div" as const,
-      "data-testid": "div",
-    };
-    rerender(<LayoutNav {...divProps} />);
-
-    expect(nav).not.toBeInTheDocument();
-    const div = screen.getByTestId("div");
-    expect(div).not.toHaveAttribute("aria-label");
-
-    rerender(<LayoutNav {...divProps} aria-label="My Label" />);
-    expect(div).toHaveAttribute("aria-label", "My Label");
-  });
-
-  describe("styling utility class", () => {
-    it("should be callable without any arguments", () => {
-      expect(layoutNav()).toMatchSnapshot();
-    });
-  });
-});

package/src/layout/__tests__/LayoutWindowSplitter.tsx

@@ -1,63 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef, type Ref } from "react";
-import { rmdRender, screen } from "../../test-utils/index.js";
-import {
-  LayoutWindowSplitter,
-  type LayoutWindowSplitterProps,
-} from "../LayoutWindowSplitter.js";
-import {
-  useLayoutWindowSplitter,
-  type ProvidedLayoutWindowSplitterProps,
-} from "../useLayoutWindowSplitter.js";
-
-type TestProps = Omit<
-  LayoutWindowSplitterProps,
-  keyof ProvidedLayoutWindowSplitterProps
-> & {
-  nodeRef?: Ref<HTMLButtonElement>;
-};
-
-function Test(props: TestProps) {
-  const { nodeRef, ...remaining } = props;
-  const { splitterProps } = useLayoutWindowSplitter({
-    ref: nodeRef,
-  });
-
-  return <LayoutWindowSplitter {...remaining} {...splitterProps} />;
-}
-
-describe("LayoutWindowSplitter", () => {
-  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
-    const ref = createRef<HTMLButtonElement>();
-    const props = {
-      nodeRef: ref,
-      "aria-controls": "does-not-exist",
-    } as const;
-
-    const { rerender } = rmdRender(<Test {...props} />);
-
-    const windowSplitter = screen.getByRole("separator", {
-      name: "Resize Navigation",
-    });
-    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
-    expect(ref.current).toBe(windowSplitter);
-    expect(windowSplitter).toMatchSnapshot();
-
-    rerender(
-      <Test
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(windowSplitter).toMatchSnapshot();
-
-    rerender(<Test {...props} aria-labelledby="another-id" />);
-    expect(windowSplitter).not.toHaveAttribute("aria-label");
-    expect(windowSplitter).toMatchSnapshot();
-
-    rerender(<Test {...props} aria-label="Custom Label" />);
-    expect(windowSplitter).toHaveAttribute("aria-label", "Custom Label");
-    expect(windowSplitter).toMatchSnapshot();
-  });
-});

package/src/layout/__tests__/Main.tsx

@@ -1,51 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { rmdRender, screen, userEvent } from "../../test-utils/index.js";
-import { Main } from "../Main.js";
-import { main } from "../mainStyles.js";
-
-describe("Main", () => {
-  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
-    const ref = createRef<HTMLElement>();
-    const props = {
-      ref,
-      children: "Hello, world!",
-    } as const;
-
-    const { rerender } = rmdRender(<Main {...props} />);
-
-    const main = screen.getByRole("main");
-    expect(ref.current).toBeInstanceOf(HTMLElement);
-    expect(ref.current).toBe(main);
-    expect(main).toMatchSnapshot();
-
-    rerender(
-      <Main
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(main).toMatchSnapshot();
-
-    rerender(<Main {...props} appBarOffset navOffset />);
-    expect(main).toMatchSnapshot();
-  });
-
-  it("should apply the tabIndex only while using a keyboard to support focusing with the SkipToMainContent component", async () => {
-    const user = userEvent.setup();
-    rmdRender(<Main>Hello, world!</Main>);
-
-    const main = screen.getByRole("main");
-    expect(main).not.toHaveAttribute("tabIndex");
-
-    await user.keyboard("[Shift]");
-    expect(main).toHaveAttribute("tabIndex", "-1");
-  });
-
-  describe("styling utility class", () => {
-    it("should be callable without any arguments", () => {
-      expect(main()).toMatchSnapshot();
-    });
-  });
-});

package/src/layout/__tests__/__snapshots__/LayoutAppBar.tsx.snap

@@ -1,78 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LayoutAppBar should allow props to be passed to the SkipToMainContent component 1`] = `
-<a
-  class="rmd-link rmd-link rmd-link--skip rmd-link--skip-styled custom-link-class"
-  href="#"
-  id="skip-to-main"
->
-  Main
-</a>
-`;
-
-exports[`LayoutAppBar should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
-<header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  id="layout-header-:r0:"
->
-  <a
-    class="rmd-link rmd-link rmd-link--skip rmd-link--skip-styled"
-    href="#"
-    id="skip-to-main"
-  >
-    Skip to main content
-  </a>
-  Content
-</header>
-`;
-
-exports[`LayoutAppBar should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
-<header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container custom-class-name"
-  id="layout-header-:r0:"
-  style="color: white;"
->
-  <a
-    class="rmd-link rmd-link rmd-link--skip rmd-link--skip-styled"
-    href="#"
-    id="skip-to-main"
-  >
-    Skip to main content
-  </a>
-  Content
-</header>
-`;
-
-exports[`LayoutAppBar should apply the correct styling, HTMLAttributes, and allow a ref 3`] = `
-<header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--sticky rmd-app-bar--top rmd-app-bar--elevated rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  id="layout-header-:r0:"
-  style=""
->
-  <a
-    class="rmd-link rmd-link rmd-link--skip rmd-link--skip-styled"
-    href="#"
-    id="skip-to-main"
-  >
-    Skip to main content
-  </a>
-  Content
-</header>
-`;
-
-exports[`LayoutAppBar should apply the correct styling, HTMLAttributes, and allow a ref 4`] = `
-<div
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="div"
-  id="layout-header-:r0:"
->
-  <a
-    class="rmd-link rmd-link rmd-link--skip rmd-link--skip-styled"
-    href="#"
-    id="skip-to-main"
-  >
-    Skip to main content
-  </a>
-  Content
-</div>
-`;

package/src/layout/__tests__/__snapshots__/LayoutNav.tsx.snap

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LayoutNav should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
-<nav
-  aria-label="Navigation"
-  class="rmd-layout-nav rmd-sheet rmd-sheet--horizontal rmd-sheet--left"
->
-  Content
-</nav>
-`;
-
-exports[`LayoutNav should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
-<nav
-  aria-label="Navigation"
-  class="rmd-layout-nav rmd-sheet rmd-sheet--horizontal rmd-sheet--left custom-class-name"
-  style="color: white;"
->
-  Content
-</nav>
-`;
-
-exports[`LayoutNav should apply the correct styling, HTMLAttributes, and allow a ref 3`] = `
-<div
-  class="rmd-layout-nav rmd-sheet rmd-sheet--horizontal rmd-sheet--left"
-  data-testid="div"
->
-  Content
-</div>
-`;
-
-exports[`LayoutNav styling utility class should be callable without any arguments 1`] = `"rmd-layout-nav"`;

package/src/layout/__tests__/__snapshots__/LayoutWindowSplitter.tsx.snap

@@ -1,60 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LayoutWindowSplitter should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
-<button
-  aria-controls="does-not-exist"
-  aria-label="Resize Navigation"
-  aria-valuemax="100"
-  aria-valuemin="0"
-  aria-valuenow="32"
-  class="rmd-window-splitter rmd-window-splitter--h rmd-layout-splitter rmd-layout-splitter--responsive"
-  id="splitter-:r0:"
-  role="separator"
-  type="button"
-/>
-`;
-
-exports[`LayoutWindowSplitter should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
-<button
-  aria-controls="does-not-exist"
-  aria-label="Resize Navigation"
-  aria-valuemax="100"
-  aria-valuemin="0"
-  aria-valuenow="32"
-  class="rmd-window-splitter rmd-window-splitter--h rmd-layout-splitter rmd-layout-splitter--responsive custom-class-name"
-  id="splitter-:r0:"
-  role="separator"
-  style="color: white;"
-  type="button"
-/>
-`;
-
-exports[`LayoutWindowSplitter should apply the correct styling, HTMLAttributes, and allow a ref 3`] = `
-<button
-  aria-controls="does-not-exist"
-  aria-labelledby="another-id"
-  aria-valuemax="100"
-  aria-valuemin="0"
-  aria-valuenow="32"
-  class="rmd-window-splitter rmd-window-splitter--h rmd-layout-splitter rmd-layout-splitter--responsive"
-  id="splitter-:r0:"
-  role="separator"
-  style=""
-  type="button"
-/>
-`;
-
-exports[`LayoutWindowSplitter should apply the correct styling, HTMLAttributes, and allow a ref 4`] = `
-<button
-  aria-controls="does-not-exist"
-  aria-label="Custom Label"
-  aria-valuemax="100"
-  aria-valuemin="0"
-  aria-valuenow="32"
-  class="rmd-window-splitter rmd-window-splitter--h rmd-layout-splitter rmd-layout-splitter--responsive"
-  id="splitter-:r0:"
-  role="separator"
-  style=""
-  type="button"
-/>
-`;

package/src/layout/__tests__/__snapshots__/Main.tsx.snap

@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Main should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
-<main
-  class="rmd-layout-main"
-  id="main-:r0:"
->
-  Hello, world!
-</main>
-`;
-
-exports[`Main should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
-<main
-  class="rmd-layout-main custom-class-name"
-  id="main-:r0:"
-  style="color: white;"
->
-  Hello, world!
-</main>
-`;
-
-exports[`Main should apply the correct styling, HTMLAttributes, and allow a ref 3`] = `
-<main
-  class="rmd-layout-main rmd-layout-main--offset-v rmd-layout-h--active"
-  id="main-:r0:"
-  style=""
->
-  Hello, world!
-</main>
-`;
-
-exports[`Main styling utility class should be callable without any arguments 1`] = `"rmd-layout-main"`;

package/src/layout/__tests__/__snapshots__/useExpandableLayout.tsx.snap

@@ -1,116 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`useExpandableLayout should allow you to create an expandable layout quickly 1`] = `
-<header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
->
-  <button
-    aria-label="Navigation"
-    class="rmd-button rmd-button--icon rmd-interaction-surface"
-    type="button"
-  >
-    <span
-      aria-hidden="true"
-      class="rmd-icon rmd-icon--font material-icons"
-    >
-      menu
-    </span>
-  </button>
-  <h6
-    class="rmd-typography rmd-typography--headline-6 rmd-nowrap rmd-ellipsis rmd-app-bar-title"
-  >
-    Hello, world!
-  </h6>
-</header>
-`;
-
-exports[`useExpandableLayout should allow you to create an expandable layout quickly 2`] = `
-<main
-  class="rmd-layout-main rmd-layout-main--offset-v rmd-layout-h"
-  id="main-:r3:"
->
-  Hello, world!
-  <div
-    data-testid="layout"
-  >
-    desktop
-  </div>
-</main>
-`;
-
-exports[`useExpandableLayout should allow you to create an expandable layout quickly 3`] = `
-<nav
-  aria-label="Navigation"
-  class="rmd-layout-nav rmd-layout-nav--offset-v rmd-sheet rmd-sheet--horizontal rmd-sheet--left"
->
-  <form>
-    <label
-      class="rmd-label rmd-label--gap rmd-label--reversed"
-    >
-      Home
-      <span
-        class="rmd-radio rmd-input-toggle rmd-input-toggle--em rmd-input-toggle--normal"
-      >
-        <input
-          checked=""
-          class="rmd-hidden-input"
-          id="radio-:r0:"
-          name="pathname"
-          type="radio"
-          value="/"
-        />
-        <span
-          aria-hidden="true"
-          class="rmd-icon rmd-icon--font material-icons"
-        >
-          radio_button_unchecked
-        </span>
-      </span>
-    </label>
-    <label
-      class="rmd-label rmd-label--gap rmd-label--reversed"
-    >
-      Route 1
-      <span
-        class="rmd-radio rmd-input-toggle rmd-input-toggle--em rmd-input-toggle--normal"
-      >
-        <input
-          class="rmd-hidden-input"
-          id="radio-:r1:"
-          name="pathname"
-          type="radio"
-          value="/1"
-        />
-        <span
-          aria-hidden="true"
-          class="rmd-icon rmd-icon--font material-icons"
-        >
-          radio_button_unchecked
-        </span>
-      </span>
-    </label>
-    <label
-      class="rmd-label rmd-label--gap rmd-label--reversed"
-    >
-      Route 2
-      <span
-        class="rmd-radio rmd-input-toggle rmd-input-toggle--em rmd-input-toggle--active rmd-input-toggle--normal"
-      >
-        <input
-          class="rmd-hidden-input"
-          id="radio-:r2:"
-          name="pathname"
-          type="radio"
-          value="/2"
-        />
-        <span
-          aria-hidden="true"
-          class="rmd-icon rmd-icon--font material-icons"
-        >
-          radio_button_checked
-        </span>
-      </span>
-    </label>
-  </form>
-</nav>
-`;