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

package/src/link/__tests__/SkipToMainContent.tsx

@@ -1,125 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { createRef, type FC, type ReactNode } from "react";
-import { fireEvent, render, screen } from "../../test-utils/index.js";
-
-import { SkipToMainContent } from "../SkipToMainContent.js";
-
-const MainIdWrapper: FC<{ children: ReactNode }> = ({ children }) => (
-  <>
-    {children}
-    <main id="main-id" tabIndex={-1} />
-  </>
-);
-
-describe("SkipToMainContent", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLAnchorElement>();
-    const props = {
-      ref,
-      mainId: "main-id",
-    } as const;
-    const { rerender } = render(<SkipToMainContent {...props} />, {
-      wrapper: MainIdWrapper,
-    });
-
-    const link = screen.getByRole("link", { name: "Skip to main content" });
-    expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
-    expect(ref.current).toBe(link);
-    expect(link).toMatchSnapshot();
-
-    rerender(
-      <SkipToMainContent
-        {...props}
-        style={{ opacity: 0.5 }}
-        className="custom-class-name"
-      />
-    );
-    expect(link).toMatchSnapshot();
-  });
-
-  it("should automatically find the main element for convenience", () => {
-    expect(() =>
-      render(<SkipToMainContent />, { wrapper: MainIdWrapper })
-    ).not.toThrow();
-  });
-
-  it("should throw an error if the mainId cannot be found", () => {
-    // hide thrown error in test reports
-    jest.spyOn(console, "error").mockImplementation(() => {});
-    expect(() => render(<SkipToMainContent mainId="not-found" />)).toThrow(
-      'Unable to find a main element to focus with an id of "not-found". There should be at least one <main> element or an element with role="main" on the page for accessibility.'
-    );
-  });
-
-  it('should throw an error if the mainId cannot be found and suggest the id for a main element or an element with role="main"', () => {
-    // hide thrown error in test reports
-    jest.spyOn(console, "error").mockImplementation(() => {});
-    expect(() =>
-      render(
-        <>
-          <SkipToMainContent mainId="not-found" />
-          <main id="main-id" />
-        </>
-      )
-    ).toThrow(
-      'Unable to find a main element to focus with an id of "not-found" but a main element was found with an id of "main-id".'
-    );
-  });
-
-  it("should not throw an error if the mainId cannot be found for production", () => {
-    // this is caused by next defining process.env.NODE_ENV as readonly 'development' | 'production' | 'test'
-    // @ts-ignore
-    process.env.NODE_ENV = "production";
-
-    expect(() =>
-      render(<SkipToMainContent mainId="not-found" />)
-    ).not.toThrow();
-  });
-
-  it("should focus the main element when clicked unless the provided onClick prop calls event.stopPropagation()", () => {
-    const { rerender } = render(<SkipToMainContent mainId="main-id" />, {
-      wrapper: MainIdWrapper,
-    });
-
-    const link = screen.getByRole("link", { name: "Skip to main content" });
-    const main = screen.getByRole("main");
-    expect(document.activeElement).toBe(document.body);
-
-    fireEvent.click(link);
-    expect(document.activeElement).toBe(main);
-
-    main.blur();
-    expect(document.activeElement).toBe(document.body);
-    rerender(
-      <SkipToMainContent
-        mainId="main-id"
-        onClick={(event) => {
-          event.stopPropagation();
-        }}
-      />
-    );
-    fireEvent.click(link);
-    expect(document.activeElement).toBe(document.body);
-  });
-
-  it("should defer finding the main element to the click event in production", () => {
-    const { NODE_ENV } = process.env;
-    process.env.NODE_ENV = "production";
-
-    const querySelector = jest.spyOn(document, "querySelector");
-    render(<SkipToMainContent />, {
-      wrapper: MainIdWrapper,
-    });
-    expect(querySelector).not.toHaveBeenCalled();
-
-    const link = screen.getByRole("link", { name: "Skip to main content" });
-    const main = screen.getByRole("main");
-    expect(document.activeElement).toBe(document.body);
-
-    fireEvent.click(link);
-    expect(document.activeElement).toBe(main);
-    expect(querySelector).toHaveBeenCalledTimes(1);
-
-    process.env.NODE_ENV = NODE_ENV;
-  });
-});

