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

package/src/table/__tests__/Table.tsx

@@ -1,315 +0,0 @@
-import { beforeEach, describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { act, render, screen } from "../../test-utils/index.js";
-
-import { type PropsWithRef } from "../../types.js";
-import { StickyTableSection } from "../StickyTableSection.js";
-import { Table, type TableProps } from "../Table.js";
-import { TableBody } from "../TableBody.js";
-import { TableCell } from "../TableCell.js";
-import { TableContainer } from "../TableContainer.js";
-import { TableFooter } from "../TableFooter.js";
-import { TableHeader } from "../TableHeader.js";
-import { TableRow } from "../TableRow.js";
-
-describe("Table", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLTableElement>();
-    const props: PropsWithRef<TableProps, HTMLTableElement> = {
-      ref,
-      children: (
-        <>
-          <TableHeader>
-            <TableRow>
-              <TableCell>Header 1</TableCell>
-              <TableCell>Header 2</TableCell>
-              <TableCell>Header 3</TableCell>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell>Row 1 Cell 1</TableCell>
-              <TableCell>Row 1 Cell 2</TableCell>
-              <TableCell>Row 1 Cell 3</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>Row 2 Cell 1</TableCell>
-              <TableCell>Row 2 Cell 2</TableCell>
-              <TableCell>Row 2 Cell 3</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>Row 3 Cell 1</TableCell>
-              <TableCell>Row 3 Cell 2</TableCell>
-              <TableCell>Row 3 Cell 3</TableCell>
-            </TableRow>
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TableCell colSpan={3}>Footer Cell</TableCell>
-            </TableRow>
-          </TableFooter>
-        </>
-      ),
-    };
-
-    const { rerender } = render(<Table {...props} />);
-    const table = screen.getByRole("table");
-    expect(ref.current).toBeInstanceOf(HTMLTableElement);
-    expect(ref.current).toBe(table);
-    expect(table).toMatchSnapshot();
-
-    rerender(
-      <Table
-        {...props}
-        fullWidth
-        disableHover
-        disableBorders
-        style={{ backgroundColor: "orange" }}
-        className="custom-class-name"
-      />
-    );
-    expect(table).toMatchSnapshot();
-
-    rerender(<Table {...props} dense lineWrap />);
-    expect(table).toMatchSnapshot();
-  });
-
-  // NOTE: This might be one I should only test with cypress/playwright because
-  // of the `getRootMargin` behavior for both of these
-  describe("sticky table behavior", () => {
-    let _observer: MockIntersectionObserver | undefined;
-    class MockIntersectionObserver implements IntersectionObserver {
-      readonly root: Element | Document | null;
-      readonly rootMargin: string;
-      readonly thresholds: readonly number[];
-
-      // for testing purposes
-      readonly callback: IntersectionObserverCallback;
-      targets: Element[];
-
-      constructor(
-        callback: IntersectionObserverCallback,
-        options: IntersectionObserverInit = {}
-      ) {
-        const { root = null, rootMargin = "", threshold = [] } = options;
-        this.callback = callback;
-        this.targets = [];
-        this.root = root;
-        this.rootMargin = rootMargin;
-        this.thresholds =
-          typeof threshold === "number" ? [threshold] : threshold;
-
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        _observer = this;
-      }
-
-      unobserve(target: Element): void {
-        this.targets = this.targets.filter((current) => current !== target);
-      }
-      observe(target: Element): void {
-        this.targets.push(target);
-      }
-
-      disconnect(): void {}
-      takeRecords(): IntersectionObserverEntry[] {
-        return [];
-      }
-    }
-
-    beforeEach(() => {
-      _observer = undefined;
-
-      Object.defineProperty(window, "IntersectionObserver", {
-        writable: true,
-        configurable: true,
-        value: MockIntersectionObserver,
-      });
-    });
-
-    describe("TableHeader", () => {
-      it("should use an intersection observer to apply a custom className when the table's header is covering content within the table using the full viewport", () => {
-        const { container } = render(
-          <Table>
-            <StickyTableSection type="header">
-              <TableRow>
-                <TableCell>Header Cell</TableCell>
-              </TableRow>
-            </StickyTableSection>
-            <TableBody>
-              {Array.from({ length: 20 }, (_, i) => (
-                <TableRow key={i}>
-                  <TableCell>{`Row ${i + 1}`}</TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        );
-
-        if (!_observer) {
-          throw new Error();
-        }
-        const observer = _observer;
-        expect(container).toMatchSnapshot();
-
-        // pretend like the intersection observer was called after scrolling in
-        // the container
-        act(() => {
-          const entry = {
-            intersectionRatio: 0.5,
-            boundingClientRect: {
-              bottom: window.innerHeight - 50,
-            },
-          } as IntersectionObserverEntry;
-
-          observer.callback([entry], observer);
-        });
-        expect(container).toMatchSnapshot();
-      });
-
-      it("should use an intersection observer to apply a custom className when the table's header is covering content within the table using the table container", () => {
-        const { container } = render(
-          <TableContainer>
-            <Table>
-              <StickyTableSection type="header">
-                <TableRow>
-                  <TableCell>Header Cell</TableCell>
-                </TableRow>
-              </StickyTableSection>
-              <TableBody>
-                {Array.from({ length: 20 }, (_, i) => (
-                  <TableRow key={i}>
-                    <TableCell>{`Row ${i + 1}`}</TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        );
-
-        if (!_observer) {
-          throw new Error();
-        }
-        const observer = _observer;
-        expect(container).toMatchSnapshot();
-
-        // pretend like the intersection observer was called after scrolling in
-        // the container
-        act(() => {
-          const entry = {
-            intersectionRatio: 0.5,
-            boundingClientRect: {
-              bottom: window.innerHeight - 50,
-            },
-          } as IntersectionObserverEntry;
-
-          observer.callback([entry], observer);
-        });
-        expect(container).toMatchSnapshot();
-      });
-    });
-
-    describe("TableFooter", () => {
-      it("should use an intersection observer to apply a custom className when the table's footer is covering content within the table using the full viewport", () => {
-        const { container } = render(
-          <Table>
-            <TableBody>
-              {Array.from({ length: 20 }, (_, i) => (
-                <TableRow key={i}>
-                  <TableCell>{`Row ${i + 1}`}</TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-            <StickyTableSection type="footer">
-              <TableRow>
-                <TableCell>Footer Cell</TableCell>
-              </TableRow>
-            </StickyTableSection>
-          </Table>
-        );
-
-        if (!_observer) {
-          throw new Error();
-        }
-        const observer = _observer;
-        expect(container).toMatchSnapshot();
-
-        // pretend like the intersection observer was called after scrolling in
-        // the page and the table header is covering the table body
-        act(() => {
-          const entry = {
-            intersectionRatio: 0.5,
-            boundingClientRect: {
-              top: 40,
-            },
-          } as IntersectionObserverEntry;
-
-          observer.callback([entry], observer);
-        });
-        expect(container).toMatchSnapshot();
-
-        // pretend like the intersection observer was called after scrolling in
-        // the page and the table header is no longer covering the table body
-        act(() => {
-          const entry = {
-            intersectionRatio: 0.5,
-            boundingClientRect: {
-              top: -40,
-            },
-          } as IntersectionObserverEntry;
-
-          observer.callback([entry], observer);
-        });
-        expect(container).toMatchSnapshot();
-      });
-
-      it("should use an intersection observer to apply a custom className when the table's footer is covering content within the table using the table container", () => {
-        const { container } = render(
-          <TableContainer>
-            <Table>
-              <TableBody>
-                {Array.from({ length: 20 }, (_, i) => (
-                  <TableRow key={i}>
-                    <TableCell>{`Row ${i + 1}`}</TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-              <StickyTableSection type="footer">
-                <TableRow>
-                  <TableCell>Footer Cell</TableCell>
-                </TableRow>
-              </StickyTableSection>
-            </Table>
-          </TableContainer>
-        );
-
-        if (!_observer) {
-          throw new Error();
-        }
-        const observer = _observer;
-        expect(container).toMatchSnapshot();
-
-        // pretend like the intersection observer was called after scrolling in
-        // the container
-        act(() => {
-          const entry = {
-            isIntersecting: true,
-          } as IntersectionObserverEntry;
-
-          observer.callback([entry], observer);
-        });
-        expect(container).toMatchSnapshot();
-
-        // pretend like the intersection observer was called after scrolling in
-        // the container and making the footer no longer covering the table body
-        act(() => {
-          const entry = {
-            isIntersecting: false,
-          } as IntersectionObserverEntry;
-
-          observer.callback([entry], observer);
-        });
-        expect(container).toMatchSnapshot();
-      });
-    });
-  });
-});

package/src/table/__tests__/TableBody.tsx

@@ -1,52 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { Table } from "../Table.js";
-import { TableBody } from "../TableBody.js";
-import { TableCell } from "../TableCell.js";
-import { TableRow } from "../TableRow.js";
-
-describe("TableBody", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLTableSectionElement>();
-    const props = {
-      "data-testid": "body",
-      ref,
-      children: (
-        <TableRow>
-          <TableCell>Cell 1</TableCell>
-        </TableRow>
-      ),
-    } as const;
-
-    const { rerender } = render(
-      <Table>
-        <TableBody {...props} />
-      </Table>
-    );
-
-    const body = screen.getByTestId("body");
-    expect(body).toMatchSnapshot();
-
-    rerender(
-      <Table disableHover disableBorders>
-        <TableBody
-          {...props}
-          disableHover={false}
-          disableBorders={false}
-          style={{ color: "red" }}
-          className="custom-class-name"
-        />
-      </Table>
-    );
-    expect(body).toMatchSnapshot();
-
-    rerender(
-      <Table>
-        <TableBody {...props} disableHover disableBorders />
-      </Table>
-    );
-    expect(body).toMatchSnapshot();
-  });
-});

package/src/table/__tests__/TableCheckbox.tsx

@@ -1,89 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef, type FC, type ReactElement, type ReactNode } from "react";
-import { render, screen, userEvent } from "../../test-utils/index.js";
-
-import { useCheckboxGroup } from "../../form/useCheckboxGroup.js";
-import { Table } from "../Table.js";
-import { TableBody } from "../TableBody.js";
-import { TableCheckbox } from "../TableCheckbox.js";
-import { TableRow } from "../TableRow.js";
-
-const Wrapper: FC<{ children: ReactNode }> = ({ children }) => (
-  <Table>
-    <TableBody>
-      <TableRow>{children}</TableRow>
-    </TableBody>
-  </Table>
-);
-
-describe("TableCheckbox", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLTableCellElement>();
-    const { rerender } = render(<TableCheckbox ref={ref} />, {
-      wrapper: Wrapper,
-    });
-
-    const cell = screen.getByRole("cell", { name: "Select Row" });
-    expect(ref.current).toBeInstanceOf(HTMLTableCellElement);
-    expect(ref.current).toBe(cell);
-    expect(cell).toMatchSnapshot();
-
-    rerender(
-      <TableCheckbox
-        ref={ref}
-        style={{ pointerEvents: "none" }}
-        className="custom-class-name"
-      />
-    );
-    expect(cell).toMatchSnapshot();
-  });
-
-  it("should work within a clickable TableRow", async () => {
-    function Test(): ReactElement {
-      const { getCheckboxProps } = useCheckboxGroup({
-        name: "selected",
-      });
-
-      const checkboxProps = getCheckboxProps("row1");
-      const { checked, onChange } = checkboxProps;
-
-      return (
-        <Table>
-          <TableBody>
-            <TableRow clickable selected={checked} onClick={onChange}>
-              <TableCheckbox {...checkboxProps} />
-            </TableRow>
-          </TableBody>
-        </Table>
-      );
-    }
-
-    render(<Test />);
-
-    const row = screen.getByRole("row");
-    const checkbox = screen.getByRole("checkbox");
-    expect(checkbox).not.toBeChecked();
-    expect(row).not.toHaveClass("rmd-tr--selected");
-
-    await userEvent.click(checkbox);
-    expect(checkbox).toBeChecked();
-    expect(row).toHaveClass("rmd-tr--selected");
-
-    await userEvent.click(row);
-    expect(checkbox).not.toBeChecked();
-    expect(row).not.toHaveClass("rmd-tr--selected");
-  });
-
-  it("should handle the aria-label/aria-labelledby props correctly", () => {
-    const { rerender } = render(<TableCheckbox aria-label="Custom Label" />, {
-      wrapper: Wrapper,
-    });
-
-    const cell = screen.getByRole("cell", { name: "Custom Label" });
-    expect(cell).toMatchSnapshot();
-
-    rerender(<TableCheckbox aria-labelledby="another-id" />);
-    expect(cell).not.toHaveAttribute("aria-label");
-    expect(cell).toMatchSnapshot();
-  });
-});

package/src/table/__tests__/TableContainer.tsx

@@ -1,31 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { TableContainer } from "../TableContainer.js";
-
-describe("TableContainer", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLDivElement>();
-    const props = {
-      "data-testid": "container",
-      ref,
-    } as const;
-
-    const { rerender } = render(<TableContainer {...props} />);
-
-    const container = screen.getByTestId("container");
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current).toBe(container);
-    expect(container).toMatchSnapshot();
-
-    rerender(
-      <TableContainer
-        {...props}
-        style={{ backgroundColor: "red" }}
-        className="custom-class-name"
-      />
-    );
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/table/__tests__/TableRadio.tsx

@@ -1,112 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef, type FC, type ReactElement, type ReactNode } from "react";
-import { useRadioGroup } from "../../form/useRadioGroup.js";
-import { render, screen, userEvent, within } from "../../test-utils/index.js";
-import { Table } from "../Table.js";
-import { TableBody } from "../TableBody.js";
-import { TableRadio } from "../TableRadio.js";
-import { TableRow } from "../TableRow.js";
-
-const Wrapper: FC<{ children: ReactNode }> = ({ children }) => (
-  <Table>
-    <TableBody>
-      <TableRow>{children}</TableRow>
-    </TableBody>
-  </Table>
-);
-
-describe("TableRadio", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLTableCellElement>();
-    const { rerender } = render(<TableRadio ref={ref} />, {
-      wrapper: Wrapper,
-    });
-
-    const cell = screen.getByRole("cell", { name: "Select Row" });
-    expect(ref.current).toBeInstanceOf(HTMLTableCellElement);
-    expect(ref.current).toBe(cell);
-    expect(cell).toMatchSnapshot();
-
-    rerender(
-      <TableRadio
-        ref={ref}
-        style={{ pointerEvents: "none" }}
-        className="custom-class-name"
-      />
-    );
-    expect(cell).toMatchSnapshot();
-  });
-
-  it("should work within a clickable TableRow", async () => {
-    function Test(): ReactElement {
-      const { getRadioProps, setValue } = useRadioGroup({
-        name: "selected",
-      });
-
-      const radioProps1 = getRadioProps("row1");
-      const radioProps2 = getRadioProps("row2");
-
-      return (
-        <Table>
-          <TableBody>
-            <TableRow
-              clickable
-              selected={radioProps1.checked}
-              onClick={() => {
-                // only because of mismatched events
-                setValue("row1");
-              }}
-            >
-              <TableRadio {...radioProps1} />
-            </TableRow>
-            <TableRow
-              clickable
-              selected={radioProps2.checked}
-              onClick={() => {
-                // only because of mismatched events
-                setValue("row2");
-              }}
-            >
-              <TableRadio {...radioProps2} />
-            </TableRow>
-          </TableBody>
-        </Table>
-      );
-    }
-
-    render(<Test />);
-
-    const [row1, row2] = screen.getAllByRole("row");
-    const radio1 = within(row1).getByRole("radio");
-    const radio2 = within(row2).getByRole("radio");
-    expect(radio1).not.toBeChecked();
-    expect(row1).not.toHaveClass("rmd-tr--selected");
-    expect(radio2).not.toBeChecked();
-    expect(row2).not.toHaveClass("rmd-tr--selected");
-
-    await userEvent.click(radio1);
-    expect(radio1).toBeChecked();
-    expect(row1).toHaveClass("rmd-tr--selected");
-    expect(radio2).not.toBeChecked();
-    expect(row2).not.toHaveClass("rmd-tr--selected");
-
-    await userEvent.click(row2);
-    expect(radio1).not.toBeChecked();
-    expect(row1).not.toHaveClass("rmd-tr--selected");
-    expect(radio2).toBeChecked();
-    expect(row2).toHaveClass("rmd-tr--selected");
-  });
-
-  it("should handle the aria-label/aria-labelledby props correctly", () => {
-    const { rerender } = render(<TableRadio aria-label="Custom Label" />, {
-      wrapper: Wrapper,
-    });
-
-    const cell = screen.getByRole("cell", { name: "Custom Label" });
-    expect(cell).toMatchSnapshot();
-
-    rerender(<TableRadio aria-labelledby="another-id" />);
-    expect(cell).not.toHaveAttribute("aria-label");
-    expect(cell).toMatchSnapshot();
-  });
-});

