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

package/src/focus/__tests__/useFocusContainer.tsx

@@ -1,280 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { type ReactElement } from "react";
-import { Button } from "../../button/Button.js";
-import {
-  rmdRender,
-  screen,
-  userEvent,
-  waitFor,
-} from "../../test-utils/index.js";
-import { TRANSITION_CONFIG } from "../../transition/config.js";
-import { useScaleTransition } from "../../transition/useScaleTransition.js";
-import { useToggle } from "../../useToggle.js";
-import {
-  useFocusContainer,
-  type FocusContainerOptions,
-} from "../useFocusContainer.js";
-
-function Test(
-  props: Omit<FocusContainerOptions<HTMLDivElement>, "activate"> & {
-    autoFocus?: boolean;
-    disableChildren?: boolean;
-  }
-): ReactElement {
-  const { autoFocus, disableChildren, ...options } = props;
-  const { disableTransition } = options;
-  const { toggled, enable, disable } = useToggle(false);
-
-  const { eventHandlers, transitionOptions } = useFocusContainer({
-    ...options,
-    activate: toggled,
-  });
-  const { elementProps, rendered } = useScaleTransition({
-    transitionIn: toggled,
-    temporary: true,
-    ...transitionOptions,
-    appear: !disableTransition,
-    enter: !disableTransition,
-    exit: !disableTransition,
-  });
-
-  return (
-    <>
-      <Button onClick={enable}>Show</Button>
-      {rendered && (
-        <div
-          data-testid="container"
-          {...eventHandlers}
-          {...elementProps}
-          tabIndex={-1}
-        >
-          {!disableChildren && (
-            <>
-              <Button autoFocus={autoFocus} onClick={disable}>
-                Button 1
-              </Button>
-              <Button onClick={disable}>Button 2</Button>
-              <Button onClick={disable}>Button 3</Button>
-              <Button onClick={disable}>Button 4</Button>
-            </>
-          )}
-        </div>
-      )}
-    </>
-  );
-}
-
-describe("useFocusContainer", () => {
-  it("should correctly call the transition callbacks", async () => {
-    TRANSITION_CONFIG.disabled = false;
-
-    const user = userEvent.setup();
-    const onEntering = jest.fn();
-    const onEntered = jest.fn();
-    const onExiting = jest.fn();
-    const onExited = jest.fn();
-    rmdRender(
-      <Test
-        onEntering={onEntering}
-        onEntered={onEntered}
-        onExiting={onExiting}
-        onExited={onExited}
-      />
-    );
-
-    expect(onEntering).not.toHaveBeenCalled();
-    expect(onEntered).not.toHaveBeenCalled();
-    expect(onExiting).not.toHaveBeenCalled();
-    expect(onExited).not.toHaveBeenCalled();
-
-    await user.click(screen.getByRole("button", { name: "Show" }));
-    await waitFor(() => {
-      expect(onEntering).toHaveBeenCalled();
-    });
-    expect(onEntered).not.toHaveBeenCalled();
-    expect(onExiting).not.toHaveBeenCalled();
-    expect(onExited).not.toHaveBeenCalled();
-
-    await waitFor(() => {
-      expect(onEntered).toHaveBeenCalled();
-    });
-
-    await user.click(screen.getByRole("button", { name: "Button 1" }));
-    expect(onEntering).toHaveBeenCalled();
-    expect(onEntered).toHaveBeenCalled();
-    expect(onExiting).toHaveBeenCalled();
-    expect(onExited).not.toHaveBeenCalled();
-
-    await waitFor(() => {
-      expect(onExited).toHaveBeenCalled();
-    });
-  });
-
-  it("should capture the previous focus and refocus that element when entering and then exiting when transitions are enabled", async () => {
-    TRANSITION_CONFIG.disabled = false;
-
-    const user = userEvent.setup();
-    const onEntering = jest.fn();
-    const onEntered = jest.fn();
-    const onExiting = jest.fn();
-    const onExited = jest.fn();
-    rmdRender(
-      <Test
-        onEntering={onEntering}
-        onEntered={onEntered}
-        onExiting={onExiting}
-        onExited={onExited}
-      />
-    );
-    const showButton = screen.getByRole("button", { name: "Show" });
-
-    expect(document.activeElement).toBe(document.body);
-    await user.click(showButton);
-
-    const container = screen.getByTestId("container");
-    await waitFor(() => {
-      expect(onEntering).toHaveBeenCalled();
-    });
-    expect(onEntered).not.toHaveBeenCalled();
-    expect(document.activeElement).toBe(container);
-    expect(onExiting).not.toHaveBeenCalled();
-    await waitFor(() => {
-      expect(onEntered).toHaveBeenCalled();
-    });
-    expect(document.activeElement).toBe(container);
-
-    await user.click(screen.getByRole("button", { name: "Button 1" }));
-    await waitFor(() => {
-      expect(onExiting).toHaveBeenCalled();
-    });
-    // have to await because of the raf. this might cause a timing issue at some point with the onExited...
-    await waitFor(() => {
-      expect(document.activeElement).toBe(showButton);
-    });
-    expect(onExited).not.toHaveBeenCalled();
-
-    await waitFor(() => {
-      expect(onExited).toHaveBeenCalled();
-    });
-    expect(document.activeElement).toBe(showButton);
-  });
-
-  it("should still move focus when the disableTransition option is true", async () => {
-    TRANSITION_CONFIG.disabled = false;
-
-    const user = userEvent.setup();
-    const onEntering = jest.fn();
-    const onEntered = jest.fn();
-    const onExiting = jest.fn();
-    const onExited = jest.fn();
-    rmdRender(
-      <Test
-        onEntering={onEntering}
-        onEntered={onEntered}
-        onExiting={onExiting}
-        onExited={onExited}
-        disableTransition
-      />
-    );
-    const showButton = screen.getByRole("button", { name: "Show" });
-
-    expect(document.activeElement).toBe(document.body);
-    await user.click(showButton);
-
-    const container = screen.getByTestId("container");
-    expect(onEntering).not.toHaveBeenCalled();
-    expect(onEntered).toHaveBeenCalled();
-    expect(document.activeElement).toBe(container);
-
-    await user.click(screen.getByRole("button", { name: "Button 1" }));
-    expect(onExiting).not.toHaveBeenCalled();
-    expect(onExited).toHaveBeenCalled();
-    await waitFor(() => {
-      expect(document.activeElement).toBe(showButton);
-    });
-  });
-
-  it("should still move focus when the TRANSITION_CONFIG.disabled is true", async () => {
-    const user = userEvent.setup();
-    const onEntering = jest.fn();
-    const onEntered = jest.fn();
-    const onExiting = jest.fn();
-    const onExited = jest.fn();
-    rmdRender(
-      <Test
-        onEntering={onEntering}
-        onEntered={onEntered}
-        onExiting={onExiting}
-        onExited={onExited}
-      />
-    );
-    const showButton = screen.getByRole("button", { name: "Show" });
-
-    expect(document.activeElement).toBe(document.body);
-    await user.click(showButton);
-
-    const container = screen.getByTestId("container");
-    expect(onEntering).not.toHaveBeenCalled();
-    expect(onEntered).toHaveBeenCalled();
-    expect(document.activeElement).toBe(container);
-
-    await user.click(screen.getByRole("button", { name: "Button 1" }));
-    expect(onExiting).not.toHaveBeenCalled();
-    expect(onExited).toHaveBeenCalled();
-    await waitFor(() => {
-      expect(document.activeElement).toBe(showButton);
-    });
-  });
-
-  it("should not move focus to the container element if one of the children has autoFocus enabled or has been programmatically focused", async () => {
-    const user = userEvent.setup();
-    rmdRender(<Test autoFocus />);
-
-    await user.click(screen.getByRole("button", { name: "Show" }));
-    expect(document.activeElement).toBe(
-      screen.getByRole("button", { name: "Button 1" })
-    );
-  });
-
-  it("should prevent tab focus from moving outside of the container element", async () => {
-    const user = userEvent.setup();
-    rmdRender(<Test />);
-
-    await user.click(screen.getByRole("button", { name: "Show" }));
-
-    const button1 = screen.getByRole("button", { name: "Button 1" });
-    const button2 = screen.getByRole("button", { name: "Button 2" });
-    const button3 = screen.getByRole("button", { name: "Button 3" });
-    const button4 = screen.getByRole("button", { name: "Button 4" });
-
-    await user.tab();
-    expect(document.activeElement).toBe(button1);
-
-    await user.tab({ shift: true });
-    expect(document.activeElement).toBe(button4);
-
-    await user.tab();
-    expect(document.activeElement).toBe(button1);
-
-    await user.tab();
-    expect(document.activeElement).toBe(button2);
-
-    await user.tab();
-    expect(document.activeElement).toBe(button3);
-  });
-
-  it("should just stop tab focus if there are no focusable elements", async () => {
-    const user = userEvent.setup();
-    rmdRender(<Test disableChildren />);
-
-    await user.click(screen.getByRole("button", { name: "Show" }));
-    const container = screen.getByTestId("container");
-    expect(document.activeElement).toBe(container);
-
-    await user.tab();
-    expect(document.activeElement).toBe(container);
-
-    await user.tab({ shift: true });
-    expect(document.activeElement).toBe(container);
-  });
-});