package/src/link/__tests__/__snapshots__/Link.tsx.snap

@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Link should apply the correct styling, HTML attributes, and allow a ref 1`] = `
-<a
-  class="rmd-link"
-  href="/some-url"
->
-  Content
-</a>
-`;
-
-exports[`Link should apply the correct styling, HTML attributes, and allow a ref 2`] = `
-<a
-  class="rmd-link custom-class-name"
-  href="/some-url"
-  style="color: blue;"
->
-  Content
-</a>
-`;

package/src/link/__tests__/__snapshots__/SkipToMainContent.tsx.snap

@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SkipToMainContent should apply the correct styling, HTML attributes, and allow a ref 1`] = `
-<a
-  class="rmd-link rmd-link rmd-link--skip rmd-link--skip-styled"
-  href="#main-id"
-  id="skip-to-main"
->
-  Skip to main content
-</a>
-`;
-
-exports[`SkipToMainContent should apply the correct styling, HTML attributes, and allow a ref 2`] = `
-<a
-  class="rmd-link rmd-link rmd-link--skip rmd-link--skip-styled custom-class-name"
-  href="#main-id"
-  id="skip-to-main"
-  style="opacity: 0.5;"
->
-  Skip to main content
-</a>
-`;

package/src/link/_link.scss

@@ -1,149 +0,0 @@
-@use "sass:map";
-@use "../utils";
-@use "../theme/colors";
-@use "../theme/theme";
-@use "../icon/icon";
-@use "../interaction/interaction";
-@use "../typography/typography";
-@use "../transition/transition";
-
-$disable-everything: false !default;
-$disable-skip-to-main: false !default;
-$disable-flex: false !default;
-
-$transition-duration: transition.$linear-duration !default;
-$color: colors.$blue-500 !default;
-$visited-color: colors.$blue-600 !default;
-$hover-color: colors.$blue-400 !default;
-
-$skip-to-main-z-index: 10000 !default;
-$skip-to-main-styles: (
-  color: theme.theme-get-var(on-primary-color),
-  left: 50%,
-  padding: 0.25rem 1rem,
-  top: 0.25rem,
-  transform: translateX(-50%),
-  z-index: $skip-to-main-z-index,
-) !default;
-$skip-to-main-active-styles: (
-  outline: 0.25rem dashed currentcolor,
-) !default;
-
-$variables: (color, visited-color, hover-color);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "link");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "link")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin use-light-theme {
-  @include set-var(color, $light-theme-color);
-}
-
-@mixin use-dark-theme {
-  @include set-var(color, $dark-theme-color);
-}
-
-@mixin style($position) {
-  $property: "border-#{$position}";
-
-  #{$property}: get-var(size) inset get-var(color);
-}
-
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(color, $color);
-    @include set-var(visited-color, $visited-color);
-    @include set-var(hover-color, $hover-color);
-  }
-}
-
-@mixin styles($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(link, $disable-layer) {
-      .rmd-link {
-        @include interaction.outline($outline-offset: false);
-        @include use-var(color);
-
-        transition: color $transition-duration;
-
-        &:visited {
-          @include set-var(color, get-var(visited-color));
-        }
-
-        &:hover {
-          @include set-var(color, get-var(hover-color));
-        }
-
-        // can't use the normal @include interaction.surface since links are
-        // rendered inline and the `::before`/`::after` pseudo selectors only work
-        // nicely with block-like elements
-        @if utils.$disable-focus-visible {
-          @include utils.keyboard-only {
-            &:focus {
-              @include interaction.focus-styles($disable-background: true);
-            }
-          }
-        } @else {
-          &:focus-visible {
-            @include interaction.focus-styles($disable-background: true);
-          }
-        }
-
-        @if not $disable-flex {
-          &--flex {
-            @include icon.use-var(gap, spacing);
-
-            align-items: center;
-            display: inline-flex;
-          }
-        }
-
-        @if not $disable-skip-to-main {
-          &--skip {
-            @include utils.map-to-styles(
-              map.remove(
-                typography.$headline-6-styles,
-                font-size,
-                font-weight,
-                letter-spacing
-              )
-            );
-            @include utils.sr-only(true, null);
-          }
-
-          &--skip-styled {
-            @include utils.map-to-styles($skip-to-main-styles);
-
-            @if utils.$disable-focus-visible {
-              @include utils.keyboard-only {
-                &:focus,
-                &:active {
-                  @include utils.map-to-styles($skip-to-main-active-styles);
-                }
-              }
-            } @else {
-              &:focus-visible {
-                @include utils.map-to-styles($skip-to-main-active-styles);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/src/list/__tests__/List.tsx

@@ -1,58 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { type PropsWithRef } from "../../types.js";
-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 { rerender } = render(<List ref={ref} />);
-
-    const unorderedList = screen.getByRole("none");
-    expect(ref.current).toBeInstanceOf(HTMLUListElement);
-    expect(ref.current).toBe(unorderedList);
-    expect(unorderedList).toMatchSnapshot();
-
-    const props: PropsWithRef<ListProps, ListElement> = {
-      ref,
-      style: {
-        maxWidth: 30,
-      },
-      className: "custom-class-name",
-    };
-    rerender(<List {...props} />);
-    expect(unorderedList).toMatchSnapshot();
-
-    rerender(<List {...props} dense horizontal />);
-    expect(unorderedList).toBeInTheDocument();
-    expect(unorderedList).toHaveClass("custom-class-name");
-    expect(unorderedList).toMatchSnapshot();
-
-    rerender(<List ref={ref} ordered />);
-    expect(unorderedList).not.toBeInTheDocument();
-
-    const orderedList = screen.getByRole("none");
-    expect(ref.current).toBeInstanceOf(HTMLOListElement);
-    expect(ref.current).toBe(orderedList);
-    expect(orderedList).toMatchSnapshot();
-
-    rerender(<List {...props} dense horizontal ordered />);
-    expect(orderedList).toBeInTheDocument();
-    expect(orderedList).toMatchSnapshot();
-  });
-
-  it("should allow the role to be overridden", () => {
-    render(<List role="menu" />);
-
-    expect(() => screen.getByRole("none")).toThrow();
-    expect(() => screen.getByRole("menu")).not.toThrow();
-  });
-
-  describe("styling utility class", () => {
-    it("should be callable without any arguments", () => {
-      expect(list()).toMatchSnapshot();
-    });
-  });
-});

package/src/list/__tests__/ListItem.tsx

@@ -1,280 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { createRef, type ReactElement, type Ref } from "react";
-import {
-  fireEvent,
-  render,
-  screen,
-  userEvent,
-  waitFor,
-} from "../../test-utils/index.js";
-
-import { UserInteractionModeProvider } from "../../interaction/UserInteractionModeProvider.js";
-import { INTERACTION_CONFIG } from "../../interaction/config.js";
-import { List } from "../List.js";
-import { ListItem, type ListItemProps } from "../ListItem.js";
-
-interface TestProps extends ListItemProps {
-  nodeRef?: Ref<HTMLLIElement>;
-}
-
-function Test(props: TestProps): ReactElement {
-  const { children = "Item", nodeRef, ...remaining } = props;
-  return (
-    <List>
-      <ListItem {...remaining} ref={nodeRef}>
-        {children}
-      </ListItem>
-    </List>
-  );
-}
-
-describe("ListItem", () => {
-  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
-    const nodeRef = createRef<HTMLLIElement>();
-    const { rerender } = render(<Test nodeRef={nodeRef} />);
-
-    const item = screen.getByRole("button", { name: "Item" });
-    expect(nodeRef.current).toBeInstanceOf(HTMLLIElement);
-    expect(nodeRef.current).toBe(item);
-    expect(item).toMatchSnapshot();
-
-    const props: TestProps = {
-      nodeRef,
-      style: {
-        color: "orange",
-      },
-      className: "custom-class-name",
-    };
-
-    rerender(<Test {...props} />);
-    expect(item).toBeInTheDocument();
-    expect(item).toHaveClass("custom-class-name");
-    expect(item).toMatchSnapshot();
-
-    rerender(<Test {...props} disabled />);
-    expect(item).toBeInTheDocument();
-    expect(item).toHaveClass("custom-class-name");
-    expect(item).toMatchSnapshot();
-
-    rerender(<Test {...props} disabledOpacity />);
-    expect(item).toBeInTheDocument();
-    expect(item).toHaveClass("custom-class-name");
-    expect(item).toMatchSnapshot();
-
-    rerender(<Test {...props} disabled disabledOpacity />);
-    expect(item).toBeInTheDocument();
-    expect(item).toHaveClass("custom-class-name");
-    expect(item).toMatchSnapshot();
-  });
-
-  it("should implement the correct click behavior", async () => {
-    const onClick = jest.fn();
-    const props: TestProps = { onClick };
-    const { rerender } = render(<Test {...props} />, {
-      wrapper: UserInteractionModeProvider,
-    });
-
-    const item = screen.getByRole("button", { name: "Item" });
-    expect(item).toHaveProperty("tabIndex", 0);
-    fireEvent.click(item);
-    expect(onClick).toHaveBeenCalledTimes(1);
-
-    rerender(<Test {...props} disabled />);
-    expect(item).toHaveProperty("tabIndex", -1);
-    fireEvent.click(item);
-
-    await waitFor(() => {
-      expect(item.querySelector(".rmd-ripple")).toBeNull();
-    });
-    expect(onClick).toHaveBeenCalledTimes(1);
-
-    rerender(<Test {...props} />);
-    expect(item).toHaveProperty("tabIndex", 0);
-    await userEvent.keyboard("[Tab]");
-    item.focus();
-
-    await userEvent.keyboard("[Space]");
-    expect(onClick).toHaveBeenCalledTimes(2);
-
-    await waitFor(() => {
-      expect(item.querySelector(".rmd-ripple")).toBeNull();
-    });
-
-    rerender(<Test {...props} />);
-    await userEvent.keyboard("[Enter]");
-    expect(onClick).toHaveBeenCalledTimes(3);
-
-    rerender(<Test {...props} disabled />);
-    await userEvent.keyboard("[Space]");
-    expect(onClick).toHaveBeenCalledTimes(3);
-
-    rerender(<Test {...props} disabled />);
-    await userEvent.keyboard("[Enter]");
-    expect(onClick).toHaveBeenCalledTimes(3);
-  });
-
-  it("should wrap text children in span elements to enable higher contrast", () => {
-    const { rerender } = render(<Test />);
-    const item = screen.getByRole("button", { name: "Item" });
-    expect(item).toMatchSnapshot();
-
-    rerender(<Test disableTextChildren />);
-    expect(item).toMatchSnapshot();
-
-    rerender(
-      <Test>
-        <div>This is some content</div>
-      </Test>
-    );
-    expect(item).toMatchSnapshot();
-
-    rerender(
-      <Test disableTextChildren>
-        <div>This is some content</div>
-      </Test>
-    );
-    expect(item).toMatchSnapshot();
-  });
-
-  it("should wrap text children in span elements to enable higher contrast unless the higher contrast is disabled", () => {
-    const higherContrastMock = jest
-      .spyOn(INTERACTION_CONFIG, "higherContrast", "get")
-      .mockReturnValue(false);
-    const { rerender } = render(<Test />);
-    const item = screen.getByRole("button", { name: "Item" });
-    expect(item).toMatchSnapshot();
-
-    rerender(<Test disableTextChildren />);
-    expect(item).toMatchSnapshot();
-
-    rerender(
-      <Test>
-        <div>This is some content</div>
-      </Test>
-    );
-    expect(item).toMatchSnapshot();
-
-    rerender(
-      <Test disableTextChildren>
-        <div>This is some content</div>
-      </Test>
-    );
-    expect(item).toMatchSnapshot();
-
-    higherContrastMock.mockRestore();
-  });
-
-  it("should update the height based on the provided addons and render correctly", () => {
-    const { rerender } = render(<Test />);
-
-    const item = screen.getByRole("button", { name: "Item" });
-    expect(item).toMatchSnapshot();
-
-    rerender(<Test secondaryText="Secondary text!" />);
-    expect(item).toMatchSnapshot();
-
-    rerender(<Test secondaryText={<span>Secondary text as element!</span>} />);
-    expect(item).toMatchSnapshot();
-
-    rerender(
-      <Test
-        primaryText="Primary Text!"
-        secondaryText="Secondary text!"
-        disableTextChildren
-      />
-    );
-    expect(item).toHaveTextContent("Primary Text!Secondary text!Item");
-    expect(item).toMatchSnapshot();
-
-    rerender(<Test leftAddon="Pretend Icon" />);
-    expect(item).toMatchSnapshot();
-
-    rerender(
-      <Test
-        leftAddon="Pretend Icon"
-        rightAddon="Pretend Avatar"
-        rightAddonType="avatar"
-      />
-    );
-    expect(item).toMatchSnapshot();
-
-    rerender(
-      <Test
-        leftAddon="Pretend Media"
-        leftAddonType="media"
-        rightAddon="Pretend Avatar"
-        rightAddonType="avatar"
-      />
-    );
-    expect(item).toMatchSnapshot();
-
-    rerender(
-      <Test
-        leftAddon="Pretend Large Media"
-        leftAddonType="large-media"
-        rightAddon="Pretend Icon"
-        rightAddonType="icon"
-        rightAddonPosition="bottom"
-      />
-    );
-    expect(item).toMatchSnapshot();
-
-    rerender(
-      <Test
-        leftAddon="Pretend Large Media"
-        leftAddonType="large-media"
-        rightAddon="Pretend Icon"
-        rightAddonType="icon"
-        rightAddonPosition="bottom"
-        secondaryText="Secondary Text!"
-        multiline
-      />
-    );
-    expect(item).toMatchSnapshot();
-  });
-
-  it("should allow for custom props to be passed to the primary text wrapper", () => {
-    const ref = createRef<HTMLSpanElement>();
-    render(
-      <Test
-        textProps={{
-          ref,
-          style: { backgroundColor: "red" },
-          className: "custom-class-name",
-        }}
-      />
-    );
-
-    const item = screen.getByRole("button", { name: "Item" });
-    expect(ref.current).toBeInstanceOf(HTMLSpanElement);
-    expect(item).toMatchSnapshot();
-  });
-
-  it("should allow for custom props to be passed to the secondary text wrapper", () => {
-    const ref = createRef<HTMLSpanElement>();
-    render(
-      <Test
-        secondaryText="Secondary Text!"
-        secondaryTextProps={{
-          ref,
-          style: { backgroundColor: "red" },
-          className: "custom-class-name",
-        }}
-      />
-    );
-
-    const item = screen.getByRole("button", { name: /Item/ });
-    expect(ref.current).toBeInstanceOf(HTMLSpanElement);
-    expect(item).toMatchSnapshot();
-  });
-
-  it("should not allow presentational items to be interactable", async () => {
-    render(<Test role="presentation" />);
-
-    const item = screen.getByRole("presentation");
-    expect(item).not.toHaveAttribute("tabIndex");
-
-    await userEvent.click(item);
-    expect(item.querySelector(".rmd-ripple")).toBeNull();
-  });
-});