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

package/src/list/__tests__/ListItemLink.tsx

@@ -1,89 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { forwardRef, type HTMLAttributes, type ReactElement } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { Link } from "../../link/Link.js";
-import { List } from "../List.js";
-import { ListItemLink } from "../ListItemLink.js";
-
-describe("ListItemLink", () => {
-  it("should render as an <a> element by default", () => {
-    const { container } = render(
-      <List>
-        <ListItemLink href="/link">Hello</ListItemLink>
-      </List>
-    );
-    const link = screen.getByRole("link", { name: "Hello" });
-    expect(link).toBeInstanceOf(HTMLAnchorElement);
-    expect(link.parentElement).toBeInstanceOf(HTMLLIElement);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should allow for a custom link component using the as prop", () => {
-    const { container } = render(
-      <List>
-        <ListItemLink as={Link} href="/link">
-          Hello
-        </ListItemLink>
-      </List>
-    );
-    const link = screen.getByRole("link", { name: "Hello" });
-    expect(link).toBeInstanceOf(HTMLAnchorElement);
-    expect(link.parentElement).toBeInstanceOf(HTMLLIElement);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should support the to prop for routing libraries like react-router-dom", () => {
-    type Props = Omit<HTMLAttributes<HTMLAnchorElement>, "href"> & {
-      to: string;
-    };
-
-    function NonForwardedLink(props: Props): ReactElement {
-      const { to, children, ...remaining } = props;
-      return (
-        <a href={to} {...remaining}>
-          {children}
-        </a>
-      );
-    }
-
-    const Link = forwardRef<HTMLAnchorElement, Props>(
-      function Link(props, ref) {
-        const { to, children, ...remaining } = props;
-        return (
-          <a ref={ref} href={to} {...remaining}>
-            {children}
-          </a>
-        );
-      }
-    );
-
-    const { container, rerender } = render(
-      <List>
-        <ListItemLink
-          // custom links **must** allow for a ref to be passed
-          // @ts-expect-error
-          as={NonForwardedLink}
-          href="/link"
-        >
-          Hello
-        </ListItemLink>
-      </List>
-    );
-
-    rerender(
-      <List>
-        <ListItemLink as={Link} href="/link">
-          Hello
-        </ListItemLink>
-      </List>
-    );
-    const link = screen.getByRole("link", { name: "Hello" });
-    expect(link).toBeInstanceOf(HTMLAnchorElement);
-    expect(link.parentElement).toBeInstanceOf(HTMLLIElement);
-
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/list/__tests__/ListSubheader.tsx

@@ -1,81 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef, type ReactElement, type Ref } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { List } from "../List.js";
-import { ListSubheader, type ListSubheaderProps } from "../ListSubheader.js";
-
-interface TestProps extends ListSubheaderProps {
-  nodeRef?: Ref<HTMLLIElement>;
-}
-
-function Test(props: TestProps): ReactElement {
-  const { children = "Subheader", nodeRef, ...remaining } = props;
-  return (
-    <List>
-      <ListSubheader {...remaining} ref={nodeRef}>
-        {children}
-      </ListSubheader>
-    </List>
-  );
-}
-
-describe("ListSubheader", () => {
-  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("presentation");
-    expect(nodeRef.current).toBeInstanceOf(HTMLLIElement);
-    expect(nodeRef.current).toBe(item);
-    expect(item).toMatchSnapshot();
-
-    rerender(<Test inset />);
-    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} inset />);
-    expect(item).toBeInTheDocument();
-    expect(item).toHaveClass("custom-class-name");
-    expect(item).toMatchSnapshot();
-
-    rerender(<Test role="listitem" />);
-    expect(item).toMatchSnapshot();
-
-    rerender(
-      <Test>
-        <span>Some amazing custom content</span>
-      </Test>
-    );
-    expect(item).toMatchSnapshot();
-  });
-
-  it("should allow for custom props to be passed to the text wrapper", () => {
-    const ref = createRef<HTMLSpanElement>();
-    render(
-      <Test
-        textProps={{
-          ref,
-          style: { backgroundColor: "orange" },
-          className: "custom-class-name",
-        }}
-      />
-    );
-
-    const item = screen.getByRole("presentation");
-    expect(ref.current).toBeInstanceOf(HTMLSpanElement);
-    expect(item).toMatchSnapshot();
-  });
-});