package/src/form/__tests__/Checkbox.tsx

@@ -1,42 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { Checkbox } from "../Checkbox.js";
-
-describe("Checkbox", () => {
-  it("should apply the correct styles, HTMLAttributes, and allow a ref", () => {
-    const ref = createRef<HTMLInputElement>();
-    const props = {
-      ref,
-      label: "Checkbox",
-    } as const;
-
-    const { container, rerender } = render(<Checkbox {...props} />);
-
-    const checkbox = screen.getByRole("checkbox", { name: "Checkbox" });
-    expect(ref.current).toBeInstanceOf(HTMLInputElement);
-    expect(ref.current).toBe(checkbox);
-    expect(container).toMatchSnapshot();
-
-    rerender(
-      <Checkbox
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(container).toMatchSnapshot();
-
-    rerender(<Checkbox {...props} id="custom-id" />);
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should disable autoComplete to fix a firefox bug", () => {
-    // https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing
-    render(<Checkbox />);
-
-    const checkbox = screen.getByRole("checkbox");
-    expect(checkbox).toHaveAttribute("autocomplete", "off");
-  });
-});

package/src/form/__tests__/Fieldset.tsx

@@ -1,44 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { fieldset, Fieldset } from "../Fieldset.js";
-import { Legend } from "../Legend.js";
-
-describe("Fieldset", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLFieldSetElement>();
-    const props = {
-      "data-testid": "fieldset",
-      ref,
-      children: <Legend>I am Legend</Legend>,
-    } as const;
-    const { rerender } = render(<Fieldset {...props} />);
-
-    const fieldset = screen.getByTestId("fieldset");
-    expect(ref.current).toBeInstanceOf(HTMLFieldSetElement);
-    expect(ref.current).toBe(fieldset);
-    expect(fieldset).toMatchSnapshot();
-
-    rerender(
-      <Fieldset
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(fieldset).toMatchSnapshot();
-
-    rerender(<Fieldset {...props} browserStyles />);
-    expect(fieldset).toMatchSnapshot();
-
-    rerender(<Fieldset {...props} fullWidth />);
-    expect(fieldset).toMatchSnapshot();
-  });
-
-  describe("styling utility class", () => {
-    it("should be callable without any arguments", () => {
-      expect(fieldset()).toMatchSnapshot();
-    });
-  });
-});

