@react-md/core 1.0.0-next.0 → 1.0.0-next.10

package/src/form/__tests__/__snapshots__/TextField.tsx.snap

@@ -0,0 +1,279 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextField should allow for addons before and after the input 1`] = `
+<div
+  class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--label rmd-text-field-container--outline-left rmd-text-field-container--outline-right"
+  data-testid="container"
+>
+  <span
+    class="rmd-text-field-addon rmd-text-field-addon--before rmd-text-field-addon--presentational"
+  >
+    <span
+      aria-hidden="true"
+      class="rmd-icon rmd-icon--font material-icons"
+      data-testid="favorite"
+    >
+      favorite
+    </span>
+  </span>
+  <input
+    class="rmd-text-field rmd-text-field--placeholder-hidden"
+    id="text-field-:ra:"
+    placeholder=" "
+    type="text"
+  />
+  <label
+    class="rmd-label rmd-label--floating"
+    for="text-field-:ra:"
+  >
+    Field
+  </label>
+  <span
+    class="rmd-text-field-addon rmd-text-field-addon--after rmd-text-field-addon--presentational"
+  >
+    <span
+      aria-hidden="true"
+      class="rmd-icon rmd-icon--font material-icons"
+      data-testid="close"
+    >
+      close
+    </span>
+  </span>
+</div>
+`;
+
+exports[`TextField should allow the active state to be controlled programmatically instead of with css only by using the active prop 1`] = `
+<div
+  class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable"
+  data-testid="container"
+>
+  <input
+    class="rmd-text-field"
+    id="text-field-:r4:"
+    placeholder=""
+    type="text"
+  />
+</div>
+`;
+
+exports[`TextField should allow the active state to be controlled programmatically instead of with css only by using the active prop 2`] = `
+<div
+  class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--outline-active"
+  data-testid="container"
+>
+  <input
+    class="rmd-text-field"
+    id="text-field-:r4:"
+    placeholder=""
+    type="text"
+  />
+</div>
+`;
+
+exports[`TextField should allow the active state to be controlled programmatically instead of with css only by using the active prop 3`] = `
+<div
+  class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--label"
+  data-testid="container"
+>
+  <input
+    class="rmd-text-field rmd-text-field--placeholder-hidden"
+    id="text-field-:r4:"
+    placeholder=" "
+    type="text"
+  />
+  <label
+    class="rmd-label rmd-label--floating"
+    for="text-field-:r4:"
+  >
+    Label
+  </label>
+</div>
+`;
+
+exports[`TextField should allow the active state to be controlled programmatically instead of with css only by using the active prop 4`] = `
+<div
+  class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--label rmd-text-field-container--outline-active"
+  data-testid="container"
+>
+  <input
+    class="rmd-text-field"
+    id="text-field-:r4:"
+    placeholder=" "
+    type="text"
+  />
+  <label
+    class="rmd-label rmd-label--active rmd-label--floating rmd-label--floating-active"
+    for="text-field-:r4:"
+  >
+    Label
+  </label>
+</div>
+`;
+
+exports[`TextField should allow the label to by styled by labelProps or the labelStyle/labelClassName 1`] = `
+<label
+  class="rmd-label rmd-label--floating label-props-class-name"
+  data-testid="label"
+  for="text-field-:rb:"
+  style="background: orange;"
+>
+  Label
+</label>
+`;
+
+exports[`TextField should allow the label to by styled by labelProps or the labelStyle/labelClassName 2`] = `
+<label
+  class="rmd-label rmd-label--floating label-class-name"
+  data-testid="label"
+  for="text-field-:rb:"
+  style="color: red;"
+>
+  Label
+</label>
+`;
+
+exports[`TextField should apply the correct styling, HTML attributes, and allow a ref 1`] = `
+<input
+  class="rmd-text-field rmd-text-field--placeholder-hidden"
+  id="text-field-:r0:"
+  placeholder=" "
+  type="text"
+/>
+`;
+
+exports[`TextField should apply the correct styling, HTML attributes, and allow a ref 2`] = `
+<input
+  class="rmd-text-field rmd-text-field--placeholder-hidden"
+  id="text-field-:r0:"
+  placeholder=" "
+  type="text"
+/>
+`;
+
+exports[`TextField should automatically merge the error and theme props when messageProps have been defined 1`] = `
+<div
+  class="rmd-form-message-container"
+  data-testid="message-container"
+>
+  <div
+    class="rmd-text-field-container rmd-text-field-container--error rmd-text-field-container--filled rmd-text-field-container--hoverable rmd-text-field-container--label rmd-text-field-container--underline rmd-text-field-container--underline-labelled rmd-text-field-container--underline-left rmd-error-color"
+  >
+    <input
+      class="rmd-text-field rmd-text-field--placeholder-hidden"
+      id="text-field-:r7:"
+      placeholder=" "
+      type="text"
+    />
+    <label
+      class="rmd-label rmd-label--error rmd-label--floating rmd-error-color"
+      for="text-field-:r7:"
+    >
+      Field
+    </label>
+  </div>
+  <div
+    aria-live="polite"
+    class="rmd-form-message rmd-form-message--filled rmd-error-color"
+    id="form-message-:r8:"
+  >
+    <p
+      class="rmd-form-message__message"
+      id="form-message-:r8:-message"
+    >
+      Help Text
+    </p>
+  </div>
+</div>
+`;
+
+exports[`TextField should render the FormMessageContainer when the messageProps have been defined 1`] = `
+<div
+  class="rmd-form-message-container"
+  data-testid="message-container"
+>
+  <div
+    class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--label"
+  >
+    <input
+      class="rmd-text-field rmd-text-field--placeholder-hidden"
+      id="text-field-:r5:"
+      placeholder=" "
+      type="text"
+    />
+    <label
+      class="rmd-label rmd-label--floating"
+      for="text-field-:r5:"
+    >
+      Field
+    </label>
+  </div>
+  <div
+    aria-live="polite"
+    class="rmd-form-message rmd-form-message--outline rmd-text-secondary-color"
+    id="form-message-:r6:"
+  >
+    <p
+      class="rmd-form-message__message"
+      id="form-message-:r6:-message"
+    >
+      Help text
+    </p>
+  </div>
+</div>
+`;
+
+exports[`TextField should support an error state 1`] = `
+<div
+  class="rmd-text-field-container rmd-text-field-container--error rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--label rmd-text-field-container--outline-error rmd-error-color"
+  data-testid="container"
+>
+  <input
+    class="rmd-text-field rmd-text-field--placeholder-hidden"
+    id="text-field-:r3:"
+    placeholder=" "
+    type="text"
+  />
+  <label
+    class="rmd-label rmd-label--error rmd-label--floating rmd-error-color"
+    for="text-field-:r3:"
+  >
+    Label
+  </label>
+</div>
+`;
+
+exports[`TextField should support the disabled state 1`] = `
+<div
+  class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--disabled rmd-text-field-container--label rmd-text-disabled-color"
+  data-testid="container"
+>
+  <input
+    class="rmd-text-field rmd-text-field--placeholder-hidden"
+    disabled=""
+    id="text-field-:r2:"
+    placeholder=" "
+    type="text"
+  />
+  <label
+    class="rmd-label rmd-label--disabled rmd-label--floating rmd-text-disabled-color"
+    for="text-field-:r2:"
+  >
+    Label
+  </label>
+</div>
+`;
+
+exports[`TextField should support the readOnly state 1`] = `
+<div
+  class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--disabled rmd-text-field-container--hoverable"
+  data-testid="container"
+>
+  <input
+    class="rmd-text-field"
+    id="text-field-:r1:"
+    placeholder=""
+    readonly=""
+    type="text"
+  />
+</div>
+`;

package/src/form/__tests__/__snapshots__/useCheckboxGroup.tsx.snap

@@ -374,7 +374,7 @@ exports[`useCheckboxGroup should support an indeterminate checkbox group 3`] = `
 exports[`useCheckboxGroup should support rendering a group of MenuItemCheckbox by enabling the \`menu\` option 1`] = `
 <div
   aria-labelledby="menubutton-:rd:"
-  class="rmd-menu rmd-menu--elevated rmd-scale-transition--enter rmd-scale-transition--y-enter rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active"
+  class="rmd-menu rmd-menu--elevated"
   id="menu-:rf:"
   role="menu"
   style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"

package/src/form/__tests__/__snapshots__/useRadioGroup.tsx.snap

@@ -597,7 +597,7 @@ exports[`useRadioGroup should support creating a required radio group 2`] = `
 exports[`useRadioGroup should support rendering within a menu 1`] = `
 <div
   aria-labelledby="menubutton-:rg:"
-  class="rmd-menu rmd-menu--elevated rmd-scale-transition--enter rmd-scale-transition--y-enter rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active"
+  class="rmd-menu rmd-menu--elevated"
   id="menu-:ri:"
   role="menu"
   style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"

package/src/form/__tests__/useCheckboxGroup.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { type ReactElement } from "react";
-import { fireEvent, render } from "../../test-utils/index.js";
+import { fireEvent, render, screen } from "../../test-utils/index.js";
 
 import { Button } from "../../button/Button.js";
 import { AppSizeProvider } from "../../media-queries/AppSizeProvider.js";
@@ -13,11 +13,11 @@ import { useCheckboxGroup } from "../useCheckboxGroup.js";
 describe("useCheckboxGroup", () => {
   it("should not behave as an indeterminate checkbox group and check any checkboxes by default", () => {
     function Test(): ReactElement {
-      const checkboGroup = useCheckboxGroup({ name: "example" });
-      const { getCheckboxProps } = checkboGroup;
+      const checkboxGroup = useCheckboxGroup({ name: "example" });
+      const { getCheckboxProps } = checkboxGroup;
 
       // @ts-expect-error
-      checkboGroup.getIndeterminateProps;
+      checkboxGroup.getIndeterminateProps;
 
       return (
         <Form>
@@ -28,11 +28,11 @@ describe("useCheckboxGroup", () => {
       );
     }
 
-    const { getByRole, container } = render(<Test />);
+    const { container } = render(<Test />);
 
-    const checkbox1 = getByRole("checkbox", { name: "First" });
-    const checkbox2 = getByRole("checkbox", { name: "Second" });
-    const checkbox3 = getByRole("checkbox", { name: "Third" });
+    const checkbox1 = screen.getByRole("checkbox", { name: "First" });
+    const checkbox2 = screen.getByRole("checkbox", { name: "Second" });
+    const checkbox3 = screen.getByRole("checkbox", { name: "Third" });
 
     expect(checkbox1).toHaveAttribute("name", "example");
     expect(checkbox2).toHaveAttribute("name", "example");
@@ -81,11 +81,11 @@ describe("useCheckboxGroup", () => {
         </Form>
       );
     }
-    const { getByRole } = render(<Test defaultCheckedValues={["b", "c"]} />);
+    render(<Test defaultCheckedValues={["b", "c"]} />);
 
-    const checkbox1 = getByRole("checkbox", { name: "First" });
-    const checkbox2 = getByRole("checkbox", { name: "Second" });
-    const checkbox3 = getByRole("checkbox", { name: "Third" });
+    const checkbox1 = screen.getByRole("checkbox", { name: "First" });
+    const checkbox2 = screen.getByRole("checkbox", { name: "Second" });
+    const checkbox3 = screen.getByRole("checkbox", { name: "Third" });
 
     expect(checkbox1).not.toBeChecked();
     expect(checkbox2).toBeChecked();
@@ -112,13 +112,11 @@ describe("useCheckboxGroup", () => {
         </Form>
       );
     }
-    const { getByRole } = render(
-      <Test defaultCheckedValues={() => ["a", "c"]} />
-    );
+    render(<Test defaultCheckedValues={() => ["a", "c"]} />);
 
-    const checkbox1 = getByRole("checkbox", { name: "First" });
-    const checkbox2 = getByRole("checkbox", { name: "Second" });
-    const checkbox3 = getByRole("checkbox", { name: "Third" });
+    const checkbox1 = screen.getByRole("checkbox", { name: "First" });
+    const checkbox2 = screen.getByRole("checkbox", { name: "Second" });
+    const checkbox3 = screen.getByRole("checkbox", { name: "Third" });
     expect(checkbox1).toBeChecked();
     expect(checkbox2).not.toBeChecked();
     expect(checkbox3).toBeChecked();
@@ -130,7 +128,7 @@ describe("useCheckboxGroup", () => {
     expect(checkbox2).toBeChecked();
     expect(checkbox3).not.toBeChecked();
 
-    fireEvent.click(getByRole("button", { name: "Reset" }));
+    fireEvent.click(screen.getByRole("button", { name: "Reset" }));
     expect(checkbox1).toBeChecked();
     expect(checkbox2).not.toBeChecked();
     expect(checkbox3).toBeChecked();
@@ -140,8 +138,8 @@ describe("useCheckboxGroup", () => {
     const values = ["a", "b", "c"] as const;
 
     function Test(): ReactElement {
-      const checkboGroup = useCheckboxGroup({ name: "example", values });
-      const { getCheckboxProps, getIndeterminateProps } = checkboGroup;
+      const checkboxGroup = useCheckboxGroup({ name: "example", values });
+      const { getCheckboxProps, getIndeterminateProps } = checkboxGroup;
 
       // some additional type-only tests since `values` was defined as a const
       // of valid choices
@@ -166,12 +164,14 @@ describe("useCheckboxGroup", () => {
       );
     }
 
-    const { getByRole, container } = render(<Test />);
+    const { container } = render(<Test />);
 
-    const indeterminate = getByRole("checkbox", { name: "Indeterminate" });
-    const checkbox1 = getByRole("checkbox", { name: "A" });
-    const checkbox2 = getByRole("checkbox", { name: "B" });
-    const checkbox3 = getByRole("checkbox", { name: "C" });
+    const indeterminate = screen.getByRole("checkbox", {
+      name: "Indeterminate",
+    });
+    const checkbox1 = screen.getByRole("checkbox", { name: "A" });
+    const checkbox2 = screen.getByRole("checkbox", { name: "B" });
+    const checkbox3 = screen.getByRole("checkbox", { name: "C" });
 
     expect(indeterminate).not.toHaveAttribute("aria-checked");
     expect(indeterminate).not.toBeChecked();
@@ -259,17 +259,17 @@ describe("useCheckboxGroup", () => {
       );
     }
 
-    const { getByRole } = render(<Test />, { wrapper: AppSizeProvider });
+    render(<Test />, { wrapper: AppSizeProvider });
 
-    fireEvent.click(getByRole("button", { name: "Toggle" }));
-    expect(getByRole("menu")).toMatchSnapshot();
+    fireEvent.click(screen.getByRole("button", { name: "Toggle" }));
+    expect(screen.getByRole("menu")).toMatchSnapshot();
 
-    const indeterminate = getByRole("menuitemcheckbox", {
+    const indeterminate = screen.getByRole("menuitemcheckbox", {
       name: "Indeterminate",
     });
-    const checkbox1 = getByRole("menuitemcheckbox", { name: "1" });
-    const checkbox2 = getByRole("menuitemcheckbox", { name: "3" });
-    const checkbox3 = getByRole("menuitemcheckbox", { name: "FIVE" });
+    const checkbox1 = screen.getByRole("menuitemcheckbox", { name: "1" });
+    const checkbox2 = screen.getByRole("menuitemcheckbox", { name: "3" });
+    const checkbox3 = screen.getByRole("menuitemcheckbox", { name: "FIVE" });
 
     expect(indeterminate).toHaveAttribute("aria-checked", "false");
     expect(checkbox1).not.toBeChecked();

package/src/form/__tests__/useFileUpload.tsx

@@ -1,6 +1,12 @@
 import { beforeEach, describe, expect, it, jest } from "@jest/globals";
 import { useEffect } from "react";
-import { act, fireEvent, render, userEvent } from "../../test-utils/index.js";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  userEvent,
+} from "../../test-utils/index.js";
 
 import { FileInput } from "../FileInput.js";
 import { useFileUpload, type FileUploadOptions } from "../useFileUpload.js";
@@ -141,20 +147,18 @@ function SingleFileTest(props: FileUploadOptions<HTMLElement>) {
 describe("useFileUpload", () => {
   it("should work correctly for a single file upload flow and reset", async () => {
     const file = new File(["pretend-bytes"], "README.txt");
-    const { getAllByRole, getByLabelText, getByRole, getByTestId } = render(
-      <SingleFileTest />
-    );
-    const input = getByLabelText("Upload") as HTMLInputElement;
-    const status = getByTestId("status");
-    const fileName = getByTestId("fileName");
-    const progress = getByTestId("progress");
-    const result = getByTestId("result");
+    render(<SingleFileTest />);
+    const input = screen.getByLabelText("Upload") as HTMLInputElement;
+    const status = screen.getByTestId("status");
+    const fileName = screen.getByTestId("fileName");
+    const progress = screen.getByTestId("progress");
+    const result = screen.getByTestId("result");
 
     expect(status).toHaveTextContent("");
     expect(fileName).toHaveTextContent("");
     expect(progress).toHaveTextContent("");
     expect(result).toHaveTextContent("");
-    expect(() => getAllByRole("listitem")).toThrow();
+    expect(() => screen.getAllByRole("listitem")).toThrow();
 
     await userEvent.upload(input, file);
 
@@ -163,14 +167,14 @@ describe("useFileUpload", () => {
     expect(fileName).toHaveTextContent("README.txt");
     expect(progress).toHaveTextContent("0");
     expect(result).toHaveTextContent("");
-    expect(() => getAllByRole("listitem")).toThrow();
+    expect(() => screen.getAllByRole("listitem")).toThrow();
 
     mockFileReader.triggerProgressEvent(100, 1000);
     expect(status).toHaveTextContent("uploading");
     expect(fileName).toHaveTextContent("README.txt");
     expect(progress).toHaveTextContent("10");
     expect(result).toHaveTextContent("");
-    expect(() => getAllByRole("listitem")).toThrow();
+    expect(() => screen.getAllByRole("listitem")).toThrow();
 
     const content = "pretend-bytes";
     mockFileReader.triggerLoadEvent(content);
@@ -178,14 +182,14 @@ describe("useFileUpload", () => {
     expect(fileName).toHaveTextContent("README.txt");
     expect(progress).toHaveTextContent("100");
     expect(result).toHaveTextContent(content);
-    expect(() => getAllByRole("listitem")).toThrow();
+    expect(() => screen.getAllByRole("listitem")).toThrow();
 
-    fireEvent.click(getByRole("button", { name: "Reset" }));
+    fireEvent.click(screen.getByRole("button", { name: "Reset" }));
     expect(status).toHaveTextContent("");
     expect(fileName).toHaveTextContent("");
     expect(progress).toHaveTextContent("");
     expect(result).toHaveTextContent("");
-    expect(() => getAllByRole("listitem")).toThrow();
+    expect(() => screen.getAllByRole("listitem")).toThrow();
   });
 
   it("should not cause infinite rerenders if the reset function is added to a useEffect's dependency array", () => {
@@ -208,55 +212,57 @@ describe("useFileUpload", () => {
 
   it("should abort any FileReaders when the reset function is called", async () => {
     const file = new File(["pretend-bytes"], "README.txt");
-    const { getByLabelText, getByRole } = render(<SingleFileTest />);
-    const input = getByLabelText("Upload") as HTMLInputElement;
+    render(<SingleFileTest />);
+    const input = screen.getByLabelText("Upload") as HTMLInputElement;
 
     await userEvent.upload(input, file);
     expect(abort).not.toHaveBeenCalled();
-    fireEvent.click(getByRole("button", { name: "Reset" }));
+    fireEvent.click(screen.getByRole("button", { name: "Reset" }));
     expect(abort).toHaveBeenCalledTimes(1);
   });
 
   it("should allow for some default validation", async () => {
-    const { getByLabelText, getByRole, getByTestId } = render(
-      <SingleFileTest maxFileSize={1024} minFileSize={612} />
-    );
-    const input = getByLabelText("Upload") as HTMLInputElement;
-    const status = getByTestId("status");
-    const fileName = getByTestId("fileName");
-    const reset = getByRole("button", { name: "Reset" });
-    const clearErrors = getByRole("button", { name: "Clear Errors" });
+    render(<SingleFileTest maxFileSize={1024} minFileSize={612} />);
+    const input = screen.getByLabelText("Upload") as HTMLInputElement;
+    const status = screen.getByTestId("status");
+    const fileName = screen.getByTestId("fileName");
+    const reset = screen.getByRole("button", { name: "Reset" });
+    const clearErrors = screen.getByRole("button", { name: "Clear Errors" });
 
     const file1 = createFile("file1.txt", 32);
     expect(file1.size).toBe(32);
     await userEvent.upload(input, file1);
     expect(() =>
-      getByRole("listitem", { name: "FileSizeError" })
+      screen.getByRole("listitem", { name: "FileSizeError" })
     ).not.toThrow();
     expect(status).toHaveTextContent("");
     expect(fileName).toHaveTextContent("");
 
     fireEvent.click(reset);
-    expect(() => getByRole("listitem", { name: "FileSizeError" })).toThrow();
+    expect(() =>
+      screen.getByRole("listitem", { name: "FileSizeError" })
+    ).toThrow();
 
     const file2 = createFile("file2.txt", 2000);
     expect(file2.size).toBe(2000);
     await userEvent.upload(input, file2);
 
     expect(() =>
-      getByRole("listitem", { name: "FileSizeError" })
+      screen.getByRole("listitem", { name: "FileSizeError" })
     ).not.toThrow();
     expect(status).toHaveTextContent("");
     expect(fileName).toHaveTextContent("");
 
     fireEvent.click(reset);
-    expect(() => getByRole("listitem", { name: "FileSizeError" })).toThrow();
+    expect(() =>
+      screen.getByRole("listitem", { name: "FileSizeError" })
+    ).toThrow();
 
     const file3 = createFile("file3.txt", 800);
     expect(file3.size).toBe(800);
     await userEvent.upload(input, file3);
 
-    expect(() => getByRole("listitem")).toThrow();
+    expect(() => screen.getByRole("listitem")).toThrow();
     expect(status).toHaveTextContent("uploading");
     expect(fileName).toHaveTextContent(file3.name);
 
@@ -270,12 +276,14 @@ describe("useFileUpload", () => {
     expect(status).toHaveTextContent("complete");
     expect(fileName).toHaveTextContent(file3.name);
     expect(() =>
-      getByRole("listitem", { name: "FileSizeError" })
+      screen.getByRole("listitem", { name: "FileSizeError" })
     ).not.toThrow();
 
     fireEvent.click(clearErrors);
     expect(status).toHaveTextContent("complete");
     expect(fileName).toHaveTextContent(file3.name);
-    expect(() => getByRole("listitem", { name: "FileSizeError" })).toThrow();
+    expect(() =>
+      screen.getByRole("listitem", { name: "FileSizeError" })
+    ).toThrow();
   });
 });