package/src/list/__tests__/__snapshots__/List.tsx.snap

@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`List should apply the correct styling, HTML attributes, and allow a ref 1`] = `
-<ul
-  class="rmd-list"
-  role="none"
-/>
-`;
-
-exports[`List should apply the correct styling, HTML attributes, and allow a ref 2`] = `
-<ul
-  class="rmd-list custom-class-name"
-  role="none"
-  style="max-width: 30px;"
-/>
-`;
-
-exports[`List should apply the correct styling, HTML attributes, and allow a ref 3`] = `
-<ul
-  class="rmd-list rmd-list--dense rmd-list--horizontal custom-class-name"
-  role="none"
-  style="max-width: 30px;"
-/>
-`;
-
-exports[`List should apply the correct styling, HTML attributes, and allow a ref 4`] = `
-<ol
-  class="rmd-list"
-  role="none"
-/>
-`;
-
-exports[`List should apply the correct styling, HTML attributes, and allow a ref 5`] = `
-<ol
-  class="rmd-list rmd-list--dense rmd-list--horizontal custom-class-name"
-  role="none"
-  style="max-width: 30px;"
-/>
-`;
-
-exports[`List styling utility class should be callable without any arguments 1`] = `"rmd-list"`;

package/src/list/__tests__/__snapshots__/ListItem.tsx.snap