package/src/form/__tests__/FileInput.tsx

@@ -1,120 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import {
-  type ButtonTheme,
-  type ButtonThemeType,
-} from "../../button/buttonStyles.js";
-import { rmdRender, screen } from "../../test-utils/index.js";
-import { FileInput } from "../FileInput.js";
-
-const PROPS = {
-  labelProps: {
-    "data-testid": "label",
-  },
-} as const;
-
-describe("FileInput", () => {
-  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
-    const ref = createRef<HTMLInputElement>();
-    const props = {
-      ...PROPS,
-      ref,
-    } as const;
-
-    const { rerender } = rmdRender(<FileInput {...props} />);
-
-    const label = screen.getByTestId("label");
-    const input = screen.getByLabelText(/Upload/);
-    expect(ref.current).toBeInstanceOf(HTMLInputElement);
-    expect(ref.current).toBe(input);
-    expect(label).toMatchSnapshot();
-
-    rerender(
-      <FileInput
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(label).toMatchSnapshot();
-  });
-
-  it("should support all the  button themes", () => {
-    const themes: readonly ButtonTheme[] = [
-      "clear",
-      "primary",
-      "secondary",
-      "warning",
-      "error",
-      "disabled",
-    ];
-    const themeTypes: readonly ButtonThemeType[] = [
-      "flat",
-      "outline",
-      "contained",
-    ];
-
-    const { rerender } = rmdRender(<FileInput {...PROPS} />);
-    const label = screen.getByTestId("label");
-
-    themes.forEach((theme) => {
-      themeTypes.forEach((themeType) => {
-        rerender(<FileInput theme={theme} themeType={themeType} />);
-
-        expect(label).toMatchSnapshot();
-      });
-    });
-  });
-
-  it("should render as an icon button unless children are provided which will then render the icon and the text", () => {
-    const { rerender } = rmdRender(<FileInput {...PROPS} />);
-    const label = screen.getByTestId("label");
-    expect(label).toMatchSnapshot();
-
-    rerender(<FileInput buttonType="icon-square" />);
-    expect(label).toMatchSnapshot();
-
-    rerender(<FileInput>Upload</FileInput>);
-    expect(label).toMatchSnapshot();
-
-    rerender(<FileInput iconAfter>Upload</FileInput>);
-    expect(label).toMatchSnapshot();
-
-    rerender(<FileInput icon={null}>Upload</FileInput>);
-    expect(label).toMatchSnapshot();
-  });
-
-  it("should update the default SrOnly text to be phoneOnly when the responsive prop is enabled", () => {
-    rmdRender(<FileInput {...PROPS} responsive />);
-    const label = screen.getByTestId("label");
-    expect(label).toMatchSnapshot();
-  });
-
-  it("should support configuring the label through srOnlyLabel, aria-label, or aria-labelledby", () => {
-    const { rerender } = rmdRender(<FileInput {...PROPS} />);
-
-    const label = screen.getByTestId("label");
-    const input = label.querySelector("input");
-    if (!input) {
-      throw new Error("Unable to find HTMLInputElement");
-    }
-    expect(label).toHaveTextContent("Upload");
-
-    rerender(<FileInput {...PROPS} srOnlyLabel="My Label" />);
-    expect(label).toHaveTextContent("My Label");
-
-    rerender(<FileInput {...PROPS} aria-label="My Label" />);
-    expect(label).not.toHaveTextContent("My Label");
-    expect(label).not.toHaveTextContent("Upload");
-    expect(label).not.toHaveAttribute("aria-label");
-    expect(input).toHaveAttribute("aria-label", "My Label");
-
-    rerender(<FileInput {...PROPS} aria-labelledby="id-of-some-element" />);
-    expect(label).not.toHaveTextContent("My Label");
-    expect(label).not.toHaveTextContent("Upload");
-    expect(label).not.toHaveAttribute("aria-label");
-    expect(label).not.toHaveAttribute("aria-labelledby");
-    expect(input).not.toHaveAttribute("aria-label");
-    expect(input).toHaveAttribute("aria-labelledby", "id-of-some-element");
-  });
-});