package/src/table/__tests__/TableRow.tsx

@@ -1,63 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { Table } from "../Table.js";
-import { TableBody } from "../TableBody.js";
-import { TableCell } from "../TableCell.js";
-import { TableRow } from "../TableRow.js";
-
-describe("TableRow", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLTableRowElement>();
-    const props = {
-      "data-testid": "row",
-      ref,
-      children: <TableCell>Content</TableCell>,
-    } as const;
-
-    const { rerender } = render(
-      <Table>
-        <TableBody>
-          <TableRow {...props} />
-        </TableBody>
-      </Table>
-    );
-
-    const row = screen.getByTestId("row");
-    expect(ref.current).toBeInstanceOf(HTMLTableRowElement);
-    expect(ref.current).toBe(row);
-    expect(row).toMatchSnapshot();
-
-    rerender(
-      <Table>
-        <TableBody>
-          <TableRow
-            {...props}
-            style={{ cursor: "pointer" }}
-            className="custom-class-name"
-          />
-        </TableBody>
-      </Table>
-    );
-    expect(row).toMatchSnapshot();
-
-    rerender(
-      <Table disableHover disableBorders>
-        <TableBody>
-          <TableRow {...props} disableHover={false} disableBorders={false} />
-        </TableBody>
-      </Table>
-    );
-    expect(row).toMatchSnapshot();
-
-    rerender(
-      <Table>
-        <TableBody>
-          <TableRow {...props} disableHover disableBorders />
-        </TableBody>
-      </Table>
-    );
-    expect(row).toMatchSnapshot();
-  });
-});