@@ -1,414 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ListItem should allow for custom props to be passed to the primary text wrapper 1`] = `
-<li
-  class="rmd-list-item rmd-list-item--normal rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span
-    class="rmd-list-item__text"
-    style="background-color: red;"
-  >
-    Item
-  </span>
-</li>
-`;
-
-exports[`ListItem should allow for custom props to be passed to the secondary text wrapper 1`] = `
-<li
-  class="rmd-list-item rmd-list-item--extra-large rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    Item
-    <span
-      class="rmd-list-item__text rmd-list-item__text--secondary"
-      style="background-color: red;"
-    >
-      Secondary Text!
-    </span>
-  </span>
-</li>
-`;
-
-exports[`ListItem should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
-<li
-  class="rmd-list-item rmd-list-item--normal rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    Item
-  </span>
-</li>
-`;
-
-exports[`ListItem should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
-<li
-  class="rmd-list-item rmd-list-item--normal rmd-interaction-surface custom-class-name"
-  role="button"
-  style="color: orange;"
-  tabindex="0"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    Item
-  </span>
-</li>
-`;
-
-exports[`ListItem should apply the correct styling, HTMLAttributes, and allow a ref 3`] = `
-<li
-  aria-disabled="true"
-  class="rmd-list-item rmd-list-item--normal rmd-list-item--disabled-color rmd-interaction-surface custom-class-name"
-  role="button"
-  style="color: orange;"
-  tabindex="-1"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    Item
-  </span>
-</li>
-`;
-
-exports[`ListItem should apply the correct styling, HTMLAttributes, and allow a ref 4`] = `
-<li
-  class="rmd-list-item rmd-list-item--normal rmd-interaction-surface custom-class-name"
-  role="button"
-  style="color: orange;"
-  tabindex="0"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    Item
-  </span>
-</li>
-`;
-
-exports[`ListItem should apply the correct styling, HTMLAttributes, and allow a ref 5`] = `
-<li
-  aria-disabled="true"
-  class="rmd-list-item rmd-list-item--normal rmd-list-item--disabled-opacity rmd-interaction-surface custom-class-name"
-  role="button"
-  style="color: orange;"
-  tabindex="-1"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    Item
-  </span>
-</li>
-`;
-
-exports[`ListItem should update the height based on the provided addons and render correctly 1`] = `
-<li
-  class="rmd-list-item rmd-list-item--normal rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    Item
-  </span>
-</li>
-`;
-
-exports[`ListItem should update the height based on the provided addons and render correctly 2`] = `
-<li
-  class="rmd-list-item rmd-list-item--extra-large rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    Item
-    <span
-      class="rmd-list-item__text rmd-list-item__text--secondary"
-    >
-      Secondary text!
-    </span>
-  </span>
-</li>
-`;
-
-exports[`ListItem should update the height based on the provided addons and render correctly 3`] = `
-<li
-  class="rmd-list-item rmd-list-item--extra-large rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    Item
-    <span
-      class="rmd-list-item__text rmd-list-item__text--secondary"
-    >
-      <span>
-        Secondary text as element!
-      </span>
-    </span>
-  </span>
-</li>
-`;
-
-exports[`ListItem should update the height based on the provided addons and render correctly 4`] = `
-<li
-  class="rmd-list-item rmd-list-item--extra-large rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    Primary Text!
-    <span
-      class="rmd-list-item__text rmd-list-item__text--secondary"
-    >
-      Secondary text!
-    </span>
-  </span>
-  <span>
-    Item
-  </span>
-</li>
-`;
-
-exports[`ListItem should update the height based on the provided addons and render correctly 5`] = `
-<li
-  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span
-    class="rmd-text-icon-spacing rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before"
-  >
-    Pretend Icon
-  </span>
-  <span
-    class="rmd-list-item__text"
-  >
-    Item
-  </span>
-</li>
-`;
-
-exports[`ListItem should update the height based on the provided addons and render correctly 6`] = `
-<li
-  class="rmd-list-item rmd-list-item--large rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span
-    class="rmd-text-icon-spacing rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before"
-  >
-    Pretend Icon
-  </span>
-  <span
-    class="rmd-list-item__text"
-  >
-    Item
-  </span>
-  <span
-    class="rmd-text-icon-spacing rmd-icon--after rmd-list-item__addon"
-  >
-    Pretend Avatar
-  </span>
-</li>
-`;
-
-exports[`ListItem should update the height based on the provided addons and render correctly 7`] = `
-<li
-  class="rmd-list-item rmd-list-item--extra-large rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span
-    class="rmd-text-icon-spacing rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-list-item__addon--media rmd-list-item__addon--media-centered"
-  >
-    Pretend Media
-  </span>
-  <span
-    class="rmd-list-item__text"
-  >
-    Item
-  </span>
-  <span
-    class="rmd-text-icon-spacing rmd-icon--after rmd-list-item__addon"
-  >
-    Pretend Avatar
-  </span>
-</li>
-`;
-
-exports[`ListItem should update the height based on the provided addons and render correctly 8`] = `
-<li
-  class="rmd-list-item rmd-list-item--extra-large rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span
-    class="rmd-text-icon-spacing rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-list-item__addon--media rmd-list-item__addon--media-large rmd-list-item__addon--media-centered"
-  >
-    Pretend Large Media
-  </span>
-  <span
-    class="rmd-list-item__text"
-  >
-    Item
-  </span>
-  <span
-    class="rmd-text-icon-spacing rmd-icon--after rmd-list-item__addon rmd-list-item__addon--bottom"
-  >
-    Pretend Icon
-  </span>
-</li>
-`;
-
-exports[`ListItem should update the height based on the provided addons and render correctly 9`] = `
-<li
-  class="rmd-list-item rmd-list-item--extra-large rmd-list-item--multiline rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span
-    class="rmd-text-icon-spacing rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-list-item__addon--media rmd-list-item__addon--media-large rmd-list-item__addon--media-centered"
-  >
-    Pretend Large Media
-  </span>
-  <span
-    class="rmd-list-item__text"
-  >
-    Item
-    <span
-      class="rmd-list-item__text rmd-list-item__text--clamped rmd-list-item__text--secondary"
-    >
-      Secondary Text!
-    </span>
-  </span>
-  <span
-    class="rmd-text-icon-spacing rmd-icon--after rmd-list-item__addon rmd-list-item__addon--bottom"
-  >
-    Pretend Icon
-  </span>
-</li>
-`;
-
-exports[`ListItem should wrap text children in span elements to enable higher contrast 1`] = `
-<li
-  class="rmd-list-item rmd-list-item--normal rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    Item
-  </span>
-</li>
-`;
-
-exports[`ListItem should wrap text children in span elements to enable higher contrast 2`] = `
-<li
-  class="rmd-list-item rmd-list-item--normal rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span>
-    Item
-  </span>
-</li>
-`;
-
-exports[`ListItem should wrap text children in span elements to enable higher contrast 3`] = `
-<li
-  class="rmd-list-item rmd-list-item--normal rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    <div>
-      This is some content
-    </div>
-  </span>
-</li>
-`;
-
-exports[`ListItem should wrap text children in span elements to enable higher contrast 4`] = `
-<li
-  class="rmd-list-item rmd-list-item--normal rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <div>
-    This is some content
-  </div>
-</li>
-`;
-
-exports[`ListItem should wrap text children in span elements to enable higher contrast unless the higher contrast is disabled 1`] = `
-<li
-  class="rmd-list-item rmd-list-item--normal rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    Item
-  </span>
-</li>
-`;
-
-exports[`ListItem should wrap text children in span elements to enable higher contrast unless the higher contrast is disabled 2`] = `
-<li
-  class="rmd-list-item rmd-list-item--normal rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  Item
-</li>
-`;
-
-exports[`ListItem should wrap text children in span elements to enable higher contrast unless the higher contrast is disabled 3`] = `
-<li
-  class="rmd-list-item rmd-list-item--normal rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    <div>
-      This is some content
-    </div>
-  </span>
-</li>
-`;
-
-exports[`ListItem should wrap text children in span elements to enable higher contrast unless the higher contrast is disabled 4`] = `
-<li
-  class="rmd-list-item rmd-list-item--normal rmd-interaction-surface"
-  role="button"
-  tabindex="0"
->
-  <div>
-    This is some content
-  </div>
-</li>
-`;

package/src/list/__tests__/__snapshots__/ListItemLink.tsx.snap

@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ListItemLink should allow for a custom link component using the as prop 1`] = `
-<div>
-  <ul
-    class="rmd-list"
-    role="none"
-  >
-    <li
-      role="none"
-    >
-      <a
-        class="rmd-link rmd-list-item rmd-list-item--link rmd-list-item--normal rmd-interaction-surface"
-        href="/link"
-      >
-        <span
-          class="rmd-list-item__text"
-        >
-          Hello
-        </span>
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`ListItemLink should render as an <a> element by default 1`] = `
-<div>
-  <ul
-    class="rmd-list"
-    role="none"
-  >
-    <li
-      role="none"
-    >
-      <a
-        class="rmd-list-item rmd-list-item--link rmd-list-item--normal rmd-interaction-surface"
-        href="/link"
-      >
-        <span
-          class="rmd-list-item__text"
-        >
-          Hello
-        </span>
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`ListItemLink should support the to prop for routing libraries like react-router-dom 1`] = `
-<div>
-  <ul
-    class="rmd-list"
-    role="none"
-  >
-    <li
-      role="none"
-    >
-      <a
-        class="rmd-list-item rmd-list-item--link rmd-list-item--normal rmd-interaction-surface"
-        href="/link"
-      >
-        <span
-          class="rmd-list-item__text"
-        >
-          Hello
-        </span>
-      </a>
-    </li>
-  </ul>
-</div>
-`;