package/src/form/__tests__/Label.tsx

@@ -1,69 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { Label } from "../Label.js";
-
-describe("Label", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLLabelElement>();
-    const props = {
-      "data-testid": "label",
-      ref,
-      children: "Label content",
-    } as const;
-    const { rerender } = render(<Label {...props} />);
-
-    const label = screen.getByTestId("label");
-    expect(ref.current).toBeInstanceOf(HTMLLabelElement);
-    expect(ref.current).toBe(label);
-    expect(label).toMatchSnapshot();
-
-    rerender(
-      <Label
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(label).toMatchSnapshot();
-
-    rerender(<Label {...props} floating />);
-    expect(label).toMatchSnapshot();
-
-    rerender(<Label {...props} floating active />);
-    expect(label).toMatchSnapshot();
-
-    rerender(<Label {...props} floating active inactive />);
-    expect(label).toMatchSnapshot();
-
-    rerender(
-      <Label {...props} floating active inactive floatingActive={false} />
-    );
-    expect(label).toMatchSnapshot();
-
-    rerender(<Label {...props} dense />);
-    expect(label).toMatchSnapshot();
-
-    rerender(<Label {...props} error />);
-    expect(label).toMatchSnapshot();
-
-    rerender(<Label {...props} error active />);
-    expect(label).toMatchSnapshot();
-
-    rerender(<Label {...props} error active floating />);
-    expect(label).toMatchSnapshot();
-
-    rerender(<Label {...props} gap />);
-    expect(label).toMatchSnapshot();
-
-    rerender(<Label {...props} stacked />);
-    expect(label).toMatchSnapshot();
-
-    rerender(<Label {...props} stacked reversed />);
-    expect(label).toMatchSnapshot();
-
-    rerender(<Label {...props} reversed />);
-    expect(label).toMatchSnapshot();
-  });
-});

package/src/form/__tests__/Legend.tsx

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

package/src/form/__tests__/MenuItemCheckbox.tsx

@@ -1,53 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { createRef } from "react";
-import { rmdRender, screen } from "../../test-utils/index.js";
-import { type MenuItemCheckboxProps } from "../MenuItemInputToggle.js";
-import { MenuItemCheckbox } from "../MenuItemCheckbox.js";
-
-describe("MenuItemCheckbox", () => {
-  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
-    const ref = createRef<HTMLLIElement>();
-    const props = {
-      ref,
-      checked: false,
-      onCheckedChange: jest.fn(),
-      children: "Checkbox",
-    } as const;
-
-    const { rerender } = rmdRender(<MenuItemCheckbox {...props} />);
-
-    const element = screen.getByRole("menuitemcheckbox", { name: "Checkbox" });
-    expect(ref.current).toBeInstanceOf(HTMLLIElement);
-    expect(ref.current).toBe(element);
-    expect(element).toMatchSnapshot();
-
-    rerender(
-      <MenuItemCheckbox
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(element).toMatchSnapshot();
-  });
-
-  it("should allow for a custom unchecked and checked icon", async () => {
-    const props: MenuItemCheckboxProps = {
-      icon: null,
-      checkedIcon: <span data-testid="checked" />,
-      iconAfter: true,
-      children: "Checkbox",
-      checked: false,
-      onCheckedChange: jest.fn(),
-    };
-
-    const { rerender } = rmdRender(<MenuItemCheckbox {...props} />);
-
-    const element = screen.getByRole("menuitemcheckbox", { name: "Checkbox" });
-    expect(element).toMatchSnapshot();
-    expect(element.querySelector(".rmd-icon")).toBeNull();
-
-    rerender(<MenuItemCheckbox {...props} checked />);
-    expect(element).toMatchSnapshot();
-  });
-});

package/src/form/__tests__/MenuItemRadio.tsx

@@ -1,53 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { createRef } from "react";
-import { rmdRender, screen } from "../../test-utils/index.js";
-import { type MenuItemRadioProps } from "../MenuItemInputToggle.js";
-import { MenuItemRadio } from "../MenuItemRadio.js";
-
-describe("MenuItemRadio", () => {
-  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
-    const ref = createRef<HTMLLIElement>();
-    const props = {
-      ref,
-      checked: false,
-      onCheckedChange: jest.fn(),
-      children: "Radio",
-    } as const;
-
-    const { rerender } = rmdRender(<MenuItemRadio {...props} />);
-
-    const element = screen.getByRole("menuitemradio", { name: "Radio" });
-    expect(ref.current).toBeInstanceOf(HTMLLIElement);
-    expect(ref.current).toBe(element);
-    expect(element).toMatchSnapshot();
-
-    rerender(
-      <MenuItemRadio
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(element).toMatchSnapshot();
-  });
-
-  it("should allow for a custom unchecked and checked icon", async () => {
-    const props: MenuItemRadioProps = {
-      icon: null,
-      checkedIcon: <span data-testid="checked" />,
-      iconAfter: true,
-      children: "Radio",
-      checked: false,
-      onCheckedChange: jest.fn(),
-    };
-
-    const { rerender } = rmdRender(<MenuItemRadio {...props} />);
-
-    const element = screen.getByRole("menuitemradio", { name: "Radio" });
-    expect(element).toMatchSnapshot();
-    expect(element.querySelector(".rmd-icon")).toBeNull();
-
-    rerender(<MenuItemRadio {...props} checked />);
-    expect(element).toMatchSnapshot();
-  });
-});